وصف الموضوع

خطوة بخطوة طريقة تصميم قالب لموقع معرض مصور فوتوغرافي بالفوتوشوب و طريقة تقطيعة بطريقة مطابقة للمعايير القياسية و تعديل ملف css بشكل أكثر عمليه .

الأوسمة :
CSS| html| notepad++| Photoshop| style| template| فوتوشوب| قالب| ويب 2| web2| xhml| أنماط| تقطيع| تصميم
في التصنيفات :CSS, Photoshop, تصميم و تطوير المواقع

إذا أردت أن تضع وصلة للموضوع في موقعك أو في منتدى يمكنك استخدام الوصلة التالية .

الشفرة :
<a href="http://qatardr.net/class/954" rel="bookmark" > تصميم و تقطيع قالب لموقع مصور فوتوغرافي</a>

اضغطCtrl-C أو Apple-C  للنسخ

الوصلة ستظهر كالتالي :
تصميم و تقطيع قالب لموقع مصور فوتوغرافي

هذا الموضوع مرخص وفق ترخيص Creative Commons.[ معلومات إضافية حول الترخيص بالعربية]

من قائمة الأدوات هناك أداتان واحدة لتحديد القطعة أو الجزء و الأخرى للتعديل أو تحرير القطعة .

و قبل عملية التقطيع يجب ان تحدد ما تريده و ما لا تريده فعند نقل التصميم إلى أرض الواقع لن تحتاج إلى كل الشكل ابحث عن ما يمكن تكراره و خذ نسخة واحدة منه مثلا الخلفية لا فائدة من نقل كل الخلفية و ادراجها في الصفحة يمكننا أخذ عمود رفيع من الخلفية و من ثم نكرره في شفرة الhtml لتقليل وقت التحميل .

لاحظ الشكل التالي لقد حددت ما احتاج إلى تقطيعه و حفظة و باقي الاجزاء يمكن الاستغناء عنها.

بعد رسم التقطيع نختار أداة Slice select tool و نضغط على الصورة ضغط مزدوج و ستظهر لنا نافذة الإعدادات و نقوم بتسمية الأجزاء التي نريدها الأسم Name الذي تحدده هو الذي سيحفظ به اسم الصورة لاحقا مثلا اخترنا Logo سيكون اسم الصورة أو الجزء لاحقا logo.gif و هكذا

• 1= و هو العنوان و نحتاج إليه بطبيعة الحال . سنحدد له الاسم Logo و سأحدد له عنوان الوصلة ليتحول بعد ذلك لوصلة.
• 2= سنحتاج لهذا الجزء لضمان ظهور الزخرفة العلوية سأسميه Pattern_01
• 3= سنحتاجه لتكملة الزخرفة .سأسميةpattern_02
• 4 و 5 و 6 و 7 = الصورة مع لسان التبويب الخاص به. سأسمي كل جزء tab_01 ,tab_02 و هكذا .و ساضعه عنوان الوصلات في مكان العنوان .
• 8 = الخلفية و هنا لاحظ أننا اقتطعنا جزء فقط من الخلفية و سنقوم بتكراره لاحقا.سأسميها Background.

نريد حفظ القطع التي إعددناها من قائمة File اختر Save for web and devices .

من القائمة الجانبية سنحدد الصيغة التي نريد أن نحفظ كل قطعة بها مثلا jpg أو gif و هكذا و نحاول تقليل عدد الألوان لتصغير حجم الصورة يمكننا كذلك اختيار القطعة و من ثم اختيار صيغة حفظ مختلفة لكل قطعة

و بعد الانتهاء من الإعدادات نختار save و نحدد اسم الملف في file name و نتأكد من تحديد الإعدادات التالية في الحقيقة أنا اسميت الملف photographer_tpl .

عند اختيارنا ل save as type اختيار Html and Images سيقوم الفوتوشوب photoshop بحفظ القطع و إنشاء ملف html بالشفرة كاملة و هذا سيسهل عملنا لاحقا و سنختار من قائمة settings اختيار others للتأكد من إن الصفحة التي سيتم إنشاءها ستعتمد في إنشاءها على css وبدون استخدام الجداول و كما تعلم إن الإتجاه العام حاليا يميل لإستخدام التصميم العائم float وليس الجدوال . لتحقيق ذلك ضع الإعدادات التالية :

و احفظ الآن. بما أننا حفظنا الملف باسم photographer_tpl وسينشأ الفوتوشوب Photoshop مجلد اسمه images يحتوي على الصور و ملف html اسم photographer_tpl.htm جرب فتح هذا الملف في متصفحك ستجد التصميم موجود على يسار الصفحة و هناك الكثير من الفراغ الأبيض .

و الآن سنتخلص من الملفات التي لا نريدها ستلاحظ أن هناك ملفات حفظناها لكننا قلنا سابقا أننا لانريدها و إن هناك عدد محدد من القطع التي نريدها . قمنا بذلك حتى لا تتأثر شفرة الcss و الشكل العام للتصميم و لكننا سنجري تعديلاتنا يدويا الآن .

تذكر أننا قد سمينا ما نريد الأحتفاظ به و بالتالي ما لا نريد الاحتفاظ به سيحفظ بالتسمية التلقائية و هي اسم الملف متبوع برقم . و لذلك سنحذف كل ما له اسم افتراضي .

جرب فتح الصفحة الآن ستجد فراغات كثيرة .

قبل أن نقوم بحل هذه المشكلة سنفتح الصفحة في وضع التحرير أي نعرض الشفرة أنا افضل استخدام برنامج Notepad++ و سنحذف الشفرات الخاصة بالصور التي حذفناها

كما أننا سنخذف الDiv الخاص بالخلفية Background و ذلك لإننا سنقوم بإدراجه بطريقة أخرى .

كما و نحذف من شفرة css بالإعلى خصائص Css التي تخص الأجزاء و الصور التي حذفناها و كقاعدة كل ما يحمل التسمية الأفتراضية للفوتوشوب في حالتنا كل ما يحمل اسمPhotographer_tpl

الآن سنبدأ مرحلة الإضافة

نعدل على عنوان الصفحة و نضع عنوان أفضل و نعدل على ترميز الصفحة لو احتجنا

نريد إضافة شفرة الcssالتي ستقوم بإضافة الخلفية و تكرارها

body{
background: #777  url('images/background.jpg') repeat-x top center ;
}

حددنا خصائص Body جسم الصفحة أو ما سيعرض من الصفحة بإن يكون لون الخلفية 777777 و هو آخر لون أو افتح لون في التدرج اللوني للخلفية و ذلك لو امتدت الصفحة لا تشعر بانفصال في اختلاف بل يسير التدرج بسلاسة . ثم اخترنا صورة الخلفية و اخترنا تكرارها بشكل أفقي على المحور x السيني و أن تبدأ من الإعلى top و من الوسط center .

و الآن احفظ الصفحة و اعرضها

خاتمة

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

• اضيف  في 29 مارس 2008
• التعليقات : [ 3 تعليقات ]
• الزوار : [ 4,285 قارئ ]
• هذا الموضوع مرخص وفق ترخيص Creative Commons.[ معلومات إضافية حول الترخيص بالعربية]