[درس مفصل] : تصميم واجهة interface موقع احترافيه !!!

[Chakira]

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


كيف حالكم اخواني الأعزاء


اليوم بفضل وحمد الله تم الانتهاء من هذا الدرس مفصل


وهو درس مفصل تصميم واجهه أحترافيه


واتمنى ان الجميع أنشالله يستفيدون منه


وهذا الدرس مفصل انا مصممه بالتفصيل الممل وبالصور http://www.dzbatna.com/images/smilies/in_love.gif


ونقول بسم الله


::+:+:+:+::


طبعا أفتح برنامج الفوتوشب ( انا استخدم Adobe Photoshop 7.0 ME )



1 - افتح ملف << جديد : file << new



http://upload.dzbatna.net/upfiles/iFj90367.gif

2 - حط المقاسات الطول 777 والعرض 600 كما بالصوره



http://upload.dzbatna.net/upfiles/6is90393.gif
3 - أختر الألوان الي تعجبك بالنسبه لي انا اخترت اللون الأزرق



http://upload.dzbatna.net/upfiles/KMv90415.gif
4 - اختر اداه التعبئة وعب الخلفيه باللون الي انت مختاره



http://upload.dzbatna.net/upfiles/qcb90436.gif
5 - اضغط Alt + H وستظهر لك شبكة بالواجهه كما في الصوره



http://upload.dzbatna.net/upfiles/bNy90457.gif
6 - اختر اداة المربع علشان نسوي البنر



http://upload.dzbatna.net/upfiles/PJc90479.gif
7 - الحين نحط مربع علي حسب الارقام الي موجود 10 مربعات
الارقام انا كاتبهم يعني انت لا تسوي نفسي بس انا حطيتهم علشان تعرف العدد



http://upload.dzbatna.net/upfiles/SGx90499.gif
8 - نختار فلتر Wave



http://upload.dzbatna.net/upfiles/cBE90524.gif
9 - الان تحط القياسات والمجموعات نفس الي بالصوره



http://upload.dzbatna.net/upfiles/Awa90544.gif
10 - الان طلع الشكل نفس جذي ومخربط البنر



http://upload.dzbatna.net/upfiles/kJj90566.gif
11 - علشان نعدل البنر ونعدله اضغط حرف V من الكيبورد
واضغط السهم فوق لين توصل المربع العاشر ويطلع لك الشكل هكذا



http://upload.dzbatna.net/upfiles/b9H90591.gif
12 - نروح الحين نحدد لير البنر ونضغط الاف الي تحت انا
محددها بالاحمر ونختار اول دقمه ...



http://upload.dzbatna.net/upfiles/3il90620.gif
راح يعلق البرنامج شوي يعني لا تستعجل


13 - تطلع لنا هالنافذه الجديده ونضغط على اول اسم لها
بس دير بالك خل كل المربعات فاضيه بس المربع الاول حط صح
وعدل الارقام والقياسات نفس الصوره طبعا اللون
الي انا حاط مربع عليه انت علي كيفك بس يكون قريب
للون حق البنر والخلفيه ... ونضغط موافق






http://upload.dzbatna.net/upfiles/xlH90643.gif
راح تلقى البنر الحين له ظل من تحت الحين باقي نحط فيه صور



14 - نضغط ملف << فتح | FILE <<< Open



http://upload.dzbatna.net/upfiles/rFi90664.gif
15 - الحين نختار صوره لنضيفها مع البنر



http://upload.dzbatna.net/upfiles/C9u90686.gif
16 - نسحب الصوره الحين الي البنر ونخليها فوق وعاد كيفك يمين ولا يسار
بس المهم فوق اول شي



http://upload.dzbatna.net/upfiles/uHL90712.gif
17 - نضغط الحين Alt + t ونكبر الصوره شوي اذا كانت صغيره
ونضغط الحين Alt + G تلقى الصوره اندمجت مع البنرالحين
نعدل الخيارات الي باللير ونخليها نفس الي بالصوره



http://upload.dzbatna.net/upfiles/fkQ90731.gif
18 - الحين تلقى الواجهه صارت نفس هذي الصوره



http://upload.dzbatna.net/upfiles/kyU90757.gif
19 - الحين نختار صوره ثانيه ونحطها بالجهة الثانيه بالبنر
يعني انت مثلا حطيت الصوره الاولى باليمين نختار صورة ثانيه ونحطها باليسار
مع نفس الاعدادات وراح يطلع لك الشكل هكذا

http://upload.dzbatna.net/upfiles/wZh90784.gif



20 - الحين نحط صورة مثلا صورة ورد او اي شي بين الصورتين
مثل جذي



http://upload.dzbatna.net/upfiles/WkP90806.gif
21 - ونختار الفلتر التالي نفس الي بالصور



http://upload.dzbatna.net/upfiles/2eR90825.gif
22 - الحين خلاص خلصنا من البنر كله بس باقي له كم لمسه ابداع
واسم الموقع والرابط وبسسسسس وهذا الشكل للبنر



http://upload.dzbatna.net/upfiles/Wp790848.gif
23 - الحين باقي الفوتر الي هو اخر شي بالموقع نسويه نفس طريقه البنر
من فلاتر بس تغير الصور وتسوي نفس الخطوات وراح يطلع لك رووووعه


النتيجة


http://upload.dzbatna.net/upfiles/mT290868.gif


24 - الحين باقي بس الازرار وهي الحين عليكم
والي مايعرف
بالمرفقات تلقى ملف افتحه وتلقاه ازرار مصممه وجاهزه
الي عليك بس انك تغير اللون مالها
والطريقه تغير اللون هي انك تضغط Alt + u
وتغير براحتك وتكتب بالأزرار


والي ماتطلع عنده الصور بالملف المرفق فيه كل الصور


واتمنى من كل واحد يدخل انه يوريني تطبيقه


واي شي ناقص او استسفار لا تتردد في طرحه


وعاد لا تنسوني من ترشيحكم http://www.dzbatna.com/images/smilies/bleh.gif


وفي انتضار ردودكم


....:::+:::... http://www.dzbatna.com/images/smilies/smoke1.gif مع خالص حبي لــكـمـ http://www.dzbatna.com/images/smilies/in_love.gif ...:::+:::...


الصور المرفقة
http://www.traidnt.net/vb/images/attach/psd.gif ازرار.psd (http://www.traidnt.net/vb/attachments/40799d1143471259-ازرار.psd) (92.7 كيلوبايت, عدد مرات المشاهدة 4516 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©