درس: تصميم زر ويب بتأثير aero vista

[ذوالجناح]

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

حياكم الله إخواني ومع دروس الفاتن المعشوق فوتوشوب نلتقي.
لتصميم زر ويب أنيق وذي ألوان متناسقة وخطوات سهلة وميسورة نفتح مساحة عمل جديدة ونملؤها باللون الأسودالفاتح 2a2a2a# ثم نختار أداة Rounded Rectangle Tool ونضبط خياراتها كما في الصورة:
http://img3.imageshack.us/img3/3303/0copy.gif

- نغير لون الواجهة في لوحة الألوان للأسود 000000# ثم نرسم مستطيلاً كما في الصورة:

http://img13.imageshack.us/img13/5606/1copyq.gif

- من قائمة: Layer > Layer Style> Blending Options نضبط الخيارات كما في الصور:
1- Outer Glow
http://img705.imageshack.us/img705/565/21copy.gif

2- Inner glow
http://img710.imageshack.us/img710/2180/22copy.gif

3- Gradient Overlay ودقق في قيم التدرج اللوني في أسفل الصورة:
http://img694.imageshack.us/img694/7467/23copy.gif

4- Stroke
http://img197.imageshack.us/img197/9408/25copyu.gif

بعد تطبيق تلك القيم يصبح الزر بهذا الشكل:

http://img52.imageshack.us/img52/1879/3copyp.gif

وبأداة Rectagular Marquee tool نرسم تحديداً مستطيلاً يمر حده الأسفل بمنتصف الزر كما في الصورة:

http://img12.imageshack.us/img12/6329/4copyy.gif

نقوم بإنشاء طبقة جديدة new layer بالضغط على مفاتيح الاختصار: Ctrl + Shift + N
بعد إنشاء الطبقة الجديدة نضغط على المفاتيح: Ctrl + Shift + Alt معاً وفي نفس الوقت ننقر بزر الفأرة على طبقة الزر (ستشاهدونها في قائمة الطبقات باسم Shape 1) والهدف من هذه الحركة أن نعيد ضبط حدود التحديد المستطيل: الأعلى والأيمن والأيسر لتنطبق على حدود الزر.

http://img682.imageshack.us/img682/7987/8copy.gif

يصبح الزر بهذه الصورة:

http://img138.imageshack.us/img138/9783/6copyr.gif

نملأ التحديد باللون الأبيض.

http://img6.imageshack.us/img6/8751/7copy.gif

نقوم بتخفيف شفافية طبقة اللون الأبيض كما يتضح من هه الصورة حتى نحصل على قيمة مرضية.

http://img46.imageshack.us/img46/3017/5copyw.gif

وهذه النتيجة النهائية للتصميم:

http://img62.imageshack.us/img62/9198/aeroglassvistabuttoncop.gif

انتهى الدرس. أسأل الله أن يكون فيه من الأفكار ما ينفع من يطالعه.
ولله الحمد أولاً وآخراً وهو حسبنا ونعم الوكيل.
وصلى الله على نبينا محمد وعلى آله وصحبه وسلم.

محبكم وأخوكم: ذوالجناح

[الدمشقي]

شــــ لك ــــكراً أخي الفاضل ذو الجناح

على هذا الدرس الجميل

وجزاك الله خيراً

[أبو يوسف]

بارك الله فيك أخي ذو الجناح


درس واضح ينقصني التطبيق ؛ إن شاء الله سأحاول

.

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

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

[mero]

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

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

[abohmam]

ماشاء الله أخى ذا الجناح

درس رائع وهذا تطبيق سريع على الدرس مع تغير بعض الألوان

http://www.abc4web.net/vb/uploaded/1_11268781042.jpg (http://www.abc4web.net/vb)

:abc_102: أى تعليق أو تعديل لاتتردد فى النصيحة

لك التحية والشكر

[ذوالجناح]

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


أى تعليق أو تعديل لاتتردد فى النصيحة


:abc_145:

[abohmam]

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

:abc_145:

حياك الله أخى ذو الجناح

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

لذلك نريد تفاعل أكثر من المحبين والمتابعين لأن هذا كله تمرين للبقاء على القمة :abc_051:
أنا عارف انكم الآن وصلتم للقمة :abc_145:
سوف نتابع هذا الدرس بكيفية الإستفادة من هذا الزر بتاثيرات CSS أو Java
لكن بعد مانرى تطبيق الأخوة ....

[ذوالجناح]

حياك الله أستاذي العزيز
والله أنا حطيت الصورة التعبيرية لأنك تحرجني ولا أدري ماذا أقول في تصميمك. فهل يعقل أن أعلق على تصاميمك وما أنا إلا مقلد لطريقتكم ونازل بمضاربكم للتعلم منكم :n2006102:


أنا عارف انكم الآن وصلتم للقمة


لم نصل للقمة بعد. ولكن للعلم: الوصول للقمة سهل، ولكن الصعب هو البقاء فيها. وهذه التطبيقات تشحذ الهمم بلاشك والشارح يستفيد منها قبل غيره وهذا مجرب.


سوف نتابع هذا الدرس بكيفية الإستفادة من هذا الزر بتاثيرات CSS أو Java
لكن بعد مانرى تطبيق الأخوة ....

جزاك الله خيراً ووفقك ويسر لك دروب الخير ياصاح.
ومنتظرين الوجبة الشهية التي نسأل الله أن يلهمنا الطريقة الصحيحة لالتهامهما :n200642:

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

حياك الله أخى ذو الجناح بإذن الله ستيتم التطبيق بعد اخذ قسط من النوم
وبإنتظار المزيد ياغالى
:abc_152: