-/ تصميم خلفية للتوقيع أو بانر للموقع بتأثير Glossy \-

[abohmam]

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

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

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

حياكم الله جميعا إخواني

بعد أن شرحنا التأثير الزجاجي فى مشاركات سابقة

نشرح اليوم نفس التأثير ولكن بطريقة أخرى سوف أعرض لكم نموذج لما يمكن لك تصميمه بعد الإستفادة من هذا الدرس إن شاء الله تعالى

http://www.abc4web.net/vb/imgcache/2966.abc4web (http://www.abc4web.net/vb/)


الأدوات والمصطلحات :
1- نسخة فوتوشوب (Photoshop (v7- CS - CS2 -CS3 - CS4

2- Elliptical Marquee Tool
http://www.abc4web.net/vb/imgcache/2994.abc4web

3- Rounded-Rectangle-Tool
http://www.abc4web.net/vb/imgcache/2995.abc4web (http://www.abc4web.net/vb/)

4- Gradient Tool
http://www.abc4web.net/vb/imgcache/2996.abc4web
..

خيرا ندخل فى الشرح مباشرة ان شاء الله

فى هذا الشرح سوف نتعلم كيف نصمم خلفية جلوسي المشهورة ، وسوف تجدونها سهلة وبسيطة وايضا بداية لتعلم هذا التأثير الرائع المعروف بإسم Glossy .

سوف نتعلم فى هذا الشرح ايضا بعض مهارات التحديد الذكية !!!

نبدا على بركة الله شرح الخطوات :

نقوم بإنشاء عمل جديد بمقاس 400x250 بيكسل مع خلفية باللون الأبيض
- نختار أداة رسم المستطيل ذى الحواف الدائرية (Rounded-Rectangle-Tool) ونحدد اللون العلوى أسود ثم نرسم مستطيل بمساحة العمل بهذا الشكل .

http://www.abc4web.net/vb/imgcache/2967.abc4web (http://www.abc4web.net/upload/)

2- الآن نختار أداة التحديد الدائرى (Elliptical Marquee Tool) ونقوم بعمل تحديد كما فى هذا الشكر تقريبا

http://www.abc4web.net/vb/imgcache/2968.abc4web (http://www.abc4web.net/upload/)

3- نعكس التحديد من أسفل إلى أعلى وذلك بالظغط على Ctrl + Shift + l أو من قائمة Select سوف نرى أن التحديد أصبح بهذا الشكل .

http://www.abc4web.net/vb/imgcache/2970.abc4web (http://www.abc4web.net/upload/)

4- الآن سوف نستخدم أفضل إختصارات الفوتوشوب !!! يجب الإنتباه
نحن نريد تحديد المساحة التى بين التحديد الحالى وزوايا المستطيل الذى رسمناه من قبل
إضغط من لوحة المفاتيح على Ctrl + Shift + Alt ثم إضغط على أيقونة عرض طبقة شكل المستطيع الأسود سوف نرى أن التحديداصبح بهذا الشكل :

http://www.abc4web.net/vb/imgcache/2969.abc4web (http://www.abc4web.net/upload/)

5- نضغط على Ctrl + Shift + N كى نضيف طبقة جديدة وفى هذه الطبقة سوف نحدد مكان التأثير الزجاجي ، ونقوم بالتأثير الزجاجى فى هذه المساحة فقط
اذهب إلى أداة التدريج (Gradient Tool) واجعل اللون العلوى ابيض ثم اسحب الماوس من اسفل إلى أعلى:

http://www.abc4web.net/vb/imgcache/2971.abc4web (http://www.abc4web.net/upload/)

6- سوف تحصل على مايشابه هذا الشكل :

http://www.abc4web.net/vb/imgcache/2972.abc4web (http://www.abc4web.net/upload/)

7- نضغط على Ctrl + D كى نزيل التحديد

http://www.abc4web.net/vb/imgcache/2973.abc4web (http://www.abc4web.net/upload/)

8- الآن نقوم بتغير قيمة الشفافية Opacityلهذه الطبقة إلى 20%

http://www.abc4web.net/vb/imgcache/2974.abc4web (http://www.abc4web.net/upload/)

9- تقوم بكتابة بعض العبارات التى نريدها باللون الأبيض

http://www.abc4web.net/vb/imgcache/2975.abc4web (http://www.abc4web.net/upload/)

10- ولكى يكون الشكل جميلا نقوم بعمل إنعكاس للكتابة وهذا سيتم كما يلي :
نقوم بمضاعفة طبقة الكتابة ثم نحركها لأسفل
نقف على هذه الطبقة و للتحديد الحر من قائمة Edit نختار Free Transform أو ( نضغط على Ctrl + T)
بعد ذلك نقوم بعكس رؤية الطبقة وذلك وذلك من نفس القائمة بالضغط على Flip Vertical

http://www.abc4web.net/vb/imgcache/2976.abc4web (http://www.abc4web.net/upload/)

وسوف نحصل على الشكل التالي

http://www.abc4web.net/vb/imgcache/2977.abc4web (http://www.abc4web.net/upload/)

11- نحرك الطبقة لأعلى وذلك بإستخدام أسهم لوحة المفاتيح أو بالماوس حتى نصل الى هذا الشكل .

http://www.abc4web.net/vb/imgcache/2978.abc4web (http://www.abc4web.net/upload/)

12- بعد ذلك نضغط على Enter للموافقة على هذه التغيرات التى قمنا بها فى هذه الطبقة
الآن نجعل درجة الشفافية (Opacity) لهذه الطبقة 20% مثل الخطوة رقم 8
وسوف نحصل على هذا الشكل .

http://www.abc4web.net/vb/imgcache/2979.abc4web (http://www.abc4web.net/upload/)

13- الآن نذهب إلى قائمة الطبقات ( Layer > Layer Style > Blending Options )
ونختار Gradient Overlay نضع هذه الإعدادات

http://www.abc4web.net/vb/imgcache/2980.abc4web (http://www.abc4web.net/upload/)

14- نضغط على OK لنحصل على الشكل النهائي

http://www.abc4web.net/vb/imgcache/2981.abc4web (http://www.abc4web.net/upload/)

15- نستطيع إضافة shadow لطبقة المستطيل الدائرى بقيمة ( Distance=0, Size=5 )

ليكون الشكل النهائي بهذه الطريقة

http://www.abc4web.net/vb/imgcache/2982.abc4web (http://www.abc4web.net/vb/)

تستطيع تغير اللون مباشرة من خيارات طبقة الخلفية إذا اردت مشاهدة العمل بأكثر من لون
وذلك بالذهاب إلى قائمة الطبقات ( Layer > Layer Style > Blending Options )
ونختار Color Overlay ونختار اللون المناسب لنا

http://www.abc4web.net/vb/imgcache/2983.abc4web (http://www.abc4web.net/upload/)

وسوف تشاهد اللون مباشرة للمعاينة أو الإختيار المناسب

http://www.abc4web.net/vb/imgcache/2984.abc4web (http://www.abc4web.net/vb/)

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

وإلى أن ألتقى معكم فى شرح جديد ودرس أجدد أترككم فى رعاية الله وحفظه

ولاتنسونا من صالح دعائكم
.
مـ(أجمل تحية لكم جميعا)ـع
أبو هــــMــــام
.

[AlmajedGroup]

ماشاء الله عليك أستاذنا إبداع يتلو الإبداع
جزاك الله خيراً على هذا الشرح الرائع والمتعوب عليه
جعله الله فى ميزان حسناتك يوم أن تلقاه
تقبل الله منا ومنكم صالح الأعمال
وفى إنتظار المزيد من هذه المشاركات الرائعة
تقبل تحياتى
المجد جروب

[الدمشقي]

درس حلو كتير ( ضربة معلم والله )

يسلموا إيديك ياغالي
ربي يزيدك كمان وكمان

[abohmam]

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

بارك الله فيكم أخى ماهر وأخى الدمشقي

دائما فى تواصل دائم

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

[تيموو]

جزاك الله فعلا انا استفد كتير اوى من الدرس الفوق الرائع دا بجد تسلم اديد

[سفيرة الاسلام]

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

هذا تطبيقى على الدرس

http://up.arab-x.com/uploads/images/arab-x_com_5d7d85c516.gif (http://www.arab-x.com/)

[محمود عفيفى]

جزاك الله خيرا
شرح رائع

[سالي الفلسطينية]

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

شـكــ وبارك الله فيك ـــرا لك .

.. لك مني أجمل تحية .

تحياتي

.

[قرناس]

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