درس تصميم موبايل بالفوتوشوب

تاريخ الميلاد : 11/09/1993

درس اليوم للمحترفين او ذو خلفية مقبولة بالفوتوشوب..

الدرس قد يكون طويل إلى حد ما ولكنه مفيد ..النتيجة النهائية للدرس.

1- نبدأ بفتح صفحة بمقاس مناسب 700*700 كمجرد مثال .

2- إستخدم آداة Rounded Rectangle Toot , إجعل قيمة radius كما بالشكل (25) واللون 030303 وارسم مثل هذا الشكل .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
3- أضف الإعدادات التالية

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
ليكون الشكل كالتالي
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
4 – نفتح لاير جديد ونستخدم التدرج الآتي
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
ونبدأ بعمل لمعة علي الزاوية العلوية بدرجة لون 414040 ثم نضغط حرف V
ونحرك اللاير 2 بكسل لليمين و2 بكسل للاسفل .5- نكرر نفس الخطوة السابقة
علي الزاوية المقابلة بدرجة لون 383838 ثم نحرك اللاير 2 بكسل لليسار و 2
بكسل لأعلى .اذا واجهت اختلاف في الالوان قم بتغيير القيمة العددية لخاصية
(
opacity) الموجودة في أعلى صندوق اللايرات .سيكون نتيجة العمل كالآتي

[center]بنسب متساوية .. ليكون الشكل كالآتي
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
7- اتبع الإعدادات التالية

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]ليكون النتيجة كالآتي:

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
8- نقوم بتكرار اللاير السابق ونقص الجزء العلوي ليكون الشكل كالآتي:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
9- نقوم بعمل تدرج علي اللاير بالاعدادات التالية

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
10-
نضغط Ctrl+u ونجعل الالوان من ابيض واسود ثم نضغط اوك .11- نضيف للاير
الإعدادات التالية : مع عمل strock بقيمة 1 بكسل ودرجة لون 242323 وعمل ال
strock داخلي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]سيكون الشكل كالتالي
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]12-
سنبدأ بعمل تدرج شفاف بدرجة لون 6d6d6c الشكل التالي سيوضح ( لاحظ مكان
البداية من الأعلى ثم النهاية في الاسفل ) ثم نضغط حرف v ونحرك اللاير 4
بكسل للاسفل و 4 بكسل لليمين .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
13-
نمسح بعض الأجزاء من التدرج بآداة pen tool ولا تنسى أن تكون مفعل خيار (
paths) ثم عمل selection ونمسح الاجزاء المتبقية الصورة القادمة ستوضح ..
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
سيكون الشكل النهائي :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

14– نضيف بعض الزراير الجانبية البسيطة أسفل جميع اللايرات لتكون بهذا الشكل :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
وهكذا
انتهينا من رسم الهيكل العام للهاتف ..أعلم أن الدرس طويل ولكني أرى فيه
إفادة .. والآن فقد أنجزنا 70% من الدرس فصبر جميل :)15 – نبدأ برسم الشاشة .. نختار خلفية مناسبة ( أنا أرفقت خلفية هاتفي الحالية
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
16- نضع الخلفية في الشاشة لتكون بهذا الشكل
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
17- نرسم مستطيلين علي صورة السيارة ونملأهم باللون الأسود ونقلل شفافيتهم حتي يصبحو بهذا الشكل :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
18- نضيف لشريطين بعض الايقونات والكلمات ليصبح بهذا الشكل والايقونات مرفقة في ال psd سيتم ارفاقه في آخر الدرس ..
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
19-
نضيف شعار سامسونج ولكني بحثت عن الخط المستخدم في كتابة الشعار ولم اجده
, فقمت بكتابة كلمة SAMSUNG بخط Arial ونمسح الخط الأفقى في حرف “A “ ..
مجرد حل بديل ..ونضيف كلمة WIFI اسفل الشاشة لانها مكتوبة عالجهاز بالفعل ..ليكون الشكل كالآتي :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
باقي رسم السماعة وال 3 أزرار ..20- إستخدم آداة Rounded Rectangle Toot , إجعل قيمة radius كما بالشكل ( وارسم مثل هذا الشكل .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
21 – اتبع الخطوات التالية :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
21- نضيف بعض النقاط السوداء بفرشاة حجم 1 بكسل واللون الرمادي وتكرارها بجانب بعضها حتي تصبح مثل الشكل الآتي:

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

- باقي الأزرار
السفلية ولكني أطلت في الدرس كثيرا ولا أرى فيها أي صعوبة..فسأرفقها جاهزة
مع الأيقونات والخطوط في PSD اختصاراً لوقتي ووقتكم ..سيكون الناتح للازرار
والهاتف كالآتي:

وفي النهاية نضع التصميم علي خلفية مع عمل انعكاس مائي مع بعض اللمسات الجمالية ..تطبيقي المتواضع

لتحميل أيقونات الدرس والازرار والشعار اضغط علي تحميلباسورد فك الضغط

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

» درس الكتابة بشكل دائري بالفوتوشوب.سهل جدا
» درس تصميم توقيـع إحترافي للمبتدئين ...
» عملاق برامج تصميم صفحات الويب Adobe Dreamweaver CS5
» عملاق تصميم الصور Ashampoo Photo Commander 9.2.0 ذو الامكانات المذهلة

درس تصميم موبايل بالفوتوشوب

درس تصميم موبايل بالفوتوشوب

مواضيع مماثلة

مواضيع مماثلة