تويت
تصميم زر - قائمة - أو توقيع بتأثير زجاجي رائع Orb Button
[frame="10 90"].
:slaam:
حياكم الله جميعا
نبدا كما تعودننا بعرض العمل النهائي وهذه المرة قمت بوضع جميع الأمثلة فى المرفقات للتحميل والإطلاع إن شاء الله
وكذلك القائمة بهذا الشكل ( وهي قائمة جافا سحرية وتعتمد على أحدث تقنية من CSS3 + Java فى الملف المرفق ) لاتُقاوم
ولكن يجب تحديث الإكسبلورار لديكم الى 7 أو 8 يمكنكم ذلك من هنا :dw2:
والتوقيع بهذا الشكل
أتمنى أن تكون الشهية قد فُتحت ونبدا التركيز فى الشرح إن شاء الله
كلمة هامة: كثرا ماتم وضع شرح لأحد الأزرار ولم نعرف كيف نستفيد منها أو من التطبيقات التى بها ، ولكن هذه المرة تم عرض طريقة الإستفادة لنغوص فى التصميم ونُخرج المواهب والمهارات من الجميع !!!
1- نبدا كالعادة بإنشاء عمل جديد بمقاس 256 * 256 بيكسل طبعا مع دقة الشاشة كالمعتاد 72 dpi ونظام ألوان RGB وخلفية شفافة طبعا
2- نختار أداة رسم الأشكال Ellipse Tool
3- نقوم بتحديد مقاس الرسم إلى 220 * 220 بيكسل ونرسم دائرة متساوية الأبعاد ( نضغط على Shift ) من لوحة المفاتيح أثناء الرسم .
وسوف نحصل على هذا الشكل
ولاتنسى بعد رسم الشكل تذهب الى قائمة Layer وتختار Rasterize ثم تختار Shape ( أنا عارف أنكم الآن محترفون ولكن فقط للتذكير )
4- نقوم بتكرار هذه الخطوة ونرسم دائرة أخرى ولكن مع تصغير مساحة الدائرة إلى 160 * 160 بيكسل
5- نقوم بتوسيط هذه الدوائر فى مساحة العمل وذلك بإتباع هذه الخطوة الهامة :
تفعيل أداة التحريك ثم تظليل الطبقات ومن شريط الأدوات نختار Align المحازاة للمنتصف ( راجع الصورة )
6- نقوم بتغير اسماء الطبقات مثلا إلى abc4web-orb_2 / abc4web-orb_1
ثم نخفي الطبقة الأولى بإزالة العين التى بجوارها فى صندوق الطبقات وسيكون صندوق الطبقات بهذا الشكل :
إضافة التأثيرات على الطبقة الأولى :
7- الآن نعود إلى الطبقة الأولى ( abc4web-orb_1 ) ونقف عليها ثم نذهب إلى Blending Option ونضيف هذه التأثيرات :
Bevel and Emboss
Gradient Overlay
وسوف نحصل على هذه النتيجة
إضافة التأثيرات على الطبقة الثانية
8- الآن نظهر الطبقة الثانية (abc4web-orb_2) ونقف عليها كي نضيف إليها بعض التأثيرات.
9- نقف على الطبقة الثانية ( abc4web-orb_2 ) ثم نذهب إلى Blending Option ونضيف هذه التأثيرات :
Inner Shadow
Gradient Overlay
ردا على سؤال الأخ محمود فى كيفية تحريك الشعاع فى الخطوة رقم 9
الطريقة :
أثناء تنفيذ التأثير Gradient Overlay تلاحظ أننا إخترنا radial أى شعاعي
وبعد إضافة القيم المذكورة تظهر هذه الإضاءة لاتغلق نافذة Blending Option
وأذهب لها بأصغر ماوس عندك وبأصغر إصبع وقم بتحريكها فى التصميم للمكان الذى تريد ، بس خلاص !!!
Stroke
وسوف نحصل على هذه النتيجة
10- نقوم بإضافة لمعة زجاجية على الزر نذهب إلى الطبقة الأولى ونقوم بتفعيل التحديد ( وذلك بالضغط على مفتاح Ctrl من لوحة المفاتيح + الضغط على الطبقة بيسار الماوس )
نغير طريقة التحديد من شريط الأدوات
11- نستخدم اداة التحديد الدائري Elliptical Marquee Tool ونرسم مثل هذا الشكل البيضاوي
وبمجرد التوقف سوف نحصل على هذه النتيجة
12- نترك التحديد نشيط كما هو ونقوم بإضافة طبقة جديدة ونسميها مثلا التأثير الزجاجي
ونملئ هذه الطبقة باللون الأبيض ونجعل الشفافية تقريبا 25% ( opacity 25% ) لنحصل على هذه النتيجة
لنحصل أخيرا على هذه النتيجة النهائية
أضف بعض لمساتك الخاصة وبعض الأيقونات ليكون عندك أزرار وقوائم إحترافية من تصميمك الخاص
هام :
للحصول على ألوان متعددة من نفس التصميم يمكنك تغير لون الـ orb فى الخطوة رقم 8 وذلك فى تأثير Gradient Overlay
لتصميم توقيع نستخدم نفس التأثيرات مع تغير شكل الرسم مكان دائرة سيكون مستطيل دائرى الحواف مثلا ثم ننسخ التأثير من الطبقات ونلصقها كما تعرفون طبعا .
معنى Orb = جُرم أو كوكب في السماء
:bar:
.
يمكنكم تحميل عرض تصميم القائمة بالجافا والتوقيع وكذلك عرض الأيقونات من المرفقات
ملحوظة : المثال لايعمل على المتصفحات القديمة يجب تحديث الإكسبلورار لديكم إلى الإصدار 7 أو 8
يمكنكم التحديث من هنا :dw2:
:at:
أتمنى أن يوفقني الله وأجد وقت كي أشرح هذه التطبيقات فى كتاب إلكتروني قريبا إن شاء الله
وفى إنتظار التطبيقات إن شاء الله
أتمنى للجميع التوفيق
ولاتنسونا من صالح دعائكم
أبوهمام
.
[/frame]
حياكم الله جميعا
نبدا كما تعودننا بعرض العمل النهائي وهذه المرة قمت بوضع جميع الأمثلة فى المرفقات للتحميل والإطلاع إن شاء الله
وكذلك القائمة بهذا الشكل ( وهي قائمة جافا سحرية وتعتمد على أحدث تقنية من CSS3 + Java فى الملف المرفق ) لاتُقاوم
ولكن يجب تحديث الإكسبلورار لديكم الى 7 أو 8 يمكنكم ذلك من هنا :dw2:
والتوقيع بهذا الشكل
أتمنى أن تكون الشهية قد فُتحت ونبدا التركيز فى الشرح إن شاء الله
كلمة هامة: كثرا ماتم وضع شرح لأحد الأزرار ولم نعرف كيف نستفيد منها أو من التطبيقات التى بها ، ولكن هذه المرة تم عرض طريقة الإستفادة لنغوص فى التصميم ونُخرج المواهب والمهارات من الجميع !!!
1- نبدا كالعادة بإنشاء عمل جديد بمقاس 256 * 256 بيكسل طبعا مع دقة الشاشة كالمعتاد 72 dpi ونظام ألوان RGB وخلفية شفافة طبعا
2- نختار أداة رسم الأشكال Ellipse Tool
3- نقوم بتحديد مقاس الرسم إلى 220 * 220 بيكسل ونرسم دائرة متساوية الأبعاد ( نضغط على Shift ) من لوحة المفاتيح أثناء الرسم .
وسوف نحصل على هذا الشكل
ولاتنسى بعد رسم الشكل تذهب الى قائمة Layer وتختار Rasterize ثم تختار Shape ( أنا عارف أنكم الآن محترفون ولكن فقط للتذكير )
4- نقوم بتكرار هذه الخطوة ونرسم دائرة أخرى ولكن مع تصغير مساحة الدائرة إلى 160 * 160 بيكسل
5- نقوم بتوسيط هذه الدوائر فى مساحة العمل وذلك بإتباع هذه الخطوة الهامة :
تفعيل أداة التحريك ثم تظليل الطبقات ومن شريط الأدوات نختار Align المحازاة للمنتصف ( راجع الصورة )
6- نقوم بتغير اسماء الطبقات مثلا إلى abc4web-orb_2 / abc4web-orb_1
ثم نخفي الطبقة الأولى بإزالة العين التى بجوارها فى صندوق الطبقات وسيكون صندوق الطبقات بهذا الشكل :
إضافة التأثيرات على الطبقة الأولى :
7- الآن نعود إلى الطبقة الأولى ( abc4web-orb_1 ) ونقف عليها ثم نذهب إلى Blending Option ونضيف هذه التأثيرات :
Bevel and Emboss
Gradient Overlay
وسوف نحصل على هذه النتيجة
إضافة التأثيرات على الطبقة الثانية
8- الآن نظهر الطبقة الثانية (abc4web-orb_2) ونقف عليها كي نضيف إليها بعض التأثيرات.
9- نقف على الطبقة الثانية ( abc4web-orb_2 ) ثم نذهب إلى Blending Option ونضيف هذه التأثيرات :
Inner Shadow
Gradient Overlay
ردا على سؤال الأخ محمود فى كيفية تحريك الشعاع فى الخطوة رقم 9
الطريقة :
أثناء تنفيذ التأثير Gradient Overlay تلاحظ أننا إخترنا radial أى شعاعي
وبعد إضافة القيم المذكورة تظهر هذه الإضاءة لاتغلق نافذة Blending Option
وأذهب لها بأصغر ماوس عندك وبأصغر إصبع وقم بتحريكها فى التصميم للمكان الذى تريد ، بس خلاص !!!
Stroke
وسوف نحصل على هذه النتيجة
10- نقوم بإضافة لمعة زجاجية على الزر نذهب إلى الطبقة الأولى ونقوم بتفعيل التحديد ( وذلك بالضغط على مفتاح Ctrl من لوحة المفاتيح + الضغط على الطبقة بيسار الماوس )
نغير طريقة التحديد من شريط الأدوات
11- نستخدم اداة التحديد الدائري Elliptical Marquee Tool ونرسم مثل هذا الشكل البيضاوي
وبمجرد التوقف سوف نحصل على هذه النتيجة
12- نترك التحديد نشيط كما هو ونقوم بإضافة طبقة جديدة ونسميها مثلا التأثير الزجاجي
ونملئ هذه الطبقة باللون الأبيض ونجعل الشفافية تقريبا 25% ( opacity 25% ) لنحصل على هذه النتيجة
لنحصل أخيرا على هذه النتيجة النهائية
أضف بعض لمساتك الخاصة وبعض الأيقونات ليكون عندك أزرار وقوائم إحترافية من تصميمك الخاص
هام :
للحصول على ألوان متعددة من نفس التصميم يمكنك تغير لون الـ orb فى الخطوة رقم 8 وذلك فى تأثير Gradient Overlay
لتصميم توقيع نستخدم نفس التأثيرات مع تغير شكل الرسم مكان دائرة سيكون مستطيل دائرى الحواف مثلا ثم ننسخ التأثير من الطبقات ونلصقها كما تعرفون طبعا .
معنى Orb = جُرم أو كوكب في السماء
:bar:
.
يمكنكم تحميل عرض تصميم القائمة بالجافا والتوقيع وكذلك عرض الأيقونات من المرفقات
ملحوظة : المثال لايعمل على المتصفحات القديمة يجب تحديث الإكسبلورار لديكم إلى الإصدار 7 أو 8
يمكنكم التحديث من هنا :dw2:
:at:
أتمنى أن يوفقني الله وأجد وقت كي أشرح هذه التطبيقات فى كتاب إلكتروني قريبا إن شاء الله
وفى إنتظار التطبيقات إن شاء الله
أتمنى للجميع التوفيق
ولاتنسونا من صالح دعائكم
أبوهمام
.
)
تعليق