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


عاشق الليل
15-08-08, 10:32 PM
بسم الله الرحمن الرحيم
أنا وجدت شرح لعمل واجهة للمحترفين فقررت أن أعمل شرح للمبتدئين بإسم الله أبدأ
السلام عليكم و رحمة الله و بركاته
نقوم بالضعط على قائمة file ونختار new
ونحدد المقاسات واللون كما في الصورة
[Link nur für registrierte Benutzer sichtbar]
لتحري الدقه و ترتيب العمل , سنقوم باضافة grid للعمل

و هذا سيساعدنا لتحديد المساحه التي نريدها من خلال المربعات التي ستظهر في ساحة العمل
ولإضافة grid إنظر الصورة القادمة
[Link nur für registrierte Benutzer sichtbar]
سوف تصبح الشفيفة مثل ما في الصورة
[Link nur für registrierte Benutzer sichtbar]
سنضيف طبقة جديدة و سنحدد ثلاث مربعات من اسفل التصميم و سنصبغة باللون الازرق
لإضافة طبقة إنظر الصورة

[Link nur für registrierte Benutzer sichtbar]

نقوم بتحديث ثلاث مربعات نستخدم هذه الأداة
[Link nur für registrierte Benutzer sichtbar]
نحدد ثلاث مربعات من الأسفل كما في الصورة
[Link nur für registrierte Benutzer sichtbar]
نصبغها باللون الأزرق عن طريق الأداة الموضوحة في الصورة
[Link nur für registrierte Benutzer sichtbar]
استخدمنا هذا الكود : 356AC8 (كود اللون الأزرق)
ولمعرفة أين نضع هذا الكود إنظر الصورة التالية
[Link nur für registrierte Benutzer sichtbar]
بعد ما نصبغ سوف تصبح كما في الصورة
[Link nur für registrierte Benutzer sichtbar]
نضيف طبقة جديدة ونحدد 9 مربعات من الأعلى وبنفس اللون نعمل لها تدريج بأداة gradient tool وهي موجودة الرول الذي إستخدمانه قبل قليل ثم نلغي التحديد لإلغاء التحديد إتظر الصورة التالية
[Link nur für registrierte Benutzer sichtbar]
وبعدها نضيف طبقة جديدة نحدد مربع ونصف من الأعلى ونصبغها بأداة الرول الذي صبغنا به المربعات في الأسفل
[Link nur für registrierte Benutzer sichtbar]
نتركها محددة ونعمل لها ظل كما في الصور القادمة
[Link nur für registrierte Benutzer sichtbar]

[Link nur für registrierte Benutzer sichtbar]
نختار أداة جديدة كما في الصورة القادمة
[Link nur für registrierte Benutzer sichtbar]
نلغي التحديد ونضغط مكان خط التحديد السفلي إنظر الصورة التالية
[Link nur für registrierte Benutzer sichtbar]
نضغط على الزر الأيمن للماوس على الخط ونختار stroke كما في الصورة
[Link nur für registrierte Benutzer sichtbar]
الأن ضع المؤثرات كما في الصورة




نحذف التحديد ونضيف طبقة جديدة ونحدد مربعين ونصف كما في الصورة القادمة
[Link nur für registrierte Benutzer sichtbar]
نغير اللون الأزرق إلى البرتقالي ونعمل له تدرج من الأسفل للأعلى عن طريق أداة gradient tool كما في الصورة
[Link nur für registrierte Benutzer sichtbar]ثم نضيف له تاثير الظل بهذه الاعدادات المبينه هنا
[Link nur für registrierte Benutzer sichtbar]من المفترض ان نحصل في هذه المرحلة على شي كهذا
[Link nur für registrierte Benutzer sichtbar]الأن نمسح grid ونضيف طبقة جديدة ونرسم خط مربع صغير بهذه الأداة
[Link nur für registrierte Benutzer sichtbar]
ونصبغه بلون بني عن طريق أداة الرول كما في الصورة ونعمل لهم نسخ ونضيف طبقة أخرى ونعمل لصق (كل خط في طبقة) ونوزعهم على المنطة الملونة باللون البرتقالي كما في الصورة
[Link nur für registrierte Benutzer sichtbar]
الأن نضيف طبقة جديدة ونختار الأداة الموضحة في الصورة
[Link nur für registrierte Benutzer sichtbar]نرسم دائرة ونضغط بالزر الأيمن عليها ونختار stroke كما في الصورة
[Link nur für registrierte Benutzer sichtbar]نعمل لها تأثيرات كما في الصورة
[Link nur für registrierte Benutzer sichtbar]نمسح نصف الدائرة عن طريق أداة الممحاة إنظر الصورة
[Link nur für registrierte Benutzer sichtbar]
عن طريق هذه الأداة
[Link nur für registrierte Benutzer sichtbar]
إلى المنطة الملونة باللون الأزرق الموجود في الأعلى ونضيف طبقة أخرى ونرسم دائرة ونعمل نفس التأثيرات (كرر الخطوة أكثر من مرة) حتى تصل إلى هذه الصورة
[Link nur für registrierte Benutzer sichtbar]الأن نفتح صورة جديدة لنضعها على البنر عن طريق
file ثم open وتختار الصورة التى تريدها من جهازك
ثم تحددها عن طريق أداة التحديد وتعمل لها نسخ وتلصقها في طبقة جديدة وتحركها في أداة السهم في أي مكان تريدها وهكذا في أسفل الصفحة كما في الصور القادمة
[Link nur für registrierte Benutzer sichtbar]
[Link nur für registrierte Benutzer sichtbar]
نضيف الكتابة عن طريق أدراة المكتوب عيها (T)
جاء الأن دور تقطيع الصورة لحفظها والعمل عليها بالفرونت بيج
لعمل التقطيع يجب ان يكون الرولر ظاهر
ان لم يكن موجودا , نضغط على ctrl+r
ثم من نقوم بتنزيل خطوط زرقاء وهميه من الاعلى و اليمين , نحدد بها المناطق التي تحتاج لتقطيع
كمناطق الكتابة و الازرار
ولتنزيل هذه الخطوط نضفط على المسطرة وننزل إلى أسفل كما في الصورة
[Link nur für registrierte Benutzer sichtbar]ولتقطيع الصورة نختار أداة slice tool كما في الصورة
[Link nur für registrierte Benutzer sichtbar]
ونضعط على المكان الذي نريد تقطيعه ونسحب (الذي يحتاج إلى تقطيع مثلا كلمة الرئيسية)
كما في الصورة
[Link nur für registrierte Benutzer sichtbar]لحفظه على هيئة html للعمل عليه في الفرونت بيج
[Link nur für registrierte Benutzer sichtbar]
[Link nur für registrierte Benutzer sichtbar]

[Link nur für registrierte Benutzer sichtbar]

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

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

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


[Link nur für registrierte Benutzer sichtbar]

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

تحياتى لكم

فتى الشرق
15-08-08, 10:40 PM
خلص ولا يهمك رح احترف .... انا يلي بحترف

بس انو شوشان ما فهمت شي

المخرج
15-08-08, 10:41 PM
السلام عليكم ورحمة الله وبركاته
ما شاء الله عليك كفو يا ديب

المهندس ماجد
16-08-08, 12:07 AM
يعطيك العافية ابو سعود تسلم ايدك تحياتي الك وتقبل مروري