درس تصميم واجهة بسيطة بالفوتوشوب

السلام عليكم
اخواني الكرام موضوعنا اليوم هو عمل واجهة بسيطة
بالفوتوشوب باسهل الطرق
للبدا يجب ان تكون تحسن التعامل مع الفوتوشوب
ولو 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
مع التركيز ان الزر
الاوسط هو جمع بين الزين الايمن و الايسر بحيت نضع الايسر اسفل الايمن

كما توضح الصورة مع القيم المحددة
" border="0" alt=""/>
بعد الحصول على الزر
الاول نقوم بمضاعفته 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 حسب الدوق
لنصل الى النتيجة
التالية


اتمنى الشرح يكون واضه و
الدرس به اضافات لكم
ولمن يحب تحميل فيديو لشرح الكامل الرابط المباشر
هنا

اتمنى لا تنسونا من صالح دعواتكم

والله الموفق