شرح تصميم هيدر موقع ويب مع الازرار

[كينج نت]

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

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

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

بكل الحب والخير أسعد الله جميع أوقاتكم وأهلاُ بكم

يسرني اليوم ان اقدم لكم هذا الشرح المتواضع والمفيد للجميع بإذن الله تعالى

~¤ô§§§§[ تصميم هيدر موقع ويب + ازرار ]§§§§ô¤~

مستوى الدرس ـ ـ متقدم
إصدار فوتوشوب ـ ـ CS4 - CS3 - CS2 - CS

نتوكل على الله ونبدأ وإياكم شرح هذا الدرس بدون تطويل

افتح برنامج الفوتوشوب وافتح صفحة عمل جديدة بالمقاس والإعدادات الموضحة بالشكل التالي

http://img199.imageshack.us/img199/4744/headr1.gif

ملاحظة: لاتتقيد بأحجام الصور أو النصوص بالشرح لأني قد أقوم بتصغيرها للتنسيق

المهم أن تتقيدوا بتطبيق نفس القيم والإعدادات كما يتم توضيحها خلال الشرح

بعد أن قمنا بفتح صفحة العمل الجديدة نملئ خلفية الطبقة بالون الرماديe1e1e1

ثم نقوم باختيار أداة الرسم البيضوية Rounded Rectangle Tool

ونقوم بعمل شكل مشابه للشكل الموضح بالصورة التالي

http://img64.imageshack.us/img64/4406/headr2.gif

بعد ذلك نقوم بتغيير اسم الطبقة لاسم headr للتمييز بشكل أكثر وعدم اختلاط الأمور علينا

http://img194.imageshack.us/img194/1363/headr3.gif

الآن سنقوم بتطبيق المؤثرات المطلوبة على طبقة headr كما سنشاهد بالأشكال التالية

مع مراعاة الانتبـاه بشكل جيـد للإعدادات والقيـم الموضحة بكـل شكل كما هـوى موضـح

Drop Shadow

http://img138.imageshack.us/img138/4893/headr4.gif

Gradient Overlay

http://img109.imageshack.us/img109/921/headr5.gif

Stroke

http://img686.imageshack.us/img686/2258/headr6.gif

الآن يفترض أن يكون قد أصبح لديك الشكل التالي بعد تطبيق المؤثرات السابقة

http://img14.imageshack.us/img14/7411/headr7.gif

الآن نقوم بإنشاء طبقة جديدة ونطلق عليها اسم Glass لنضيف لمعة زجاجية للشكل

بعد إنشاء طبقة Glass نقوم بتحديد الشكل بطبقة headr ويتم ذلك من خلال الضغط على

مفتاح Ctrl والضغط على الطبقة بزر الماوس الأيمن مع التنويه لأن العمل على طبقة Glass

بعد عمل التحديد نقوم باختيار أداة Rectangular Marquee Tool مع اختيار الإعدادات

الموضح بالشكل التالي

http://img190.imageshack.us/img190/8103/headr8.gif

بعد ذلك نقوم بحذف النصف السفلي من التحديد كما يوضح لنا الشكل المتحرك التالي

http://img69.imageshack.us/img69/5287/headr9.gif

بعد ذلك نملأ التحديد بالون الأبيض ونغير خصائص اوبتكل الطبقة لنسبة Opacity %25

وللتنويه من يجيد استخدام أدوات الرسم Pen Tool يمكنه استخدامها لعمل منحنيات جميله

في طبقة Glass للجمال أكثـر ولكـن بشرحنا هذا نكتفي بما فعلنا محاوليـن التسهيـل بالشرح

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

الآن نتابع وإياكم الشرح وننشأ طبقة عمل جديدة أسفل طبقة Glass ونطلق عليها اسم Mile

ونقوم باختيار أداة رسم الخط الأفقي Line Tool ونقوم برسم خط افقي مستقيم بحجم PX 2

مع مراعاة الضغط على مفتاح Shift بلوحة المفاتيح أثناء رسم الخط للحصول على خط مستقيم

كما يوضح لنا الشكل المتحرك التالي

http://img706.imageshack.us/img706/690/headr10.gif

بعد ذلك نقوم بتطبيق المؤثر Outer Glow على طبقة Mile بنفس القيم والإعدادات الموضحة

http://img196.imageshack.us/img196/5450/headr11.gif

من المفترض الآن أن تكون نتيجة تطبيقك مشابهة للشكل التالي

http://img51.imageshack.us/img51/3078/headr12.gif

الآن نقوم بإنشاء طبقة جديدة أسفل طبقة Headr ونطلق عليها اسم Button

بعد إنشاء الطبقة نقوم باختيار أداة الرسم البيضوية Rounded Rectangle Tool

ونرسم شكل مقارب للشكل الموضح بالصورة التالية

http://img188.imageshack.us/img188/2571/headr13.gif

الآن نبدأ بإضافة المؤثرات المطلوبة للزر بحسب الإعدادات والخيارات الموضحة بالأشكال التالية

Drop Shadow

http://img694.imageshack.us/img694/3301/headr14.gif

Gradient Overlay

http://img269.imageshack.us/img269/6610/headr15.gif

Stroke

http://img707.imageshack.us/img707/6580/headr16.gif

مع التنويه لأنه من يريد إضافة Glass لطبقة الزر يمكنه ذلك فالأمر كيفي ولك الحرية

أما أنا فأكتفي بهذا ودعونا نرى الترتيب النهائي للشكل ولوحة الطبقات معاً للتوضيح

http://img195.imageshack.us/img195/6761/headr17.gif

وهذا شكل تطبيقي النهائي بعد توزيع الأزرار على التصميم بمايناسب تطبيقي

http://img64.imageshack.us/img64/183/headr18.gif

وكما تعودنا بشكل دائم مع أي تطبيق أو شرح فنحن نشرح المبادئ الأساسية للتصميم

ونفسـح المجـال لكـم للإبداع والتألـق بالمسائـل الفنيـة والجماليـة للمتابعـة والابتكارات

http://img27.imageshack.us/img27/2545/1566666.png

أخيراً وفي ختام هذا الشرح أعتذر إليكم عن الخطأ والتقصير فهذا جهد بشري

وهــو معـرض للنقص والزيــادة فـإن وجدتــم فيــه ضالتكــم فالحمــد لله

وإن غير ذلك فتصدقوا على أخيـكــم بعفوكــم وصفحكــم عنــه فيما قصر

وإلى أن ألقاكــم بـموضــوع جـديــد لكــم منــي خالص الشكــر والتقـديــر

[خالد القحطاني]

وكذالك يستحق التقييم

بجد مواضيع مميزه

موضوعين ومن افضل المواضيع


بارك الله فيك يا مبدع واصل ابداعك

[ahaeg]

بارك الله فيك

مميز

[DOLPHIN]

ممتاززززززززززززززززززززز زززززززززززززززز
ارجو ان تقبلني تلميذا عندك
انا مصمم فوتوشوب
اريد ان اكتسب الخبره منك اخي ارجو ان تقبل طلبي ^_^

[كينج نت]

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

حياكم الله اخواني جميعاً

اشكركم للمرور العطر والتواصل

كما اشكركم لكلماتك الطيبه والذي إن دلت إنما تدل على طيب اخلاقكم


ممتاززززززززززززززززززززز زززززززززززززززز
ارجو ان تقبلني تلميذا عندك
انا مصمم فوتوشوب
اريد ان اكتسب الخبره منك اخي ارجو ان تقبل طلبي ^_^

العفو أخي الحبيب فكلنا نتعلم ونكتسب ونتبادل المعرفه والمعلومه

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

اتمنى لك التوفيق واهلاً بك وبجميع الاخوه

اما مسألت التعليم فجميعنا نتابع دروس بعضنا البعض ونستفيد بإذن الله

مجدداً اشكركم للمرور الجميل والتواصل الطيب

بالتوفي للجميع بإذن الله تعالى

.

[7assavitch]

بارك الله فيك

مميز

[د.سعيد]

مشكووووووووووووور وما قصرت

[تعال عمري]

يعطيك الف عافية ع الشرح الرائع



ودي

[martn]

مشكورر جدا

[Ahmed Fouda]

والله رائع جداااااااااااااااااا