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

[أبو الوليد]

http://www.abc4web.net/vb/imgcache2011/9807.abc4web.png (http://img.farfosh.com/)

http://www.abc4web.net/vb/imgcache2011/9808.abc4web.png (http://img.farfosh.com/)


1.بسم الله ، نفتح عمل جديد مقاس 800×600 بيكسل ونملأ الخلفية باللون الأبيض

2.نختار أداة Rectangle Marquee Tool ونرسم تحديد في الجانب الأيسر من الخلفية ثم نملأه باللون 78b000 #

http://www.abc4web.net/vb/imgcache2011/9812.abc4web.png (http://img.farfosh.com/)

3.نختار أداة Rounded Rectangle Tool وليكن نصف القطر 15 بيكسل ، ثم نرسم الزر

http://www.abc4web.net/vb/imgcache2011/9813.abc4web.png (http://img.farfosh.com/)

4.نذهب إلى قائمة Blending Options ونطبق التأثيرات الآتية على الزر

Drop Shadow
Inner Shadow
Outer Glow
Inner Glow
Bevel and Emboss
Gradient Overlay
Satin
Stroke

http://www.abc4web.net/vb/imgcache2011/9814.abc4web.png (http://img.farfosh.com/)

http://www.abc4web.net/vb/imgcache2011/9815.abc4web.png (http://img.farfosh.com/)

http://www.abc4web.net/vb/imgcache2011/9816.abc4web.png (http://img.farfosh.com/)

http://www.abc4web.net/vb/imgcache2011/9817.abc4web.png (http://img.farfosh.com/)

http://www.abc4web.net/vb/imgcache2011/9818.abc4web.png (http://img.farfosh.com/)

http://www.abc4web.net/vb/imgcache2011/9819.abc4web.png (http://img.farfosh.com/)

http://www.abc4web.net/vb/imgcache2011/9820.abc4web.png (http://img.farfosh.com/)

http://www.abc4web.net/vb/imgcache2011/9821.abc4web.png (http://img.farfosh.com/)

5.نضاعف لير الزر إلى 5 ليرات وذلك بالضغط على Ctrl+j ثم نضع كل زر في مكانه كالآتي

http://www.abc4web.net/vb/imgcache2011/9822.abc4web.png (http://img.farfosh.com/)

6.خطوة مهمة : نعدل على تأثيرن فقط في كل زر مع ترك التأثيرات الأخرى كما هي ، وسيكون العمل على

Drop Shadow
Gradient Overlay

بالنسبة للزر الثاني نغير اللون إلى fe6a27 #

والتدرج f36d01# .................. #ffffff

ـــــــــــــــــــــــــ ـــــــــــــــــــــــــ ـــ

الزر الثالث نغير اللون إلى d2a403 #

والتدرج c8b801 # ............. #ffffff

ـــــــــــــــــــــــــ ـــــــــــــــــــــــــ ــ

الزر الرابع نغير اللون إلى 33cc3e #

والتدرج 01c50e #................ #ffffff

ـــــــــــــــــــــــــ ـــــــــــــــــــــــــ ـ

الزر الخامس نغير اللون إلى 3350cc #

والتدرج إلى 1e40d3 #..............#ffffff

ـــــــــــــــــــــــــ ــــــــــــــــــــــ

الزر السادس نغير اللون إلى 9b24ff #

والتدرج إلى 8b01bf #.............#ffffff

7.نحصل على النتيجة التالية

http://www.abc4web.net/vb/imgcache2011/9823.abc4web.png (http://img.farfosh.com/)

8.نضيف نصوص الخصائص إلى كل زر وذلك بحسب الذوق ، وتطبيقي كالآتي

http://www.abc4web.net/vb/imgcache2011/9824.abc4web.jpg (http://img.farfosh.com/)

http://www.abc4web.net/vb/imgcache2011/9825.abc4web.png (http://img.farfosh.com/)

والله الموفق إلى كل خير ، لا تنسونا من دعوة صالحة

[كينج نت]

سلمت أناملك أخي أبو الوليد :abc_152: على الدرس المميز تطبيقي المتواضع :abc_145:

http://img529.imageshack.us/img529/3361/21232330.png

[المغربي الجديد]

جزاك الله كل خير
وبارك الله بك وفيك الى يوم الدين
درس ولا ايسر منه مفهوم جدا جدا
وكما يقال ليس كل من يعرف شيئا يعرف كيفية تبليغه للغير
وانت اخي الغالي عندك معرفة بالشيء وطريقة تبليغ و تعليم الشيء
ولكن سؤال لو سمحت
كيف ندخل الكتابة في الزر؟

http://www.abc4web.net/vb/showthread.php?p=118467&posted=1#post118467

http://img.farfosh.com/uploads/farfosh_12923598244.jpg
جعل الله عملك في ميزان حسناتك
تسلم الايادي
:abc_152:

[فلسطيني]

بارك الله فيك اخي الوليد

[mero]

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

بارك الله فيك اخي ابو الوليد درس رائع
ودائما شرحك مميز
شكرا لك وفي انتظار المزيد

[أبو يوسف]

جزيت خيرا اخانا أبا الوليد على هذا الشرح المتأني

.

[أبو الوليد]

سلمت أناملك أخي أبو الوليد :abc_152: على الدرس المميز تطبيقي المتواضع :abc_145:

http://img529.imageshack.us/img529/3361/21232330.png

تطبيق مميز أستاذنا وليد :abc_086: سلمت يمينك


جزاك الله كل خير
وبارك الله بك وفيك الى يوم الدين
درس ولا ايسر منه مفهوم جدا جدا
وكما يقال ليس كل من يعرف شيئا يعرف كيفية تبليغه للغير
وانت اخي الغالي عندك معرفة بالشيء وطريقة تبليغ و تعليم الشيء
ولكن سؤال لو سمحت
كيف ندخل الكتابة في الزر؟

http://www.abc4web.net/vb/showthread.php?p=118467&posted=1#post118467

http://img.farfosh.com/uploads/farfosh_12923598244.jpg
جعل الله عملك في ميزان حسناتك
تسلم الايادي
:abc_152:




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

ـــــــــــــــــــــــــ ـــــــــــــــــــــــــ ـــــــــــــــــــــــــ ـــ

جزاكما المولى خيرا أخواي فلسطيني وميرو على الحضور المميز :abc_152: تقبلوا احترامي

[أبو الوليد]

جزيت خيرا اخانا أبا الوليد على هذا الشرح المتأني

.

بوركت أستاذنا أبا يوسف :abc_022: وفقك الله

[كينج نت]

نكرر الشكر للاخ أبو الوليد ومن بعد اذنك اخي العزيز


ولكن سؤال لو سمحت
كيف ندخل الكتابة في الزر؟
:abc_152:

هذا ملف فلاشي سريع اخي المغربي لعلك تجد فيه مايناسب سؤالك
مع انتضار شرح اخينا ابو الوليد

WIDTH=760 HEIGHT=560

بالتوفيق للجميع ان شاء الله تعالى

:abc_152:

[الرئيس]

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

[أبو الوليد]

نكرر الشكر للاخ أبو الوليد ومن بعد اذنك اخي العزيز

هذا ملف فلاشي سريع اخي المغربي لعلك تجد فيه مايناسب سؤالك
مع انتضار شرح اخينا ابو الوليد

بالتوفيق للجميع ان شاء الله تعالى

:abc_152:

كفيتنا الجهد أخونا الحبيب وليد :abc_152: سلمت يمينك

[المغربي الجديد]

جزاكما الله كل خير
وبارك الله بكما وفيكما الى يوم الدين
ممتاز وجميل ومفيد جدا اخي الحبيب كينج نت
وننتظر شرح الغالي ابو الوليد لمزيد من التوضيح والتيسير باذن الله
جعل الله عملكما في ميزان حسناتكما
تسلم الايادي
:abc_152:

[abohmam]

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

أتمنى اعادة رفع الصور اذا مازلت محتفظ بها للفائدة ان شاء الله

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

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

ورفع الله قدرك في الدارين يارب

[أبو فارس]

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