اذهب إلى المحتوى

تصميم أيقونة غيمة رائعة باستخدام فوتوشوب


Huda Almashta

سنقوم بتصميم أيقونة غيمة زاهية وجذّابة عن طريق اتباع هذا الدرس المفصّل خطوة بخطوة. سنستخدم الكثير من التدرجات وتأثيرات الإضاءة لعمل أيقونة غيمة رائعة ومثالية لاستخدامها عند تصميم موقع جديد أو تطبيق للنقّال.

001.thumb.jpg.3d9d425f3cee2330a10697fc2e

ولكي نعطي للأيقونة مظهرًا ثلاثيّ الأبعاد سنستخدم العديد من الألوان. يتيح لنا مزيج الألوان من البنفسجي والأزرق في إبراز القاعدة الملّونة، وستساعد الإضاءات في ابراز الأيقونة ورفعها عن مستوى الشاشة.

002.thumb.jpg.f8fd255135f03f8736b24eb754

افتح مستند فوتوشوب جديد وابدأ برسم دائرة في طبقة (layer) جديدة باستخدام Elliptical Marquee Tool واملأها باللون الأسود. اضغط على المفتاح Shift، ومع الاستمرار بالضغط قم بتحريك التحديد إلى احدى الجوانب لعمل نسخة من هذه الدائرة واملأها بالأسود أيضًا. بعد ذلك قم بملأ المساحة الوسطية باستخدام Rectangular Marquee Tool، وتأكد من محاذاة الحافة السفلية بصورة جيدة.

003.thumb.jpg.5d2f8b093ec9aad8c59ac3a89d

ارسم دائرتين احداهما أكبر قليلًا والأخرى أصغر قليلًا بحث تتداخل مع الدائرتين اليمنى واليسرى الأصليتين باستخدام Elliptical Marquee Tool من جديد.

004.thumb.jpg.b8d665a5ab3459ff766c8cc01b

إذا كانت هنالك أي فراغات في الوسط فقم بملئها ليصبح الشكل كالغيمة.

005.thumb.jpg.52681002301ddeced509f39f30

انقر بشكل مزدوج على طبقة الغيمة لتفتح لك نافذة أنماط الطبقة (layer styles window)، ثم قم بإضافة Gradient Overlay. قم بإضافة لون ثالث في الوسط وغيّر الألوان إلى 300a85 ،#2555dd# وc8ecff# عمل أيقونة غيمة رائعة باستخدام فوتوشوب. عندما تقوم باختيار الألوان تجنّب اختيار الدرجة (tone) من نفس الصبغة (hue)؛ وإنما قم بالاختيار من عجلة الألوان بحيث تكون الاختلافات في الألوان أكثر حدة، وبالتالي تصبح الدرجات أكثر دفئًا أو أكثر برودة.

006.thumb.jpg.1e95607eb88204ab47ef254a02

قم بإضافة تأثير Inner Glow للغيمة لإعطائها مظهر ثلاثي الأبعاد. غير اللون إلى الأبيض، الوضع (mode) إلى Soft Light، وقيمة Opacity 100%، ثم تلاعب بالحجم الخاص بالتأثير-حسب ما تراه مناسبًا-.

007.thumb.jpg.cbc20fe58d4f2f0cb7b22f6b1a

يمكن استخدام تأثير Inner Shadow لإبراز الجهة العليا بشكل رائع. غيّر اللون الافتراضي من الأسود إلى الأبيض ثم غّير الوضع إلى Overlay لكي تسمح للألوان بالتداخل. قم بتعديل إعدادات Distance ،Choke وSize بحيث يعطي مظهر متوازن ما بين خشن/لامع وأملس/ناعم.

008.thumb.jpg.b894252da39ed79bd5c4335250

اضغط موافق لتطبيق تأثيرات الطبقة ثم اضغط Ctrl + طبقة الغيمة لعمل استعادة للتحديد ثم اذهب إلى:

 Select > Modify > Expand

وضع القيمة 5px.

009.thumb.jpg.046da83cabf328e7c0ce85529e

املأ التحديد الجديد باللون الأسود وبطبقة جديدة تحت طبقة الغيمة الرئيسية لعمل إطار خارجي.

010.thumb.jpg.ad4b4ce830dd8956a69397e6c1

افتح نافذة أنماط الطبقة لطبقة الإطار الخارجي وقم بإضافة Gradient Overlay. اختر نفس الالوان البنفسجية والزرقاء لكن بتغيير كافٍ في الدرجة (tone) لكي تتباين مع طبقة الغيمة. استخدمتُ هنا الألوان 4c54e5 ،#c0e8ff# و571a9b#.

011.thumb.jpg.0b054a2211e890abdb5fc594b2

اعمل استعادة تحديد (Load Selection) لطبقة الغيمة مرة أخرى ثم اضغط بزر الفأرة الأيمن واختر حدّ (Stroke) في طبقة جديدة.

012.thumb.jpg.077fa638110d0b1664b7feaa69

غيّر عرض الحد إلى 2px واللون إلى الأبيض ثم تأكد من إن الموقع في الداخل (Inside).

013.thumb.jpg.9cd257ad411911510fc749cdcc

امسح الجزء السفلي من الإطار باستخدام الممحاة (Eraser) وبفرشة ناعمة كبيرة مكوّنًا بذلك تلاشي متدرّج من الأعلى إلى الأسفل. هذه اللمسة البسيطة تضيف إضاءة دقيقة إلى الأيقونة.

014.thumb.jpg.dd386c79b6c92bee401bf4ed52

ارسم بقعة سوداء أسفل الغيمة في طبقة جديدة، ثم عن طريق التحويل (transform) قم بتسويتها وتسطيحها بحيث يصبح شكلها أقرب للظل.

015.thumb.jpg.7e1af8de06c23d10062eea5c3c

اقسم الظل إلى نصفين باستخدام أدوات التحديد (Marquee وSelection). اضغط على المفتاح Shift واستمرّ بالضغط لتتأكد من إن النصف الثاني يبقى في نفس المستوى.

016.thumb.jpg.5cee7c4048290d94de635aef5d

استخدم Single Column Marquee Tool لعمل تحديد، ثم اضغط Ctrl+T وقم بسحب التحديد ليملأ المنطقة الوسطية للظل بقطعة مستقيمة.

017.thumb.jpg.2ab029844b403cb8e8f45eeec0

حرّك الظل حتى يصبح تحت الغيمة على الأرضية، ثم قم بإضافة Gradient Overlay من نافذة أنماط الطبقة. استخدم للظل درجات أغمق من الألوان الأزرق والبنفسجي. الظل في الواقع ليس أسودًا وإنما هو مكّون من مزيج من الألوان والانعكاسات التي حوله.

018.thumb.jpg.b571ff48a38594fb0519b118bc

انتهينا من صنع أيقونة غيمة رائعة الآن. التدرجات والإضاءات ساعدت حقّا في عمل مظهر ثلاثي الأبعاد، بينما التنوع في الألوان يعطي بدّقة إحساس أكثر واقعية للظل.

ترجمة -وبتصرّف- للدّرس How to create a vibrant cloud icon in Photoshop لصاحبه: Iggy.


تفاعل الأعضاء

أفضل التعليقات

السلام عليكم، 

تشراتي لمُتمجمي الدرس، تم تطبيقه وتصميم الأيقونة بنجاح :) 

تفضلو مُعاينهتها : http://s28.postimg.org/4lk7evi5p/ICOn_transparant.png

بإنتظار المَزيد من الدروس التعليمية الرائعة كهته :) 

 

تحياتي..

رابط هذا التعليق
شارك على الشبكات الإجتماعية



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...