تحتاج للأيقونات عند تصميمك موقع ما . وبعد تقنية web 2 أصبح استخدام الملصقات و3D شائع للغاية. وفى درسنا اليوم سأوضح لكم كيف تصمم تأثير 3D بمنتهى السهولة يمكنك استخدامه إما على زر أو أيقونة أو حتى على بعض العناصر التى تحتاج إلى عمق فى التصميم.
الخطوة الأولى :
قم بإنشاء مستند جديد واختر أداة ( Ellipse Tool ( U لا يهم اللون الذى ستختاره الآن لأننا سوف نغيره لاحقا بإستخدام استايلات الطبقة Layer Styles .
صمم أيقونات ويب 2 بالفوتوشوب
الخطوة الثانية :
انقر مرتين على طبقة الشكل البيضاوى لفتح نافذة Layer Styles . ثم اختر Gradient Overlay ثم استخدم ظل أزرق وخفيف
من خيار Gradient كما هو موضح بالأسفل. فيما يخص style اختر Radial . ثم أضف الآن Bevel و Emboss كما هو موضح بالصورة بالأسفل.
ملحوظة : عليك برفع مؤشر radial gradient قليلا لأعلى الدائرة .
صمم أيقونات ويب 2 بالفوتوشوب
الخطوة الثالثة :
قم بنسخ طبقة الدائرة وأعد ضبط حجمها لتكون أصغر قليلا.
صمم أيقونات ويب 2 بالفوتوشوب
الخطوة الرابعة :
قم بالنقر مرتين على الطبقة التى قمنا بإنشائها حديثا لفتح نافذة Layer Styles . الغى اختيار كل التأثيرات السابقة من ( Bevel و Emboss و Gradient Overlay ). والآن اختر Stroke وفيما يخص خيار Fill Type اختر Gradient . وبالنسبة للألوان اختر الأبيض لكلا نهايتى التدرج وغير معدل opacity حتى 0 % للبداية و100 % بالنسبة للنهاية.
صمم أيقونات ويب 2 بالفوتوشوب
الخطوة الخامسة :
اختر( Horizontal Type Tool ( T وقم بإنشاء طبقة للنص. وتأكد من أن تكون هذه الطبقة فى الأعلى. والآن افتح صندوق Layer Styles وعدل Color Overlay إلى اللون الأبيض ، واختر الظل الداخلى Inner Shadow واستخدم الاعدادات الموضحة بالأسفل …
صمم أيقونات ويب 2 بالفوتوشوب
الخطوة السادسة :
قم بجمع الطبقات الثلاث هذه فى مجموعة واحدة وسمها Blue Circle .
الخطوة السابعة :
اختر أداة( Polygon Tool ( U وغير قليلا فى بعض الاعدادات كما هو موضح بالصورة بالأسفل لخلق ملصق على هيئة نجمة . قم بنسخ هذه الطبقة وأعد ضبط حجمها كما فعلنا مسبقا بالخطوة الثالثة .
قم بنسخ اعدادات layer styles الخاصة بالأيقونة السابقة والصقها هنا بدلا من عملها مرة أخرى. ولعمل هذا اتبع الآتى:
قف على الطبقة المراد نسخ اعدات الاستايل بها وانقر كليك يمين ثم اختر Copy Layer Style .
ثم اذهب إلى الطبقة المراج الصاق هذه بها وانقر أيضا كليك يمين ليفتح لك خيار Paste Layer Styles .
ولكن الشىء الوحيد الذى عليك تغيير ه هو لون التدرج من Gradient Overlay .
صمم أيقونات ويب 2 بالفوتوشوب
فى النهاية …
هذه هى واحدة من أسهل الطرق للحصول على أيقونات 3D . واليكم النتيجة .
صمم أيقونات ويب 2 بالفوتوشوب
سمير الحسينى
شكراً على هذا الموضوع القيم .. نحن بحاجة فعلاً لدروس وإلماحات كثيرة
سهر
الله يعطيك الف عافية
بالفعل الأيقونات الثلاثية الأبعاد بتزيد من رونق تصميم الموقع وشكله .
السيد العاصى
برنامج الفوتوشوب يعطيك خيارات متنوعة من عدد التأثيرات والفلاتر التى يستخدمها لتنعكس بدورها على تصميماتك. والأيقونات هى واجهة الموقع ولها أيضا تأثيرها فى وقع الزائر ولذا أشكرك سيدى على طرحك للموضوع وشرح الخطوات.