بسم الله الرحمن الرحيم
هذا الدرس مفيد جداً و مهم ، و في نفس الوقت بسيط إن شاء الله ..
مقدمة
أظن أغلبكم رأى مواقع يتمدد تصميمها مع تصغير و تكبير المتصفح ، فهل سألت نفسك يوماً ، كيف يمكن فعل ذلك ؟!
هذا ما سنتعلمه في هذا الدرس بإذن الله ، و هو كيفية جعل تصميم الموقع يتمدد تلقائياً ليتناسب مع متصفح الزائر ..
سنحتاج في تطبيق هذا الدرس إلى برنامجين :
1- الفوتوشوب ..
2- الفرونت بيج ..
---
مصطلحات يجب معرفتها قبل البداية
Header : الهيدر ، هو البانر العلوي الذي في أعلى الموقع .
Footer : الفوتر ، هو البانر السفلي الذي في أسفل الموقع .
---
خطوات برنامج الفوتوشوب
نقوم بتصميم الهيدر و الفوتر (الأفضل أن يكون كل واحد لحاله) .
و سنكتفي في هذا الدرس بالشرح على الفوتر ، لأنك إذا عرفت التطبيق على الفوتر فالتطبيق على الهيدر لا يختلف عنه ..
صمم الفوتر على ذوقك و بما يناسب موقعك ، و بعد الانتهاء من تصميم الفوتر نقوم باختيار الأداة التالية لنقوم بتقطيع الصورة ..
و نقطع الفوتر على الشكل التالي
تنبيه
اجعل القطعة اليمنى مساوية للقطعة اليسرى ..
(للدقة في القياس بإمكانك الاستعانة بالمسطرة عن طريق الضغط على Ctrl+r)
الأجزاء التي نحتاجها من الصورة السابقة هي
1 و
3 و
5
اضغط كلك يمين على رقم
1 ، ثم اختر
Edit Slice Options ، و اكتب في خانة
Name التالي :
footer_left ،،، ثم اضغط على
OK ..
و نفس الطريقة لرقم
3 ، و قم بتسميته
footer_c ، ثم اضغط على
OK
و كذلك نفس الطريقة لرقم
5 ، و قم بتسميته
footer_right ، ثم اضغط على
OK
الآن من قائمة
File اختر
Save for web ،،، ثم اضغط على
save
و بالنسبة لخيار
Save as type فاجعله
Images Only (*.gif
كما ذكرت في البداية ، اقتصرت في هذا الشرح على منطقة الفوتر ، لأنك لو عرفت التطبيق على الفوتر فستعرف التعامل مع الهيدر ..
و هكذا انتهى دور الفوتوشوب
((لعل البعض يواجه بعض الصعوبات ، فمن باب التسهيل عليكم وضعت لكم في المرفقات ملف zip فيه ملف الـpsd للفوتر الذي طبقت عليه المثال السابق ، و صور الـgif أيضاً))
يتبع الدرس في الرد القادم ..