الرئيسية الأخبار محاضرات فن سيرة فنان ذاكرة من صور فريق العمل  

كيفية حفظ صفحة انترنت بعد تصميها بـ"الفوتو شوب" واخراجها بصيغة "HTML"


فتيان اكرم الفتيان
عدد القراءات -2891
2011-12-22
2اضغظ للحصول على الحجم الطبيعي للصورةان جميع صفحات الانترنت في الحقيقة هي مقسمة الى عدة مستطيلات او جداول خفية مختلفة الاحجام توضع فيها اجزاء التصميم والمعلومات لكي تظهر في الشكل النهائي بهيئة صفحة واحدة متكاملة.


انظر الشكل (1)

لكن هذا لا يعني ان التصميم من الناحية الشكلية يجب ان يكون ايضا مقسم على شكل مستطيلات او جداول مترابطة، لكن يجب مراعاة هذه التقسيمات اثناء تنفيذ فكرة التصميم المطلوبة للصفحة.

عملية تقسيم التصميم الى جداول تخصص اماكن الصفحة كلٌ حسب وظيفته، اي يخصص جزء للإعلانات وجزء للاقسام والورابط التشعبية وجزء لشعار الموقع وجزء للاخبار، وهكذا حسب متطلبات الصفحة. وهذا يمكننا من تغيير المعلومات في احدى هذه الاجزاء بدون العودة الى التصميم ككل، اي تغيير الجزء فقط.
الاداة التي ستقوم بهذه المهمة في برنامج فوتوشوب هي الاداة (Slice tool)، ويمكن الوصول اليها من خلال شريط الادوات، اذ سنجدها مختبئة ضمن ادواة (Crop tool)، او من خلال الضغط على (Shift+c).
انظر الشكل (2)

بعد تقسيم الصفحة بأداة (Slice tool) حسب التصميم، سيعرض فوتوشوب التقسيمات متضمنة رقم تسلسلي وشكل صغير اشبه بالجبل في الزاوية اليسرى من كل جزء، ان الارقام تشير الى تسلسل وترتيب الجداول او الاجزاء مع ملاحظة لون الارقام اذا كان ازرق فهذا يعني ان الجدول من صنع يد المصمم اما اذا كان لونه رمادي فهذا يعني انه صُنِعَ تلقائياً، اما عن شكل الجبل الذي يظهر الى يمين الرقم فهو دلالة على ان الجدول يتضمن صورة.

وعند النقر بمرة واحدة على الرقم التسلسلي سيتحدد الجزء بإطار ذهبي اللون للتأكيد على انتقاء الجزء. وباستخدام اداة (Slice tool) وبنقر مزدوج على الجزء المحدد سيظهر مربع حوار يسمح بتغيير او اضافة اسم للجزء من خلال (name)، وإضافة رابط الى صفحة اخرى او الى موقع على الانترنت من خلال (URL). انظر الشكل رقم (3). شكل لوحة المواصفات

اذن بهذه الطريقة ايضا يمكننا ان نعمل لوحة ازرار انتقال رئيسية للصفحة الانترنت او الموقع ونعطي لكل زر من هذه الازرار رابط خاص. انظر الشكل رقم (4) شكل ازرار مقسمة


- تصدير العمل او التصميم الى صيغة (HTML):

بعد الانتهاء من التقسيمات واضافة الروابط، نحفظ العمل اولاً بصيغة (psd)، ثم نحفظ التصميم بـصيغة (HTML) عن طريق الذهاب الى (file) ومن ثم اختيار (save for web & Dvices).
اللوحة المخصصة لـ(save for web & Dvices)، تعرض التصميم وتشير الى حجمه في الزاوية اليسرى في اسفل اللوحة، ومن خلال تحديد الجزء عن طريق اداة (Slice tool) في اللوحة ذاتها سنرى حجم الجزء او الصورة المحددة من الزواية نفسها. ومن خلال قائمة (preset) في اعلا يمين اللوحة نتمكن من تحديد نوعية الصورة (jpeg او gif او ping او bmp) والتحكم بدقتها ايضاً. انظر الشكل رقم (5) شكل اللوحة مشيرة الى حجم الصفحة ومكان تخيير نوعية الصورة والدقة
نضغط بعدها على (save) ومنه نحدد اسم الملف، والاهم من قائمة (Format) نختار (HTML and Images). وهذا سيعمل على حفظ التصميم بشكل صفحة انترنت وبلغة (HTML) مع ملف للصور المتعلقة بالتصميم.

اضغظ للحصول على الحجم الطبيعي للصورة
درس عملي .. رسم تفاحة بالوان اكرليك (فيديو) » درس عملي .. رسم تفاحة بالوان اكرليك (فيديو)

تحليل لوحة غيرنيكا (Guernica) لبيكاسو (فيديو) » تحليل لوحة غيرنيكا (Guernica) لبيكاسو (فيديو)

بحث الصورة » بحث الصورة

الانزياح والعودة في اللوحة التشكيلية صدمة التاريخ » الانزياح والعودة في اللوحة التشكيلية صدمة التاريخ

لوحة قبر باربع لغات تعود لعام 1149م » لوحة قبر باربع لغات تعود لعام 1149م

سول باس
قدرات تصميمية مميزة في مجال البوستر والعلامات التجارية » سول باس قدرات تصميمية مميزة في مجال البوستر والعلامات التجارية

الانزياح التركيبي للزمن في الفيلم الروائي » الانزياح التركيبي للزمن في الفيلم الروائي

فرنسا وتاريخ الملصق » فرنسا وتاريخ الملصق

الألوان في القرآن .. رؤية فنية ومدلول » الألوان في القرآن .. رؤية فنية ومدلول

تصميم العلاقات في الزمن والفضاء » تصميم العلاقات في الزمن والفضاء

كيفية حفظ صفحة انترنت بعد تصميها بـ"الفوتو شوب" واخراجها بصيغة "HTML" » كيفية حفظ صفحة انترنت بعد تصميها بـ"الفوتو شوب" واخراجها بصيغة "HTML"

تأثير المفاهيم والمذاهب الفنية على بيئة المنتج جمالياً ووظيفياً » تأثير المفاهيم والمذاهب الفنية على بيئة المنتج جمالياً ووظيفياً

العملية التصميمية » العملية التصميمية

مدخل في تحليل التصميم.. الحجم » مدخل في تحليل التصميم.. الحجم

صناعة شكل الرعد بواسطة برنامج فوتوشوب » صناعة شكل الرعد بواسطة برنامج فوتوشوب

المصمم الصناعي والمعالجات البيئية للمنتج الصناعي » المصمم الصناعي والمعالجات البيئية للمنتج الصناعي

   
موقع الفنون الجميلة - 2009 - 2017