وصف الموضوع

خطوة بخطوة طريقة تصميم قالب لموقع معرض مصور فوتوغرافي بالفوتوشوب و طريقة تقطيعة بطريقة مطابقة للمعايير القياسية و تعديل ملف 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.[ معلومات إضافية حول الترخيص بالعربية]

هذا هو القالب الذي نريد الوصول إليه

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

طبقة الخلفية سأسميها (خلفية) وسننشأ طبقة جديدة باسم ( التدرج اللوني ) و ندرج فيها اللون من الأسود إلى الأبيض .

سنعدل الطبقة بحيث نحدد طريقة عرض الطبقة كـ soft light و درجة شفافية الطبقة 75%

نختار أداة رسم الاشكال الهندسية و نختار الأشكال الحرة أو الأخرى كما في رقم 2 و نختار أحدى الزخارف

نحاول رسم الزخارف على الطرف الايسر الأعلى و نشكلها بالطريقة التي نراها مناسبة .

سيكون ترتيب الطبقات بالشكل التالي

ننشأ طبقة جديدة أسفل طبقة الزخارف و نختار التدرج اللون بالشكل بالشكل الدائري و التدرج بحيث يكون التدرج من اللون الأبيض إلى الشفافية كالتالي

نلون التدرج تحت الزخارف ونخفف شفافية الطبقة قليلا

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

في الطرف الأيمن العلوي نريد أن نضيف نص العنوان كما في الشكل التالي

لاحظ أن النص السفلي غير متوازن طولا مع النص العلوي و بالتالي نريد تمديد النص في الأسفل ليتماشى معه . من خلال نافذة تحرير النص نختار التالي

الآن نريد إضافة الصور بداخل صندوق المحتوى نختار الصورة المناسبة و نقص أطرافها للحصول على الشكل المناسب

قررت تغير لون نص العنوان بلون آخر استخدمت أنماط ويب 2 ( للمزيد حول الأنماط اضغط هنا)

وصلنا للشكل التالي و نضيف بعض الظل على الصورة من قائمة

Layer > layer style> drop shadow

نريد إضافة الصورة التالية و قصها بحجم مماثل للصورة الأولى ..

نضيف الصورة و ننتقل إلى طبقة الصورة الأولى و نضغط عليها بزر الفأرة مع الضغط على زر Ctrl من لوحة المفاتيح سيظهر لنا تحديد ( خط متقطع ) و من ثم نضغط على أداة التحديد select من قائمة الأدوات و نحرك التحديد المتقطع للمكان الذي نراه مناسبا

من قائمة select نختار inverse لعكس الاختيار و نختار من لوحة المفاتيح Delete لمسح الجزء الغير مرغوب فيه و بالتالي نحصل على صورة بمقاس مناسب ..نحرك الصورة للمكان المناسب . الآن نريد إضافة الظل بنفس الإعدادات التي استخدمناها في الصورة السابقة ..ما علينا القيام به هو الانتقال للطبقة السابقة اختيار القائمة كما في الصور

و من ثم ننتقل لطبقة الصورة الجديدة و نختار من القوائم كما في الصورة السابقة مع تغير آخر اختيار بدلا من copy layer style نختار paste layer style في هذه العملية قمنا بنسخ نمط من طبقة معينة و لصقها على طبقة آخرى .

نضيف باقي الصور كما في الطريقة السابقة ليصبح المجموع أربعة صور .

بعد إضافة كل الصور نريد التعديل من حجم صندوق المحتوى و ذلك باختيار Edit > free transform و تصغير الصندوق لتقليل المساحة البيضاء الفارغة .

سنحصل على الشكل التالي

الآن نريد إضافة لسان تبويب تحت كل صورة لكتابة عنوان أو وصف لها .

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

بما ان طبقة( صندوق المحتوى) طبقة بشفافية أقل من 100 % فكل ما سيكون تحتها سيظهر لكننا لا نريد لزر لسان التبويب أن يظهر يمكننا قص الجزء الزائد أو يمكننا استخدام الماسك أو القناع Mask . نريد أولا تحديد حجم صندوق المحتوى نضعظ على طبقة صندوق المحتوى بزر الفأرة مع زر Ctrl و الآن سيظهر التحديد ننتقل لطبقة لسان التبويب و نضعط من نافذة الطبقات على الزر التالي

في نافذة الطبقات يمكننا أن ترى ظهور الماسك ملحق بالطبقة

اضغط على الماسك Mask كما في الصورة السابقة و من لوحة المفاتيح اختر Ctrl +I لتعكس الماكس ليكون الجزء المخفي ظاهر و الظاهر مخفي .

للسان التبويب نختار أي نمط من أنماط ويب 2 التي ذكرتها سابقا و نضيف بعض الظل من خلال

Layer > layer style > Drop shadow

و اخترت الإعداد التالية

ثم قمت برسم مربع صغير بجانب النص على طبقة جديد و بالتالي اصبح لدي 3 طبقات للسان التبويب طبقة المربع و طبقة النص و طبقة الشكل ظللت هذه الطبقات و جمعتها في مجلد كما فعلنا سابقا مع الصور و من ثم كررت هذه المجلدات بالضغط عليها بزر الفأرة الأيمين و اختيار Duplicate و عدلت النص في كل لسان تبويب كما في الصورتين التاليتين :

و انتهينا من الشكل و سيكون لدينا الطبقات التالية ..

تاليا نريد تقطيع القالب..

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