:: مكتبة دروس التصميم ::

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

 كيفية تصميم الواجهه بالفوتشوب [1]  ط£ط¶ظٹظپ ظپظٹ: 29-12-1427هـ
السلام عليكم ورحمة الله وبركاته

كيف حالكم يا اخواني واخواتي الكرام
وهذا الشرح من موقع معهد أول ستايل

أقدم لكم هذا اليوم تصميم واجهه موقع الدرس هذا الى اخر درس لكم
ونبدأ علي بركة الله أولي دروس الدورة وهي تصميم الواجهه بالكامل

أولاً قم بفتح برنامج الفوتوشوب وأفتح صفحة جديدة بالمقاسات التي بالصورة القادمة
http://www.awlstyle.com/tech/wgh/deswgh/deswgh1.gif
الان أختر الاداة الموضحة بالصورة التالية
http://www.awlstyle.com/tech/wgh/deswgh/deswgh2.gif
ثم قم برسم مثل الشكل التالي بالضبط دون أي تغيير
http://www.awlstyle.com/tech/wgh/deswgh/deswgh3.gif
الان طبق عليه الاعدادات القادمة دون اي تغيير أو غير كما تريد ولكن بأحترافية
http://www.awlstyle.com/tech/wgh/deswgh/deswgh4.gif
أستخدم إداة الباث لرسم الشكل التالي .. وقم بعمل الانحناءات كما بالشكل بالضبط
http://www.awlstyle.com/tech/wgh/deswgh/deswgh5.gif
الان طبق الاعدادات التي بالصورة التالية .. وانت وراحتك يمكنك عمل غيرها لكن بشكل جميل هكذا
http://www.awlstyle.com/tech/wgh/deswgh/deswgh6.gif
http://www.awlstyle.com/tech/wgh/deswgh/deswgh7.gif
http://www.awlstyle.com/tech/wgh/deswgh/deswgh8.gif
بهذا نكون وضعنا تأثيرات علي البنر .. وأنظر شكلة بعد تطبيق التأثيرات عليه
http://www.awlstyle.com/tech/wgh/deswgh/deswgh9.gif
الان أسفل طبقة الهيدر ضع طبقة أخري .. وقم بتحديدها كما بالشكل القادم
http://www.awlstyle.com/tech/wgh/deswgh/deswgh10.gif
أملئها بالتدرج من اسفل لاعلي ثم طبق عليها الاعدادات التالية
http://www.awlstyle.com/tech/wgh/deswgh/deswgh11.gif
http://www.awlstyle.com/tech/wgh/deswgh/deswgh12.gif
http://www.awlstyle.com/tech/wgh/deswgh/deswgh13.gif
سيصبح الشكل كما بالصورة ويصبح جيداً نوعاً ما
http://www.awlstyle.com/tech/wgh/deswgh/deswgh14.gif
الان جاء دور أضافة صور علي البنر..
قم بأختيار الصورة ثم ضعها بالجانب الايمن كما بالشكل القادم وأضبط مقاساتها لتكون كما بالشكل
http://www.awlstyle.com/tech/wgh/deswgh/deswgh15.gif
الان نغير لون الصورة لكي تتناسق مع اللون الذي قمنا به للواجهه وهو الوردي أضغط علي CTRL+U ثم طبق نفس الاعدادات التالية
http://www.awlstyle.com/tech/wgh/deswgh/deswgh16.gif
الان تغيير اللون .. وانت في لير الصورة قم بالضغط علي CTRL و بالماوس أضغط علي طبقة الهيدر ليتم تحديدها وانت لازلت علي الصورة .. الان أضغط علي CTRL+SHIFT+i لعكس التحديد بعد عكس التحديد أضغط علي مفتاح DELETE لقص الصورة بالضبط علي البنر
http://www.awlstyle.com/tech/wgh/deswgh/deswgh17.gif
http://www.awlstyle.com/tech/wgh/deswgh/deswgh18.gif
الان أختر إداة الممحاه كما بالصورة التالية بالضبط
http://www.awlstyle.com/tech/wgh/deswgh/deswgh19.gif
قم بالضغط الخفيف علي الصورة من الجانب الايسر .. لكي نخفي حدها وتظهر أكثر أندماجاً بالهيدر
ومن القائمة الخاصة بالليرات ستجد خيار أوباستي خففه للدرجة المعقولة لتظر الصورة بالشكل التالي
http://www.awlstyle.com/tech/wgh/deswgh/deswgh20.gif
الان قم بوضع صورة أخري بالجانب الايسر وطبق عليها ما قمنا به بالصورة الاولي لتكون بالشكل التالي
http://www.awlstyle.com/tech/wgh/deswgh/deswgh21.gif
الان أختار أداة الكتابة كما بالشكل .. لنكتب علي البنر أسم الموقع
http://www.awlstyle.com/tech/wgh/deswgh/deswgh22.gif
أكتب الاسم الذي تريد كما بالشكل
http://www.awlstyle.com/tech/wgh/deswgh/deswgh23.gif
الان طبق الاعدادات التالية علي الاسم ليظهر أكثر جمالاً..
وهناك دروس لكيفية أحتراف الكتابة علي البنر بأمر الله
http://www.awlstyle.com/tech/wgh/deswgh/deswgh24.gif
http://www.awlstyle.com/tech/wgh/deswgh/deswgh25.gif
http://www.awlstyle.com/tech/wgh/deswgh/deswgh26.gif
مبروك عليكم الهيدر قد تم عمله بطريقة رائعة.. وسنكمل باقي التصميم في الدرس القادم بأمر الرحمن
http://www.awlstyle.com/tech/wgh/deswgh/deswgh27.gif
أتمني أكون أفدتكم بهذا الدرس.. وأنتظر التطبيقات


أخوكم..
مـوعـدآلـقـلـوب

ط§ظ„ظƒط§طھط¨: مـوعـدآلـقـلـوب ط§ظ†ظ‚ط± ظ‡ظ†ط§ ظ„ظ…ط±ط§ط³ظ„ط© مـوعـدآلـقـلـوب ط£ظ†ظ‚ط± ظ‡ظ†ط§ ظ„ظ„ط¥ظ†طھظ‚ط§ظ„ ط¥ظ„ظ‰ ظ…ظˆظ‚ط¹ مـوعـدآلـقـلـوب ط¥ط¶ط§ظپط© ظ„ظ„ظ…ظپط¶ظ„ط© ط¥ط¶ط§ظپط© ظ„ظ…ظپط¶ظ„ط© Google ط¥ط¶ط§ظپط© ظ„ظ…ظپط¶ظ„ط© Delicious ط¥ط¶ط§ظپط© ظ„ظ…ظپط¶ظ„ط© Digg ط¥ط¶ط§ظپط© ظ„ظ…ظپط¶ظ„ط© Facebook
ط®ظٹط§ط±ط§طھ ط§ظ„ط¯ط±ط³ : ط§ط±ط³ظ„ ط§ظ„ط¯ط±ط³ ظ„طµط¯ظٹظ‚ ط§ط±ط³ظ„ ط§ظ„ط¯ط±ط³ ظ„طµط¯ظٹظ‚  ط·ط¨ط§ط¹ط© ط§ظ„ط¯ط±ط³ ط·ط¨ط§ط¹ط© ط§ظ„ط¯ط±ط³  ط­ظپط¸ ط§ظ„ط¯ط±ط³ ظƒظ…ظ„ظپ Word ط­ظپط¸ ط§ظ„ط¯ط±ط³ ظƒظ…ظ„ظپ Word  ط­ظپط¸ ط§ظ„ط¯ط±ط³ ظƒظ…ظ„ظپ PDF ط­ظپط¸ ط§ظ„ط¯ط±ط³ ظƒظ…ظ„ظپ PDF

ط§ظ„طھط¹ظ„ظٹظ‚ط§طھ
آ»Hani
  ط£ط¶ظٹظپ ظپظٹ: 6-9-1430هـ
الصور يالغالي لا تظهر فما السبب؟!