طريقة تصميم أيقونة أو زر للموقع أو وسام مع هذا التأثر الرائع

[abohmam]

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

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

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

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

وسوف نبدا بالدروس المهمة والتى بعد تطبيقها سوف نستطيع الإستفادة مما تعلمناه فى تطبيقات أخرى سوف أذكرها إن شاء الله فى وقتها ، بمعنى أننا سوف نربط الشروحات ببعض كى نستفيد من أى خطوة أو تأثير تعلمناه .

درسنا اليوم هو طريقة تصميم ( أيقونة - زر للموقع أو وسام للأعضاء ) بنفس التطبيق

مستوى الدرس : متقدم

أمثلة للنتيجة النهائية

http://www.abc4web.net/vb/imgcache/2648.abc4web http://www.abc4web.net/vb/imgcache/2649.abc4web
http://www.abc4web.net/vb/imgcache/2650.abc4web


هل نبدا الشرح ؟؟؟ نبدا إن شاء الله

1- أفتح عمل جديد وحدد المقاس العرض والإرتفاع 340x340 بيكسل
2- إختر أداة التحديد الدائرى وإضغط من لوحة المفاتيح على زر Shift وارسم دائرة تقريبا 180x180 بيكسل ، ثم قم بملئ الدائرة باللون الأسود .

http://www.abc4web.net/vb/imgcache/2651.abc4web

3- مازلنا على طبقة الدائرة نقف عليها بالماوس ونضغط بيمين الماوس ونختار Blending Options Sittings
ونطبق جميع القيم التى فى الصور أدناه

Bevel and Emboss

http://www.abc4web.net/vb/imgcache/2652.abc4web

Bevel and Emboss > Contour

http://www.abc4web.net/vb/imgcache/2653.abc4web

Gradient Overlay

http://www.abc4web.net/vb/imgcache/2654.abc4web

وهذه هى أكواد ألوان التدريج

http://www.abc4web.net/vb/imgcache/2655.abc4web

ستكون النتيجة مثل هذا الشكل

http://www.abc4web.net/vb/imgcache/2656.abc4web

4 - نضغط من لوحة المفاتيح على CTRL + SHIFT + ALT لنضيف طبقة جديدة ، ونختار أداة التحديد الدائرى مثل الخطوة الأولى.
5 - الآن نذهب إلى Select > Transform Selection ونضغط على CTRL + ALT وننظر إلى صندوق المعلومات.

http://www.abc4web.net/vb/imgcache/2657.abc4web

إذا لم تشاهد هذه النافذة فيمكنك إظهارها من قائمة Windows أو تضغط على F8 من لوحة المفاتيح لتظهر النافذة.

6 - نمسك ركن الطبقة اليسار بالماوس ونحرك الماوس ونحن ننظر إلى نافذة المعلومات حتى نصل إلى مقاس 152x152 بيكسل .

http://www.abc4web.net/vb/imgcache/2658.abc4web

إذا لم تستطع التحكم فى التصغير فإستخدم الطريقة الثانية كما فى الصورة

http://www.abc4web.net/vb/imgcache/2659.abc4web

7 - نقوم بملئ هذه الطبقة أو الدائرة باللون 0060c3 # كما بالشكل التالي

http://www.abc4web.net/vb/imgcache/2660.abc4web

8 - مازلنا على طبقة الدائرة الثانية نقف عليها بالماوس ونضغط بيمين الماوس ونختار Blending Options Sittings
ونطبق جميع القيم التى فى الصور أدناه

Inner Shadow

http://www.abc4web.net/vb/imgcache/2661.abc4web

Bevel and Emboss

http://www.abc4web.net/vb/imgcache/2662.abc4web

Gradient Overlay

http://www.abc4web.net/vb/imgcache/2663.abc4web

وهذه هى أكواد الوان هذا التدريج

http://www.abc4web.net/vb/imgcache/2664.abc4web

سوف نحصل على هذه النتيجة

http://www.abc4web.net/vb/imgcache/2665.abc4web

9 - أرسم دائرة بنفس الطريقة التى كررناها من قبل ولكن بمقاس 113x113 بيكسل على أن يكون مكانها مثل هذه الصورة .

http://www.abc4web.net/vb/imgcache/2666.abc4web

10- إجعل اللون الأعلى 007acf# .
ثم إختار أداة التعبئة بالتدريج Gradient Tool ثم حرك الماوس من أعلى الدائرة إلى المنتصف تقريبا
غير الـ Blending Mode إلى Screen .

http://www.abc4web.net/vb/imgcache/2667.abc4web

11- الآن سوف نقوم بصناعة الظل حول التصميم
- أختار أداة التحديد الشكل البيضاوي كى نقوم برسم شكل بيضاوي مثل هذا ( لاتنسى وضعه تحت الطبقة رقم 1 )

http://www.abc4web.net/vb/imgcache/2668.abc4web

12- نذهب إلى قائمة الفلاتر ونختار------------------- Filter > Blur > Gaussian Blur - Radius: 14.0

http://www.abc4web.net/vb/imgcache/2669.abc4web

نضيف بعض اللمسات السحرية وسوف نحصل على الشكل النهائي

http://www.abc4web.net/vb/imgcache/2650.abc4web

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

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

فى إنتظار التطبيقات واللمسات السحرية

الدرس القادم ان شاء الله تعالى

http://www.abc4web.net/vb/imgcache/2670.abc4web


مـ(أجمل تحية لكم جميعا)ـع
أبو هــــMـــام
.

[AlmajedGroup]

ماشاء الله عليك أستاذنا , درس ولا أروع ...
تسلم إيدك على الدرس المميز .. وبإنتظار باقى الدروس
وجارى تطبيق الدرس
تقبل تحياتى
المجد جروب

[abohmam]

ماشاء الله عليك أستاذنا , درس ولا أروع ...
تسلم إيدك على الدرس المميز .. وبإنتظار باقى الدروس
وجارى تطبيق الدرس
تقبل تحياتى
المجد جروب

حياك الله أخى ماهر

فى انتظار التطبيق واللمسات الفنية :abc_025:

موفق بإذن الله ... لك مني أجمل تحية .

[الدمشقي]

أشكرك أخي الكريم أبو همام
على المجهود الحلو في إعداد الدرس


مع الأسف حاولت حفظ هذه الصفحة من أجل الرجوع إليها فيما بعد .... فلم أستطيع !!!!
وكذلك الكثير من صفحات المنتدى ...
فهل من حل ؟؟

[abohmam]

أشكرك أخي الكريم أبو همام
على المجهود الحلو في إعداد الدرس


مع الأسف حاولت حفظ هذه الصفحة من أجل الرجوع إليها فيما بعد .... فلم أستطيع !!!!
وكذلك الكثير من صفحات المنتدى ...
فهل من حل ؟؟


حياك الله اخى أبا شام

صراحة لم أواجه هذه المشكلة وقد أوقفت هاك تحويل المنتدى إلى html ربما كان هو السبب

ولكن بالنسبة لحفظ الصفحة هناك حل اسهل عن طريق المتصفح Avant الذى تستخدمه وهو حفظ الصفحة كصورة :abc_097:

http://www.abc4web.net/vb/imgcache/2752.abc4web


وهذا مثال للتحميل (http://www.shareua.com/files/show/982961/orbit.rar.html)


وفى إنتظار التطبيق ياطيب :abc_006:

[الدمشقي]

يسلموا إيديك ياغالي
الصراحة بعدما كتبت الرد قمت بحفظ الصفحة بطريقة ( لولبية ) والحمد لله نجحت فيها ...

بالنسبة للخيار الذي أشرت عليه : غير موجود عندي ( يبدو أنني تأخرت كثيراً في تحديث نسختي الخاصة من برنامج الـ Avant

إن شاء الله تعالى سوف أحدثها الآن ....

تحيتي لك

[ابوعمرالمطرفي]

جزاك الله خيرماقصرت

[الدمشقي]

تطبيق بسيط أتمنى أن أكون قد وفقت به




http://www.abc4web.net/vb/imgcache/2763.abc4web








وهذا تطبيق مصغر :


http://www.abc4web.net/vb/imgcache/2764.abc4web

[abohmam]

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

تطبيق رائع أخى الحبيب ابا شام

تسلم الأيادى

فقط بالنسبة لحفظ الصورة بصيغة Gif الشفاف يظهر تأثير البلور والظل بوضوح وكأنه لون

فيمكن الإستغناء هذا هذا التأثير أو تقليله جدا

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

[الدمشقي]

ملاحظة مهمة جزاك الله خيراً أخي أبو همام



http://www.abc4web.net/vb/imgcache/2768.abc4web

[abohmam]

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

ماشاء الله تطبيق رائع أخى الدمشقي

الآن سوف لاأجرب بعدك خلاص كده تمام

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

بوركت يا غالى

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

جزاك الله خيرا
تطبيقى
http://img223.imageshack.us/img223/8607/61315221.png

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

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

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

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

[abohmam]

جزاكم الله خيرا إخوانى جميعا

أشكر لكم تواصلكم الجاد ومروركم العطر

بالتوفيق

[أبو صخر]

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