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

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


Huda Almashta

سنتعامل هنا مع العديد من أدوات الفوتوشوب لعمل أيقونة رادار مفصّل وشبه حقيقي. سنقوم بعمل الأيقونة بالعديد من الطبقات layers وبمساعدة التدرجات، الفرش، وتأثيرات نمط الطبقة layer style. سيكون الشكل النهائي للأيقونة رائعًا وسيكون بإمكانك استخدامها كأيقونة لتطبيق ماك أو تطبيق آيفون خاصّ بك.

001.thumb.jpg.c10f83b979ad7c99f1fcfadac1

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

قم بفتح مستند فوتوشوب جديد واملأ الخلفية باللون الأسودبالنسبة للحجم؛ قُم باختياره حسب حجم الأيقونة الذي تريدهبعد ذلك قم بعمل دائرة في طبقة layer جديدة في وسط الملف واملأها باللون الأبيض، ثم اضغط بزر الفأرة الأيمن واختر Transform Selectionقم بتقليص التحديد في الوقت الذي تضغط فيه -مع الاستمرار بالضغطعلى مفتاحيّ Shift و ALTاضغط Enter ثم امسح الجزء الوسطي من الدائرة لعمل حلقة رفيعة.

002.thumb.jpg.d80de0df3bf424702b83d9d768

انقر بشكل مزدوج على طبقة الحلقة الرفيعة في خانة الطبقات لتفتح لك نافذة أنماط الطبقة layer styles. قم بإضافة Gradient Overlay متدرجًا من الأخضر الغامق إلى الأخضر الفاتح، ثم أضف Inner Glow خفيف باللون الأبيض.

003.thumb.jpg.f599cdc4d2d7250d72fbeb3a57

بعد ذلك قم بتغيير إعدادات تأثير Outer Glow وذلك بإضافة ظل أسود حول الحلقةلن يكون هذا التأثير واضحًا في هذه الخطوة، لكنه سيساعد في إضافة عمق إلى شاشة الرادار لاحقًا.

004.thumb.jpg.3a7df5f1e746f33df2ce8f8fd9

ارسم دائرة داخل مساحة الحلقة باستخدام Elliptical Marquee Tool بحيث تكون هذه الدائرة في طبقة layer جديدة تحت طبقة الحلقة ثم عبئها بتدرج أخضر. اختر ألوانًا متدرجة من الأسود إلى الأخضر المتوسط ثم الأخضر الفاتح جداً، اختر نوع التدرج قطري radial gradient.

005.thumb.jpg.d6cfb9670c4f908f5f6223ab99

افتح مستند جديد بحجم 2x3 px. وبعد التكبير zoom قم برسم خط عبر الحافة العليا باستخدام Pencil tool، ثم اٍذهب إلى القائمة:

Edit > Define Pattern

006.thumb.jpg.2279c930b67dfd3b61c2518131

ارسم دائرة أخرى في طبقة جديدة داخل حدود الحلقة الخارجية ثم ٍاختر أداة التعبئة Paint Bucket Tool وغيّر أسلوب التعبئة إلى Pattern من القائمة المنسدلة، ثم اختر الحشو Pattern الذي قمت بعمله قبل قليلغيّر الوضع mode إلى Overlay بقيمة Opacity 50%.

007.thumb.jpg.ec0939cfb4970564f597475a0c

ارسم خطين أحدهما أفقي والآخر عمودي في طبقة جديدة باستخدام أداتي التحديد Single Row selection وSingle Column selectionولكي تتأكد من توسيطهما؛ اضغط على مفتاحي Ctrl+A أو CMD+A لتحديد الكل ثم مفتاحي Ctrl+T أو CMD+T لعمل تحويل transform. بعدها قم بإظهار المسطرة بضغط مفتاحي Ctrl+R أو CMD+R وقم بسحب الدلائل guides التي تظهر على جابني المسطرة وجذبها snap إلى مقابض التحويل transformation grips.

008.thumb.jpg.32fddbb70d48f2e92cc4d1fedd

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

009.thumb.jpg.9b9975bac26bc495a0a14059eb

ارسم دائرتين في الوسط ابدأ من مركز الخطين ثم ارسم الدائرة بينما تضغط على مفتاح Alt، ثم اضغط زر الفأرة الأيمن واختر حد Stroke بعرض 1px ولون أبيض.

010.thumb.jpg.10799aaf232b50223b65cc72e7

ارسم -في طبقة جديدة- مضلّعًا خارجيّا لاحتواء مدى الرادار باستخدام Polygonal Lasso tool وانتبه جيدًا إلى المحاذاة إلى الوسطقم بإضافة بقعة بيضاء باستخدام فرشاة ناعمة كبيرة.

011.thumb.jpg.5b8f843373eaf7af8c244ea7ee

قم بعمل تحديد إضافي للحلقة وذلك بالضغط على Ctrl وطبقة الحلقة في نفس الوقت -انتبه إلى أن المضلع مازال محدّدًا- ثم أمسح أي شيء زائد وغير مرغوب فيه حول الحلقة من طبقة المضلّع نفسها. غيّر وضع طبقة المضلّع layer mode إلى Overlay ولذلك للسّماح للألوان بالتداخل وإنتاج تأثيرًا أخضرًا برّاق.

012.thumb.jpg.811498f69ad0e306fe2faacff3

قم بعمل نقاط فوق الرادار في طبقة جديدة باستخدام الفرشاة، ومن نافذة أنماط الطبقة اختر Outer Glow لإعطائها توهّجًا إضافيّا.

013.thumb.jpg.24d8b9c137a80f73ff35057634

وبهذا نكون قد حصلنا على أيقونة رادار صغيرة، رائعة، وجاهزة لتصديرها بصيغة PNG واستخدامها كملف أيقونة تعمل بشكل كامل في تطبيقك المفضّل، أو كنوع من أيقونات الواجهة لتطبيقك أو موقعك على شبكة الأنترنت.

014.thumb.jpg.252b2ba6d14855560e8a0d2fa9

ترجمة -وبتصرّف- للدّرس How To Create a Vibrant Radar Icon in Photoshop لصاحبه Iggy.


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

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



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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.


×
×
  • أضف...