المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : تصميم زر أحمر احترافي



antonio bandiras
07-09-2009, 10:45 PM
السلام عليكم ورحمة الله وبركاته

اخواني الافاضل

درس بسيط جدا وهو عمل زر احمر احترافي رائع حتي يكون موقعك بشكل جمال

الموضوع الأصلي هنا (http://www.thearabianhouse.com/showthread.php?t=292)

و هذه هي نتيجة الدرس

http://www.mahosteur.com/images/sinrry3e5wxqob6drs30.gif

نبدأ على بركة الله

اولا قل بسم الله الرحمن الرحيم ....

افتح الفوتو شوب Photo Shop

اختر أداة المستطيل مدور و ارسم هذا الشكل كما هو مبين على الصورة بالأسفل

http://www.mahosteur.com/images/e5gqdxl66cknnbkpwv.gif

نطبق مع بعض الاختيارات التالية علي الشكل

أولا Drop shadow(الظل) بتكون بنفس الاحداثيات المذكورة في الشكل

http://www.mahosteur.com/images/8b7supy1rp907mpcrzyf.gif

ثانيا Inner glow(التوهج) وبتكون بنفس الاحداثيات المذكورة في الشكل

http://www.mahosteur.com/images/2x2s7n2i2ozq711lvnkx.gif

ثالثا Gradient overlay (التدريجات) وبتكون بنفس الاحداثيات المذكورة في الشكل

http://www.mahosteur.com/images/cbcldjho591pcbtcqm.gif

رابعا Stroke (الحواف) وبتكون بنفس الاحداثيات المذكورة في الشكل

http://www.mahosteur.com/images/cqbu8ynun0zvwpywqu3.gif

الزر الخاص بنا وصل للشكل التالي:

http://www.mahosteur.com/images/feu6ffghtjycs5e2lhji.gif

نخنار مع بضع اداه التحديد بشكل المستطيل

http://www.mahosteur.com/images/1ndd9vdk4fo7fcpnuvc.gif

ثم نحدد مع بعض مثل ما موضح بالصورة في الجهة اليسرى له.

http://www.mahosteur.com/images/593gx3m047wlgkekdx2.gif

ثم نملئ الشكل بنفس الاحداثيات للون #E1CA57

http://www.mahosteur.com/images/xeli0py60b9g6sy1tz17.gif

نطبق مع بعض الاختيارات التالية علي الشكل

Inner glow (توهج) وبتكون بنفس الاحداثيات المذكورة في الشكل

http://www.mahosteur.com/images/61g35wepdkksm0ndze.gif

Gradient overlay (التدريجات) وبتكون بنفس الاحداثيات المذكورة في الشكل

http://www.mahosteur.com/images/l2yjsbub7r3qy9fxyv2y.gif

نحدد مع بعض المستطيل الذي تم عمله ونكبر الصورة إلي زوم كبير قووي يصل إلي 1600% ثم نختاج أداه “القلم” ونعمل شكل بيكسل بنفس ما هو موضح بالصورة

http://www.mahosteur.com/images/8dib8rjt217yfzbegv2.gif

ثم تكون النتيجة مثل ما هو واضح بالصورة

http://www.mahosteur.com/images/xr02d7bmv8i8ye2ni1t9.gif

ثم نكتب النص اللي تحب ان يوظف به الزر مع بعض الامكانيات للحواف يكون الشكل كالتالي

http://www.mahosteur.com/images/4z0v6m8f1wpfy64sk42w.gif

وهكذا نكون انتهينا من تصميم زر احترافي بمعني الكلمة

الموضوع الأصلي هنا (http://www.thearabianhouse.com/showthread.php?t=292)
“ارجو عند نقل الدرس ذكر مصدر المترجم له والمصدر الاساسي للدرس لحفظ الحقوق”

مع تحياتي

اخوكم في الله

عبد الحفيظ

خالد القحطاني
07-09-2009, 11:08 PM
شرح رائع بارك الله فيك

فراشة الآمال
07-11-2009, 10:37 AM
درس رائع ونتيجه
اروع يسلمو
عالطرح