صمم زر رائع الشكل والتفاصيل

[المصمم]

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته


تصمم زر رائع الشكل والتفاصيل


هذا درس مترجم .. يمكنك زيارة الدرس الأجنبي على هذا الرابط (http://webdesign.tutsplus.com/tutorials/site-elements/design-a-beautifully-detailed-web-button/)


في هذا الدرس سوف أريكم كيفية صنع زر بشكل مفصل باستخدام فوتوشوب باستخدام تقنيات متعددة للوصول للتصميم النهائي المتقن وهي عملية بسيطة إلى حد كبير لا تستغرق سوى 15-20 دقيقة. يمكنك رؤية النتيجة النهائية بأسفل… هل أعجبتك؟ إذًا دعنا نبدأ!


http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/final.png

خطوة 1

- افتح الفوتوشوب وأنشئ ملف عمل جديد بالضغط على Ctrl + N حدد الطول والعرض كما تشاء ولكن تأكد من أن الرزليوشن 72 على الأقل
وأن color mode هو RGB 8 bit
ومن أمام Background contents اخترtransparent


http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/step1.png

خطوة 2

- والآن املأ اللاير الحالي بلون عن طريق الضغط على Shift + F5 لتفتح نافذة fill
- من القائمة المنسدلة اختر Color وانسخ القيمة 141d28 في المربع أمام العلامة # والتي من المفترض أن تلون اللاير بلون أزرق غامق لطيف


http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/step2.png

خطوة 3

والآن وحين نتحدث عن تصميم أي شيء غالبًا يجدر بنا استخدام “خطوط إرشادية” Guides دائمًا.. وذلك لنتأكد من محاذاة كل شيء بشكل جيد
لإضافة guide اذهب إلى قائم view > new guide ومن النافذة التي ستظهر اختر vertical وضع قيمة نصف العرض الذي حددته لملفك أيًا كان


http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/step3.png

خطوة 4

- اختر أداة rounded rectangle بالضغط على U ثم اختيار شكلها الموضح بالصورة لو لم يكن هو المفعل
- ارسم مستطيل في منتصف الصورة كما هو موضح


http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/step4.png


لقد اخترت للون المستطيل لون أرزق أفتح قليلاً من الخلفية وقيمته 17202b ولتقم بهذا يمكنك تغيير اللون الأمامي foreground color المستخدم قبل رسم المستطيل..
أو بالنقر المزدوج على اللاير من لوحة لايرز بعد رسمه بالفعل


http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/step4_2.png

خطوة 5

- سوف نغير في الشكل الأساسي للمستطيل عن طريق layer style ونذهب إليها عن طريق النقر المزدوج على مساحة فارغة على اللاير في لوحة اللايرز
- قم بإضافة shadow ثم اجعل قيمة spread value بـ 100 لإعطاء الزر مظهر ثلاثي الأبعاد
يمكنك التغيير في القيم الموجودة أمامك كما تشاء وراقب النتائج.. وإليك قيمي الخاصة كمرشد لك


http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/step5.png


التأثير التالي الذي سنضيفه هو inner shadow هذا كفيل بإعطاء الزر المزيد من اللمحة ثلاثية الأبعاد عن طريق إضافة إضاءة بأعلاه.. اتبع القيم الموضحة بالصورة


http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/step5_2.png


والآن أضف outer glow ليحيط بالزر بالقيم التالية:


http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/step5_3.png


والآن بإضافة gradient overlay يمكننا محاكاة شكل مقوس لسطح زر قابل للضغط


http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/step5_4.png


التأثير الأخير الذي سنضيفه هو إطار “stroke” مما سيعطي شكل أكثر تحديدًا بين الزر والظل
وسيكون بتدرج لوني بقيمتي 0d1b2a و 090e13 كما بالصورة


http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/step5_5.png

خطوة 6

الأمر يستحق دومًا تجربة ستايلز جديدة حيث يمكنك معها اكتشاف تأثيرات لطيفة جدًا.
إذا دققت النظر في الزر سوف تلاحظ أن الجزء السفلي من الظل يفتقر للتحديد كما أنه ضبابي إلى حد ما ولعلاج هذا سنقوم بإضافة إطار من تدرج لوني كالآتي:
- عليك أولا تغيير اللون الأمامي بدرجة قريبة من هذه #050607 وسنختار التدرج إلى الشفاف من أعلى اليسار في options bar، واختر الشكل دائري
- أضف لاير جديد
- اضغط على ctrl مع النقر على the shape thumbnail كما بالصورة لعمل selection لشكل الزر


http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/step6.png


- اختر الآن آداة gradient واختصارها G وقم بالسحب أسفل الشكل إلى الخارج كما هو موضح بالصورة


http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/step6_2.png


- مع الإبقاء على اختيار شكل الزر مفعل قم بالعودة لآداة marquee ثم اضغط سهم الكيبورد لأعلى مرة واحدة ثم اضغط delete
- اذهب الآن لآداة التحريك وقم بإنزال الإطار المتدرج -الذي صنعته توًا- إلى مكانه في أسفل الظل كما بالصورة


http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/step6_3.png

خطوة 7

- لتضيف مزيد من التحديد للزر انسخ الإطار وقم بتحريكه إلى أعلى الجزء السفلي من الزر
- اعكس ألوانه بالضغط على ctrl + I
- اختر من blending mode نوع overlay وقد تحتاج لنسخ اللاير بالضغط على ctrl+j لتحصل على نتيجة أكثر بريقًا.


http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/step7.png

خطوة 8

- قم الآن بعمل تدرج لوني لأعلى الزر مثل الخطوة رقم 6 ولكن اجعل اللون الأمامي أبيض
- يمكنك بالضغط على d أن تعيد اللون الأمامي والخلفي إلى الأسود والأبيض، وبالضغط على x تعكسهما ليصبح الأبيض في الأمام
- اسحب بآداة التدرج فوق الزر للخارج لتحصل على الشكل بالصورة
http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/step8.png

خطوة 9

- أضف كلمة ما.. أنا اخترت خط arial نوعه bold مقاس 14
- أضف ظل خفيف وها نحن قد انتهينا

http://d3pr5r64n04s3o.cloudfront.net/096_Create_A_Button/final.png

منقول مع الشكر لصاحب الترجمة

[azizsoft]

جزاكم الله خيرا :abc_022:

[عوض السوداني]

شـكــ وبارك الله فيك ـــرا لك:abc_022: ... لك مني أجمل تحية .

[أبو يوسف]

جزاك الله خير اخانا المصمم وبارك الله فيك

[abohmam]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[المصمم]

:abc4web_d:

[الحارث بن فيصل]

خالص الشكر والامتنان على ما بذلتموه من جهود مباركة