الدرس الأول دورة تصميم واجهة موقع غير متمددة

محروم.كوم · #1 09-04-2010, 03:40 PM

بسم الله نبدأ دورتنـا اليوم بالدرس الأول
وهو تصميم الهيـــدر للموقع

ملحوظة : أنــا سأستخدم برنامج فوتوشوب cs3

- ملــف جديــد
نفتح برنامج الفوتوشــوب ، ونقوم بعمل ملف جديد وذلك من قائمة File ثم NEW أو الضغط على Ctrl + N من لوحة المفاتيح ، ونسمى العمل واجهة موقع
، وستكون المقايس لملف العمل بإذن الله هى : ( العرض ) 800 بيكسل ، ( الطول ) 600 بيكسل / ثم نضغط على زر موافــق

- تجهيــز الإعــدادات
*إظهار الشبكة
نقوم بإظهــار الشبكة فى الفوتوشـوب وذلك بالذهاب إلى قائمة View ثم نذهب إلى show ستظهر لنـا قائمة منسدلة صغيرة نختــار منهــا Grid
، أو عن طريق الضغط على Ctrl + ' من لوحة المفاتيح

*مجلد الهيــدر
- نقوم بعمل مجلد جديد فى نافذة الطبقات ، عن طريق الضغط على أيقونة أسفل نافذة الطبقات تشبه المجلد ، والصور تبين ذلك وسيكون اسمه Group1 فنقوم بالضغط على الاسم مرتين بالزر الأيسر للماوس ونقوم بكتابة اسمه الجديد وليكن " الهيـدر"
ملحوظة : لإظهار ناذة الطبقات ( الشفائف ) عن طريق الضغط على زر F7 من لوحة المفاتيح

- بــداية العمــل
نختار أداة الأشكال لرسم المستطيل عن طريق الضغط على U من لوحة المفاتيح أو إختيارها من قائمة الأدوات ، ثم نقوم برسم المستطيل بطول 12 مربع صغير من الشبكة وبعرض ملف العمل كله ويكون باللون الأســود واللون الآن غير مهم لأننا سنغيره لاحقاً ، والصور تبين ذلك

- لمسة فنية

يمكنك فى هذه الخطوة إخفاء الشبكة فى الفوتوشوب ، سنضيف على المستطيل الآن لمسة فنية رائعة بأداة البن تول Pen Tool ، نختار أداة القلم والتى تسمى البن تول عن طريق الضغط على زر P من لوحة التحكم ، ستجد بجوارها مثلث صغير فى الأسفل من ناحية اليمين قم بالضغط المستمر عليه مدة قصيرة حوالى ثانية أو ثانيتن بالكثير إلى أن يظهر لك قائمة منسدلة صغيرة بها أدوات من نفس النوع نختار منها أداة القلم الذى بجواره علامة زائد+ صغيره فى الأعلى واسمها Add Anchor Point Tool نذهب إلى المستطيل ونحاول التغير فيه إلى أن نصل إلى هذا الشكل

ملحوظة :إذا لم تستطع عمل هذا الشكل فيمكنك تحميل ملف العمل لهذا الشكل بالضغط هنـــا

- اســم الموقــع
سنقوم بكتـابة اسم الموقع وهو " المشاغب" أو الموقــع الخاص بك ، وذلك عن طريق إختيــار أداة الكتابة عن طريق الضغط على حرف T من لوحة المفاتيح ونذهب إلى المستطيل ونكتب اسم الموقــع بأى خــط ولكن يكون حجمه كبير 60pt مثلاً وفى أى جانب سواء فى اليمين أو اليسار أو الوسط حسب ذوق كل شخص ، ثم نأتى لكتــابة شعــار الموقع ، حيث أن لكل موقــع شعــار مثل " لخدمــات الويب العربى والمصصمين " ، نختار أداة الكتابة
ونختار حجم الخط 20pt مثلاً ونكتب الشعار أسفل اسم الموقع ليكون كما بالشكل

- مضاعفة المستطيل
نقوم بمضاعفة المستطيل عن طريق الذهاب إلى قائمة Layer ثم نختار Duplicate Layer أى مضاعفة الطبقة فستظهر لنا نافذة صغيرة نضغط موافق ، فنجد أنه تم نسخ المستطيل ، نقوم بوضع المستطيل الجديد فوق القديم فى نافذة الطبقات ، نغيير لـون المستطيل الجديد إلى الأحمر الغامق وكود اللون #9c0000 ، ثم نذهب إلى قائمة Edit ونختـار Free Transform ونقوم بتغيير طول المستطيل الجديد بشده إلى الأسفل بقدر صغير

الــزخرفــة
نقوم بعمل شفيفة ( طبقة ) جديدة ، وذلك بالذهاب إلى قائمة Layer ثم نذهب إلى New ستظهر لنـا قائمة منسدلة صغيرة نختــار منهــا Layer ، أو عن طريق الضغط على Ctrl + Shift + N من لوحة المفاتيح ، ستظهر لنا نافذة باسم مستطيلة New layer نكتب فيها اسم الطبقة "الزخرفة" ثم نضغط موافق ok ، نقوم بوضعها فى المجلد " الهيـدر"و هو المجلد الذى أنشأناه من قليل

- فرش الزخرفــة
فى هذه الخطوة يمكنك أن تفعل ما تشاء فى الهيدر مثل الرسم عليه أو المزيــد
نذهب إلى طبقة المستطيل نضغط عليها بالزر الأيمن للفأرة ستظهر لنــا قائمة نختار منهــا Rasterize Type ، ثم بعد ذلك نذهب إلى قائمة Select ومنها نختار هذا الإختيار Load Selection فتظهر لنــا نافذة صغيرة نضغط على موافق فيتم تحديد المستطيل
قد تسألوا لمــاذا قمت بعمل خطوة تحديد المستطيل ؟
حتى إذا استخدمنــا الفرشاة وقمنا بالرسم بفرشاة كبيرة لا نضطر إلى مسح الزوائد وضبط حجم الفرشاة مع المستطيل ، وهذه الخطوة تسهل علينا حيث نقوم برسم ما نريد دون خوف
نذهب بعد ذلك إلى طبقة " الزخرفة" ، نختــار أداة الفرشــاة غن طريق الضغط على زر B فى لوحة المفاتيــح ، ثم نقوم بإلغاء التحديد عن طريق الضغط على Ctrl + D من لوحة المفاتيح
أنا استخدمت فرش معينة للزخرفة وهى القلوب ، الزخــرفة ( الدوائر الصغيرة ) ، وقد وضعت فى الدرس السابق ملحقات الدورة وستجد الفرش التى استخدمتها فى التصميم

وأذكــر : أنــه يمكنكم أن تصممــوا فى الهيــدر ما يعجبكم حسب أذواقكم لأنه غير مبنى على قاعدة معينة وتختلف الهيدرات من سحب ذوق كل شخص وإبداعه

ولكن لا تتعدى طوله وهو 12 مربع صغير من الشبكة

تحياتي الدرس الثاني غدا

__DEFINE_LIKE_SHARE__