طريقة تصميم زر زجاجي وتأثير Glossy

[abohmam]

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

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

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

نستكمل معا دروس الفوتوشوب المتقدمة

الدرس السابق : -/ طريقة تصميم أيقونة أو زر للموقع أو وسام مع هذا التأثر الرائع \- (http://www.abc4web.net/vb/showthread.php?t=700)


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

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

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

مستوى الشرح : متقدم

ننتبه :
دائما التظليل الأصفر الذى فى صور الشرح هو المقصود بالتعديل .

1 - أبدأ عمل جديد بمقاس 400x300 بيكسل والخلفية باللون الأبيض .

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

أضف طبقة جديدة ونسميها Button

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

- مازلنا فى طبقة Button ومن شريط الأدوات نختار أداة رسم المربع ذى الحواف المستديرة

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

- ونجعل قيمة دوران الحواف 7 بيكسل (radius = 7px)

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

- والآن نرسم المستطيل كما بالشكل الذى بالصورة

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

2 - صناعة الزر الأحمر

- نضغط بيمين الماوس على طبقة Button ونختار Blending Options

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

ونغير قيمة كل تأثير كما فى الصور التالية :

Drop Shadow

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

Inner Shadow

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

Bevel and Emboss

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

Gradiant Overlay

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

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

نستطيع أن نغير فى تعبئة اللون هنا وسوف نحصل على أشكال رائعة فيما بعد

- سوف تحصل على الشكل التالى بعد الضغط على OK

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

- قم بتحديد هذه الطبقة بالضغط عليها مع الضغط على Ctrl من لوحة المفاتيح .

3 - إضافة التأثير الزجاجي
- نقوم بإضافة طبقة جديدة ونسميها "Glass"

معلومة للمبتدئين : فائدة تحديد الطبقة Button قبل إنشاء الطبقة Glass هى أن الطبقة تأخذ نفس مساحة وتحديد الطبقة Button

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

- تأكد من أن تحديد طبقة Button مازل نشيطا وإذا لم يكن نشيطا ، إضغط على Ctrl من لوحة المفاتيح وبالماوس تضغط على عرض طبقة Button وسوف يتم تنشيط التحديد مرة ثانية.

- الآن نقوم بتحديد طبقة Glass وذلك بالضغط على مفتاح Alt من لوحة المفاتيح وبإستخدام أداة التحديد المستطيلي نرسم مستطيل على نصف الزر الأحمر تقريبا كما فى الشكل التالي

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

- وسوف نحصل على التحديد فى نصف هذه الطبقة وبإستخدام أداة تعبئة اللون نملئ التحديد باللون الأبيض FFFFFF#

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

- ونغير دقة الشفافية (opacity ) إلى 18%

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

وسوف يكون شكل التأثير الزجاجى بهذا الشكل

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

4 - تعبئة الشكل بالباترن http://www.abc4web.net/vb/imgcache/2844.abc4web (http://www.abc4web.net/)

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

سوف نقوم بإستخدام باترن خاص قمنا بصناعته مسبقا ويمكن تحميله من المرفقات :at:

وكان بهذا الشكل :

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

يمكن مراجعة الشرح من هنا “-/ طريقة إنشاء Pattern باترن خاص بك وكيفية إستخدامه \- (http://www.abc4web.net/vb/showthread.php?t=706) “.

- نقف على طبقة Button ونقوم بتحديدها بالضغط على مفتاح Ctrl والضغط على معاينة الطبقة

والأن نقوم بإضافة طبقة جديدة ونسميها Pattern وستكون بين طبقة Button وطبقة Glass

- ثم نذهب إلى Blending Options

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

- ونختار Pattern Overlay ونحدد الباترن الذى قمنا بتحميله من نافذة الإختيار وهو بإسم abc4web ثم نضغط على OK

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

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

- لاتنسي التأكد من تنشيط التحديد للطبقة Pattern ثم نقوم بتغير Opacity إلى 5%

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

5 - إضافة الكتابة
سوف نستخدم خط أنبوبي بلون أبيض FFFFFF# تابع الإعدادات التى فى الصورة

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

ونضيف ظل للكتابة عن طريق Blending Options بنفس القيمة التى فى الصورة

Drop Shadow

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

وفى النهاية سوف نحصل على هذا الشكل الجميل

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

تطبيقات مع التغير فى تأثير تدريج اللون Gradiant Overlay الذى أشرت إليه فى الخطوة الثانية

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

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

وهذا مثال على تطبيق التأثير على هيدر لموقع أو منتدى أو واجهة إسطوانة

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

أتمنى أن يعجبك التطبيق قبل الدرس :abc_025:

وإلى أن ألقاكم فى شرح جديد وتأثير أجدد

أترككم فى رعاية الله وحفظه

ولاتنسونا من صالح دعائكم
أبو هــــMــــام
.

[المصمم]

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

رائع أخى والله

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

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

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

رائع
شرح اكتر من رائع

بارك الله فيك

[abohmam]

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

رائع أخى والله

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

حياك الله أخى فى انتظار التطبيق

موفق بإذن الله ... لك مني أجمل تحية .

[abohmam]

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

رائع
شرح اكتر من رائع

بارك الله فيك

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

فى انتظار التطبيق ان شاء الله سفيرة

موفقة بإذن الله ... لك مني أجمل تحية .

[الدمشقي]

درس حلو كتير
يسلموا إيديك أخي أبو همام على المجهود الحلو في إعداده
وجزاك الله خير الجزاء

[abohmam]

درس حلو كتير
يسلموا إيديك أخي أبو همام على المجهود الحلو في إعداده
وجزاك الله خير الجزاء


حياك الله أخى الدمشقي

إن شاء الله تستفيد من الشرح ويتم التطبيق ووضع لمسات الإبداع

بالتوفيق ان شاء الله

[التائب]

شكراً لك اخي الكريم ، بارك الله فيك

[أخت المؤمنين]

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

[abohmam]

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

بارك الله فيك أختنا أخت المؤمنين

أشكر لك روحك الطيبة وتواصلك ودعوتك ايضا إن شاء الله تكون مباركة

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

[abohmam]

شكراً لك اخي الكريم ، بارك الله فيك

موفق بإذن الله ... لك مني أجمل تحية .

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

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

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

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

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

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

تحياتي

.

[قرناس]

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

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

جزاك الله خيرا أستاذنا الفاضل على الشرح الرائع
تطبيقى

http://img8.imageshack.us/img8/9389/31450401.png

[المحترف الذهبي]

الله يبارك فيك اخي ابو همام
اسأل الله لك التوفيق
:abc_152:

[أبو الوليد]

بارك المولى فيك أخي أبا همام :abc_152: درس ماتع

http://www.abc4web.net/uploaded/8833_01309813462.png (http://www.abc4web.net/vb)

[قيصرر]

مشكوووووووووووووووووووووو ووووووووووووووووووووووووو ووووووور

[ااالسفير]

:abc_080::abc_080:

[غريب يا فؤادي]

جزااااااك الله عالي الجنااااااان

[abohmam]

جزاكم الله خيرا جميعا إخوانى

أشكر لكم مروركم العطر وتواصلكم ودعائكم

بالتوفيق

[أبو فارس]

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

[أبوربيع]

مشكوووووووووووووووووووووو ور

[برنس اليالى]

شرح قيم احلى تقييم

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

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

[أبو يوسف]

جزاك الله خيرا أخي ابو همام :abc_152: وبارك الله فيك

[abohmam]

جزاكم الله خيرا إخوانى جميعا

أشكر لكم هذا المرور العطر والتواصل الجاد

بالتوفيق ان شاء الله

[محمد السيد عطية]

شكراً لك اخي الكريم ، بارك الله فيك

[abohmam]

جزاكم الله خيرا إخوانى

اشكر لكم مروركم العطر وتواصلكم الجاد

بالتوفيق

[أيمن بن عبد الله]

جاري التجربة

[abohmam]

حياك الله أخى ايمن

موفق بإذن الله ... لك مني أجمل تحية .

[أبو صخر]

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

[رشوان]

السلام عليكم
وجزاك الله خير الجزاء