Huda Almashta

قبل البدء قم بتحميل ملف الحشو (pattern) لكي نقوم باستخدامه لاحقًا. ستقوم عند إتّباعك لهذا الدرس بتصميم أيقونة عدّاد بكامل تفاصيله وذلك باستخدام العديد من أنماط الطبقة لعمل التّدرجات والظلال للحصول على شكل مفصّل، قريب من الواقع وبحجم كبير. ثم ستقوم بالتعديل على الحجم للحصول على أحجام نموذجية متنوّعة. إن ما يميّز هذه الأيقونة هو شريط عدّاد أملس وملوّن موضوع داخل إطار مشطوف من الكروم، بالإضافة إلى التراكيب والتدرجات التي تضفي عليها مظهرًا دقيقًا. سيكون حجم 256px * 256px هو الأكبر والأكثر تفصيلًا، وبعد ذلك سنقوم بتحجيمها تدريجيّا إلى 128px ،64px ،48px، و32px. وكل حجم من هذه الأحجام سيصبح أقل تفصيلًا لكن سنقوم بتعديلها بشكل طفيف ليتم استخدامها بهذا الحجم الصغير. سنبدأ بالأيقونة الكبيرة. ارسم دائرة في طبقة جديدة بقطر 256px باستخدام Elliptical Marquee Tool واملأها بأيّ لونٍ كان. انقر بشكل مزدوج على طبقة (layer) الدائرة لتفتح نافذة أنماط الطبقة (layer styles window). قم بإضافة Gradient Overlay متدرّجًا من الرمادي الغامق إلى الفاتح ليعطي تأثير معدني لامع. قم بإضافة حدّ (stroke) بعرض 1px بلون رمادي متوسط ما بين درجتي اللونين المستخدمين في التدرّج السابق. إنّ عمل الأيقونة باستخدام أنماط الطبقة سيسهّل إعادة تصميم الأيقونات الأصغر حجمًا حيث إن كل تأثير يمكن إعادة تحميله والتعديل عليه بسرعة بواسطة نافذة خيارات أنماط الطبقة. اضغط على طبقة الدائرة+Ctrl لعمل تحديد للدائرة ثم اضغط بزر الفأرة الأيمن واختر Transform Selection، بعدها قم بتقليص التحديد بينما تضغط على المفتاحين Shift+Alt. املأ التحديد الجديد باللون الأسود وفي طبقة جديدة. افتح نافذة أنماط الطبقة للدائرة الجديدة وقم بإضافة Gradient Overlay بلونين؛ أسود ورمادي غامق لكي تشكّل قاعدة لوحة العدّاد. قم بإضافة تأثيرّي Inner Glow وStroke لنفس الطبقة مستخدمًا درجات من الرمادي الفاتح لإعطائها شكل معدن الكروم. اعمل استعادة للتحديد (load selection) بالضغط على طبقة الدائرة ومفتاح Ctrl في نفس الوقت، ثم أضف طبقة جديدة واملأها بالحشو(pattern) الموجود في الرابط في بداية الدرس (أختر الحشو كالذي في الصورة أعلاه). غير وضع (mode) الطبقة إلى Multiply وذلك لتحويل المناطق البيضاء إلى شفافة واختر قيمة Opacity 25%. قم بعمل استعادة تحديد (load selection) للدائرة مرّة ثانية ثم قلّص الحجم بشكل طفيف ثم املأها -في طبقة جديدة- باللون الأبيض. اعمل استعادة تحديد من جديد، قلّص حجم الدائرة أكثر هذه المّرة ثم احذف هذا التحديد (اضغط فقط على مفتاح delete) لتتشكّل لديكَ حلقة بيضاء. بعد ذلك قم بعمل تحديد مربّع، اضغط زر الفأرة الأيمن واختر Transform Selection، قم بتدوير المربع بـ 45 درجة (مع الضغط باستمرار على مفتاح shift) ثم قم بتحريكه إلى الأسفل بحيث تكون الحافة العُليا للمعين محاذية لمركز العدّاد. احذف هذا الجزء المحدد من الحلقة البيضاء. افتح نافذة أنماط الطبقة للقوس الأبيض ثم أضف Gradient Overlay، استخدم تدرّج قوس قزح الافتراضي. غيّر النمط إلى Angle، ثم غيّر الموقع إلى أن يصبح التدرّج مبدوءا بالأزق ومنتهيًا بالأحمر. بعدها قم بإضافة تأثيرInner Shadow إلى الحافّة العُليا. ارسم دائرة صغيرة في طبقة جديدة في مركز العدّاد واضف تأثير Gradient Overlay للطبقة مستخدمًا درجات من اللون الرمادي لإعطائه نمط معدني. كذلك قم بإضافة تأثير Drop Shadow لإعطائه عمق ولمسة من الواقعية. قم بإضافة طبقة جديدة تحت طبقة المسمار المركزي، ارسم شكل إبرة باستخدام Polygonal Lasso Tool، ثم قم بإضافة تأثير Gradient Overlay مستخدمًا درجات فاتحة وغامقة من اللون الأحمر. غيّر زاوية التدرّج بحيث يكون مُنسابًا بالضّبط أسفل وسط الإبرة، ثم أضف تأثير Drop Shadow بشكل يعطي انطباع أن الإبرة مرفوعة قليلًا عن واجهة العدّاد. اكتملت الأيقونة الأكبر الآن. كل هذه التدرّجات ساعدت على توليد الإضاءة والظل التي شكّلت أيقونة أقرب للواقعية. الآن سنقوم بعمل الأيقونات بأحجام أصغر. قم بتحديد جميع الطبقات ثم اضغط Ctrl+T. ادخل قيم الأبعاد التي تريدها للأيقونة الأصغر؛ استخدم شريط الأدوات العلوي. ستختفي بعض التأثيرات عند تصغير الأيقونات، أو إنّ حجم هذه التأثيرات سيكون كبيرًا جدّا بحيث يظهر بصورة غير صحيحة في الأيقونة الأصغر. لذلك قم بإزالة التأثيرات التي لم تعد مرئيّة من نافذة أنماط الطبقات. ستحتاج التأثيرات الأخرى كالتدرّجات والظلال إلى تعديل لتتوافق مع حجم الأيقونة الصغير. وعليه اذهب إلى نافذة أنماط الطبقة وقلّل حجم كلّ تأثير من هذه التأثيرات. الشيء الرائع في أنماط الطبقة هو إنّ التأثيرات تبقى كما هي حتى بعد تغيير محتوى الطبقة بشكل كامل. في الأيقونة الصغيرة جدّا سيصبح المسمار المركزي بالذات صغيرًا جدّا، لذلك قم بعمل دائرة أكبر في نفس طبقة المسمار وسيتمّ إضافة نفس نمط الطبقة (التدرّجات والظلال) تلقائيّا. في الأيقونة الكبيرة تظهر كافة التفاصيل، لكن عند تقليص الحجم اختفت بعض هذه التفاصيل. لذلك تم تعديل الخصائص ليبقى التصميم واضح المعالم؛ يتضمن هذا عمل المسمار والإبرة بحجم أكبر، وإبدال تدرّجات إطار الكروم بحد (stroke) عادي رماديّ اللون. ترجمة -وبتصرّف- للدرس How to create a detailed gauge icon in Photoshop لصاحبه: Iggy.

سنقوم في هذا الدرس بعمل الشكل الخارجي لحقيبة باستخدام الأشكال الأساسية، أما بالنسبة للتفاصيل الدقيقة التي تُبرز معالم الأيقونة سنقوم بعملها باستخدام أنماط طبقة مختلفة مثل Inner Glow وStroke. ولكي نجعل شكل الحقيبة أكثر واقعية سنستخدم الخامات لإعطائها ملمس جلدي. سيكون للأيقونة التي سنصممها ذلك المظهر الرقمي المجعد ذو الشعبيّة على الإنترنت. ستساعد الخطوط الواضحة في إبراز الشكل الذي تمثّله الأيقونة؛ وهذا الشيء مهمّ جدّا عند استخدام الأيقونة بأحجام صغيرة عند تصميم المواقع أو التطبيقات. والشيء الأهم الذي يضفي على الأيقونة شكلًا قريبًا من الواقع هو الاستخدام الدقيق للتدرّجات والخامات. لا تبرز هذه الإضافات عند عرض الأيقونة بشكل عام، لكن بدونها سيكون التصميم مسطّحًا وباهتًا. لنتبع هذا الدرس المفصّل خطوة بخطوة لتتعلم طريقة عملها باستخدام فوتوشوب. العديد من الأيقونات تأتي بأحجام كبيرة هذه الأيام؛ تتراوح ما بين 16px إلى 512px. ابدأ بمستند فوتوشوب جديد بحجم 256px * 256px لعمل الأيقونة بالحجم الأكبر. ارسم مستطيلا ناعم الحوافّ في طبقة جديدة وغيّر نصف قطر الحافّة إلى 10px. تأكّد من تغيير وضع الشكل إلى Pixels (ستجده في شريط الأدوات في أعلى الشاشة). انقر بشكل مزدوج على طبقة المستطيل لفتح نافذة أنماط الطبقة (Layer Styles Window). قم بإضافة Gradient Overlay ممتدّا من البنّي الغامق إلى البنّي الفاتح. بعدها قم بإضافة Inner Glow، غيّر الوضع إلى Normal، قيمة Opacity 100%، اللون بنّي أفتح من الدرجة المستخدمة في التدرّج، قيمة Choke 100%، والحجم 3px. قم بإضافة حدّ (Stroke) بحجم 2px والموقع Inside. استخدم لون بنّي غامق بحيث يكون أغمق من الدرجة المستخدمة في التدرّج. افتح خامة الجلد (حمّل الخامة من هنا) وقم بتصغيرها ليتناسب حجمها وحجم الأيقونة. اضغط Ctrl+ طبقة الأيقونة لعمل استعادة تحديد ثم اضغط مفاتيح الاختصار Ctrl+Shift+I لعكس التحديد. احذف الزائد من الشكل لتشذيب الخامة ضمن حدود الأيقونة. غيّر وضع طبقة الخامة إلى Soft Light لتسمح للتدرّج البنّي بالظهور ثم اذهب إلى: Filter > Sharpen > Sharpen لإظهار تفاصيل الخامة. ارسم مستطيلا آخر ناعم الحوافّ في طبقة جديدة، لكن هذه المرة سيكون نصف قطر الحافّة 5px. قم بعمل تحديد باستخدام Rectangular Marquee Tool ثم قم بقص المستطيل من الأسفل ليصبح الجزء السفليّ بحوافّ مستقيمة. اضغط بزرّ الفأرة الأيمن على الطبقة الخاصّة بالجزء الأسفل من الحقيبة واختر Copy Layer Style. بعدها اضغط بزرّ الفأرة الأيمن على الطبقة الخاصّة بالجزء العلوي واختر Paste Layer Style للحصول على نفس أنماط الطبقة. قم بإضافة خامة الجلد إلى طبقة الجزء العلوي من الحقيبة، ثم قم بتصغيرها وقصّها لتتناسب مع الشكل وليتطابق الجزء العلوي مع السفلي. ارسم مستطيلا رفيع في الوسط كيّ يمثّل حزام الإبزيم. طبّق نفس أنماط الطبقة للطبقات السابقة لكن بزيادة تأثير Drop Shadow لكي يعطي لمسة أكثر عمقًا. استخدم أدوات التحديد لرسم مربع بسيط في طبقة جديدة بأي لون كان. اختر أداة الممحاة وغيّر الوضع إلى Pencil بعرض 1px لثَلم الحافّتين السفليتين (انظر الصورة أعلاه)، لكن اترك الحافّة العليا مستقيمة. انقر بشكل مزدوج على طبقة المربع واستخدم نفس أنماط الطبقة السابقة لإعطائها مظهر معدني. استخدم نفس إعدادات Inner Glow، Stroke، وGradient Overlay السابقة لكن غيّر درجات الألوان إلى الرمادي بدلًا من البنّي. ارسم تفاصيل إضافية في طبقة جديدة مستخدمًا Pencil Tool وتأثيرات أنماط الطبقة لعمل فتحة القفل. لإعطاء الشكل السابق بُنية بسيطة، دقيقة، وأقرب لشكل القفل؛ اضغط على Ctrl+طبقة فتحة القفل لعمل استعادة تحديد ثم املأ التحديد باللون الأبيض في طبقة جديدة. اذهب إلى: Filter > Noise > Add Noise والإعدادات كما في الصورة أعلاه. بعدها غيّر وضع الطبقة إلى Soft Light وقيمة Opacity 50%. استخدم نفس إعدادات طبقة القفل المعدني لعمل قاعدة لمقابض اليد على الحافّة العُليا للحقيبة. ارسم مربعين صغيرين، اثلم الحوافّ باستخدام ممحاة 1px، ثم قصّها من الأسفل لمحاذاتها مع غطاء الحقيبة. لعمل مقابض اليد؛ ارسم شكل بيضوي في طبقة جديدة باستخدام Elliptical Marquee Tool ثم املأه باللون الأسود. بعد ذلك اعمل تحديد بشكل بيضوي أصغر بقليل من السابق واحذف الجزء الوسطي. قم بقصّ أي جزء إضافي لحصول على مقبض شبه دائري باستخدام Rectangular Marquee Tool. لاحظ أن موقع المقبض سيكون بين قاعدتيه في الأعلى. ولإنهاء الأيقونة قم بإضافة الظل. ابدأ بتدرّج قطري صغير في طبقة جديدة، ثم عن طريق Ctrl+ T قم بمطّه -لكن ليس بدرجة كبيرة- بصورة عمودية. اعمل تحديد عِبر منتصف التدرّج القطري، وقم بتحريك الجزء المحدد إلى الجهة المقابلة عند زاوية الحقيبة. ستبقى المنطقة الوسطى ما بين جزئيّ الظل فارغة لذلك قم بملئها بتدرّج صغير في طبقة جديدة، ثم اضغط Ctrl+ T لمطّ الظل بصورة أفقية ما بين جزئي التدرّج السابق وعلى طول الحافّة السفلى للحقيبة (لاحظ الصورة أعلاه). وبذلك نكون قد انتهينا من عمل الأيقونة. عدّل على الخلفية كما تريد ثم قم بحفظها بصيغة PNG لاستخدامها لاحقًا كما تشاء. إذا كنت تريد الأيقونة بحجم أصغر وقمت بتصغيرها يدويًا فإنّ ذلك سيؤدي إلى تمويه الخطوط وفقدان التفاصيل؛ لذلك من الأفضل عمل الأيقونة بنفس الخطوات من البداية لكن بحجم أصغر. ­ ترجمة -وبتصرّف- للدرس How to create a detailed briefcase icon in Photoshop لصاحبه: Iggy.

إنّ تصميم الأيقونات المسطّحة هو الموضوع الأكثر شعبية في مدوّنات ومنتديات التصميم في الآونة الأخيرة. كما بدأت الأنظمة الرئيسية لتشغيل الهواتف المحمولة باستخدام أو أنّها بالفعل استخدمت التصميم المسطّح مثل WindowsPhone + Metro ،Android وiOS7. وكما يبدو فإنّ صيحة التصميم المسطّح قد وصلت بالفعل إلى مستوى متطوّر جديد. وقد أطلق عليه جيف اسكالانت Jeff Escalante، وهو الشخص الذي بدأ بالنقاش حول هذا النوع من التصميم، مصطلح "تصميم الظل الطويل". وذَكر جيف في إحدى التغريدات على تويتر أنها بدأت كمزحة: إذًا كيف نصنع أيقونة مسطّحة رائعة، عصرية وبظلّ طويل؟ هذا ما سنتعلّمه خلال هذا الدّرس وذلك باستخدام الأدوات الأساسية، والأدوات في لوحة مستكشف المسارات Pathfinder Panel. ملاحظة: جميع الأشكال التي نرسمها ستكون في طبقة Layer جديدة كلّ على حِدة؛ حتّى وإن لم نذكر ذلك في كل خطوة. نقوم بتشغيل برنامج Adobe Illustrator، ونضغط Ctrl + N لفتح ملف جديد ثمّ نختار الإعدادات التَّالية: الأبعاد: 800x600px.نمط الألوان: CMYK.الدقة: 720pi.ولنتأكد من أنّ مربّع الخيار Align New Objects to Pixel Grid غير مؤشّر. 1. نرسم مستطيل مدوّر الحواف باستخدام Rounded Rectangle Tool بطول وعرض 250px. عند الرسم نضغط على المفتاح Shift ليكون الشكل مربّع. إذا رغبنا بتغييّر مقدار تدوير الحافة نضغط على مفاتيح الاتّجاه الأعلى أو الأسفل من لوحة المفاتيح أثناء الضغط على الزرّ الأيسر للفأرة. نملأ الشكل باللون C=35 M=9 Y=70 K=0: 2. نرسم مستطيل آخر مدوّر الحواف، داخل الشكل السابق، بالأبعاد 50px * 250px ونملأه باللون الأحمر. لا يوجد هنالك داعِ لمحاذاة الشكل الجديد في مكان معيّن داخل الشكل السابق، يمكننا وضعه في أي مكان نريده: 3. نرسم مستطيل باستخدام Rectangle Tool M وبالأبعاد 50px * 25px ونضعه فوق الشكل الأحمر. إذا لم نقم بتحديد الحجم في هذه الخطوة يمكننا فعل ذلك لاحقًا الخطوة 11: 4. نستخدم أداة المستطيل مدوّر الحواف Rounded Rectangle Tool لنرسم مربّع بالضغط على مفتاح Shift أثناء الرسم. لا يهمّ تحديد الحجم هنا حيث سنقوم بالتعديل عليه لاحقًا. نقوم بتدوير الشكل بزاوية 45 درجة عن طريق الذهاب إلى: Object > Transform > Rotate ثم ندخل قيمة الزاوية المذكورة أو بطريقة أبسط؛ نمسك بإحدى مقابض الزوايا ونبدأ بالتدوير مع الضغط على مفتاح Shift في نفس الوقت؛ بهذه الطريقة يمكننا التدوير بالضبط بزوايا 45، 90، و135 درجة: 5. كما نرى في الصورة أعلاه فقد تم تدوير المربّع المحيط أيضًا، وفي هذه الحالة لا يمكننا التعديل على أبعاد الشكل. يكننا تغيير الأبعاد من أعلى الشاشة، لكن إذا أردنا تغييرها باستخدام الفأرة يجب أن نذهب إلى: Object > Transform > Reset Bounding Box لعمل إعادة تعيين للمربّع المحيط: 6. نقوم بتغيير عرض الشكل إلى 50px والارتفاع إلى 80px، ثمّ نقوم بوضعه فوق الشكل الأحمر ونقوم بمحاذاتيهما بشكل عمودي. تلميح: حدّد الشكلين بينما تضغط على مفتاح Shift ثم اضغط من جديد على الشكل الذي لا تريد تحريكه. هنا سنضغط Shift+ الشكل الأحمر، Shift+ الشكل الرمادي، ثم Shift+ الشكل الأحمر من جديد؛ وبذلك يمكننا محاذاة الشكلين دون أن نحرّك الشكل الأحمر من مكانه. ولكي نضع الشكل الرمادي خلف الشكل الأحمر نقوم بتحديده ثم نضغط Ctrl +X، ثم نحدد الشكل الأحمر ونضغط Ctrl + B لتحريكه خلف جسم القلم: 7. نرسم دائرة باستخدام Ellipse Tool E، ونقوم بمحاذاتها مع الشكلين الآخرين، ونضعها أسفل الشكل الثاني لنشكّل قمّة القلم. نقوم بتحديد الشكل الرمادي ليست الدائرة ثم ننسخه Ctrl +C ثم Ctrl +F. بعد ذلك نقوم بتحديد النسخة الجديدة والدائرة معًا ثم نضغط على زرّ Intersect من لوحة مستكشف المسارات: Windows > Pathfinder Panel 8. ستكون النتيجة كما في الصورة أدناه: 9. نرسم ثلاث دوائر E ونقوم بوضعها فوق الشكل الأحمر نعمل الدائرة الوسطى بحجم أكبر قليلًا. نقوم بتحديد جميع الدوائر ثم نضغط على زرّ Unite من لوحة مستكشف المسارات. نملأ الشكل بلون مميز؛ استخدمنا هنا اللون الأصفر: 10. نقوم بعمل نسخة للشكل الأحمر Ctrl +C ثم Ctrl +F. نحدد النسخة الجديدة والشكل الأصفر معًا ثم نضغط على زرّ Minus Front من لوحة مستكشف المسارات: 11. هذه الخطوة يمكن تجاوزها إذا قمنا بتحديد الحجم في الخطوة 3. وإذا لم نفعل، نقوم بنسخ الشكل الأحمر، نحدد النسخة الجديد والمستطيل الرمادي معًا، ثم نضغط على زرّ Intersect من لوحة مستكشف المسارات: 12. نقوم برسم مستطيل M آخر لعمل الجزء العلوي من القلم. نعمل نسخة من الشكل الأحمر Ctrl +C ثم Ctrl +F، ثم نقوم بتحديد هذه النسخة والمستطيل الجديد معًا ونضغط على زرّ Intersect من لوحة مستكشف المسارات. بعدها نذهب إلى: Objec t> Arrange > Send Backward لكي نقوم بوضع الشكل الجديد خلف الشكل الرمادي: 13. نرسم مستطيلين جديدين M ونقوم بتعديل حجميهما لكي يتطابقا مع حجم الشكل الأحمر كما في الصورة أدناه: والآن لنملأ كل شكل باللون النهائي: 14. بعد تلوين الأشكال، نقوم بنسخ جسم القلم الجزء الأحمر، ثم نحدّد هذا الجزء سويّة مع أحد المستطيلين الذيْن قمنا برسمهما في الخطوة 14، ثم نضغط على زرّ Intersect من لوحة مستكشف المسارات. نكرر هذه الخطوة مع المستطيل الآخر أيضًا. بعد ذلك نقوم بوضع الشكل الرمادي العلوي في مقدمة بقية الأشكال نحدده ثم نذهب إلى: Object > Arrange > Bring to Front 15. نكرّر الخطوتين 13 و 14 مع الشكل الرمادّي أي نرسم مستطيلين مستخدمين تدرّجات اللون الرمادي المدرجة في الأعلى، ثمّ نكمل باقي الخطوات كما سبق. وبذلك نكون قد انتهينا من شكل القلم المسطّح: 16. نرسم مستطيل M بعرض 500px وارتفاع مساوٍ لارتفاع القلم، ثم نقوم بوضعه فوق القلم حتى يغطّي نصف الشكل. سنكوّن الظل باستخدام هذا المستطيل: 17. نحرّك الظل خلف القلم عن طريق: Object > Arrange > Send Backward أو نحدد الظل ونضغط Ctrl +X، ثم نحدد المربّع الأخضر في الخلفية ونضغط Ctrl +F. بعدها نقوم بتحديد كِلا القلم وظلّه ونذهب إلى: Object > Transform > Rotate وندّوره بزاوية 45 درجة: 18. نقوم، كخطوة أخيرة، بنسخ الخلفية. نحدد النسخة الجديدة وظلّ القلم ثم نضغط على رزّ Intersect من لوحة مستكشف المسارات. وبذلك نحصل على الشكل النهائي للأيقونة. يمكن أن نجرّب ألوان أخرى لعمل أيقونة مسطّحة وعصرية يمكن استخدامها في المواقع أو تطبيقات الهاتف المحمول: انتهى الدرس. ولكن مهلًا، ماذا لو لم تكن الأيقونة بسيطة ومستقيمة كهذا القلم؛ كيف يمكن عمل الظل؟ لدينا هنا طريقة أفضل لعمل تأثير الظلّ. 1. قم بنسخ الأيقونة -أو أي شكل نريد عمل الظلّ له- بالضغط على Ctrl+C ثم Ctrl+F، ثم نقوم بتحريك النسخة إلى اليمين والأسفل: 2. حدّد الشكلين معًا Ctrl + Alt + B ثم نذهب إلى: Object > Blend > Make بعدها نذهب إلى: Object > Blend > Blend Options ونضع قيمة الخطوات 250؛ بذلك نكون قد قمنا بزيادة عدد الأشكال بين الشكلين الأساسيين: 3. نذهب إلى: Object > Expand نقوم بتأشير كِلا الخيارين Object وFill، ثمّ نضغط OK. وبينما لاتزال الأشكال محددة نقوم بالضغط على زرّ Unite من لوحة مستكشف المسارات. ستصبح لدينا العديد من النقاط كما نلاحظ في الصورة أدناه، لذلك يجب أن نتخلّص منها: 4. نقوم بتحديد نقاط الإرساء Anchor Points واحدة تِلو الأخرى باستخدام أداة الانتقاء المباشر A أثناء الضغط على مفتاح Shift، ثمّ نقوم بحذفها باستخدام أداة Remove Selected Anchor Points: 5. نقوم بلصق الأيقونة أو الشكل الأصلي من ذاكرة الحافظة Clipboard Ctrl +F. بعدها نقوم بتحديد المربّع مدوّر الحوّاف الخلفية ونسخه إلى ذاكرة الحافظة Ctrl +C. نقوم بتحديد شكل الظلّ بينما نضغط على مفتاح Shift ثم نضغط على زرّ Intersect من لوحة مستكشف المسارات. يجب أن تكون النتيجة كما في الصورة أدناه: 6. نملأ شكل الظلّ بلون أخضر غامق أو بتدرّج من الرمادي إلى الأبيض، ثم نغيّر الوضع إلى Multiply من لوحة الشفافية: Windows > Transparency Panel انتهى الدرس -حقًّا هذه المرّة-! ترجمة -وبتصرّف- للدرس Create a Flat Icon with Long Shadow in Adobe Illustrator لصاحبه Zoltan Ordog.

سنتعامل هنا مع العديد من أدوات الفوتوشوب لعمل أيقونة رادار مفصّل وشبه حقيقي. سنقوم بعمل الأيقونة بالعديد من الطبقات layers وبمساعدة التدرجات، الفرش، وتأثيرات نمط الطبقة layer style. سيكون الشكل النهائي للأيقونة رائعًا وسيكون بإمكانك استخدامها كأيقونة لتطبيق ماك أو تطبيق آيفون خاصّ بك. الأيقونة عبارة عن رادار نموذجي باللون الأخضر مع شاشة مضيئة وبرّاقة. سيساعد استخدام التدرجات بطريقة ذكية في إضافة عمق إلى الأيقونة، بينما سيكون حشو pattern خطوط المسح والإضاءات الناعمة في الشاشة عنصرًا مهمًا في إضافة لمسة من الواقعية. قم بفتح مستند فوتوشوب جديد واملأ الخلفية باللون الأسود. بالنسبة للحجم؛ قُم باختياره حسب حجم الأيقونة الذي تريده. بعد ذلك قم بعمل دائرة في طبقة layer جديدة في وسط الملف واملأها باللون الأبيض، ثم اضغط بزر الفأرة الأيمن واختر Transform Selection. قم بتقليص التحديد في الوقت الذي تضغط فيه -مع الاستمرار بالضغط- على مفتاحيّ Shift و ALT. اضغط Enter ثم امسح الجزء الوسطي من الدائرة لعمل حلقة رفيعة. انقر بشكل مزدوج على طبقة الحلقة الرفيعة في خانة الطبقات لتفتح لك نافذة أنماط الطبقة layer styles. قم بإضافة Gradient Overlay متدرجًا من الأخضر الغامق إلى الأخضر الفاتح، ثم أضف Inner Glow خفيف باللون الأبيض. بعد ذلك قم بتغيير إعدادات تأثير Outer Glow وذلك بإضافة ظل أسود حول الحلقة. لن يكون هذا التأثير واضحًا في هذه الخطوة، لكنه سيساعد في إضافة عمق إلى شاشة الرادار لاحقًا. ارسم دائرة داخل مساحة الحلقة باستخدام Elliptical Marquee Tool بحيث تكون هذه الدائرة في طبقة layer جديدة تحت طبقة الحلقة ثم عبئها بتدرج أخضر. اختر ألوانًا متدرجة من الأسود إلى الأخضر المتوسط ثم الأخضر الفاتح جداً، اختر نوع التدرج قطري radial gradient. افتح مستند جديد بحجم 2x3 px. وبعد التكبير zoom قم برسم خط عبر الحافة العليا باستخدام Pencil tool، ثم اٍذهب إلى القائمة: Edit > Define Pattern ارسم دائرة أخرى في طبقة جديدة داخل حدود الحلقة الخارجية ثم ٍاختر أداة التعبئة Paint Bucket Tool وغيّر أسلوب التعبئة إلى Pattern من القائمة المنسدلة، ثم اختر الحشو Pattern الذي قمت بعمله قبل قليل. غيّر الوضع mode إلى Overlay بقيمة Opacity 50%. ارسم خطين أحدهما أفقي والآخر عمودي في طبقة جديدة باستخدام أداتي التحديد Single Row selection وSingle Column selection. ولكي تتأكد من توسيطهما؛ اضغط على مفتاحي Ctrl+A أو CMD+A لتحديد الكل ثم مفتاحي Ctrl+T أو CMD+T لعمل تحويل transform. بعدها قم بإظهار المسطرة بضغط مفتاحي Ctrl+R أو CMD+R وقم بسحب الدلائل guides التي تظهر على جابني المسطرة وجذبها snap إلى مقابض التحويل transformation grips. قم بإضافة قناع mask لطبقة الخطوط واملأها كلّيًا باللون الأسود لجعل كل شيء مخفي. بعد ذلك استخدم فرشاة ناعمة كبيرة باللون الأبيض لإعادة الخطوط وذلك بالنقر مرة واحدة في الوسط. ارسم دائرتين في الوسط ابدأ من مركز الخطين ثم ارسم الدائرة بينما تضغط على مفتاح Alt، ثم اضغط زر الفأرة الأيمن واختر حد Stroke بعرض 1px ولون أبيض. ارسم -في طبقة جديدة- مضلّعًا خارجيّا لاحتواء مدى الرادار باستخدام Polygonal Lasso tool وانتبه جيدًا إلى المحاذاة إلى الوسط. قم بإضافة بقعة بيضاء باستخدام فرشاة ناعمة كبيرة. قم بعمل تحديد إضافي للحلقة وذلك بالضغط على Ctrl وطبقة الحلقة في نفس الوقت -انتبه إلى أن المضلع مازال محدّدًا- ثم أمسح أي شيء زائد وغير مرغوب فيه حول الحلقة من طبقة المضلّع نفسها. غيّر وضع طبقة المضلّع layer mode إلى Overlay ولذلك للسّماح للألوان بالتداخل وإنتاج تأثيرًا أخضرًا برّاق. قم بعمل نقاط فوق الرادار في طبقة جديدة باستخدام الفرشاة، ومن نافذة أنماط الطبقة اختر Outer Glow لإعطائها توهّجًا إضافيّا. وبهذا نكون قد حصلنا على أيقونة رادار صغيرة، رائعة، وجاهزة لتصديرها بصيغة PNG واستخدامها كملف أيقونة تعمل بشكل كامل في تطبيقك المفضّل، أو كنوع من أيقونات الواجهة لتطبيقك أو موقعك على شبكة الأنترنت. ترجمة -وبتصرّف- للدّرس How To Create a Vibrant Radar Icon in Photoshop لصاحبه Iggy.