السلام عليكم و رحمة الله و بركاته
============
ابدأ معكم سلسلة تصميم المواقع باساسيات المقاييس التى يجب ان نتبعها لنخرج بتصميم دقيق تفادياً للأخطاء التى قد تنتج - لا قدر الله - فى المراحل الاخيرة من التقطيع و من ثم التركيب ..

بسم الله نبدأ الآن بــ ..

الشاشة القياسية : هذا تعريف مهم لابد ان تعرفه كمصمم و هى مقياس دقة عرض الشاشة , حتى سنوات قليلة مضت كان المقياس الشائع للشاشة 800 × 600 بيكسل (لاحظ ان العرض الافتراضى للويندوز XP بعد انتهاء التنصيب مباشرة يستخدم هذا المقياس) ..
و لمن لم يستوعب هذا : لاحظ الصورة

http://www.vb.tfanin.com/images/TUTS/t-307/1.jpg

و لكن ما علاقة دقة الشاشة بالتصميم ؟ ...
هذه علاقة قوية .. دقة الشاشة هى التى تتحكم فى حجم شاشة العرض و بالتالى لابد و ان تعلم المقياس المناسب للتصميم و الذى يتناسب مع اقل دقة ممكنة للعرض (المقياس الافتراضى) و بالتالى تضمن ان تصميمك يمر بأفضل حالاته فى كل المقاييس الممكنة .. مع الشرح ستفهم اكثر.

• نستخدم فى هذا الدرس برنامج الفوتوشوب CS3

الخطوة رقم (1):

من قائمة File اختر New ثم ادخل القياسات الموضحة بالصورة

http://www.vb.tfanin.com/images/TUTS/t-307/2.jpg

لاحظ أن :

• قيم كلا من العرض و الطول بالبيكسل Pixels.
• استخدمنا للعرض المقياس 800 بيكسل بالذات .. لماذا؟ .. حتى يتناسب تصميمك مع اقل دقة ممكنة كما قلنا سالفاً .

الصفحة جاهزة الآن للتصميم .. لاحظ ان مقياس العرض يبدأ من اليسار بالصفر و يتنهى عند اليمين بـ 800 ..

http://www.vb.tfanin.com/images/TUTS/t-307/3.jpg

الخطوة رقم (2):

الآن .. من القائمة View اختر New Guide

http://www.vb.tfanin.com/images/TUTS/t-307/4.jpg

ثم ادخل القيم التالية :

http://www.vb.tfanin.com/images/TUTS/t-307/5.jpg

الخطوة رقم (3):

قم بتكرار الخطوة رقم (2) السابقة و لكن ادخل القيمة 800 px هذه المرة ..

الخطوة رقم (4):

الآن سوف نقوم بتعديل المقياس قليلاً .. من القائمة Image نختار Canvas Size

http://www.vb.tfanin.com/images/TUTS/t-307/6.jpg

و نزيد قيمة عرض التصميم 800 بيكسل قليلا و ليكن 1000 بيكسل مثلاً

http://www.vb.tfanin.com/images/TUTS/t-307/7.jpg

و يكون الشكل النهائى كالتالى (تم استخدام خلفية زرقاء للتوضيح فقط)

http://www.vb.tfanin.com/images/TUTS/t-307/8.jpg

لاحظ أن :

• الخطوط الاسترشادية الطولية Guids و التى تم انشاءها من الخطوات رقم (2) و (3) هى التى لها اللون التركوازى ..
• لماذا زدنا العرض عن المقياس المقرر ؟ .. هذه خطوة هامة .. فكر قليلاً .. لقد اتفقنا ان العرض القياسى و هو 800 بيكسل هو ما سنعمل به .. و لكن ماذا لو كان الزائر لموقعك يستخدم دقة اكبر للشاشة الخاصة به (1024 × 768 بيكسل مثلاً) .. عندها سيظهر له موقعك بالطريقة الموضحة بالاعلى .. التصميم الاساسى 800 بيكسل .. و ما يتبقى من الجانبين زيادة سوف يظهر بهذه الطريقة (جزء اضافى) .. اذن لابد من تخصيص جزء من التصميم للعمل كخلفية للموقع . لهذا كان لابد من رسم خطوط استرشادية حتى لا نتعداها قيخرج التصميم عن المقياس المحدد له.

الخطوة رقم (5) :

هنا لابد من تحديد مناطق للعمل لكلا من الهيدر Header و هو الجزء العلوى و ايضاً للفوتر Footer و هو الجزء السفلى .

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

• لتحديد مقياس الهيدر و ليكن 250 بيكسل ..

من القائمة View اختر New Guide ..

http://www.vb.tfanin.com/images/TUTS/t-307/4.jpg

ثم ادخل القيم التالية :

http://www.vb.tfanin.com/images/TUTS/t-307/9.jpg

• لتحديد مقياس الفوتر و ليكن 200 بيكسل ...

من القائمة View اختر New Guide ..

http://www.vb.tfanin.com/images/TUTS/t-307/4.jpg

ثم ادخل القيم التالية :

http://www.vb.tfanin.com/images/TUTS/t-307/10.jpg

ليصبح لديك الشكل التالى : (تم استخدام خلفية زرقاء للتوضيح فقط)

http://www.vb.tfanin.com/images/TUTS/t-307/11.jpg

و بهذا يكون التصميم جاهزاً للعمل .. اطرح لكم مثالاً منتهياً من احد تصميماتى :

http://www.vb.tfanin.com/images/TUTS/t-307/12.jpg


اخيراً اتمنى ان تكونوا قد استفدتم و اى استفسار لا تتردد ..


=================

رابط المووضوع الاصلى :
http://www.vb.tfanin.com/showthread.php?t=307

عند النقل يرجى ذكر المصدر