درس تصميم شريط أيكونات زجاجي عرضي Web 2.0 احترافي
20 مارس بواسطة : المدثر جبر - وسوم : أيكونات, احترافي, تصميم, دروس, زجاجية, فوتوشوب, ويب 2.0
السلام عليكم ورحمة الله وبركاته
آسف لقلة تدويناتي ولكن اعذروني لانشغالي في العمل
درس اليوم مهم جدا للمصممين المبتدئين والمحترفين وهو تصميم شريط ايكونات ويب2 يمكن استخدامه في هيدر او اي حاجة تانية درس ,إحترافي ,بسيط
معلش انا هتكلم باللهجة المصرية اختصارا للوقت :)
نبدأ بالنتيجة النهائية للدرس

1- افتح الفوتوشوب وافتح صفحة عمل جديدة نفترض مثلا 500*300 بكسل ونملاها باللون الاسود .
2- نضيف لاير جديد ونستخدم آداة rounded rectangle rool ونعمل مستطيل مثلا 400*50بكسل
3- ندخل على الاعدادات ونعمل تدرج عمودي درجتين 00d9bb#,#035b50
- اعمل اعدادات inner glow شفافية 28% واملاها باللون 6bf7e4 #
هيطلع العمل لغاية دلوقتي كده

هنيجي لخطوة مهمة جدا وهي لمسة جمالية للتصميم وهي لمعة احترافية ( والصراحة الخطوة دي كان نفسي اتعلمها ومعرفتش اجيبها الا مع نفسي فالنهاردة هنعملها مع بعض)
- هنضيف لاير جديد فوق الاير بتاع المستطيل ونضغط علي زر Ctrl ونضغط على الشيب اللي تحت اللاير الجديد بتاع اللمعة
للتوضيح أكثر في الصورة دي

هتلاقي التحديد علي الصورة عامل كده

لو بقي كده يبقي الشغل ماشي لغاية دلوقتي تمام
4- هنروح لقائمة select<modify<contract و نعمل القيمة 2 واضغط ok
هيبقي التحديد عامل كده

5- نستخدم آداة التدرج الشفاف ![]()
و نعمل اللون أبيض
ونعمل التدرج بس يكون بالشكل ده

اضغط Ctrl+d لإزالة التحديد
هتطلع النتيجة النهائية كده

كده نعتبر خلصنا نص الشغل
وصلنا لنقطة مهمة اللي هي تقسيم القايمة دي لزراير
6-هنستخدم آداة line tool اضغط عليها حدد عرضها 1 بكسل ونكبر الصورة
نرسم خط عمودي زي المثال

ونلامها باللون الأبيض ودرجة شفافية 39%
7- نعمل duplicate layer ونحركها 1 بكسل شمال للاير المنسوخة ونملاها بالدرجة دي #05695c
ونعمل الشفافية 82%
هتطلع النتيجة النهائية كده

وبعدين نوزع كلمات الزراير ونحط ما بين كل كلمتين خط زي ده
وده تطبيقي

نيجي لنقطة مهمة جدا جدا جدا هيا سهلة ولكن هي لمسة جمالية للتصميم وهي اللمعة العكسية
هنقوم مجمعين كل اللايرات ونحطها في فولدر
ونعمل duplicate للفولدر كله
وبعدين نضغط ctrl +e علشان ندمج اللايرات
- افتح قائمة edit >transform>flip vertical ليتم عكس التصميم
- حرك اللاير المقلوب اسف الفولدر الاول ونخلي شفافيته 8%
هيبقي شكله كده

وبكده يبقي الدرس انتهي ..ممكن نستخدم الدرس ده في تصميم هيدر بسيط .
وانا هديلكم مثال من تطبيقي

الدرس من اجتهادي الشخصي ولا اسمح بالنقل دون ذكر المصدر او ازالة الحقوق
ارجو ان يكون الدرس نال اعجابكم , اذا يوجد اي استفسارات او تعليقات انا حاضر
اشترك في خلاصة الموقع
إذا أعجبتك هذه التدوينة, يمكنك الاشتراك في خلاصة الموقع حيث يمكنك متابعة الجديد أولاً بأول . خلاصة الموقع RSS . يمكنك أيضاً متابعتنا على @Alwank على Twitter لمتابعة جديدنا .




















بسم الله ماشاءالله ..
الدرس تحفة .. والتصميم اروع …
بجد تسلم ايدك
وبصفة عامة الموقع كله ممتاز
ما شاء الله عنك .. الله يحفظك .!!
بجد رائع جدا جدا
انا مش بعرف استخدم الفوتوشوب ولا عمرى استخدمته
ياريت فى يوم اعرف اعمل ربع اللى بتعمله
ادعيلى ،،
ما شاء الله
ما شاء الله
معلم يا سيدي
الله يعطيك العافية
نتظر المزيد
حياكم الله
ما شاء اللة عليك يامدثر استاذ ياريت ربنا يزيدك علشان نتعلم منك عايز اعرف ازاى تعمل بنر احترافى
مميز العمل
ماشاءالله عليك
ابديع
طيب كيف بدي اخلي الواحد يكبس على هوم تودي للصفحة الرئيسية
؟؟؟؟؟؟؟؟
يردي التوضيح :)