[درس] كيفية عمل الازرار الزجاجية الجميلة

[Design X]

http://im80.gulfup.com/eQo0vm.jpg
http://im51.gulfup.com/n15BWf.jpg+http://im51.gulfup.com/RlvmXz.jpg






http://i.imgur.com/lJ8Sjgf.png



بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اتمنى ان الكل بخير وصحة وسلامة وارجو من الله ان يفيدنا منكم ويفيدكم منا iconQ

طرحت قبل فترة تصميم زجاجي بسيط وملف مفتوح للتعرف على طريقة عمله لكن أحببت ان اصنع درس به لعل الفائدة تكون أكبر.

من يريد الزر PSD من هنا http://www.msoms-anime.net/t183882.html



الدرس ليس مخصصا لعمل الازرار بل لعدة اسباب
================================================
1- التعرف على كيفية عمل الإنعكاسات بالتدرجات والألوان
2- تعلم كيفية عمل تأثيرات ثلاثية الأبعاد باستخدام خواص ليست مشهورة كثيرا مثل bevel&emboss
3- لعدة أسباب اخرى انا لكني كسول لأكتبها كلها icon114
================================================

الدرس بسيط وليس احترافيا للغاية ويرجع ذلك الى اني مازلت اتعلم وسأظل اتعلم مهما حييت (حمآآآآآس:icon100: )

لن أطيل عليكم نبدأ بالنتيجة

(( ملاحظة: الدرس يحتوي على صور متحركة فاصبرو حتى تتحمل Icon108 ))


http://i.imgur.com/ajDRJOo.png

نبدأ فتح عمل جديد على حسب المقاس المحبب لك لكن يحب ان يتسع للزر icon114



1- نقوم بعمل دائرة ويمكن عمل دائرة متناسقة بسحب الفأرة مع البقاء ضاغطا على زر Shift

http://i.imgur.com/SW75WSN.gif



2- نذهب الى خصائص Blending Options ونطبق التأثيرات الأربع التالية بالقيم الموضحة

http://i.imgur.com/FxXszF0.jpg

http://i.imgur.com/8Gxqqmv.jpg

http://i.imgur.com/XDu6aT4.jpg

http://i.imgur.com/azZrJGg.jpg

3- ستجد الشكل تقريبا كهذا

http://i.imgur.com/P28zJaS.png 4

- الآن قم بعمل Fill للطبقة 0% لازالة اللون وجعله شفافا ولمن أراد معرفة الفرق بين Fill و Opacity

Opacity : شفافية الطبقة بكل تأثيراتها ووضعها صفرا ستخفي التصميم كله
Fill: ستخفي الإمتلاء او اللون داخل التصميم مع الإبقاء على التأثيرات (الزجاجية في هذه الحالة)

http://i.imgur.com/6XizOZF.png 5

- نقوم باستخدام أداة التحديد لعمل دائرة بيضاوية وملئها بتدرج ابيض الى شفاف وسحبه بهذه الطريقة

https://lh3.googleusercontent.com/-16EE8-5hyL8/U9_5xbwYQKI/AAAAAAAAAFg/qO18iivXrzs/w623-h404-no/9.gif


ونقول بتحريك الدائرة عن طريق ضغط Ctrl+T وعمله كالشرح اعلاه 6- نقول بعمل نسخ للطبقة مرة أخرى ونخفي الطبقة الأصلية حتى نستطيع الرؤية بوضوح ونقوم بعمل تحديد وتحريك التحديد كما ترى بالأعلى ثم نضغط Delete ويصبح لدينا انعكاس صغير نقول بنسخه ووضعهم في الزوايا وتخفف Opacity الى الدرجة الموضحة في الصورة.


http://i.imgur.com/YUQ4APU.gif

7-تتبقى لدينا خطوة أخيرة بسيطة وهي وضع الصورة فنضع الصورة المراد عملها كزر فوق طبقة الدائرة لكن تحت الإنعاكاسات.
الآن نقول نختار طبقة الصورة ونضغط على Ctrl وبالفأرة على طبقة الدائرة حتى يتكون لدينا تحديد دائرة حول الصورة.
ثم نقول بعكس عن طريق Ctrl+Shift+I ونضغط Delete




http://a7lashare.com/viewimages/90a46519a0.gif

وبهذا ننتهي وأرجو الا اكون اطلت عليكم ( انا ممل بطبعي :icon100: )


ولدي عودة بدروس معقدة اكثر او سهلة اكثر عحسب الإنشغال icon114 فيـ امانـ اللهـ

[Hope Tear]

سوبااااراااشي ^.^
هونتووني سااسوغا ديس :3
لي عودة بالتطبيق بإذن الله

[Design X]

بانتظار تطبيقك اختي هوب فهذا مافهمته من الرد icon114
وشكرا على مرورك الجميل :)

[تشيزوكو]

شكرا جزيلا على الدرس الجميل.. تطبيقي:

http://www.m5zn.com/newuploads/2014/08/06/jpg//0a59b07178cf6fe.jpg (http://www.m5zn.com/out.php?code=15436235)

قمتُ فقط في النهاية بعمل مود overlay على الصورة (مع إزالة الخلفية)، لأني شعرت أن التأثيرات التي أضفناها للدائرة اختفت تحت الصورة..

[مهند.]

درس جميل بوركت


تطبيقي

http://im57.gulfup.com/6xRFHn.jpg (http://www.gulfup.com/?zrct9I)

[Design X]

شكرا جزيلا على الدرس الجميل.. تطبيقي:

http://www.m5zn.com/newuploads/2014/08/06/jpg//0a59b07178cf6fe.jpg

قمتُ فقط في النهاية بعمل مود overlay على الصورة (مع إزالة الخلفية)، لأني شعرت أن التأثيرات التي أضفناها للدائرة اختفت تحت الصورة..


خطوة جميلة جدا وفعلا النتيجة رائعة بل أفضل من تطبيقي الشخصي iconQ
حذف طبقة الدائرة لامشكلة فيه لأنها كانت فقط لتحديد مكان الزر :)



درس جميل بوركت


تطبيقي

http://im57.gulfup.com/6xRFHn.jpg

تطبيق رآآئع بكل معنى الكلمة
اشكر لك وقتك واسأل الله ان يكون نفعك بالدرس :)

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

[Kame San]

درس جميل

تطبيقي


http://im66.gulfup.com/dLdd1C.png

ننتظر مواضيعك القادمة
بالتوفيق

[Design X]

درس جميل

تطبيقي


http://im66.gulfup.com/dLdd1C.png

ننتظر مواضيعك القادمة
بالتوفيق

مرحبا أخي

تطبيق جميل ورائع ودقيق, احييك على تفاعلك وجهدك
لي ملاحظة بسيطة, ارى انه الصورة قد خرجت عن حواف التصميم فهل كانت لديك مشكلة في القص ممكن اساعدك فيها ؟

[Rayou chan]

درس جميل بفكرة جديدة علي
لي عودة ..بالتطبيق باذن الله^^