المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : فوتوشوب - أزرار شبه شفافة

JavaGirl
4/4/2002, 17:07
<font face=Tahoma size=2></b>السلام عليكم و رحمة الله وبركاته..

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

<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/final.jpg" width="200" height="120">

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

<font color="#800000"><u>ملاحظة</u>:</font>
نظراً لأن عملنا سيكون على الفوتوشوب، فصبركم معانا شوي حتى ينتهي تحميل جميع الصور في الصفحة، و اعذرونا.
------------------------------------
<font color="#FF0000">الخطوة الأولى:</font>
------------------------------------

افتح الفوتوشوب، و أنشئ ملفاً جديداً بحجم مناسب و بخلفية بيضاء. و في شفيفة جديدة (و لنطلق عليها اسم body) وباستخدام أداة الإختيار البيضاوية، حدد مساحة الزر المناسبة، ثم اختر لوناً مناسباً، و لون مقارب له للخلفية ثم باستخدام أداة الGradient :
<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/gradient.gif" width="198" height="52">

و اسحب الماوس بشكل رأسي سينتج لديك هذا الشكل:
<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/step01.gif" width="186" height="118">

حافظ على الاختيار قم بإنشاء شفيفة جديدة، و املأ بالدرجة الفاتحة من اللون و سمّ الشفيفة (bottom) و حافظ على الإختيار و على شفيفة جديدة اسمها (light) قم باستخدام Alt+ أداة الإختيار البيضاوية بحذف جزء من الإختيار بحيث يبقى قوس في الأعلى، قم أثناء اختيارك لأداة التحديد بتحريكه للأسفل قليلاً ثم املأه باللون الأبيض، سيكون لديك هذا الشكل:
<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/step02.gif" width="196" height="114">

الآن قم بترتيب الطبقات من الأسفل للأعلى هكذا: bottom ثم body ثم light، بهذا الشكل:
<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/layers.gif" width="151" height="168">

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

------------------------------------
<font color="#FF0000">الخطوة الثانية:</font>
------------------------------------
قم بإخفاء جميع الشفائف ماعدا شفيفة الـ body. قم بعمل تأثير Emboss عليها، انقر مرتين بالماوس على الشفيفة، ثم ضع علامة صح بجانب bevel and emboss بالمقادير التالية:
<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/bevel.gif" width="240" height="347">

اجعل الشفافية لهذه الشفيفة 80%. ستكون بهذا الشكل:
<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/step03.jpg" width="190" height="114">

قم بإخفائها لتسهيل العمل.
-- يتبع --
JavaGirl
4/4/2002, 17:08
<font face=Tahoma size=2></b>------------------------------------
<font color="#FF0000">الخطوة الثالثة:</font>
------------------------------------
أظهر الشفيفة bottom. و قم بقطع المساحة الأفقية العلوية منها، ثم باستخدام الـ free transform صغّرها أفقياً&nbsp; من اليمين ومن اليسار. و لكن لا تقم برفعها للأعلى. ستكون بهذا الشكل:
<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/step03.gif" width="196" height="116">

الآن قم من قائمة filters باختيار blur ثم motion blur بالمقادير التالية:
<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/motionButtom.gif" width="188" height="99">

ثم قم باختيار Gaussian blur من نفس القائمة، بالمقادير التالية:
<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/gButtom.gif" width="189" height="57">

ستكون الشفيفة بهذا الشكل:
<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/step04.gif" width="185" height="111">

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

------------------------------------
<font color="#FF0000">الخطوة الرابعة:</font>
------------------------------------
في الشفيفة light، قم بعمل باختيار فلتر Gaussian blur من filters--&gt;blur، بالمقادير
التالية:
<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/gLight.gif" width="186" height="55">

سيصبح لديك الزر بهذا الشكل:
<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/step05.jpg" width="196" height="116">

هذا الزر يتمتع بشفافية بشكل متناسق، و حتى تعرف تأثيره الجميل، قم بإنشاء طبقة و ضعها أسفل جميع الطبقات. ثم قم بملئها بالpattern المناسب، كما في الشكل:
<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/final.jpg" width="200" height="120">
-- يتبع --
JavaGirl
4/4/2002, 17:09
<font face=Tahoma size=2></b>------------------------------------
<font color="#FF0000">حيل و أفكار:</font>
------------------------------------
<ul><li>يمكنك إعطاء اللمعة حيوية أكثر وواقعة بالتحكم في درجة شفافيتها، أو بعمل تأثير فلتر Blur أكثر من مرة.<li>يمكنك أيضاً عمل إطار للزر باللون الغامق في طبقة جديدة أسفل جميع طبقات الزر بالحجم المناسب، و تجعله يتدرّج من اللون الغامق في الخارج إلى الشفافية في الداخل، هكذا:
<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/border.jpg" width="200" height="120"><br><li>يمكنك إنشاء نسخة أخرى من نفس الزر و لكن أقل شفافية، و ذلك لكي تستخدمها إذا أردت استخدام سيكربت <a href="http://www.javagirl.ws/lessons/web/scripts/changeImages/lesson.html"> تغيير الصورة عند مرور الفأرة عليها</a> ;-)</ul>
------------------------------------
<font color="#FF0000">أمثلة:</font>
------------------------------------
يمكنك عمل أزرار من أشكال مختلفة، و بتأثيرات طبقات متفرّقة. كما في الأشكال التالية:
<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/red.jpg" width="199" height="190"> أو هذا <img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/blue.jpg" width="235" height="161">

لنأخذ هذا المثال أيضاً:
<img border=1 src=http://www.javagirl.ws/lessons/programs/photoshop/button/fiveSmall.jpg>

وهذا:
<img border="1" src="http://www.javagirl.ws/lessons/programs/photoshop/button/cyan.jpg" width="270" height="122">
الشكل السابق، حصلت عليه من دمج دائرتين في الأطراف و مستطيل. ثم عملت الزر بنفس طريقة الدرس و لكني في النهاية قمتُ بإضافة طبقة رابعة أسفل جميع الطبقات، و ملأتها بالدرجة الداكنة من اللون،و أعطيتها شفافية مناسبة.

أتمنى أن يكون الدرس قد أعجبكم.

تحياتي
JavaGirl
ابوفهد
4/4/2002, 19:20
صراحه انا ما افهم في الفوتوشوب

لكن دروسك هذه تخلي الواحد يشتاق أن يتعلمها

تحياتي لعزيمتك وهمتك:)

وألف شكر لك على ماتقديمنه

تحياتي :p
محمد
4/4/2002, 23:37
ما شالله

الله يعطيك العافيه

والله ما قصرتي
كفيتي ووفيتي

وشرح محترم ومرتب

مو زي شرحي تقول شخابيط بزر :(

الله يخلي هالشرح في موازين اعمالك .......قواي امين

وعلشانك ما راح احط توقيعي علشان الصور تطلع بسرعه للاعضاء الباقين

يعني افهموها لاتحطون تواقيعكم يلي تواقيعم كبيره
JavaGirl
5/4/2002, 01:00
السلام عليكم و رحمة الله و بركاته..

أبو فهد.. :D مشكووووور على الدعم و الله و جزاك الله خير.. ما تقصّر..

حمّووووودي.. :D والله يا أخي دروسك مرتبة و حلوة، أنا وايد تعجبني ما عليك من كلام العذّال، و إذا تبا مساعدة فيها والله من عيوني وأنا أختك.. و شكراً عشان ما حطيت التوقيع.. و ياليت الباقين بعد ما يحطون تواقيعهم في الردود على ها الموضوع :)

جزاكم الله خير..

تحياتي
JG:kany:
عاصوف
6/4/2002, 01:10
الف شكر على هالدرس الرائع والشرح الأروع:)


كلنا في إنتظار دروسك القادمة:)
JavaGirl
7/4/2002, 22:28
السلام عليكم و رحمة الله و بركاته..

هلا أخي عاصوف :D أشكر لك مرورك الرقيق، و جزاك الله خير على الكلام الطيب..

و إن شاء الله ما يخيب ظنكم :)

تحياتي
JG