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

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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


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

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

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

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

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


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

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


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

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

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

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


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

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

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

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


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

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

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

شكرا لكم و السلام عليكم
منقوووووووووووول للفاده

يعطيك العافية امجد على الشرح

ومشكور عـ الموضوع

,,
,

يعطيكـ الف عافيهـ اخوي
على هذا الشرح
بارك الله فيكـ يالغالي

كل الشكر لك اخوي علىا النقل المفيد ..

تسلم وبآشتياق لجديدك ..

دمتت بود ..

يعطيك العافيه على النقل

ولو ان الصورة مو ظاهره ..

بارك الله فيك اخوي امجد

يعطيق العفية يا اخي علي النقل الممتتاز وبشتياق لكل جديد منك ان شاء الله

شكرا لك على هذا الموضوع الجميل