درس تصميم فوتر بطريقة web 2.0

[c0ptin_hackers]

كيفكم اليوم اعزائي اعضاء و زوار منتديات نيوستايل ؟؟ إن شاء الله تكونوا بخير .
سنتعلم اليوم سويا كيفية صنع فوتر للموقع الخاص بنا من نوعية التصماميم WEB 2.0 ,,

النتيجه النهائيه لدرس اليوم :



الخطوه 1 :

التدرجات تعتبر ثمه اساسيه من التصاميم ال WEB 2.0 , و لتطبيق درسنا بشكل إحترافي سنستعمل بعضا منها ,, ستجدون ملف خاص بها في المرفقات اسمه web_2_0_grads_v30 ,,



بالنسبه لطريقة إستعمالها في الفوتوشوب , شاهد الصوره التاليه



لخطوه 2 :

قم بفتح مساحة عمل جديده , انا اخترت الابعاد 1440*900 PX

بالطبع الفوتر لا يجب ان يكون بهذا الكبر , و لكن هذا جيد لمحاكاة ماذا يحدث عندما تكون نافذة المتصفح متمدده ,,

قم بإختيار لون الخلفيه , انا اخترت كلون الخلفيه الخاص بي تدرج من اللون #b0b0b0 و اللون #e1e1e1 ,,قم بتحريك مؤشر الماوس مع الضغط علي زر SHIFT لخلق تدرج رأسي منحدر ,,



الخطوه 3 :

بالنسبه لتصميم المواقع يجب عليك ان تحدد نوع التصميم , هل هو من التصاميم التي العريضه التي تتمدد عبر المتصفح , او من التصاميم ذات الابعاد الثابته التي لا تتغير (معظم التصاميم من نوعية WEB 2.0 ذات ابعاد ثابته لا تتغير ) ,,

في الفوتر الخاص بنا سنتعامل مع ابعاد ثابته و هي حوالي 760px x 420px ,,و تلك القياسات ستضمن لنا انه حتي لو تم إستعراض الموقع بشاشة ذات ابعاد 800px x 600px screen سيظل الفوتر الخاص بنا مخافظ علي ابعاده ,, و يظهر بصوره جميله لا عـيـب فيها ,,

استعمل ادله او (guides) لتحديد ابعاد الموقع الخاص بك كما في الصوره التاليه ,,

لاحظ انك لو اردت ان تجعل الفوتر ملائم للابعاد 1024px x 768px يجب عليك ان تضبط الدليل او ال guides علي 955px x 600px ,,



خطوه 4 :

بالرغم من إن الفوتر اللذي نصممه ذو ابعاد ثابته , و لكننا مازلنا نحتاج إلي جعل الفوتر يتمدد في الصفحات و يملئ الاماكان الفارغه إن وجدت ,,

و لفعل هذا سنستعمل باترن يمكنكم الحصول عليه من المرفقات ستجد اسمه pattern.jpg ,,, المهم فائدة هذا الباترن هو انه يحاكي شكل اللوحه المعدنيه ,

طريقة إستعمال هذا الباترن : قمخ بفتح الصوره الخاصه به في الفوتوشوب , ثم قم بالذهاب إلي Edit > Define Pattern و قم بتسميته بإي اسم تريد ,,,

,, الان قم بفتح ملف جديد او مساحة عمل جديده بالابعاد التاليه عرض 1440px , طول 86px ,,

قم بالذهاب إلي Edit > Fill ثم إختر الباترن اللذي قمنا بعمله منذ قليل ,,

قم بالضغط علي CTRL+A ,

قم بعمل CUT ,,

قم بعمل paste في اسفل مساحة العمل الاولي ,,

ستحصل علي نتيجه تشبه الاتي



الخطوه 5 :

الان حان الوقفت لإستعمال ال gradient package التي حصلنا عليها من الخطوه الاولي ,,,

قم بعمل طبقه جديده ,,

قم برسم مستطيل بإستعمال الاداه Marquee Tool (M) ارسمه بعرض مساحة العمل كلها و بطول حوالي 21px ,,

قم بإستعمال اداة Gradient Tool (G)

قم بإختيار تدرج جذاب, انا اخترت "Black 5 - Gloss" من المجموعه التي سبق و حلمناها ,,

قم بتحريك اداة التدرج عموديا فوق المستطيل مع الضغط علي زر SHIFT حتي نتأكد انها عموديه بالفعل ,.

قم بتحريك النتيجه إلي اعلي الشكل اللذي قمنا بعمله في الخطوه 4 ,,

النتيجه الحاليه ,,



الخطوه 6 :

قم بإاضافة تأثير drop shadow علي الطبقه التي قمنا بعملها في الخطوه 5 ,,



لخطوه 7 :

قم بضبط اللون الامامي (Foreground) علي #545557 ,,

قم بضبط اللون الخلفي (Background Color) علي #1e211f ,,

قم بعمل طبقه جديده اسفل الطبقه التي قمنا بعملها في الخطوه ال 4 ,,

قم بإستعمال الاداه Marquee Tool (M) لتحديد ما تحتويه الطبقه الخاصه بالخطوه ال 4 ,,

قم بإختيار الاداه Gradient Tool (G) ...

قم بإختيار التدرج الاول و جمع بين الالوان الاماميه و الخليفه ,,

قم برسم التدرج مع الضغط علي زر SHIFT للحصول علي تدرج عمودي ,,

الان قم بالذهاب إلي الطبقه الخاصه بالخطوه ال4 و قم بضبط blending mode علي Multiply ,,



خطوه 8 :

قم بعمل طبقه جديده اعلي جميع الطبقااات ,,

قم برسم مستطيل دائري الاركان في المنتصف ,,

قم بتلوينه باللون #dfdfdf ,,

قم بالنقر بزر الماوس الايمن علي الطبقه و قم بإختيار Blending Options ,,

قم بعمل Drop Shadow علي المستطيل ,,

ثم قم بالنقر بزر الماوس الايمن علي الطبقه الخاصه بالتأثير قم إضغط علي الخيار "create layer" حتي تحصل علي طبقه عاديه خاصه بها ,,,



الان انت تمتلك طبقه خاصه بالمستطيل و طبقه خاصه بالظل (shadow) ,,

قم بتغير حجم الطبقه الخاصه بالظل (shadow) لتحصل علي نتيجه تشبه الاتي ,, من الممكن ان تضغط علي زر CTRL+T لتحصل علي وضع التحريك الحر و تفعل ما تشاء بسهوله , ثم قم بالنقر علي زر الماوس الايمن و تختار Perspective ,,

قم بسحب المقبضين العلوين كل منهما في إتجاه الاخر ,,

يمكنك تحريك الظلال إلي اسفل ثم إستعمل اداة الممحاه بفرشاه ناعمه و تمحو اعلي الحواف ,,



لخطوه 10 :

لجعل الفوتر جاهز للعمل في ملفك ال HTML الخاص بموقعك , قم بحذف النصوص ( النص سيضاف في الملف ال HTML) ,,

قم بعمل CUT للخلفيه الخاصه بالفوتر كما في الصوره التاليه ,,

قم بعمل paste لها في ملف جديد ,,

قم بتحديد منتصف الفوتر و قم بعمل CUT له و قم بعمل PASTE له في ملف اخر ,,

قم بحفظ الملفين بإستعمال الامر Save > Save For Web & Devices ثم إختر JPG و اختر جوده مناسبه ,,

الصور من نوع JPGs و PNGs مناسبه جدا للصور التي تحتوي علي العديد من التدرجات و الالوان بدرجاتها ,,
الصور من نوع GIF مناسبه للصور التي تحتوي علي لون مسطح ,,



النتيجه النهائيه



إنتهي الدرس

[العارض]

يعطيك الف عافيه يالغالي

\\

لو سمحت ياليت توضح

يجب عليك ان تضبط الدليل او ال guides علي 955px x 600px ,,

ياليت توضحها بالصور

واكون لك من الشاكرين

[Okba.Dz]

بوركَ فيكْ وانا مبتدئ الدرس مو مفهومْ شوي

ياليت تفهمنا خطوة بخطو الدرس

[Rutru0130]

ممنوع اضافة روابطـ لمواقع آخرى الهدف منها الدعايه

[u.s.c]

بوركت أخى وسلمت يداك
جزاك ربى خيرا

[vip_becks7]

أخي العزيز
بارك الله بك ، عمل رائع جداً جداً جداً
ولكن لايوجد ملف في المرفقات

[kasem]

فين المرفقات طيب

[ح ـــكـم القدر]

بارك الله فيك

تسلم

[فراشة الآمال]

شرح رائع وواضح
شكرا لك عالدرس