تصميم زر زجاجي - درس مترجم

[أبو الوليد]

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

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

1. نفتح مشروع جديد بمساحة 400x180 بيكسل وخلفية بيضاء


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

2.نختار أداة Rounded Rectangle Tool


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

3.نراعي الإختيارات التالية :

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

4.نحدد قياس الشكل 140x50 مع اختيار اللون الأسود ونرسم الزر ، ويمكن ذلك من شريط الإختيارات كالآتي :

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

5.بعد أن رسمنا الشكل كالتالي :

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

سوف نطبق أربع تأثيرات وهي :



Gradient Overlay
Inner Glow
Stroke
Drop Shadow


6.من قائمة الليرات نضغط زر الماوس الأيمن ونختار Blending Options

نبدأ بتأثير Gradient Overlay
نطبق الإعدادات الظاهرة في الصورة

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

ثم Inner Glow

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

ثم Stroke

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

ثم Drop Shadow

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

7.نختار أداة الكتابة ونكتب كلمة " زر " .

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

8.نضيف لاير جديد ونختار مرة أخرى أداة Rounded Rectangle Tool بقياس 136x23 مع اختيار اللون الأبيض ونرسم الشكل كالآتي :

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

9.بزر الماوس الأيمن على اللير الجديد نختار Blending Options ونُفعّل اختيار Blend Interior Effects as Group كما هو موضح في الصورة التالية :

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

10.ننتقل إلى تأثير Gradient Overlay ونطبق التالي :

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

11.من قائمة الليرات نغير ال Mode إلى Screen ونخفف ال Opacity إلى % 90

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

12.نزيل التحديد عن الخلفية ونضغط Ctrl+Shift+E لتسطيح الطبقات

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

13.نحفظ التطبيق على اختيار PNG

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

http://www.abc4web.net/vb/imgcache2011/10359.abc4web.gif (http://www.herosh.com)

[abohmam]

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

:abc_152:

شرح رائع ماشاء الله

ولى عودة بالتطبيق

[الدمشقي]

سلمت يداك الكريمة أخي أبو الوليد
:abc_152:
وجزاك الله خيراً

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

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

[أبو يوسف]

بارك الله فيك أخي أبو الوليد على هذا الشرح الواضح الرائع

.

[أبو فارس]

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

[abohmam]

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

تم وضع التطبيق فى قسم العرض هنا

http://www.abc4web.net/vb/showthread.php?t=12665

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

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

[ذوالجناح]

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

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

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

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

جزاك الله خيرا أخى أبا الوليد
ان شاء الله سأعود بالتطبيق :abc_139:

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

تم وضع التطبيق فى قسم العرض هنا

http://www.abc4web.net/vb/showthread.php?t=12665
:abc_051:

[فلسطيني]

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