التصنيفات
التصميم وعرض التصاميم

درس ( تصميم واجهة موقع ) بالفوتوشوب

السلام عليكم و رحمة الله و بركاته

من خلال هذا الدرس بنتعلم كيف نصمم ظˆط§ط¬ظ‡ط© ظ…ظˆظ‚ط¹ بسيطه و مرتبه

في البدايه : نفتح صفحه جديده بمقاس 778×584
و بخلفية بيضاء كهذه

درس ( تصميم واجهة موقع ) بالفوتوشوب ward-1102416952.gif

لتحري الدقه و ترتيب العمل , سنقوم باضافة grid للعمل

و هذا سيساعدنا لتحديد المساحه التي نريدها من خلال المربعات التي ستظهر في ساحة العمل

درس ( تصميم واجهة موقع ) بالفوتوشوب ward-1102417111.gif

سنضيف طبقة جديدة و سنحدد ثلاث مربعات من اسفل التصميم و سنصبغة باللون الازرق

استخدمنا هذا الكود : 356AC8

درس ( تصميم واجهة موقع ) بالفوتوشوب ward-1102417155.gif

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

درس ( تصميم واجهة موقع ) بالفوتوشوب ward-1102417212.gif

مره اخرى نضيف طبقة جديده للعمل و نحدد مربع و نصف فقط

ثم نصبغة بنفس الكود السابق

356AC8

: , ثم نضيف له ظل من خلال blending options

درس ( تصميم واجهة موقع ) بالفوتوشوب ward-1102417212.gif

single row marquee tool سنختار اداة
و سنضع له stroke ابيض
بمقدار ( 1 بيكسل )

درس ( تصميم واجهة موقع ) بالفوتوشوب ward-1102417265.gif

سنقوم باضافة طبقة اخرى للعمل و سنحدد مربععين و نصف و نصبغة بالتدرج المبين هنا
الابيض و البرتقالي

درس ( تصميم واجهة موقع ) بالفوتوشوب ward-1102417547.gif

ثم نضيف له تاثير الظل بهذه الاعدادات المبينه هنا

درس ( تصميم واجهة موقع ) بالفوتوشوب ward-1102417732.gif

من المفترض ان نحصل في هذه المرحلة على شي كهذا

درس ( تصميم واجهة موقع ) بالفوتوشوب ward-1102417952.gif
بعد ان حصلنا على واجهة مبدئية بسيطه , بنضيف طبقه جديده للعمل , ثم باستخدام الفرشاه راح نرسم نقط متباعده على الشريط الازرار البرتقالي

ثم نختار اداة التحديد المربع و بنرسم خط رفيع باللون البني هكذا

درس ( تصميم واجهة موقع ) بالفوتوشوب ward-1102418244.gif

نضيف طبقة جديده للعمل و نرسم شكل بيضاوي مثل هذا و نضع له ستروك ابيض بمقدار 1 بيكسل فقط

درس ( تصميم واجهة موقع ) بالفوتوشوب ward-1102418364.gif

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

الى ان نحصل على شي كهذا

درس ( تصميم واجهة موقع ) بالفوتوشوب ward-1102418430.gif

و في اخر مرحله قمت باضافة بعض شكال الشيبز المتوفره في الفوتوشوب و اضفت سلة ورود في اسفل العمل

نقوم باضافة الكتابة و النصوص البسيطه

درس ( تصميم واجهة موقع ) بالفوتوشوب ward-1102418855.gif

لعمل التقطيع يجب ان يكون الرولر ظاهر

ان لم يكن موجودا , نضغط على ctrl+r

ثم من نقوم بتنزيل خطوط زرقاء وهميه من الاعلى و اليمين , نحدد بها المناطق التي تحتاج لتقطيع

كمناطق الكتابة و الازرار

ثم نختار اداة السكين slice tool
ثم نضغط على الزر المبين للاعلى

درس ( تصميم واجهة موقع ) بالفوتوشوب ward-1102419027.gif

نستطيع اضافة المزيد من التقطيع باستخدام اداة السكين ايضا

سكون لدينا شكل مقطع كهذا تقريبا

ثم نقوم بحطفة عن طريق save for web
و بعد اختيار الصيغة , نختار ان يكون الحفظ html +images

بعدها يجب عمل بعض التعديلات للعمل عن طريق الفرونت بيج

, ثم يتم رفع الصفحه للنت

هنا نكون انتهينا من الشرح , اتمنى اكون افدتكم

في النهاية اقدم ملف المفتوح للعمل

ward-1091811855.zip

لاتنسونا من خالص الدعاء
الردود

لقراءة ردود و اجابات الأعضاء على هذا الموضوع اضغط هنا
سبحان الله و بحمده

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.