تصميم أزرار شبه شفافة

[ساري بريدة]

<p align="center"><b><font color="#9311A2" size="4"></a>
كيف حااااااااالكم ... ان شاء الله بخير

سنقوم اليوم بتصميم أزرار شبه شفافة، و عليها تأثير

http://www.javagirl.ws/lessons/programs/photoshop/button/final.jpg

طبعاً علينا ملاحظة حجم الأزرار ليكون متناسباً مع تصميم الصفحة

ملاحظه
نظراً لأن عملنا سيكون على الفوتوشوب، فصبركم معانا شوي حتى ينتهي تحميل جميع الصور في الصفحة.

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

http://www.javagirl.ws/lessons/programs/photoshop/button/gradient.gif

و اسحب الماوس بشكل رأسي سينتج لديك هذا الشكل

http://www.javagirl.ws/lessons/programs/photoshop/button/step01.gif

حافظ على الاختيار قم بإنشاء شفيفة جديدة، و املأ بالدرجة الفاتحة من اللون و سمّ الشفيفة (bottom) و حافظ على الإختيار و على شفيفة جديدة اسمها (light) قم باستخدام Alt+ أداة الإختيار البيضاوية بحذف جزء من الإختيار بحيث يبقى قوس في الأعلى، قم أثناء اختيارك لأداة التحديد بتحريكه للأسفل قليلاً ثم املأه باللون الأبيض، سيكون لديك هذا الشكل:

http://www.javagirl.ws/lessons/programs/photoshop/button/step02.gif

الآن قم بترتيب الطبقات من الأسفل للأعلى هكذا: bottom ثم body ثم light، بهذا الشكل:

http://www.javagirl.ws/lessons/programs/photoshop/button/layers.gif

لقد قمت بتجهيز ما نحتاجه لعمل الزر و الآن لنبدأ في الخطوة الثانية.

قم بإخفاء جميع الشفائف ماعدا شفيفة الـ body. قم بعمل تأثير Emboss عليها، انقر مرتين بالماوس على الشفيفة، ثم ضع علامة صح بجانب bevel and emboss بالمقادير التالية:

http://www.javagirl.ws/lessons/programs/photoshop/button/bevel.gif

اجعل الشفافية لهذه الشفيفة 80%. ستكون بهذا الشكل:

http://www.javagirl.ws/lessons/programs/photoshop/button/step03.jpg

قم بإخفائها لتسهيل العمل

أظهر الشفيفة bottom. و قم بقطع المساحة الأفقية العلوية منها، ثم باستخدام الـ free transform صغّرها أفقياً من اليمين ومن اليسار. و لكن لا تقم برفعها للأعلى. ستكون بهذا الشكل:

http://www.javagirl.ws/lessons/programs/photoshop/button/step03.gif

الآن قم من قائمة filters باختيار blur ثم motion blur بالمقادير التالية:

http://www.javagirl.ws/lessons/programs/photoshop/button/motionButtom.gif

ثم قم باختيار Gaussian blur من نفس القائمة، بالمقادير التالية:

http://www.javagirl.ws/lessons/programs/photoshop/button/gButtom.gif

ستكون الشفيفة بهذا الشكل:

http://www.javagirl.ws/lessons/programs/photoshop/button/step04.gif

الآن قم بإظهار جميع الشفائف :rolleyes:

في الشفيفة light، قم بعمل باختيار فلتر Gaussian blur من filters-->blur، بالمقادير التالية :

http://www.javagirl.ws/lessons/programs/photoshop/button/gLight.gif

سيصبح لديك الزر بهذا الشكل

http://www.javagirl.ws/lessons/programs/photoshop/button/step05.jpg

هذا الزر يتمتع بشفافية بشكل متناسق، و حتى تعرف تأثيره الجميل، قم بإنشاء طبقة و ضعها أسفل جميع الطبقات. ثم قم بملئها بالpattern المناسب، كما في الشكل:

http://www.javagirl.ws/lessons/programs/photoshop/button/final.jpg

http://www.javagirl.ws/lessons/programs/photoshop/button/red.jpg

http://www.javagirl.ws/lessons/programs/photoshop/button/fiveSmall.jpg

-----------------------------------------------

ومن خلال هذي الطريقة ... تقدر تصمم تروسيه لموضوع أو تذييل بالشكل اللي انت تريد ... فقط غير الفكرة

-----------------------------------------------

وهذا موقع ... ممتاز... حمل البرنامج الموجود فيه ... يقوم بصنع أزرار بالشكل اللي انت تريد

http://fileforum.betanews.com/detail.php3?fid=1014152276

تحياااتي

[مرابط]

جزاك الله خير

هذا اللي نبي دروس × دروس

لنحصل على مزيد من المبدعين

بارك الله فيك