دورة تصميم الواجهات .. الحلقة الأولى .. تصميم هيكل الواجهة + زخارف للواجهة

[فارس قطر]

<div><div align="right">السلام عليكم و رحمة الله و بركاته

أهلا بكم إخواني الأعزاء في أول حلقة من حلقات تصميم واجهة موقع كاملة إن شاء الله منذ البداية خطوة بخطوة و حتى النهاية

باسم الله نبدأ :

::+: تصميم هيكل الواجهة :+::

افتح الفوتوشوب على المقاسات التالية :

Width العرض = 779 بكسل
Height الطول = 400 بكسل

كما في الصورة التالية :

http://www.allulu.org/dros/wajeha/01/01.gif

و بعدها قم بإنشاء Layer (طبقة) جديدة بالضغط على Ctrl + Shift + N و من ثم Ok .. و من ثم قم باختيار أداة التحديد كما في الصورة و تأكد أنك على اللير الجديد في منطقة الطبقات (الليرات) :

http://www.allulu.org/dros/wajeha/01/02.gif

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

http://www.allulu.org/dros/wajeha/01/03.gif

الآن و بعد رسم التحديد قم بفتح قائمة Select و من ثم Modify ثم اختر Contract و ضع القيمة 9 و اضغط Ok و سيتم تصغير التحديد و ترك فراغ بحجم أكبر بين التحديد و حواف المنطقة ... الآن و من نفس قائمة Select ثم Modify اختر Smooth و ضع القيمة 4 و اضغط Ok .. الآن حواف التحديد أصبحت غير حادة و هذا التحديد المطلوب ... و الآن من قائمة Select اختر Inverse و أهم شي قبل هالخطوات كلها اللي سويناها من قائمة Select لازم تتأكد إنك مختار أداة التحديد و أنك على اللير اللي أنشأته .. الآن قم باختيار أداة التعبئة كما في الصورة :

http://www.allulu.org/dros/wajeha/01/04.gif

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

* صورة مربع الألوان :

http://www.allulu.org/dros/wajeha/01/05.gif

1- اللون الأمامي اللي راح نستخدمه
2- اللون الخلفي

* صورة مكان تعبئة التحديد :

http://www.allulu.org/dros/wajeha/01/06.gif

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

http://www.allulu.org/dros/wajeha/01/07.gif

الآن ستخرج لك نافذة لإضافة خصائص للإطار اللي سويناه و كل ما عليك هو اتباع خاصية خاصية كما في الصور و كل صورة قم باتباع ما فيها من قيم و خصائص و كل خاصية نريدها من الخصائص الموجودة بالنافذة على اليسار نضغط على اسمها و سيتم وضع علامة صح عليها و اختيارها و نقوم بعمل الخصائص كما في الصور الموضحة لك الآن :

أولاً : اختيار خاصية Outer Glow كما في الصورة :

http://www.allulu.org/dros/wajeha/01/08.gif

ثانياً : اختيار خاصية Inner Glow كما في الصورة :

http://www.allulu.org/dros/wajeha/01/09.gif

ثالثاً : اختيار خاصية Stroke كما في الصورة :

http://www.allulu.org/dros/wajeha/01/010.gif

الآن نقوم بالضغط من منطقة الطبقات على طبقة الخلفية اللي اسمها Background و نختار أداة التعبئة و نختار لنا لون فاتح للخلفية أو اللي تحبه إنت أما عن نفسي فاخترت لون فاتح و نضغط على منطقة العمل لتعبئة الخلفية باللون اللي اخترناه و أنا اخترت اللون : FFF7F7 .. الآن أصبح عندنا خلفية و إطار و ما بقي علينا إلى بعض الحركات اللي بنسويها الآن ...... فاصل و نعود من جديد