![]() |
شرح تصميم هيدر موقع ويب مع الازرار
منتدايات جرافيكس اكديمي GRAPHICS ACADEMY http://neogeni.yoo7.com موقع شامل لجميع برامج الجرافيكس والتصميم وتطوير المواقع دروس متكاملة ودورات فوتوشوب , فلاش , ثري دي ماكس , دريم ويفر , تصميم وتطوير وأشهار المواقع , أكواد , جميع نسخ وأسطوانات الويندو ![]() بســـ الله الرحمن الرحيم ــــم الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين السلام عليكم ورحمة الله وبركاته بكل الحب والخير أسعد الله جميع أوقاتكم وأهلاُ بكم يسرني اليوم ان اقدم لكم هذا الشرح المتواضع والمفيد للجميع بإذن الله تعالى ~¤ô§§§§[ تصميم هيدر موقع ويب + ازرار ]§§§§ô¤~ مستوى الدرس ـ ـ متقدم إصدار فوتوشوب ـ ـ CS4 - CS3 - CS2 - CS نتوكل على الله ونبدأ وإياكم شرح هذا الدرس بدون تطويل افتح برنامج الفوتوشوب وافتح صفحة عمل جديدة بالمقاس والإعدادات الموضحة بالشكل التالي ![]() ملاحظة: لاتتقيد بأحجام الصور أو النصوص بالشرح لأني قد أقوم بتصغيرها للتنسيق المهم أن تتقيدوا بتطبيق نفس القيم والإعدادات كما يتم توضيحها خلال الشرح بعد أن قمنا بفتح صفحة العمل الجديدة نملئ خلفية الطبقة بالون الرماديe1e1e1 ثم نقوم باختيار أداة الرسم البيضوية Rounded Rectangle Tool ونقوم بعمل شكل مشابه للشكل الموضح بالصورة التالي ![]() بعد ذلك نقوم بتغيير اسم الطبقة لاسم headr للتمييز بشكل أكثر وعدم اختلاط الأمور علينا ![]() الآن سنقوم بتطبيق المؤثرات المطلوبة على طبقة headr كما سنشاهد بالأشكال التالية مع مراعاة الانتبـاه بشكل جيـد للإعدادات والقيـم الموضحة بكـل شكل كما هـوى موضـح Drop Shadow ![]() Gradient Overlay ![]() Stroke ![]() الآن يفترض أن يكون قد أصبح لديك الشكل التالي بعد تطبيق المؤثرات السابقة ![]() الآن نقوم بإنشاء طبقة جديدة ونطلق عليها اسم Glass لنضيف لمعة زجاجية للشكل بعد إنشاء طبقة Glass نقوم بتحديد الشكل بطبقة headr ويتم ذلك من خلال الضغط على مفتاح Ctrl والضغط على الطبقة بزر الماوس الأيمن مع التنويه لأن العمل على طبقة Glass بعد عمل التحديد نقوم باختيار أداة Rectangular Marquee Tool مع اختيار الإعدادات الموضح بالشكل التالي ![]() بعد ذلك نقوم بحذف النصف السفلي من التحديد كما يوضح لنا الشكل المتحرك التالي ![]() بعد ذلك نملأ التحديد بالون الأبيض ونغير خصائص اوبتكل الطبقة لنسبة Opacity %25 وللتنويه من يجيد استخدام أدوات الرسم Pen Tool يمكنه استخدامها لعمل منحنيات جميله في طبقة Glass للجمال أكثـر ولكـن بشرحنا هذا نكتفي بما فعلنا محاوليـن التسهيـل بالشرح ليستفيد جميـع الأخوة من هذا الشرح والتطبيق أما المسائـل الاحترافيـة فكـل شخص وفنياتـه الآن نتابع وإياكم الشرح وننشأ طبقة عمل جديدة أسفل طبقة Glass ونطلق عليها اسم Mile ونقوم باختيار أداة رسم الخط الأفقي Line Tool ونقوم برسم خط افقي مستقيم بحجم PX 2 مع مراعاة الضغط على مفتاح Shift بلوحة المفاتيح أثناء رسم الخط للحصول على خط مستقيم كما يوضح لنا الشكل المتحرك التالي ![]() بعد ذلك نقوم بتطبيق المؤثر Outer Glow على طبقة Mile بنفس القيم والإعدادات الموضحة ![]() من المفترض الآن أن تكون نتيجة تطبيقك مشابهة للشكل التالي ![]() الآن نقوم بإنشاء طبقة جديدة أسفل طبقة Headr ونطلق عليها اسم Button بعد إنشاء الطبقة نقوم باختيار أداة الرسم البيضوية Rounded Rectangle Tool ونرسم شكل مقارب للشكل الموضح بالصورة التالية ![]() الآن نبدأ بإضافة المؤثرات المطلوبة للزر بحسب الإعدادات والخيارات الموضحة بالأشكال التالية Drop Shadow ![]() Gradient Overlay ![]() Stroke ![]() مع التنويه لأنه من يريد إضافة Glass لطبقة الزر يمكنه ذلك فالأمر كيفي ولك الحرية أما أنا فأكتفي بهذا ودعونا نرى الترتيب النهائي للشكل ولوحة الطبقات معاً للتوضيح ![]() وهذا شكل تطبيقي النهائي بعد توزيع الأزرار على التصميم بمايناسب تطبيقي ![]() وكما تعودنا بشكل دائم مع أي تطبيق أو شرح فنحن نشرح المبادئ الأساسية للتصميم ونفسـح المجـال لكـم للإبداع والتألـق بالمسائـل الفنيـة والجماليـة للمتابعـة والابتكارات ![]() أخيراً وفي ختام هذا الشرح أعتذر إليكم عن الخطأ والتقصير فهذا جهد بشري وهــو معـرض للنقص والزيــادة فـإن وجدتــم فيــه ضالتكــم فالحمــد لله وإن غير ذلك فتصدقوا على أخيـكــم بعفوكــم وصفحكــم عنــه فيما قصر وإلى أن ألقاكــم بـموضــوع جـديــد لكــم منــي خالص الشكــر والتقـديــر الموضوع الأصلي http://neogeni.yoo7.com/montada-f1/topic-t510.htm |
شرح رائع ، مشكور أخي
جزاك الله خيراً |
مشكور فعلا علي المجهود الرائع
ولكن يفضل ان يقوم الاعضاء بالمشاركه وعمل تصاميم وعرضها هنا ويتم النظر عليها من قبلك استاذي وتقوم بالقاء النصائح ويكون لنا الشرف لكي نتعلم منك وفي انتظار المزيد المتميز منك |
جزاك الله كل خير درس مفيد جدا
|
شرح بسيط وسهل
يعطيك العافية |
شكراا بارك الله فيك
|
جميع الأوقات بتوقيت مكة المكرمة. الساعة الآن » 02:34 PM. |
Powered by vBulletin
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Copyright © ArabWebTalk.Com 2004-2012