شرح عمل واجهة موقع إحترافية على الفوتوشوب

عاشق الليل

مُديّرْ المُنتَدىَ
طاقم الإدارة
بسم الله الرحمن الرحيم
أنا وجدت شرح لعمل واجهة للمحترفين فقررت أن أعمل شرح للمبتدئين بإسم الله أبدأ
السلام عليكم و رحمة الله و بركاته
نقوم بالضعط على قائمة file ونختار new
ونحدد المقاسات واللون كما في الصورة
1.jpg

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

و هذا سيساعدنا لتحديد المساحه التي نريدها من خلال المربعات التي ستظهر في ساحة العمل
ولإضافة grid إنظر الصورة القادمة
2.jpg

سوف تصبح الشفيفة مثل ما في الصورة
3.jpg

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

4.jpg


نقوم بتحديث ثلاث مربعات نستخدم هذه الأداة
t7ded.jpg

نحدد ثلاث مربعات من الأسفل كما في الصورة
5.jpg

نصبغها باللون الأزرق عن طريق الأداة الموضوحة في الصورة
6.jpg

استخدمنا هذا الكود : 356AC8 (كود اللون الأزرق)
ولمعرفة أين نضع هذا الكود إنظر الصورة التالية
color.jpg

بعد ما نصبغ سوف تصبح كما في الصورة
7.jpg

نضيف طبقة جديدة ونحدد 9 مربعات من الأعلى وبنفس اللون نعمل لها تدريج بأداة gradient tool وهي موجودة الرول الذي إستخدمانه قبل قليل ثم نلغي التحديد لإلغاء التحديد إتظر الصورة التالية
29.jpg

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

نتركها محددة ونعمل لها ظل كما في الصور القادمة
9.jpg


10.jpg

نختار أداة جديدة كما في الصورة القادمة
11.jpg

نلغي التحديد ونضغط مكان خط التحديد السفلي إنظر الصورة التالية
12.jpg

نضغط على الزر الأيمن للماوس على الخط ونختار stroke كما في الصورة
13.jpg

الأن ضع المؤثرات كما في الصورة




نحذف التحديد ونضيف طبقة جديدة ونحدد مربعين ونصف كما في الصورة القادمة
16.jpg

نغير اللون الأزرق إلى البرتقالي ونعمل له تدرج من الأسفل للأعلى عن طريق أداة gradient tool كما في الصورة
16a.jpg
ثم نضيف له تاثير الظل بهذه الاعدادات المبينه هنا
17.jpg
من المفترض ان نحصل في هذه المرحلة على شي كهذا
eyelash.jpg
الأن نمسح grid ونضيف طبقة جديدة ونرسم خط مربع صغير بهذه الأداة
eyelash.jpg

ونصبغه بلون بني عن طريق أداة الرول كما في الصورة ونعمل لهم نسخ ونضيف طبقة أخرى ونعمل لصق (كل خط في طبقة) ونوزعهم على المنطة الملونة باللون البرتقالي كما في الصورة
eyelash.jpg

الأن نضيف طبقة جديدة ونختار الأداة الموضحة في الصورة
19.jpg
نرسم دائرة ونضغط بالزر الأيمن عليها ونختار stroke كما في الصورة
20.jpg
نعمل لها تأثيرات كما في الصورة
20.jpg
نمسح نصف الدائرة عن طريق أداة الممحاة إنظر الصورة
mmha.jpg

عن طريق هذه الأداة
sahem.jpg

إلى المنطة الملونة باللون الأزرق الموجود في الأعلى ونضيف طبقة أخرى ونرسم دائرة ونعمل نفس التأثيرات (كرر الخطوة أكثر من مرة) حتى تصل إلى هذه الصورة
22.jpg
الأن نفتح صورة جديدة لنضعها على البنر عن طريق
file ثم open وتختار الصورة التى تريدها من جهازك
ثم تحددها عن طريق أداة التحديد وتعمل لها نسخ وتلصقها في طبقة جديدة وتحركها في أداة السهم في أي مكان تريدها وهكذا في أسفل الصفحة كما في الصور القادمة
23.jpg

Untitled-1.jpg

نضيف الكتابة عن طريق أدراة المكتوب عيها (T)
جاء الأن دور تقطيع الصورة لحفظها والعمل عليها بالفرونت بيج
لعمل التقطيع يجب ان يكون الرولر ظاهر
ان لم يكن موجودا , نضغط على ctrl+r
ثم من نقوم بتنزيل خطوط زرقاء وهميه من الاعلى و اليمين , نحدد بها المناطق التي تحتاج لتقطيع
كمناطق الكتابة و الازرار
ولتنزيل هذه الخطوط نضفط على المسطرة وننزل إلى أسفل كما في الصورة
24.jpg
ولتقطيع الصورة نختار أداة slice tool كما في الصورة
slice.jpg

ونضعط على المكان الذي نريد تقطيعه ونسحب (الذي يحتاج إلى تقطيع مثلا كلمة الرئيسية)
كما في الصورة
25.jpg
لحفظه على هيئة html للعمل عليه في الفرونت بيج
26.jpg

Untitled-1.jpg


28.jpg


كود اللون البرتقالي FD890E
كود اللون البني AA9578

المنطقة البيضاء تضع فيه ما تشاء
أرجو أن أكون قد وفقت
طلبي الوحيد الدعاء لي ومن ربياني صغيرا

الصورة النهائية


Untitled-1.jpg


منقول للفائده


تحياتى لكم
 

المخرج

كاتب جيد جدا
رد: شرح عمل واجهة موقع إحترافية على الفوتوشوب

السلام عليكم ورحمة الله وبركاته
ما شاء الله عليك كفو يا ديب
 

المهندس ماجد

كاتب جيد جدا
رد: شرح عمل واجهة موقع إحترافية على الفوتوشوب

يعطيك العافية ابو سعود تسلم ايدك تحياتي الك وتقبل مروري
 

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

أعلى