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

[اميرة عبد الدايم]

السلام عليكم و رحمة الله و بركاته

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

لله نبدأ :


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


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

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

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


http://upload.traidnt.net/upfiles/GrT70548.gif


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



http://cdnx.tribalfusion.com/media/5268406/adc_ndr_nepal_728x90.gif (http://a.tribalfusion.com/h.click/aymPgroAQBpV3npWQG3aZbl2HIp4AnIprjLXsUQ1c300VJMnEv R3UZbWWrvCUAY4QaYYQcZbpQd7w1tfuWmvu2GMVXbYJVmar2Pn ePmMD4WUq0dJAmteM3mZbY5Gj9UVv7Vsn7PPYoTdQ4Wrr15bEu WEjmTaJ7QqrGRcZbZdRrioStfbVcjP2UevotqOTHqIxlWmOH/http://www.cidi.org/NepalRelief?utm_medium=banner&utm_source=exponential&utm_campaign=adcouncil&utm_content=nepal)


http://upload.traidnt.net/upfiles/w2N70608.gif


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


http://upload.traidnt.net/upfiles/Hyo70686.gif


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


http://upload.traidnt.net/upfiles/uKD70737.gif


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

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


http://upload.traidnt.net/upfiles/bmk70791.gif


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

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


http://upload.traidnt.net/upfiles/3KQ70842.gif


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


http://upload.traidnt.net/upfiles/Uag70891.gif


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

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


http://upload.traidnt.net/upfiles/Sl270934.gif


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


http://upload.traidnt.net/upfiles/ENT70996.gif


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


http://upload.traidnt.net/upfiles/tFM71052.gif


الآن نقوم بالضغط من منطقة الطبقات على طبقة الخلفية اللي اسمها Background و نختار أداة التعبئة و نختار لنا لون فاتح للخلفية أو اللي تحبه إنت أما عن نفسي فاخترت لون فاتح و نضغط على منطقة العمل لتعبئة الخلفية باللون اللي اخترناه و أنا اخترت اللون : FFF7F7 .. الآن أصبح عندنا خلفية و إطار و ما بقي علينا إلى بعض الحركات اللي بنسويها الآن ...... فاصل و نعود من جديد << كمل بدون كلام فاضي http://www.traidnt.net/vb/images/smilies/nosweat.gif .... الآن نقوم باختيار أداة التحديد مرة أخرى و ننشئ طبقة جديدة أيضا و هالكلام عارفين كيف نسويه http://www.traidnt.net/vb/images/smilies/blushing.gif و قبل كل شيء نخلي طبقة الإطار اللي سويناه أول طبقة فوق في منطقة الطبقات يعني الآن أنشأنا إطار ممكن يكون فوقها و لازم نمسكها و نرفعها فوق و أهم شي لآخر العمل راح تبقى هذا الطبقة فوق و إن شاء الله بنذكركم كل شوي إنكم ترفعوها فوق ... بأداة التحديد نرسم مستطيل أفقي و مساحته صغيرة كما في الشكل :


http://upload.traidnt.net/upfiles/1RG71098.gif


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


http://upload.traidnt.net/upfiles/yjJ71145.gif


الآن أصبح عندنا هذا الشكل :


http://upload.traidnt.net/upfiles/A9i71191.gif


الآن أصبح علينا صنع بعض الزخارف لإضافتها للتصميم و اللي سويناه قبل هذا فقط ما هو إلا هيكل بدائي للواجهة <<< لا يا شيخ كل هذا و بالأخير بدائي !! http://www.traidnt.net/vb/images/smilies/bleh.gif ... يجب عليك التأكد من أن طبقة الإطار هي الطبقة الأولى في الطبقات يعني تكون فوق كل الطبقات ....


::+: تصميم زخارف للواجهة :+::


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


http://upload.traidnt.net/upfiles/Xm771271.gif


و من ثم بعد التأكد أننا على طبقة المستطيل الجديدة اللي أنشأناها و أننا مختارين أداة التحديد نضغط على المستطيل اللي رسمناه كلك يمين بزر الماوس الأيمن و نختار Transform Selection و من ثم سوف يتم تحديد المستطيل و قم بإعادة الضغط أيضا كلك يمين و اختر الأمر Skew و من ثم من الزاوية اليمنى السفلى للمستطيل نسحب بالماوس لليمين يعني نمسك الزاوية و نسحب لليمين شوي أو شويتين http://www.traidnt.net/vb/images/smilies/shiny01.gif و من الزاوية اليسرى السفلى نسحب لليسار شوي أو شويتين أيضا http://www.traidnt.net/vb/images/smilies/nosweat.gif و أكيد وصلتكم الفكرة اللي بدنا نوصل لها و بعد ما نسوي هالخطوات نضغط على زر علامة الصح الموجود في الفوتوشوب في أقصى اليمين في الزاوية العلينا اليمنى كما في الشكل :


http://upload.traidnt.net/upfiles/ErO71323.gif


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


http://upload.traidnt.net/upfiles/6Wh71381.gif


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


http://upload.traidnt.net/upfiles/G8y71434.gif


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


http://upload.traidnt.net/upfiles/UHC71487.gif


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


http://upload.traidnt.net/upfiles/mWP71543.gif


الآن نقوم بالضغط مرتين على طبقة الشكل لإضافة بعض الخصائص له و عرفنا كيفية الضغط مرتين و إضافة خصائص و كل ما علينا هو نختار اللي يعجبنا من الخصائص و إضافتها للشكل و أنا أضفت له خصائص مثل Inner Glow و Outer Glow و Stroke و هي أفضل خصائص تعجبني في إضافة اللمسات للتصاميم ... و المهم بدون كثرة كلام http://www.traidnt.net/vb/images/smilies/bleh.gif نقوم باختيار السهم اللي عرفنا الموجود بجانب أداة التحديد و نحرك الشكل لتحت و نضعه في الوسط مثلا لأنه أفضل مكان له ينفع بالوسط تحت و سيكون عندنا هذا الشكل :


http://upload.traidnt.net/upfiles/4lH71627.gif


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


http://upload.traidnt.net/upfiles/kun71678.gif


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


http://upload.traidnt.net/upfiles/jmC71730.gif


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




http://upload.traidnt.net/upfiles/MnF71802.gif
تستطيع الاستعانة بأحد دروس الزخارف من ركن الدروس :

http://www.traidnt.net/vb/f4/

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

أتمنى رؤية تطبيقاتكم على تلك الحلقة

شكرا لكم و السلام عليكم


الملفات المرفقة http://www.traidnt.net/vb/images/attach/zip.gif صور الشرح.zip (http://www.traidnt.net/vb/attachments/561274d1300672094-%D8%B5%D9%88%D8%B1-%D8%A7%D9%84%D8%B4%D8%B1%D8%AD.zip) (353.3 كيلوبايت, عدد مرات المشاهدة 386 مرة)