Hide this notice

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

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

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

Post Pic

تصميم و تقطيع قالب لموقع مصور فوتوغرافي

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

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

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

01.gif

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

01.gif

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

02

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

03

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

04

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

05

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

06

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

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

07

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

08

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

09

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

10

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

14

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

يمكنك تحميل أنماط ويب 2 من هذا الموقع ابحث عن زر Download في الصفحة .

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

Layer > layer style> drop shadow

15

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

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

17

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

18

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

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

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

19

من نافذة الطبقات نضغط على 20 و نختار

21

و الآن تم تجميع الطبقات في مجلد يمكننا فتحه و اغلاقة و التقليل من زحمة الطبقات .

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

22

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

23

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

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

24

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

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

27

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

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

Layer > layer style > Drop shadow

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

28

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

30

29

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

31

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

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

32

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

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

33

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

37

  • 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 و هكذا و نحاول تقليل عدد الألوان لتصغير حجم الصورة يمكننا كذلك اختيار القطعة و من ثم اختيار صيغة حفظ مختلفة لكل قطعة

34

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

35

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

36

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

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

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

38

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

39

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

41

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

42

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

43

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

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

40

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


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

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

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

بهشىم

لتحميل المثال اضغط هنا

خاتمة

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

بقلم : فاطمة العمادي

أم و زوجة .. مصممة حرة و مصورة .. عرف الناس كتاباتي التقنية من خلال شخصية خيالية هي الدكتور نت . اصمم المواقع منذ العام ١٩٩٩م .

أوسمة : , , , , , , , , , , , , ,

تعليقات الزوار (4)

[+] أضف تعليقك من فضلك



  1. youssef كتب:

    شكرا جزيلا و جازاك الله خيرا ان شاء الله امين


  2. علاء كتب:

    و الله اخى الكريم موضوع مفيد جدا و لكنى قمت بتوليد كود CSS من الفوتوشوب قبل ذلك مرات عديده دزن مواجه اى مشاكل فمثلا تجد هنا فى مدونتى موضوع كامل خاص بذلك
    http://alaasense.0fees.net/blog/wordpress/?p=23


  3. mohssine كتب:

    shokrane jazilane la9ed afadtouna be7a9e


  4. Sam كتب:

    والله ما فهمت شي
    حاولت وحاولت
    ما بعرف بتحكي بطريقة احترافية

    طيب ممكن احكيلك شغلة

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

    نفس مرة افهم شغلي من الشروح على النت

    نفسي اتعلم