http://www.dzbatna.com/images/icons/smile.gif ط¯ظˆط±ط© طھطµظ…ظٹظ… ط§ظ„ظˆط§ط¬ظ‡ط§طھ .. ط§ظ„ط*ظ„ظ‚ط© ط§ظ„ط£ظˆظ„ظ‰ .. طھطµظ…ظٹظ… ظ‡ظٹظƒظ„ ط§ظ„ظˆط§ط¬ظ‡ط© + ط²ط®ط§ط±ظپ ظ„ظ„ظˆط§ط¬ظ‡ط©
السلام عليكم و رحمة الله و بركاته
أهلا بكم إخواني الأعزاء في أول حلقة من حلقات تصميم واجهة interface موقع كاملة إن شاء الله منذ البداية خطوة بخطوة و حتى النهاية
لله نبدأ :
::+: تصميم هيكل الواجهة interface :+::
افتح الفوتوشوب على المقاسات التالية :
Width العرض = 779 بكسل
Height الطول = 400 بكسل
كما في الصورة التالية :
و بعدها قم بإنشاء Layer (طبقة) جديدة بالضغط على Ctrl + Shift + N و من ثم Ok .. و من ثم قم باختيار أداة التحديد كما في الصورة و تأكد أنك على اللير الجديد في منطقة الطبقات (الليرات) :
بأداة التحديد و بزر الماوس الأيسر ارسم تحديد على المنطقة كاملة و لكن مع مراعاة ترك فراغ بحجم بكسل واحد عند الحواف كما تشاهد في الصورة التالية :
الآن و بعد رسم التحديد قم بفتح قائمة Select و من ثم Modify ثم اختر Contract و ضع القيمة 9 و اضغط Ok و سيتم تصغير التحديد و ترك فراغ بحجم أكبر بين التحديد و حواف المنطقة ... الآن و من نفس قائمة Select ثم Modify اختر Smooth و ضع القيمة 4 و اضغط Ok .. الآن حواف التحديد أصبحت غير حادة و هذا التحديد المطلوب ... و الآن من قائمة Select اختر Inverse و أهم شي قبل هالخطوات كلها اللي سويناها من قائمة Select لازم تتأكد إنك مختار أداة التحديد و أنك على اللير اللي أنشأته .. الآن قم باختيار أداة التعبئة كما في الصورة :
الآن قم بتعبئة التحديد اللي سويناه و لا تضغط على أي منطقة و إنما اضغط بداخل التحديد المستطيل و قبل هذا عليك أن تختار لون يكون فاتح مثلا أنا اخترت لون وردي فاتح جدا و كود code تبعه هو : FFD9D9 و إذا ما عرفت من وين تختار لون فالطريقة هي إنك تضغط على مربع الألوان الأمامي الموجود مع شريط الأداوات و اختيار لون يناسبك و الفاتح أفضل و في آخر التصميم بتعرف ليش اللون الفاتح بكون افضل و هذي صورة توضح لك مربع الألوان و الصورة اللي بعدها بتوضح لك مكان تعبئة اللون :
* صورة مربع الألوان :
1- اللون الأمامي اللي راح نستخدمه
2- اللون الخلفي
* صورة مكان تعبئة التحديد :
الآن و بعد تعبئة التحديد اضغط Ctrl + D من لوحة المفاتيح لإلغاء التحديد ... بعد ذلك اضغط على اللير (الطبقة) مرتين و لكن لا تضغط على اسم الطبقة و إنما في المكان الفارغ لأنك لو قمت بالضغط مرتين على اسمها فهذا لتغيير اسم الطبقة و ممكن يفيدك عشان تميز كل طبقة عن الأخرى و إنما اللي محتاجينه هو عمل تأثيرات على اللي سويناه لذلك اضغط مرتين على المربع الموجود بجانب اسم الطبقة و هو مربع صغير كما في الصورة :
الآن ستخرج لك نافذة لإضافة خصائص للإطار اللي سويناه و كل ما عليك هو اتباع خاصية خاصية كما في الصور و كل صورة قم باتباع ما فيها من قيم و خصائص و كل خاصية نريدها من الخصائص الموجودة بالنافذة على اليسار نضغط على اسمها و سيتم وضع علامة صح عليها و اختيارها و نقوم بعمل الخصائص كما في الصور الموضحة لك الآن :
أولاً : اختيار خاصية Outer Glow كما في الصورة :
ثانياً : اختيار خاصية Inner Glow كما في الصورة :
ثالثاً : اختيار خاصية Stroke كما في الصورة :
الآن نقوم بالضغط من منطقة الطبقات على طبقة الخلفية اللي اسمها
Background و نختار أداة التعبئة و نختار لنا لون فاتح للخلفية أو اللي تحبه إنت أما عن نفسي فاخترت لون فاتح و نضغط على منطقة العمل لتعبئة الخلفية باللون اللي اخترناه و أنا اخترت اللون :
FFF7F7 .. الآن أصبح عندنا خلفية و إطار و ما بقي علينا إلى بعض الحركات اللي بنسويها الآن ...... فاصل و نعود من جديد << كمل بدون كلام فاضي
http://www.dzbatna.com/images/smilies/nosweat.gif .... الآن نقوم باختيار أداة التحديد مرة أخرى و ننشئ طبقة جديدة أيضا و هالكلام عارفين كيف نسويه
http://www.dzbatna.com/images/smilies/blushing.gif و قبل كل شيء نخلي طبقة الإطار اللي سويناه أول طبقة فوق في منطقة الطبقات يعني الآن أنشأنا إطار ممكن يكون فوقها و لازم نمسكها و نرفعها فوق و أهم شي لآخر العمل راح تبقى هذا الطبقة فوق و إن شاء الله بنذكركم كل شوي إنكم ترفعوها فوق ... بأداة التحديد نرسم مستطيل أفقي و مساحته صغيرة كما في الشكل :
الآن نقوم بتعبئة المستطيل بنفس اللون اللي عبأنا فيه الإطار و هو اللون الفاتح FFD9D9 و من ثم نقوم بنسخ خصائص طبقة الإطار عن طريق الضغط بزر الماوس الأيمن على طبقة الإطار و اختيار Copy Layer Style و من ثم نقوم بالضغط بزر الماوس الأيمن على طبقة المستطيل اللي سويناه جديد و اختيار Paste Layer Style و الآن أصبح عندنا مستطيل و بانر فارغ ... نقوم الآن و بالتأكد أننا على الطبقة الخاصة بالمستطيل نضغط Ctrl + J لتكرار طبقة المستطيل و نقوم بإنزالها تحت طبقة المتسطيل الأول الأصليه بسحبها أسفل منه و من ثم من أسهم الكيبورد نقوم بإنزال المستطيل المنسوخ بعض الشيء و لكن بعد اختيار السهم من الأدوات و هو السهم الأساسي الموجود بجانب أداة التحديد و هذا الشكل بكون عندنا :
الآن أصبح عندنا هذا الشكل :
الآن أصبح علينا صنع بعض الزخارف لإضافتها للتصميم و اللي سويناه قبل هذا فقط ما هو إلا هيكل بدائي للواجهة interface <<< لا يا شيخ كل هذا و بالأخير بدائي !!
http://www.dzbatna.com/images/smilies/bleh.gif ... يجب عليك التأكد من أن طبقة الإطار هي الطبقة الأولى في الطبقات يعني تكون فوق كل الطبقات ....
::+: تصميم زخارف للواجهة interface :+::
الآن نقوم بتصميم بعض الزخارف لإضافة لمسات جميلة للواجهة interface و كل ما علينا هو اختيار أداة التحديد و إنشاء لير (طبقة) جديد و يكون تحت جميع الليرات (الطبقات) و فوق طبقة الخلفية يعني يكون الثاني و من ثم نرسم في وسط الواجهة interface أو أي مكان من الواجهة interface مستطيل صغير و محتواه يكون كبير نوعا ما كما في الشكل :
و من ثم بعد التأكد أننا على طبقة المستطيل الجديدة اللي أنشأناها و أننا مختارين أداة التحديد نضغط على المستطيل اللي رسمناه كلك يمين بزر الماوس الأيمن و نختار
Transform Selection و من ثم سوف يتم تحديد المستطيل و قم بإعادة الضغط أيضا كلك يمين و اختر الأمر
Skew و من ثم من الزاوية اليمنى السفلى للمستطيل نسحب بالماوس لليمين يعني نمسك الزاوية و نسحب لليمين شوي أو شويتين
http://www.dzbatna.com/images/smilies/shiny01.gif و من الزاوية اليسرى السفلى نسحب لليسار شوي أو شويتين أيضا
http://www.dzbatna.com/images/smilies/nosweat.gif و أكيد وصلتكم الفكرة اللي بدنا نوصل لها و بعد ما نسوي هالخطوات نضغط على زر علامة الصح الموجود في الفوتوشوب في أقصى اليمين في الزاوية العلينا اليمنى كما في الشكل :
و نستطيع الضغط على علامة الخطأ أو علامة المنع اللي تتسمى هذي لإلغاء اللي سويناه إذا طلع عندنا شي خطأ ... الآن أصبح عندنا مستطيع بشكل جميل و هذا ما يسمى بالزخارف و الأشكال اللي تضيف لمسات للواجهة interface و الآن هذا الشكل اللي سويناه نقوم بتعبئته باللون اللي نريده و أنا عبأته باللون الفاتح اللي عبأنا فيه الإطار في أول العمل و أضفت له بعض الخصائص مثل التدرج و كيفية إضافة التدرج كالتالي :
نقوم باختيار أداة التدرج كما في الصورة :
أداة التدرج موجود مع أداة التعبئة و لاختيار إحداهما نضغط ضغطة مستمرة على مكان أداة التعبئة أو التدرج و ستخرج لنا قائمة فيها الأداتين و نختار منها أداة التدرج كما شاهدت في الصورة أعلاه ... راح نلاقي فوق في الفوتوشب بعد اختيار أداة التدرج و بعد التأكد أن التحديد ما زال موجودا للشكل و بعد التأكد أننا على طبقة التحديد اللي أنشأناها و بعد التأكد أيضا أن طبقة الإطار أول طبقة فوق و بعد التأكد أخيرا أن طبقة الشكل أو الزخرف اللي سويناه بعد طبقة الخلفية يعني ثاني شيء و تحت طبقات المستطيلات اللي سويناها و هذه التأكدات مهمة نضغط على مكان التدرج الموجود في الأعلى كما في الشكل :
و من ثم بتطلع لك نافذة لاختيار ألوان التدرج و عمل تدرج على كيفك و أنا ما راح أقول لك و أحدد لك ألوان أو شيء بس حبيت أقلك اتبع ما في الصورة لمعرفة كيفية عمل تدرج و إضافة ألوان على كيفك :
الآن بعد ما سوينا التدرج و اخترنا الألوان نضغط Ok و نعمل تدرج للمستطيل من فوق لتحت يعني بزر الماوس الأيمن نرسم المستطيل عموديا من فوق لتحت و على حجم الشكل و تستطيع الضغط على زر Shift و ترسم من فوق لتحت عشان يطلع معك تدرج مستقيم من فوق لتحت و من ثم نضغط Ctrl + D لإلغاء التحديد و سيكون الشكل كما في الصورة :
الآن نقوم بالضغط مرتين على طبقة الشكل لإضافة بعض الخصائص له و عرفنا كيفية الضغط مرتين و إضافة خصائص و كل ما علينا هو نختار اللي يعجبنا من الخصائص و إضافتها للشكل و أنا أضفت له خصائص مثل
Inner Glow و
Outer Glow و
Stroke و هي أفضل خصائص تعجبني في إضافة اللمسات للتصاميم ... و المهم بدون كثرة كلام
http://www.dzbatna.com/images/smilies/bleh.gif نقوم باختيار السهم اللي عرفنا الموجود بجانب أداة التحديد و نحرك الشكل لتحت و نضعه في الوسط مثلا لأنه أفضل مكان له ينفع بالوسط تحت و سيكون عندنا هذا الشكل :
الآن ما علينا سوى إنشاء طبقة جديدة فوق طبقة الشكل تماما و رسم مستطيل صغير بأداة التحديد كما في الشكل :
و من ثم من قائمة Select ثم Modify نختار Smooth و نضع القيمة 4 و نضغط Ok .... الآن نقوم بتعبئة المستطيل المدور اللي سويناه بلون يعجبك و ليكن لون فاتح و من ثم نلغي التحديد Ctrl + D و من ثم نعطي المستطيل بعض الخصائص على كيفنا و اللي يعجبنا و نقوم بإنزاله تحت و يكون فوق الشكل اللي سويناه و هذا هو الشكل اللي راح يطلع لنا بعد كل اللي سويناه :
الآن نقوم لوحدنا بعمل أشكال على كيفنا مثلا نسوي نفس الشكل الأول و لكن نقلبه و طريقة قلبه هي إنه بعد ما نسويه له تدرج و كل شي و ننتهي من خصائصه و نتأكد إنه احنا على طبقته الخاصة نضغط Ctrl + T لتحديد و من ثم نضغط كلك يمين عليه و نختار Flip Vertical أي نقلبه رأسيا و من ثم نضغط على زر علامة الصح في الأعلى يمينا في الفوتوشوب كما تعلمنا في الأعلى و نحركه و نضعه في المكان اللي يعجبنا و أنا سويت بعض الأشكال و حطيتهم في أماكن مختلفة و هذا الشكل النهائي طلع معي :
أتمنى لكم كل التوفيق و النجاح و أتمنى منكم التركيز جيدا في الحلقة و حاول إعادتها مرة و اثنان و ثلاثة و يمكن تشوفها كبيرة و لكن عند الانتهاء من تطبيقها بتلاقيها بسيطة إن شاء الله و الله يوفقنا جميعا و انتظرونا في حلقات قادمة إن شاء الله
أتمنى رؤية تطبيقاتكم على تلك الحلقة
شكرا لكم و السلام عليكم
الملفات المرفقة [TR]
http://www.traidnt.net/vb/images/attach/zip.gif صور الشرح.zip (353.3 كيلوبايت, عدد مرات المشاهدة 351 مرة) [/TR]
https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
