الروند
22-03-2009, 07:06 AM
السلام عليكم ورحمة الله وبركاته
آسف لقلة تدويناتي ولكن اعذروني لانشغالي في العمل
درس اليوم مهم جدا للمصممين المبتدئين والمحترفين وهو تصميم شريط ايكونات ويب2 يمكن استخدامه في هيدر او اي حاجة تانية درس ,إحترافي ,بسيط
الدرس منقول من المدونة التابعة لشركة بيور للخدمات التقنية www.alwank.com (http://www.alwank.com)
معلش انا هتكلم باللهجة المصرية اختصارا للوقت :)
نبدأ بالنتيجة النهائية للدرس
http://alwank.com/wp-content/uploads/131.jpg
1- افتح الفوتوشوب وافتح صفحة عمل جديدة نفترض مثلا 500*300 بكسل ونملاها باللون الاسود .
2- نضيف لاير جديد ونستخدم آداة rounded rectangle rool ونعمل مستطيل مثلا 400*50بكسل
3- ندخل على الاعدادات ونعمل تدرج عمودي درجتين 00d9bb#,#035b50
- اعمل اعدادات inner glow شفافية 28% واملاها باللون 6bf7e4 #
هيطلع العمل لغاية دلوقتي كده
http://alwank.com/wp-content/uploads/21.jpg
هنيجي لخطوة مهمة جدا وهي لمسة جمالية للتصميم وهي لمعة احترافية ( والصراحة الخطوة دي كان نفسي اتعلمها ومعرفتش اجيبها الا مع نفسي فالنهاردة هنعملها مع بعض)
- هنضيف لاير جديد فوق الاير بتاع المستطيل ونضغط علي زر Ctrl ونضغط على الشيب اللي تحت اللاير الجديد بتاع اللمعة
للتوضيح أكثر في الصورة دي
http://alwank.com/wp-content/uploads/31.jpg
هتلاقي التحديد عامل كده
لو بقي كده يبقي الشغل ماشي لغاية دلوقتي تمام
http://alwank.com/wp-content/uploads/41.jpg
- هنروح لقائمة selectflip vertical ليتم عكس التصميم
- حرك اللاير المقلوب اسفل الفولدر الاول ونخلي شفافيته 8%
هيبقي شكله كده
http://alwank.com/wp-content/uploads/12.jpg
وبكده يبقي الدرس انتهي ..ممكن نستخدم الدرس ده في تصميم هيدر بسيط .
وانا هديلكم مثال من تطبيقي بس اضفت فيه فرشة
http://alwank.com/wp-content/uploads/13.jpg
الدرس من اجتهادي الشخصي ولا اسمح بالنقل دون ذكر المصدر او ازالة الحقوق
ارجو ان يكون الدرس نال اعجابكم , اذا يوجد اي استفسارات او تعليقات انا حاضر
المصدر : مدونة ألوانك http://alwank.com/2009/03/tutorial-d...cons-web2-pro/ (http://alwank.com/2009/03/tutorial-design-navigation-with-glass-icons-web2-pro/)
آسف لقلة تدويناتي ولكن اعذروني لانشغالي في العمل
درس اليوم مهم جدا للمصممين المبتدئين والمحترفين وهو تصميم شريط ايكونات ويب2 يمكن استخدامه في هيدر او اي حاجة تانية درس ,إحترافي ,بسيط
الدرس منقول من المدونة التابعة لشركة بيور للخدمات التقنية www.alwank.com (http://www.alwank.com)
معلش انا هتكلم باللهجة المصرية اختصارا للوقت :)
نبدأ بالنتيجة النهائية للدرس
http://alwank.com/wp-content/uploads/131.jpg
1- افتح الفوتوشوب وافتح صفحة عمل جديدة نفترض مثلا 500*300 بكسل ونملاها باللون الاسود .
2- نضيف لاير جديد ونستخدم آداة rounded rectangle rool ونعمل مستطيل مثلا 400*50بكسل
3- ندخل على الاعدادات ونعمل تدرج عمودي درجتين 00d9bb#,#035b50
- اعمل اعدادات inner glow شفافية 28% واملاها باللون 6bf7e4 #
هيطلع العمل لغاية دلوقتي كده
http://alwank.com/wp-content/uploads/21.jpg
هنيجي لخطوة مهمة جدا وهي لمسة جمالية للتصميم وهي لمعة احترافية ( والصراحة الخطوة دي كان نفسي اتعلمها ومعرفتش اجيبها الا مع نفسي فالنهاردة هنعملها مع بعض)
- هنضيف لاير جديد فوق الاير بتاع المستطيل ونضغط علي زر Ctrl ونضغط على الشيب اللي تحت اللاير الجديد بتاع اللمعة
للتوضيح أكثر في الصورة دي
http://alwank.com/wp-content/uploads/31.jpg
هتلاقي التحديد عامل كده
لو بقي كده يبقي الشغل ماشي لغاية دلوقتي تمام
http://alwank.com/wp-content/uploads/41.jpg
- هنروح لقائمة selectflip vertical ليتم عكس التصميم
- حرك اللاير المقلوب اسفل الفولدر الاول ونخلي شفافيته 8%
هيبقي شكله كده
http://alwank.com/wp-content/uploads/12.jpg
وبكده يبقي الدرس انتهي ..ممكن نستخدم الدرس ده في تصميم هيدر بسيط .
وانا هديلكم مثال من تطبيقي بس اضفت فيه فرشة
http://alwank.com/wp-content/uploads/13.jpg
الدرس من اجتهادي الشخصي ولا اسمح بالنقل دون ذكر المصدر او ازالة الحقوق
ارجو ان يكون الدرس نال اعجابكم , اذا يوجد اي استفسارات او تعليقات انا حاضر
المصدر : مدونة ألوانك http://alwank.com/2009/03/tutorial-d...cons-web2-pro/ (http://alwank.com/2009/03/tutorial-design-navigation-with-glass-icons-web2-pro/)