دروس تصميم و شروحات مصورة دروس تصميم ، دروس فوتوشوب ، دروس فيديو ، دروس تعليمية ، دروس فلاش

إضافة رد
اسحب وشارك
 
LinkBack أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 25-09-2009, 02:50 PM

0

الصورة الرمزية TfaNiN
مطور جديد

 
تاريخ التسجيل: 14-04-2008
المشاركات: 8
TfaNiN is on a distinguished road
[للمبتدئين] : اساسيات تصميم قالب أو ستايل (المقاييس)

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

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

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




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


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

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



لاحظ أن :
  • قيم كلا من العرض و الطول بالبيكسل Pixels.
  • استخدمنا للعرض المقياس 800 بيكسل بالذات .. لماذا؟ .. حتى يتناسب تصميمك مع اقل دقة ممكنة كما قلنا سالفاً .
الصفحة جاهزة الآن للتصميم .. لاحظ ان مقياس العرض يبدأ من اليسار بالصفر و يتنهى عند اليمين بـ 800 ..



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

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



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



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

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

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

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



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



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



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

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

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

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

  • لتحديد مقياس الهيدر و ليكن 250 بيكسل ..
من القائمة View اختر New Guide ..



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



  • لتحديد مقياس الفوتر و ليكن 200 بيكسل ...
من القائمة View اختر New Guide ..



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



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



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




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


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

رابط المووضوع الاصلى :

http://www.vb.tfanin.com/t307.html

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

رد مع اقتباس
  #2  
قديم 25-09-2009, 04:41 PM

0

الصورة الرمزية مطور
مُطوِّرْ مسؤول

 
تاريخ التسجيل: 04-03-2008
المشاركات: 4,578
مطور is on a distinguished road

مميز يا تفانين درس اكثر من رائع حقيقه

الى الامام يا مبدع


توقيعي


‏مُطوِّرْ
خطوتك الأولى من مستخدم إلى مطور
رد مع اقتباس
  #3  
قديم 25-09-2009, 05:10 PM

14

الصورة الرمزية مُجَاهِد
مُطوِّرْ مسؤول

 
تاريخ التسجيل: 13-03-2008
المشاركات: 15,624
مُجَاهِد is on a distinguished road

درس رائع .. بارك الله فيك ..


توقيعي

رد مع اقتباس
  #4  
قديم 25-09-2009, 08:33 PM

0

الصورة الرمزية TfaNiN
مطور جديد

 
تاريخ التسجيل: 14-04-2008
المشاركات: 8
TfaNiN is on a distinguished road

اقتباس:
المشاركة الأصلية كتبت بواسطة مُطوِّرْ مشاهدة المشاركة
مميز يا تفانين درس اكثر من رائع حقيقه

الى الامام يا مبدع
الابداع ردك العطر و مرورك الغالى ...

اقتباس:
المشاركة الأصلية كتبت بواسطة مُجَاهِد مشاهدة المشاركة
درس رائع .. بارك الله فيك ..
الروعة تواجدك اخى الكريم .. شرفنى مرورك

رد مع اقتباس
  #5  
قديم 14-01-2010, 04:37 AM

0

لايوجد صورة رمزية لـ مبتدئة تصميم
مطور جديد

 
تاريخ التسجيل: 07-01-2010
المشاركات: 25
مبتدئة تصميم is on a distinguished road

الدرس رائع

استفسار بالنسبه للحدود الخارجيه للتصميم هل تصمم بالفوتوشوب ام ماذا ؟؟

واذا كانت تصمم بالفوتوشوب كم مقاساتها

رد مع اقتباس
  #6  
قديم 17-06-2010, 05:29 AM

0

لايوجد صورة رمزية لـ ندى الورد
مطور جديد

 
تاريخ التسجيل: 17-06-2010
المشاركات: 13
ندى الورد is on a distinguished road



شو هاد الابداع الله يعطيك

الف الف الف عافيه

رد مع اقتباس
إضافة رد

العلامات المرجعية

مواضيع جديدة في قسم دروس تصميم و شروحات مصورة

أدوات الموضوع
انواع عرض الموضوع

ضوابط المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا يمكنك اضافة مرفقات
لا يمكنك تعديل مشاركاتك

BB code متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
شرح] اساسيات ادوبي فوتوشوب cs5 للمبتدئين :: الدرس الاول :: semoo jordan دروس تصميم و شروحات مصورة 4 24-05-2011 05:14 PM
قالب قطر 2022 لمجلة زووبس : قالب من تصميم أغاديرنا: قطر أول دولة عربية تستضيف كأس العالم arabxuups سكربتات إدارة المحتوى 11 09-12-2010 01:27 AM
صنع و تصميم فرشاة على شكل نص ( للمبتدئين ) star wolf دروس تصميم و شروحات مصورة 0 08-11-2010 02:16 PM
صنع و تصميم فرشاة على شكل نص ( للمبتدئين ) star wolf دروس تصميم و شروحات مصورة 0 08-11-2010 02:16 PM
تصميم القبعة السحرية ( للمبتدئين ) star wolf دروس تصميم و شروحات مصورة 0 08-11-2010 02:13 PM



جميع الأوقات بتوقيت GMT +3. الساعة الآن 03:13 AM.
Search Engine Friendly URLs by vBSEO 3.5.2

الحقوق محفوظة لكل المطورين والمواقع العربية

Security team