تصميم أزرار للواجهات والمواقع

[أبو الوليد]

http://www.abc4web.net/upload/images2/7vjjrj08pg.png (http://www.abc4web.net/upload/)


http://www.abc4web.net/upload/images2/0pwtohaicn.gif (http://www.abc4web.net/upload/)


1. بسم الله نفتح مساحة عمل 400×400 بكسلبأي لون ثم نضيف طبقة جديدة و نختار أداة Elliptical Marquee Tool بقياس متساوي 120×120 بكسل ونرسم وننشىء الشكل التالي

http://www.abc4web.net/upload/images2/w4afflxjiz.jpg (http://www.abc4web.net/upload/)

2. نجعل اللون الأمامي 86AC00 # واللون الخلفي 036800 # ثم نختار أداة التدرج اللوني ونسحب من أعلى إلى أسفل

http://www.abc4web.net/upload/images2/lwdknb4hxa.jpg (http://www.abc4web.net/upload/)

3. نفتح خيارات الدمج Blending Options ونطبق التأثيرات التالية

http://www.abc4web.net/upload/images2/hzxdfohd9w.jpg (http://www.abc4web.net/upload/)

4. الناتج

http://www.abc4web.net/upload/images2/sybdj1wgtt.jpg (http://www.abc4web.net/upload/)

5. ننشىء تحديد حول الزر بالضغط على طبقة الزر وزر Ctrl من لوحة المفاتيح ثم نطبق الأمر ثم نضيف طبقة جديدة ونسميها light

http://www.abc4web.net/upload/images2/3wvbyygyzn.jpg (http://www.abc4web.net/upload/)

6. نطبق الأمر Select > Modify > Contract بقيمة 2 بكسل

http://www.abc4web.net/upload/images2/nidywknpnb.jpg (http://www.abc4web.net/upload/)

7. نختار أداة Elliptical Marquee Tool مع تفعيل خيار Subtract From Selection ونرسم خارج التحديد كمايلي

http://www.abc4web.net/upload/images2/sljxgb1efm.jpg (http://www.abc4web.net/upload/)

8. على طبقة light نختار أداة التدرج اللوني بلون أبيض إلى شفاف ونسحب من أعلى إلى أسفل

http://www.abc4web.net/upload/images2/d01cegyswn.jpg (http://www.abc4web.net/upload/)

9. نغير نمط الطبقة إلى Soft Light ونقلل نسبة الشفافية إلى 80 %

http://www.abc4web.net/upload/images2/oclbgr4yav.jpg (http://www.abc4web.net/upload/)

10. نضيف طبقة جديدة ونختار أداة Custom Shape Tool ونختار شكل السهم ونرسم وسط الزر

http://www.abc4web.net/upload/images2/crftmllwe3.jpg (http://www.abc4web.net/upload/)

11. نطبق التأثير التالي

http://www.abc4web.net/upload/images2/5zxnxyyeb3.jpg (http://www.abc4web.net/upload/)

12. الناتج

http://www.abc4web.net/upload/images2/bifhwmjbmc.jpg (http://www.abc4web.net/upload/)

http://www.abc4web.net/upload/images2/0pwtohaicn.gif (http://www.abc4web.net/upload/)


لا تنسونا من دعوة صالحة

[abohmam]

درس رائع أخى ابا الوليد

:abc_022:

جزاك الله خيرا وبارك فيك المولى

[أبو الوليد]

درس رائع أخى ابا الوليد

:abc_022:

جزاك الله خيرا وبارك فيك المولى


بوركت أخي أبا همام :abc_022: شكرا لتواصلك وتشجيعك الدائم

[البغرامي]

ما شاء الله روعة*روعة ،، :abc_050:
بوركت على المجهودات المتواصـلة وعلى الشرح الموضوعـ باحترافية :abc_152:
جاري التطبيـق ...

[أبو الوليد]

ما شاء الله روعة*روعة ،، :abc_050:
بوركت على المجهودات المتواصـلة وعلى الشرح الموضوعـ باحترافية :abc_152:
جاري التطبيـق ...


مرحبا بك يا أستاذ :abc_152: في انتظار التطبيق:abc_145:

[البغرامي]

ياربـي يعجبك

http://abc4web.net/vb/attachment.php?attachmentid=1471&stc=1&d=1180384325

والله يجازيـك بالـف خير

[أبو الوليد]

ياربـي يعجبك

http://abc4web.net/vb/attachment.php?attachmentid=1471&stc=1&d=1180384325

والله يجازيـك بالـف خير


مشكور يا طيب :abc_152: لكن قيمة outer glow كبيرة وأثرت على التصميم

[البغرامي]

مشكور يا طيب :abc_152: لكن قيمة outer glow كبيرة وأثرت على التصميم

ههه انا لـم ارى الدرس اخـي ابا الوليد ،،
رايت فقط النتيجة واردت محاكاتها ،،
الدرس ثقيل بعض الشئ ،، ربما من سرعة النت عندي ،،
بوركت

[أبو الوليد]

ههه انا لـم ارى الدرس اخـي ابا الوليد ،،
رايت فقط النتيجة واردت محاكاتها ،،
الدرس ثقيل بعض الشئ ،، ربما من سرعة النت عندي ،،
بوركت


سلمت يمينك يا طيب :abc_152: حياك الباري وزادك من فضله

[جوهره بحجابي]

راااااااااااااااااااااااا ااائع
يسلموووو استااااذي

وهذا تطبيقي :abc_139:

http://king-jobs.com/upload//uploads/images/domain-8897badd05.gif

:abc_152:

[أبو الوليد]

راااااااااااااااااااااااا ااائع
يسلموووو استااااذي

وهذا تطبيقي :abc_139:

http://king-jobs.com/upload//uploads/images/domain-8897badd05.gif

:abc_152:

مشكورة يا فاضلة :abc_152: تطبيق مميز ..نفع المولى بك

[أبو يوسف]

جزاك الله خيرا اخي أبو ألوليد وبارك الله فيك

وما شاء الله روعه وإتقان

[أبو الوليد]

جزاك الله خيرا اخي أبو ألوليد وبارك الله فيك

وما شاء الله روعه وإتقان


مرورك أروع يا طيب :abc_152: سلمت من كل شر

[أبو صخر]

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

[انثى الرماد]

جميل جداً
سأعمل على تطبيقهن ان شاء الله
بارك الله فيك

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

جزاااااااااااك الله كل خير .. درس قمة في الرووووعه

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

رووووووعه بارك الله فيك