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

[ابو على]

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

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

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

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

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

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

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

::+:+:+:+::

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


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

http://www.l22l.com/l22l-up-1/7b36b5e6af.gif

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

http://www.l22l.com/l22l-up-1/347aaa9078.gif

3 - أختر الألوان الي تعجبك بالنسبه لي انا اخترت اللون الأزرق

http://www.l22l.com/l22l-up-1/784b1480c5.gif

4 - اختر اداه التعبئة وعب الخلفيه باللون الي انت مختاره

http://www.l22l.com/l22l-up-1/f6c5cbf0df.gif

5 - اضغط Alt + H وستظهر لك شبكة بالواجهه كما في الصوره

http://www.l22l.com/l22l-up-1/f02f268b0a.gif

6 - اختر اداة المربع علشان نسوي البنر

http://www.l22l.com/l22l-up-1/9e0cd433b1.gif

7 - الحين نحط مربع علي حسب الارقام الي موجود 10 مربعات
الارقام انا كاتبهم يعني انت لا تسوي نفسي بس انا حطيتهم علشان تعرف العدد

http://www.l22l.com/l22l-up-1/56857a8e90.gif

8 - نختار فلتر Wave

http://www.l22l.com/l22l-up-1/01b3941254.gif

9 - الان تحط القياسات والمجموعات نفس الي بالصوره

http://www.l22l.com/l22l-up-1/20b4f8c7c1.gif

10 - الان طلع الشكل نفس جذي ومخربط البنر

http://www.l22l.com/l22l-up-1/7dc572c585.gif

11 - علشان نعدل البنر ونعدله اضغط حرف V من الكيبورد
واضغط السهم فوق لين توصل المربع العاشر ويطلع لك الشكل هكذا

http://www.l22l.com/l22l-up-1/0c5910512f.gif

12 - نروح الحين نحدد لير البنر ونضغط الاف الي تحت انا
محددها بالاحمر ونختار اول دقمه ...

http://www.l22l.com/l22l-up-1/492111c333.gif

راح يعلق البرنامج شوي يعني لا تستعجل

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

http://www.l22l.com/l22l-up-1/0237a450a6.gif

راح تلقى البنر الحين له ظل من تحت الحين باقي نحط فيه صور


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

http://www.l22l.com/l22l-up-1/215f7b380c.gif

15 - الحين نختار صوره لنضيفها مع البنر

http://www.l22l.com/l22l-up-1/1605a8e845.gif

16 - نسحب الصوره الحين الي البنر ونخليها فوق وعاد كيفك يمين ولا يسار
بس المهم فوق اول شي

http://www.l22l.com/l22l-up-1/641843fd33.gif

17 - نضغط الحين Alt + t ونكبر الصوره شوي اذا كانت صغيره
ونضغط الحين Alt + G تلقى الصوره اندمجت مع البنرالحين
نعدل الخيارات الي باللير ونخليها نفس الي بالصوره

http://www.l22l.com/l22l-up-1/ef0a435629.gif

18 - الحين تلقى الواجهه صارت نفس هذي الصوره

http://www.l22l.com/l22l-up-1/dbaf2f35d1.gif

19 - الحين نختار صوره ثانيه ونحطها بالجهة الثانيه بالبنر
يعني انت مثلا حطيت الصوره الاولى باليمين نختار صورة ثانيه ونحطها باليسار
مع نفس الاعدادات وراح يطلع لك الشكل هكذا

http://www.l22l.com/l22l-up-1/5e9ba0f268.gif

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

http://www.l22l.com/l22l-up-1/77b3845fac.gif

21 - ونختار الفلتر التالي نفس الي بالصور

http://www.l22l.com/l22l-up-1/44d54dd25c.gif

22 - الحين خلاص خلصنا من البنر كله بس باقي له كم لمسه ابداع
واسم الموقع والرابط وبسسسسس وهذا الشكل للبنر

http://www.l22l.com/l22l-up-1/80db65d23a.gif

23 - الحين باقي الفوتر الي هو اخر شي بالموقع نسويه نفس طريقه البنر
من فلاتر بس تغير الصور وتسوي نفس الخطوات وراح يطلع لك رووووعه
وهذي صوره للفوتر بعد ماخصلت منه انا

http://www.l22l.com/l22l-up-1/35d205d193.gif

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

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

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

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

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

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

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








الصور المرفقةhttp://www.traidnt.net/vb/images/smbat/attach/psd.gifازرار.psd (http://www.traidnt.net/vb/attachment.php?attachmentid=40799&d=1143471259) (92.7 كيلوبايت, عدد مرات المشاهدة

[ضى القمر]

مشكور على المجهود الرائع ونتمنى المزيد

[هوو داا الحب]

شكرا على الموضوع ياغالى