درس تصميم واجهة بسيطة بالفوتوشوب - نسخة قابلة للطباعة +- الدعم العربي (https://www.mybbarab.com) +-- قسم : :: . + أقسام التصميم والأبداع بالفوتوشوب والأميدج ريدى والفلاش + . :: (https://www.mybbarab.com/forum-10.html) +--- قسم : منتديات التصميم والابداع (https://www.mybbarab.com/forum-105.html) +---- قسم : دروس وفلاتر واستايلات وفرش وملحقات الفوتوشوب (https://www.mybbarab.com/forum-12.html) +---- الموضوع : درس تصميم واجهة بسيطة بالفوتوشوب (/thread-2612.html) |
درس تصميم واجهة بسيطة بالفوتوشوب - awtil.com - 2008-02-17
السلام عليكم
اخواني الكرام موضوعنا اليوم هو عمل واجهة بسيطة بالفوتوشوب باسهل الطرق للبدا يجب ان تكون تحسن التعامل مع الفوتوشوب ولو 20 بالمائة لفتح شهية العمل هدا هو المتال البسيط الدي سنتعلمه اليوم ان شاء الله يعجبكم وكالعادة ابدا بالاراء الشخصية و الملاحظات واولها ان الالوان اجتهاد شخصي يعني ممكن تختار اي الوان تعجبك لدلك ربما لم اكن موفق في تنسيق الالوان لن الفكرة هي اكتساب مجموعة من المهارات وربما الاضافات خصوصا للمبتدئين بالفوتوشوب واخيرا الدرس يقتصر فقد على التصميم اما تقطيع الواجهة فقد تم التطرق اليها بالشرح في مواضيع سابقة لدلك المرجوا مراجعتها لمن يود تقسيم واجهته بسم الله نبدا نفتح عمل جديد بمقاس يكون على الارجح 600*600 بيكسل نختار اداة التدرج gradien tools وتكون الالوان الاساسية هي كالتالى الخلفية سوداء و الرئيسية قيمتها #cfbead تم نقوم بتلوين خلفية عملنا الان نحدد اداة raounded rectangle tool لرسم الاطار العلوي الصور توضح الهدف و النتيجة بحيت تكون التاتيرات كلى النحو التالى خاصية gradient overlay نطبق ايضا خاصية الظل او ال drop shadow تم خاصية inner glow واخيرا خاصية stroke ملاحظة ان كنت قمت بتحميل التدرجات التى قمت بعرضها في قسم ادوات التصميم فانك تتوفر على هدا التدرج موجود مباشرة لن تحتاج الى تعديلات الا تعديل ال drop shadow الان ننتقل الى الازرار باسفل الاطار العلوى نختار دائما اداة ال raounded rectangle tool ونقوم برسم ايقونا تصغيرة انا اخترة ايقونات بالتدرج التالي خصائص ال gradient overlay هنا يجب الانتباه الى قيم كل زر وايضا مكان توضعه بحيت الاول على قيمة 100 تم الاسوسط على قيمة 50 تم الاخير باليسار على قيمة 0 مع التركيز ان الزر الاوسط هو جمع بين الزين الايمن و الايسر بحيت نضع الايسر اسفل الايمن كما توضح الصورة مع القيم المحددة [img][/img] بعد الحصول على الزر الاول نقوم بمضاعفته 7 مرات متلا او حسب الروابط التى اريد انشائها لتكون النتيجة الان كل ما علينا هو القيام بوضع اسماء الروابط على الازرار كما هو مبين بالصورة وهنا انا اخترت خط farsi simple bold هدا الخط ايضا يوجد ضمن باقة الخطوطة التى قمت بعرضها سابقا النتيجة هي الان يمكننا اضافة اي لمسة جمالية للاطار العلوى وكل واحد حسب دوقه ننشئ لاير جديد ونختار اداة brush tool ونضيف لمسة بسيطة لتصميمنا كما هو الحال هنا بالصورة التوضيحية وايضا هده الفرش تم عرضها سابقا ضمن اداوات التصميم يمكنكم تحميلها الان ما علينا سوي كتابة اسم موقعنا وسط الاطار العلوى ونعدل عليها بما نحب بهدا نكون قد انهينا نصف العمل الان الى اللمسات الاخيرة من قائمة الادوار نختار اداة eliptiqual marquee tool وننشئ لاير جديد ونقوم برسم شكل متل ما هو مبين بالصورة تم نقوم بملئه باللون الاسود من خلال اداة gradient tool كليك من لوحة المفاتيح على زر ctrl+d لازالة التحديت التاتير الدي ساقوم به هو ان نعطي شكل الظل لهدا اللير لدلك سنغير قيم ال Opacity من 100 الى 25 بالمائة ليكون شكل النهائي هو كالتالى اخيرا الخطوة الاخيرة ويجب التركيز قليلا الان حدد جميع الليرز الا ليرز الاخير و الخلفية يعني ليزر النصوص و الاطار العلوي واسم الموقع وايضا البروش المستعمل قم بنسخها جميعا يعني عمل duplicate layer لتكون كل الليرات مضاعفة ستكون الليرات المضاعفة باللون الازر يتوجب علينا دمجها ودلك من خلال زر المفاتيح كليك على كل من ctrl+e ونتيجة العمل لابد ان تكون بهدا الشكل اتمنى يكون الامر مفهوم لاني احاول التبسيط قدر الممكن الان نقوم بعمل التاتير التالى على اللير الجديد من قائمة edit نختار transform ونختار flip vertical تم نضعه اسفل الاطار العلوى كما تبين الصورة التالية الهدف من هده الخطوة هو العمل على ان يكون شكل الاطار العلوى وكان له ظل بالاسفل لاعطاء جمالية لتصميمنا نواصل العمل كليك من لوحة المفاتيح على ctrl+t تم كليك على اللير الاخير واختيار التالى فنقوم بعمل ميلان لتصميم من خلال المقابظ المحددة بالاحمر في الصورة ويستحسن استخدما المسطة من اجل عمل ميلان متساوي بالجهتين,عند الوصول الى النتيجة المرضية كليك على اداة ال move tool لتطبيق تاتير الميلان على اللير الان نغير قيمة ال opacity الخاص بهدا اللير من قيمة 100 الى 50 الان نحدد اللير ودلك بالنقر عليه من قائمة الليرز واصبعك على زر ctrl اختر اداة التدرج بحيت اللون الابيض هو اللون الرئيسي الهدف هو عمل تدرج لوني للير نغير قيمة ال opacity الخاصة باللير الى 25 او 30 حسب الدوق لنصل الى النتيجة التالية اتمنى الشرح يكون واضه و الدرس به اضافات لكم ولمن يحب تحميل فيديو لشرح الكامل الرابط المباشر هنا اتمنى لا تنسونا من صالح دعواتكم والله الموفق Re: درس تصميم واجهة بسيطة بالفوتوشوب - Pepo - 2008-02-17 مشاء الله عليك اخى awtil.com شرح رائع ومجهود ملحوظ وواضح جدا وفقك ربى لما تسعى وجعلها فى ميزان حسناتك Re: درس تصميم واجهة بسيطة بالفوتوشوب - awtil.com - 2008-02-17 العفو اخي بيبو وشكرا لتشجيعاتك المتواصلة اتمنى الافادة للجميع ومعدرة لاني نسيت وضع رابط الدرس مصور وبه الشرح الوافي لمن يريد مراجعة الدرس وهو غير مرتبط بالنت كليك هنا لتحميل والله الموفق RE: درس تصميم واجهة بسيطة بالفوتوشوب - Mr.NaDiR - 2009-02-11 مشكروور RE: درس تصميم واجهة بسيطة بالفوتوشوب - suf_man - 2009-02-14 مشكوووووووووووووور اخي العزيز
|