تصميم زر بحث أو تحميل

[أبو الوليد]

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

http://www.abc4web.net/vb/imgcache2011/10044.abc4web.gif (http://img.farfosh.com/)

1.بسم الله الرحمن الرحيم ، نفتح عمل جديد بمقاس 500×300 بيكسل والخلفية بيضاء

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

2.نختار أداة المستطيل الدائري Rounded Rectangle Tool وليكن نصف القطر Radius 30px واللون #d61d23 ونرسم الزر كالتالي :

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

3.من قائمة الليرات نضغط زر الماوس الأيسر ونختار خيارات المزج Blending Options وسيكون التأثير على خيارين هما

Inner Shadow
Gradient Overlay

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

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

4.نضاعف لير الزر بالضغط على Ctrl+j ونعمل له انعكاس بتحريكه أسفل اللير الأول ، ثم نختار أداة الخط المتقطع Rectangular Marquee Tool ونحدد جزء من اللير المضاعف ثم نضغط Delete من لوحة المفاتيح

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

5.نضيف عليه تأثير بسيط من خلال قائمة الفلاتر نختار Blur > Box Blur ونضع القيمة 10 بيكسل والنتيجة :

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

6.نختار أداة المستطيل الدائري Rounded Rectangle Tool ونحدد قيمة نصف القطر Radius 80px ونرسم مستطيل بداخل الزر كالآتي :

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

7.نغير النمط Mode إلى Overlay ونخفف نسبة الغموض Opacity إلى 36%

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

8.نختار الآن أداة الشكل البيضاوي Ellipse Tool ونرسم دائرة بداخل الزر على أحد طرفيه

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

9.نذهب إلى خيارات المزج Blending Options وسيكون التأثير بعون الله على

Inner Shadow
Inner Glow
Gradient Overlay
Stroke

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

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

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

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

10.نجلب الصورة ( موجودة بالمرفقات ) ونضعها بداخل الشكل الدائري الذي رسمناه آنفا ثم نضغط على Ctrl+Shift+U ونغير النمط Mode إلى Overlay ونكتب النص أو الصيغة

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

11.النتيجة

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

http://www.abc4web.net/vb/imgcache2011/10044.abc4web.gif (http://img.farfosh.com/)

لا تنسونا من صالح دعـــــــــــــــــــائكم :abc_152:

[فلسطيني]

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

[أبو يوسف]

كلما اقرأ مثل هذه الدروس أتمنى أن يكون لي معلومات كافيه للتطبيق


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

[حمد محمد]

http://img339.imageshack.us/img339/8490/77864788.gif

[جروح بارده]

الف شكر على المشااركه الطيبه

يعطيك العافية على الشرح الوافي


بانتظار القادم

[كينج نت]

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

مشكور اخي العزيز أبو الوليد على الدرس القيم

تطبيقي المتواضع مع اضافة التوابل اتمنى ان يكون بمستوى الشرح :abc_145:

http://img12.imageshack.us/img12/3854/68898742.png

:abc_152:

[ام هشام]

بارك الله فيك وجزاك الله كل خير:abc_088:
http://www.3andna.com/photo/ToP/floor/FLOOR_3ANDNA14.gif

[mero]

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


بارك الله فيك اخي ابو الوليد
درس رائع تسلم الايادي
وهذا هو تطبيقي

http://img24.imageshack.us/img24/954/meror.png (http://img24.imageshack.us/my.php?image=meror.png)

لك مني اجمل تحية اخي ابوالوليد :abc_152:

[أبو الوليد]

شكر المولى لكم تواجدكم العطر :abc_152::abc_022: تطبيقات ممتازة ..تقبلوا احترامي وتقديري

[رجل السيف]

http://img576.imageshack.us/img576/6081/hmado.jpg

السلام عليكم ورحمة الله وبركاته
يسلمو الايادي أخي أبو الوليد على الدرس
أليك تطبيقي المتواضع جدا
وأرجو أن ينال رضاك
ملاحظاتك تهمني أخي العزيز

:abc_145:

[أبو الوليد]

http://img576.imageshack.us/img576/6081/hmado.jpg

السلام عليكم ورحمة الله وبركاته
يسلمو الايادي أخي أبو الوليد على الدرس
أليك تطبيقي المتواضع جدا
وأرجو أن ينال رضاك
ملاحظاتك تهمني أخي العزيز

:abc_145:


حياك المولى أخي الفاضل :abc_152: تطبيقك مميز ، لكن أعتقد أنك نسيت الخطوة الخامسة وهي إضافة تأثير الفلاتر :abc_091: حياك الله
http://img.farfosh.com/uploads/farfosh_12912254731.jpg (http://img.farfosh.com/)

[الوئــام]

شكرا لك على الدرس

[abohmam]

تسلم الأيادي ياطيب

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

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

[امير محمد]

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

مشكور اخي العزيز أبو الوليد على الدرس القيم

[القصيبي]

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

[ashrafhisham]

الف الف شكر

[هانى كفورى]

ششششششششششششششششششششششكرا

[الغرابلي]

:abc_139::abc_139::abc_139:

[الغرابلي]

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

[أميرال النوفل]

يسلمو غالينا

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

جاري التطبيق:abc_152:

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

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

وهذا تطبيقي . .
http://king-jobs.com/upload//uploads/images/domain-8e8ad37e97.gif

:abc_152:

[أبو الوليد]

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

وهذا تطبيقي . .
http://king-jobs.com/upload//uploads/images/domain-8e8ad37e97.gif

:abc_152:

تطبيق رائع يا محترفة :abc_145:

[أبو صخر]

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

[الدموكي]

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

[المصمم]

شـكــ وبارك الله فيك ـــرا لك درس جميل جدا

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

[ايهم العراقي الجريح]

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

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

رووووووووووووووووووعه بارك الرحمن في عمرك

[فارس الأحلام]

بارك الله فيك

[أبوربيع]

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