درس عمل زر ويب أنيق وجميل 2

[ذوالجناح]

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

خطوات الدرس:

1- افتح صفحة عمل جديدة ولتكن بمقاس 120 × 50 بكسل. وقم بعبئة الخلفية بلون أسود فاتح (838383#)
2- اخنر أداة Ronded Rectangle Tool http://img252.imageshack.us/img252/3792/66658263.gif واضبط الخيارات كما في الصورة أدناه ثم ارسم مستطيلا.

http://img231.imageshack.us/img231/9207/50663654.gif

3- املأ الشكل المرسوم باللون الأسود (111111#) فتظهر الصورة هكذا:

http://img41.imageshack.us/img41/9774/83914813.gif


4- من قائمة : طبقة > نمط الطبقة > خيارات الدمج
Layer > Layer Style > Blending Options
أو بالنقر بالزر على الشفيفة من قائمة الشفائف واختيار : Blending Options أو خيارات الدمج ثم قم بضبط القيم حسب الصور:

Drop Shadow
http://img22.imageshack.us/img22/9021/71566285.gif

Inner Glow

http://img301.imageshack.us/img301/584/48365141.gif

Bevel and Emboss

http://img517.imageshack.us/img517/2587/33573877.gif

Gradient Ovrlay

http://img21.imageshack.us/img21/8480/59918503.gif

Stroke

http://img22.imageshack.us/img22/4528/90463016.gif

فتصبح الصورة هكذا:

http://img35.imageshack.us/img35/1493/90583100.gif

5- ننشيء طبقة جديدة ومن قائمة الأدوات نختار أداة القلم Pencel Tool http://img510.imageshack.us/img510/3064/20060504.gif ونضبط الحجم على 2 بكسل ونغير اللون الافتراضي إلى القيمة eee1cd# ونرسم خطاً في اسفل الصورة ليصبح شكلها هكذا :

http://img18.imageshack.us/img18/9317/59257129.gif

6- من قائمة : طبقة > نمط الطبقة > خيارات الدمج
Layer > Layer Style > Blending Options
أو بالنقر بالزر على الشفيفة من قائمة الشفائف واختيار : Blending Options أو خيارات الدمج ثم قم بضبط القيم حسب الصور:

Inner Shadow

http://img4.imageshack.us/img4/9382/17569851.gif

Outer Glow

http://img510.imageshack.us/img510/9761/46708988.gif

النتيجة:

http://img265.imageshack.us/img265/7389/92280071.gif


7- ابق المؤشر على الطبقة السابقة (طبقة Pencel).
اذهب لقائمة : Layer > Layer Mask > Reveal All وانقر على Reveal All
ومن قائمة الأدوات اختر أداة Gradient Tool http://img265.imageshack.us/img265/9093/10059075.gif واضبط خياراتها من الأعلى كما في الصورة:

http://img689.imageshack.us/img689/5938/53390035.gif

ثم اسحب المؤشر كما في الصورة وانتبه لنقطة البداية والنهاية ( قم بتكبير الصورة ليسهل تنفيذ العمل)

http://img94.imageshack.us/img94/8307/97770110.gif

النتيجة:

http://img231.imageshack.us/img231/83/56386750.gif

8- من قائمة الأدوات اختر أداة القلم Pen Tool http://img265.imageshack.us/img265/6162/54611385.gif واضبط خيارات الأداة من الشريط في الأعلى كما في الصورة:

http://img265.imageshack.us/img265/8047/50622596.gif

الآن ارسم شكلاً واملأه باللون الأسود كما في الصورة:

http://img94.imageshack.us/img94/8979/72731958.gif

9- من قائمة: Filter > Blur > Guassian Blur واضبط قيمة Radius على 0.6 بكسل.
قد تأتيك رسالة تطلب منك تحويل الطبقة لطبقة نقطية Rasterize the layer فوافق عليها.

10- عد للطبقة الأساسية التي رسمنا عليها الزر في الخطوة رقم 2 وانقر عليها مع استمرار على مفتاح ctrl فنحصل على التحديد بالشكل الآتي:

http://img94.imageshack.us/img94/4457/27422796.gif

اعكس التحديد من قائمة Select > Inverse وعد إلى الطبقة الأخيرة التي رسمنا عليها الشكل في خطوة رقم 8 وبعد النقر عليها انقر على مفتاح delete من لوحة المفاتيح ثم الغ التحديد بالنقر على ctrl+D
النتيجة:

http://img69.imageshack.us/img69/4193/58379826.gif

11- ضاعف هذه الطبقة بالنقر بالزر الأيمن عليها ثم اختيار Duplicate Layer ثم اقلبها من قائمة Image > Transform > Flip Horizontal واسحبها إلى الجانب الآخر من الشكل لتصبح هكذا:

http://img682.imageshack.us/img682/7018/16592898.gif

12- عد للطبقة الأساسية وانقر عليها مع النقر المستمر على مفتاح ctrl فيتم تحديد الشكل. أنشيء طبقة جديدة ومن القائمة Edit > Stroke اضبط القيم كما في الصورة:

http://img130.imageshack.us/img130/4180/24791210.gif

13- قم بإلغاء التحديد بالنقر على ctrl+D ثم قم بتطبيق الخطوة رقم 4 مرة أخرى هنا مع ملاحظة البداية والنهاية لسحب أداة Gradient كما في الصورة:

http://img69.imageshack.us/img69/9641/49303230.gif

اضبط قيمة opacity على 75% كما في الصورة:

http://img682.imageshack.us/img682/1977/17959384.gif


النتيجة:

http://img42.imageshack.us/img42/6440/88010898.gif

14- قم بدمج الطبقات كلها في طبقة واحدة من قائمة Layer > Merge Visible ثم قم بمضاعفة الطبقة الجديدة واعكسها من قائمة:
Image > Transform > Flip Vertical
ومن القائمة Layer > Layer Mask > Reveal All ننقر على Reveal All ونستخدام أداة Gradient tool كما استخدمناها في الخطوات السابقة ليصبح الشكل النهائي للتطبيق هكذا:

http://img145.imageshack.us/img145/6363/83146975.gif


http://img97.imageshack.us/img97/1062/finalresult.gif


انتهى الدرس والحمدلله الذي بنعمته تتم الصالحات.


تحياتي الطيبة: ذوالجناح

[الدمشقي]

مجهود رائع في الشرح
سلمت الأنامل الكريمة
وجزاك الله خيراً
:abc_022:

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

جزاك الله خيرا
ان شاء الله فى الصباح أطبقه
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[أبو يوسف]

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

.

[abohmam]

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

درس رائع بل أكثر من رائع مع هذا الشرح الماتع

وهذا تطبيقي على السريع إن شاء الله يعجبك

http://www.abc4web.net/vb/uploaded/1_01257877929.png (http://www.abc4web.net/vb)

أما عن طريقة الإستفادة من مثل هذه الأزرار فقد قمت بعمل واجهة للكتب الإلكترونية أو لتجميعة إسطوانات ( كمثال فقط)

http://www.abc4web.net/vb/uploaded/1_11257877929.jpg (http://www.abc4web.net/vb)
الحجم الأصلي ( 780:580 )

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

[كينج نت]

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

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

درس جميل وشرح واضح

بارك الله بجهودك الطيبة أخي العزيز

.

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

13- قم بإلغاء التحديد بالنقر على ctrl+D ثم قم بتطبيق الخطوة رقم 4 مرة أخرى هنا مع ملاحظة البداية والنهاية لسحب أداة Gradient كما في الصورة:
بعد تطبيق الخطوه الرابعه
طلع معايا الشكل كده http://i33.tinypic.com/eah8n6.png بعد ما كان أفضل من هذا

[أبو صخر]

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

[رائد ابو فيصل]

http://up.damasgate.com/files/oi293zbbzqdhqjz6irod.gif

ما طلع معي حلو اعملت زر تاني

[شصعرف]

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

[الوردة الجورية]

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

[عادل نت]

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

طريقه رائعه وجميله جداً ...

ساقوم بعمل افضل من هذا الزر الي صممته ليكون من ازرار الستايل الجديد ان شاء الله ..

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

http://img692.imageshack.us/img692/2267/copyx.gif

[عادل نت]

وهذا تطبيق مع الخيال لكل الزر

http://img217.imageshack.us/img217/8065/copya.gif