استكمالا لما بدأناها سابقا من سلسلة روائع الفوتوشوب .. فنحن اليوم بصدد تقديم درس مقارب لخدعة الجزء السابق أل وهى تصميم واجهة مشغل موسيقى وسوف نركز على أماكن الظل والنوروتأثيراتها الشديدة فى إظهار عمق التصميم .
الخطوة الأولى :
قم بإنشاء ورقة عمل جديدة بمقاس 1000×800 بكسل وبخلفية رصاصي قاتم.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الثانية :
في اغلب الواجهات من هذا النوع سوف تجد الدوائر اللامعة والمركزية. استخد اداه التحديد الدائرية وقم بملئها بتدرج مناسب ثم طبق الستايل التالي.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الثالثة :
اضف عمق اكبر للدائرة. اضغط على CTRL + ALT + G لتطبيق ماسك ثم غير نوع الطبقة إلى Overlay. الآن استخدم فرشاه ناعمة بقطر 60 بكسل لإضافة بعد الظلال اسفل الدائرة. لإضافة الإضاءة استخدم فرشاه بلون ازرق قاتم وقم بالمسح فى الاسفل فى نقاط صغيرة.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الرابعة :
الآن لنضف بعض الإضاءة. تذكر دائماً ان تستخدم الماسك. اضف 3 فرش بيضاء فوق الثلاثة فرش الزرقاء من الخطوة السابقة. ثم حدد نوع الطبقة إلى Overlay ثم اضف فرشاه بدرجة شفافية خفيفة وتكون الفرشاه مشبحه كما تحب.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الخامسة :
حدد اختيار حول الدائرة الأصلية بإستخدام زر الـ CTRL مع الضغط على مصغرة الدائرة بواسطة مؤشر الفارة ثم اذهب إلى Select > Expand وحدد القيمة إلى 4 بكسل والآن مرة اخرى Select > Expand والقيمة 8 بكسل. هنا ستجد لديك دائرتين احداهما اكبر من الاخرى. بإستخدام فرشاه وإضافة ظلال قم بعمل شكل معدني داخل الدائرتين بإستخدام الابيض والاسود.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة السادسة :
ارجع إلى الدائرة الأصلية واضف ثلاثة دوائر 1 بكسل و 2 بكسل و 3 بكسل لعمل التأثير الزجاجي وقلل درجة شفافيتهم.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة السابعة:
بإستخدام فرشاه بقطر 60 بكسل اضف بعض الإضاءة للدائرة المعدنية لزيادة تأثير الإضاءة وقم بتغيير نوع الطبقة إلى Overlay.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الثامنة :
الآن انتهينا من دائرتنا المضيئة كما اردنا.. اضف داخلها الآن ما تريد وليكن شكل منظم الصوت “الإكواليزر” مع بعض الكلمات لتكن اسم الملف الصوتي المعروض.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة التاسعة :
الآن قم برسم دائرة خلف الدائرة الاصلية واضف الماسك وقم بعمل إضاءة كما تحب ولكن تأكد من انك تستخدم فرشاه ناعمة بقطر 60 بكسل.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة العاشرة :
قم بتكرار الدائرة وطبق ماسك عليها. قم بتغيير اللون إلى لون افتح قليلاً. ثم اضف دائرة بيضاء بقطر 10 بكسل فوقها. ولإضاءة اكثر اضف دائرة اخرى واضف تأثيرات الإضاءة كما تحب. قم بتغيير نوع الطبقة إلى Overlay. ثم اضف بعض الظلال كما فى الدائرة الاصلية.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الحادية عشر :
لإضافة عمق اكبر كرر الخطوات السابقة لإضافة دوائر اكثر.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الثانية عشر :
بإستخدام اداه القلم (P) قم برسم جناح كما بالشكل.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الثالثة عشر:
الآن استخدم الماسك لإضافة اضاءة وتظليل. لاحظ ان الجانب العلوي افتح من الجانب السفلي. دائماً استخدم فرش ناعمه لعمل الظلال. استخدم اداه القلم (P) لرسم شرائط لعمل التأثير الزجاجي.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الرابعة عشر :
قم برسم خط جانبي لتحديد مكان نصف الدائرة الذي سيتم رسمه على الطرف. فقط قم برسم خط بإستخدام اداه القلم، وحددها بخط دائري بفرشاه قطرها 2 بكسل ثم قم بتحريك الخط إلى اليمين بإستخدام الإتجاهات فى لوحة المفاتيح. وحدده كما فعلنا سابقاً ولكن باللون الاسود ثم احذف القط نفسه.ثم استخدم CTRL + T لجعل الخط ارفع قليلاً.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الخامسة عشر :
الآن نرسم الدائرة الجانبية.. لا تقلق فخبرتك فى الخطوات الاولى ستجعلك قادراً على رسم الدائرة الجانبية بسهولة. كما بالشكل.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة السادسة عشر :
الآن لنعمل على ضبط الجناح اكثر لإعطائه شكل ثلاثي الابعاد. استخدم اداه القلم واختر الجزء العلوي. املئ الإختيار بأي لون ثم اضف ماسك.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة السابعة عشر :
الآن اضف ظلال للجزء العلوي لجعل شكلها ثلاثي الابعاد.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الثامنة عشر :
الآن قم بعمل نفس الخطوة مع الجزء السفلي لجعل شكله ثلاثي الأبعاد.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة التاسعة عشر :
الآن لنقم بعمل الفتحات، هناك عدة طرق لعمل الفتحات. يمكنك استخدام اداه القلم ورسم مكان الفتحة وملئها باللون الاسود ثم املأها بفتحات معدنية .
تعلم تصميم واجهة مشغل الموسيقى
الخطوة العشرون:
يمكنك ان ترسم بعض اللهب عند الفتحة لإعطائها شكل اكثر جمالاً. بإستخدام الفرشاه واعطاها بعض التأثيرات لتخرج بالشكل التالي.
تعلم تصميم واجهة مشغل الموسيقى
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الحادية والعشرون:
قم بتكرار الطبقات واقلبها وضعها على الجانب الاخر من الدائرة تأكد من ان الابعاد متناسقة.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الثانية والعشرون:
الآن لنرسم الكسر فى الزجاج. اولاً قم برسم شكل اسود غير منتظم.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الثالثة والعشرون:
غير نوع الطبقة إلى Overlay ثم اضف ماسك واستخدم فرشاه بيضاء لتلوين داخل الشكل لإحداث تأثير خروج الضوء من الجانب المكسور.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الرابعة والعشرون:
الآن قم بإستخدام اداه القلم لرسم خط متعرج. وحدده بفرشاه سوداء بقطر 1 بكسل ثم كرر التحديد وحركه لليسار خطوة بإستخدام الاتجاهات واعطه اللون الابيض.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الخامسة والعشرون:
أضف بعض الأشكال الغير منتظمة واعطها تدرج مناسب لتعطي اشكال الزجاج المنثور بعد الكسر.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة السادسة والعشرون:
الآن لنضف بعض الأناقة للشكل. ارسم خطوطاً تنكسر حسب الاتجاه الثلاثي الابعاد للأجنحه كما بالشكل وافعل معها ما فعلنا مع الخط الخارجي فى الخطوة 14.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة السابعة والعشرون:
الآن لنرسم ازرار التشغيل. قم برسم شكل الزر واضف تدرج مناسب له.
تعلم تصميم واجهة مشغل الموسيقى
كرر الشكل وصغره قليلاً واملئه باللون الاسود وحد داخلي بقيمة 1 بكسل باللون الابيض.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الثامنة والعشرون:
كرر الشكل مرة اخرة وصغره قليلاً. واضف تدرج ازرق إليها. اضف ماسك وقم بإضافة اضاءه بإستخدام الفرش وغير نوعهم إلى Overlay. ثم اضف شكل العرض.
تعلم تصميم واجهة مشغل الموسيقى
تعلم تصميم واجهة مشغل الموسيقى
الخطوة التاسعة والعشرون:
الآن كرر الطبقة واجعلها اصغر قليلاً واضف إليها زر التالي والسابق كما بالشكل.
تعلم تصميم واجهة مشغل الموسيقى
الخطوة الثلاثون:
الآن لرسم الأسلاك قم بإستخدام اداه القلم ثم تحديد الخط بفرشاه سوداء بقطر 20 بكسل. كرر الشكل ثم اضف ماسك ثم اضف بعض الظلال لعمل شكل ثلاثي الابعاد. ثم اذهب إلى النسخة الاولى من السلك واملئها باللون الابيض. وضع الطبقة فوق الطبقة السابقة ثم اجعل درجة شفافية الطبقة 10% ثم اضف خطوط متقطعه كما بالخطوات السابقة.
تعلم تصميم واجهة مشغل الموسيقى
تعلم تصميم واجهة مشغل الموسيقى
تعلم تصميم واجهة مشغل الموسيقى
تعلم تصميم واجهة مشغل الموسيقى
تعلم تصميم واجهة مشغل الموسيقى
الآن اضف بعض الظلال والإضاءة للعمل النهائي كما تحب.
محمد عبد الله
ما شاء الله موضوع مميز وتصميم رائع وتشلموا على شرح الخطوات …
تصميم واجهات الموسيقى شى جذاب لكتير من الشباب وأكيد راح نستفيد من الدرس وراح أجربه وأرسل لكم تصميمى ان شاء الله…
سليم ابراهيم
مشكور أخى على الطرح للموضوع وترتيب الخطوات … مجهود مميز و برجاء المزيد من سحر التصميم بالفوتوشوب
عماد الدين
مسا الخير عليكم…
مجهود مشكور لكل من يساهم فى هذا الموقع ويحاول توصيل ولو معلومة بسيطة وتوضيحها.
لكم منى أرق الأمنيات بدوام النجاح والتقدم إن شاء الله..