صمم موقعك بالفوتوشوب
الجزء الثاني من درس تصميم الموقع، هنا نبين
طريقة تقطيع الصور وتصديرها للعمل عليها
بعد الإنتهاء من تصميم الموقع بالفوتوشوب بقت خطوة أخيرة ومهمة جداً
تحويل التصميم إلى شكل نستطيع من خلاله إضافة الكتابة واللنكات
يعني تحويله إلى صيغة HTML
في هذا الدرس سنتطرق إلى عملية تقسيم التصميم إلى عدّة صورة أصغر مقسّـمة في داخل إطارات Tables في البعض منها سنترك الصورة في داخل الإطار وفي البعض الآخر سنحذف الصورة من بطن الإطار وسنترك الإطار فارغ حتى ندخل فيه ما نريد من كتابة ومواد أُخرى بواسطة برامج الدريم ويفر، الفرونت بايج أو كتابة الكود باليد بوساطة الـ Note Pad
أختر أداة التقصيص أو التقسيم … مأ أعرف شسـمها بالضبط لكن هذا هو شكلها
أضغط بواسطة هذه الأداة في الأجزاء التي تريد تقسيم التصميم وإسحبها لليمين، اليسار، الأسـفل أو الأعلى حسب الطلب
خطوة مهمة أحب أن أنبهك وهو إذا إرتكبت خطأ مـا فبإمكانك أخي القارئ أختي القارئة أن ترجعون للوراء خطوة واحدة أو عدة خطوات وذلك من خلال نافذة الـ History أو لسهولة أكثر بالضغط على CNTRL + ALT + Z
هذا الشكل ستحصل عليه بعد أن تقوم بتقصيل التصميم أو تقطيعه:
قم الآن بإختيار أداة الـ Slice Select Tool
سنقوم في هذه الخطوة بتحويل بعض أجزاء التصميم إلى مكانات فارغة حتى نستطيع أن ندخل فيها ما نريده بواسطة برامج التصميم .. ممثل لنكات، أزرار، أخبار، فلاش وغيره
بواسطة هذه الأداة أضغط في داخل القسم المقطّع بالزر الأيمن من الفأرة
هنا أخترنا الرقم 07 كما في الشكل التالي:
أختر من القائمة Edit Slice Options كما في الشكل التالي:
من نافذة خيارات التقطيع أختر No Image كما في الشكل التالي:
أيضاً نت خيارات الخلفية Slice Background Type إختر لون الخلفية التي تريد
أمـا في مكان الـ Text Display فيمكنك وضع الكتابة التي تريدها … تستطيع وضعها هنا في الفوتوشوب أو الدريم ويفر
طبق نفس الخطوة في المناطق التي تريد أن تحذف منها الصورة المقطعة لتركها فارغة حتى تضيف على المكان الفارغ ما تريده بواسطة الفرونت بايج والدريم ويفر
في هذا التصميم حذفنا أيضاً الصورة الموجودة في القطعة رقم 09 وكذلك رقم 03
سترون النتيجة النهائية قريباً إن شاء الله صبركم شوي معانا لأننا تقريبا إنتهينا
بعد حذف القطع إختر من قائمة الـ file
Save For Web
أختر نوع الملفات التي تريد حفظها سواء تريد أن تحفظها بصيغة الـ JPG أو الـ GIF أو الـ PING
أضغط على SAVE
من النافذة الجديدة ستلاحظ في الأسفل
Save as Type : HTML
أدخل إسم الصفحة كأن يكون مثلاً
index أو أي إسم تريد كما في الشكل التالي
إضغط الآن على Save
سيقوم البرنامج بحفظ الصور الموجودة في داخل جداول Tables
من السهل علينا التحكم بما في داخل الجداول بواسطة الدريم ويفر أو لغة الـ HTML
الصور ستكون محفوظة في داخل مجلد خاص بها بإسم IMAGES
لاحظ كيف أن المناطق البيضاء خالية من الصورة وهذه ميزة لطيفة جداً تسهل علينا إضافة ما نريده من ملفات في داخل الجداول الفارغة مثل ملفات الـ Flash أو إضافة كتابة Text أو لنكات
الجزء الثاني من درس تصميم الموقع، هنا نبين
طريقة تقطيع الصور وتصديرها للعمل عليها
Save For Web
Save as Type : HTML
index أو أي إسم تريد كما في الشكل التالي
أضغط هنا
لمشـاهدة درس خاص في عملية تقطيع الصور بالفوتوشوب:
أضغط هنا
Ali