تصميم واجهة موقع أو استايل للمنتدى على فوتوشوب [الأرشيف]

abohmam

04-03-2009, 09:41 PM

بسم الله الرحمن الرحيم

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

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

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

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

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

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

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 .. الآن أصبح عندنا خلفية و إطار و ما بقي علينا إلى بعض الحركات اللي بنسويها الآن ...... فاصل و نعود من جديد << كمل بدون كلام فاضي :nosweat: .... الآن نقوم باختيار أداة التحديد مرة أخرى و ننشئ طبقة جديدة أيضا و هالكلام عارفين كيف نسويه :blushing: و قبل كل شيء نخلي طبقة الإطار اللي سويناه أول طبقة فوق في منطقة الطبقات يعني الآن أنشأنا إطار ممكن يكون فوقها و لازم نمسكها و نرفعها فوق و أهم شي لآخر العمل راح تبقى هذا الطبقة فوق و إن شاء الله بنذكركم كل شوي إنكم ترفعوها فوق ... بأداة التحديد نرسم مستطيل أفقي و مساحته صغيرة كما في الشكل :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تستطيع الاستعانة ببعض الزخارف أو وضع لمسات جمالية من عندك

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

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

شكرا لكم و السلام عليكم
أخوكم ... AhMeD

منقـ(مع أجمل تحية للكاتب)ـول
.