تصميم واجهة مشغل موسيقى

بواسطة محمد بتاريخ أغسطس 08, 2010 القسم تصميم, فوتوشوب

في هذا الدرس سوف نتعلم سويا كيف نصمم واجهة مشغل موسيقى. في هذا الدرس سوف نركز على الإضاءة والظلال. إذا كان هناك شئ واحد ستتعلمه من هذا الدرس هو ان الإضاءة وتركيزها عامل مهم فى مثل هذه الأعمال.

الخطوة 1

قم بإنشاء ورقة عمل جديدة بمقاس 1000×800 بكسل وبخلفية رصاصي قاتم.

الخطوة 2

في اغلب الواجهات من هذا النوع سوف تجد الدوائر اللامعة والمركزية. استخد اداه التحديد الدائرية وقم بملئها بتدرج مناسب ثم طبق الستايل التالي.

الخطوة 3

اضف عمق اكبر للدائرة. اضغط على CTRL + ALT + G لتطبيق ماسك ثم غير نوع الطبقة إلى Overlay. الآن استخدم فرشاه ناعمة بقطر 60 بكسل لإضافة بعد الظلال اسفل الدائرة. لإضافة الإضاءة استخدم فرشاه بلون ازرق قاتم وقم بالمسح فى الاسفل فى نقاط صغيرة.

الخطوة 4

الآن لنضف بعض الإضاءة. تذكر دائماً ان تستخدم الماسك. اضف 3 فرش بيضاء فوق الثلاثة فرش الزرقاء من الخطوة السابقة. ثم حدد نوع الطبقة إلى Overlay ثم اضف فرشاه بدرجة شفافية خفيفة وتكون الفرشاه مشبحه كما تحب.

الخطوة 5

حدد اختيار حول الدائرة الأصلية بإستخدام زر الـ CTRL مع الضغط على مصغرة الدائرة بواسطة مؤشر الفارة ثم اذهب إلى Select > Expand وحدد القيمة إلى 4 بكسل والآن مرة اخرى Select > Expand والقيمة 8 بكسل. هنا ستجد لديك دائرتين احداهما اكبر من الاخرى. بإستخدام فرشاه وإضافة ظلال قم بعمل شكل معدني داخل الدائرتين بإستخدام الابيض والاسود.

الخطوة 6

ارجع إلى الدائرة الأصلية واضف ثلاثة دوائر 1 بكسل و 2 بكسل و 3 بكسل لعمل التأثير الزجاجي وقلل درجة شفافيتهم.

الخطوة 7

بإستخدام فرشاه بقطر 60 بكسل اضف بعض الإضاءة للدائرة المعدنية لزيادة تأثير الإضاءة وقم بتغيير نوع الطبقة إلى Overlay.

الخطوة 8

الآن انتهينا من دائرتنا المضيئة كما اردنا.. اضف داخلها الآن ما تريد وليكن شكل منظم الصوت “الإكواليزر” مع بعض الكلمات لتكن اسم الملف الصوتي المعروض.

الخطوة 9

الآن قم برسم دائرة خلف الدائرة الاصلية واضف الماسك وقم بعمل إضاءة كما تحب ولكن تأكد من انك تستخدم فرشاه ناعمة بقطر 60 بكسل.

الخطوة 10

قم بتكرار الدائرة وطبق ماسك عليها. قم بتغيير اللون إلى لون افتح قليلاً. ثم اضف دائرة بيضاء بقطر 10 بكسل فوقها. ولإضاءة اكثر اضف دائرة اخرى واضف تأثيرات الإضاءة كما تحب. قم بتغيير نوع الطبقة إلى Overlay. ثم اضف بعض الظلال كما فى الدائرة الاصلية.

الخطوة 11

لإضافة عمق اكبر كرر الخطوات السابقة لإضافة دوائر اكثر.

الخطوة 12

بإستخدام اداه القلم (P) قم برسم جناح كما بالشكل.

الخطوة 13

الآن استخدم الماسك لإضافة اضاءة وتظليل. لاحظ ان الجانب العلوي افتح من الجانب السفلي. دائماً استخدم فرش ناعمه لعمل الظلال. استخدم اداه القلم (P) لرسم شرائط لعمل التأثير الزجاجي.

الخطوة 14

قم برسم خط جانبي لتحديد مكان نصف الدائرة الذي سيتم رسمه على الطرف. فقط قم برسم خط بإستخدام اداه القلم، وحددها بخط دائري بفرشاه قطرها 2 بكسل ثم قم بتحريك الخط إلى اليمين بإستخدام الإتجاهات فى لوحة المفاتيح. وحدده كما فعلنا سابقاً ولكن باللون الاسود ثم احذف القط نفسه.ثم استخدم CTRL + T لجعل الخط ارفع قليلاً.

الخطوة 15

الآن نرسم الدائرة الجانبية.. لا تقلق فخبرتك فى الخطوات الاولى ستجعلك قادراً على رسم الدائرة الجانبية بسهولة. كما بالشكل.

الخطوة 16

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

الخطوة 17

الآن اضف ظلال للجزء العلوي لجعل شكلها ثلاثي الابعاد.

الخطوة 18

الآن قم بعمل نفس الخطوة مع الجزء السفلي لجعل شكله ثلاثي الأبعاد.

الخطوة 19

الآن لنقم بعمل الفتحات، هناك عدة طرق لعمل الفتحات. يمكنك استخدام اداه القلم ورسم مكان الفتحة وملئها باللون الاسود ثم ملئها بفتحات معدنية (يمكنك مراجعة كيفية عمل فتحة معدنية في هذا الدرس).

الخطوة 20

يمكنك ان ترسم بعض اللهب عند الفتحة لإعطائها شكل اكثر جمالاً. بإستخدام الفرشاه واعطاها بعض التأثيرات لتخرج بالشكل التالي.

الخطوة 21

قم بتكرار الطبقات واقلبها وضعها على الجانب الاخر من الدائرة تأكد من ان الابعاد متناسقة.

الخطوة 22

الآن لنرسم الكسر فى الزجاج. اولاً قم برسم شكل اسود غير منتظم.

الخطوة 23

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

الخطوة 24

الآن قم بإستخدام اداه القلم لرسم خط متعرج. وحدده بفرشاه سوداء بقطر 1 بكسل ثم كرر التحديد وحركه لليسار خطوة بإستخدام الاتجاهات واعطه اللون الابيض.

الخطوة 25

اضف بعض الاشكال الغير منتظمة واعطها تدرج مناسب لتعطي اشكال الزجاج المنثور بعد الكسر.

الخطوة 26

الآن لنضف بعض الأناقة للشكل. ارسم خطوطاً تنكسر حسب الاتجاه الثلاثي الابعاد للأجنحه كما بالشكل وافعل معها ما فعلنا مع الخط الخارجي فى الخطوة 14.

الخطوة 27

الآن لنرسم ازرار التشغيل. قم برسم شكل الزر واضف تدرج مناسب له.

كرر الشكل وصغره قليلاً واملئه باللون الاسود وحد داخلي بقيمة 1 بكسل باللون الابيض.

الخطوة 28

كرر الشكل مرة اخرة وصغره قليلاً. واضف تدرج ازرق إليها. اضف ماسك وقم بإضافة اضاءه بإستخدام الفرش وغير نوعهم إلى Overlay. ثم اضف شكل العرض.

الخطوة 29

الآن كرر الطبقة واجعلها اصغر قليلاً واضف إليها زر التالي والسابق كما بالشكل.

الخطوة 30

الآن لرسم الأسلاك قم بإستخدام اداه القلم ثم تحديد الخط بفرشاه سوداء بقطر 20 بكسل. كرر الشكل ثم اضف ماسك ثم اضف بعض الظلال لعمل شكل ثلاثي الابعاد. ثم اذهب إلى النسخة الاولى من السلك واملئها باللون الابيض. وضع الطبقة فوق الطبقة السابقة ثم اجعل درجة شفافية الطبقة 10% ثم اضف خطوط متقطعه كما بالخطوات السابقة.

الآن اضف بعض الظلال والإضاءة للعمل النهائي كما تحب.