تصميم المواقع يعدُّ أحد أهم فنون الفوتوشوب و أكثرها استخداماً ، سنأخذ لمحة بسيطة عن هذا الفنّ عبر هذهِ الدورة ، والأمر يعتمد أولاً و أخيراً على الذوق الشخصي و التجربة للحصول على النتائج =) ..

نفترض أنّ لديك خبرة جيّدة في الفوتوشوب ، و إذا لم يكن ، ربّما تستفيد من الدورتين الأولى و الثانية ، في منتدى التقنية و التصميم ، أو قم بزيارة أحد المواقع التعليمية .

،










- أنشء مساحةَ عملٍ جديدة ، يفضل أن تختار الإعدادات التالية :
780 للعرض ، وذلك لكي تترك مساحة بسيطة لملحقات المتصفح .
أما الطول فلكَ الحرية ، ولكن احرص على أن يكون أكبر من 600 للحفاظ على جمال الصفحة ..








اختر لونين لصندوق الألوان على يسار الشاشة ، بحيث يشكِّلان اللونين الرئيسين لصفحتك.
لون الخلفية بدرجة خفيفة من أحد اللونين باستخدامِ دلو التعبئة ..








أنشئ طبقة جديدة ، واختر أداة التحديد المستطيل ( العليا على اليسار ) ، وقم بتحديد منطقة مناسبة للبانر و عبئها بدلو التعبئة
بالونِ الآخر .







اذهب إلى قائمة Layer ، ثمَ إلى Layer Style ... و اختر Drop Shadow ،
اجعل الزاوية 90ْ ، وهذا هوَ المهم ، أما بقية الإعدادات ، فتعتمد بشكل أكبر على ذوقك ورغبتك الشخصية .
في حال استخدمت ألوان فاتحة قليلاً بدل الـBlend Mode ... إلى Normal ..







افتح أي صورة مناسبة لدمجها برأس الصفحة ، و استخدم أداة التحريك لنقلها إلى مساحة العمل ..
و ضعها فوق منطقة البانر كيفما أردت ..







غيّر نوع الطبقة إلى Linear Burn ، أو ( حسب نوع الصورة التي أدخلتها ) ما يناسبك ،
قم بتحديد طبقة البانر عن طريق الاستمرار بالضغط على Ctrl في لوحة المفاتيح
والضرب ضربة واحدة على طبقة البانر في لوحة الطبقات .
عندما تحدد الطبقة ارجع إلى طبقة الصورة ، وضغط على زر انشاء القناع ..
( الزرّ الثاني من اليسار في نافذة الطبقات )







اختر أداة التحديد المستطيل مرّة أخرى ، و أنشئ طبقةً جديدة ،
اذهب إلى قائمة Select ، ثمَ Modify ، وبعدَ ذلكَ إلى Smooth ..
وحدد المقدار بـ 10 ، و كلّما رفعت القيمة ، تزداد استدارة الزوايا .
قم بتعبئة التحديد باللون الثاني لك ( بدرجة تناسب للكتابة عليها )
وبإمكانك تطبيق تأثير Outer Glow ، من قائمة Layer Style لو أحببت ..









أنشئ طبقة أخرى ، وقم بعمل ما عملته مع السابقة ، وهذهِ الطبقة ستكون للقائمة الرئيسة .









الآن اختر أداة التحديد كذلك ، و قم بانشاء طبقة جديدة ،
قم بالتحديد بشكل مستقيم على الطرف الأيسر .. عمود يشكّل الطرف الأيسر من الصفحة ..
حدد تدرجين من لونٍ واحد للوحةِ الألوان ، و اختر أداة التدريج (G) ، وقم بسحبها وسطَ التحديد . للحصول على شكل متناسق.
قم بعدل Duplicate للطبقة ، أو مضاعفة لها ، عن طريق قائمة layer ، ثمَ duplicate layer ...









أنشئ طبقة جديدة لتكون شريطاً للتحديثات ( مثلاً ) و اعمل نفس الخطوات السابقة ( لا تحتاج التدرّج )
و اسحب هذه الطبقة لتكون تحت طبقتي حدود الصفحة .









الآن قم بانشاء طبقة جديدة ، و اختيار أداة التحديد و تحديد جزء من أسفل الصفحة ليكون تذييلاً لها .
حدد بواسطة أداة التحديد المستطيل ، وحاول أن تجعل التحديد متجاوزاً لحدود العمل تجاه الأسف ، واذهب إلى
Select >> Modify >> Smooth
و اجعل المقدار ( 10 ) تقريباً أو كيفما تريد .











قم بالكتابة على البانر ، و بإمكانك إضافة المزيد من التفاصيل عليه بنفس الطرق التي استخدمناها على الصورة الأولى .










قُم بإنشاء طبقة جديدة ، و بأداة التحديد المستطيلة قم بالتحديد في الجزء العلوي من مربعات القائمة و المحتويات ( كلٌّ على حدة )
وقم بتعبئة ما حددت
هل تتذكر ما فعلنا مع الصورة التي قمنا بإدخالها على البانر ؟
حسناً قم بعمل قناع على الطبقة عبر تحديد طبقة القائمة و من ثم تطبيق القناع على رأسها و هكذا .
حين تحصل على الشكل أعلاه ، قم بالذهاب إلى:
Layer > Layer Style > Gradient Overly
للحصول على مزيدٍ من الجمال ،
وكرر العملية مع القائمة الأخرى .









اختر أداة التقطيع ( Slice Tool ) الموضّحة في الصورة ، وقم بتقطيع الصفحة ، إلى أقسام ..
لاحظ أن هذا القسم من الدرس يتطلّب دقّة شديدة في العمل ،
راعِ أن تعزل المناطق التي ستقوم بالكتابة داخلها في مربع واحد ..بدون اختلاط ألوان أخرى معه ..




لاحظ هذا التفصيل من الصورة :











الآن انتقل إلى برنامج Microsoft FrontPage ، أو محرر صفحات الويب المفضّل لديك
حين تفتح الصفحة ، أضغط في الفراغ الأبيض على يمين و اختر Page Properties ( خصائص الصفحة )
ثم اذهب إلى التبويب Formatting ،
و من ثمَ خيار Background ،
واختر الألوان الإضافية ، ومن ثم عند ظهر النافذة الظاهرة بالصورة ، اختر خيار Select
واختر لون الخلفية من الصفحة نفسها .










قم بتوسيط الصفحة عبر ضغط خيار التوسيط ( تأكد من وجود مؤشر الكتابة ضخماً بجانب الصفحة )
أو قم بإنشاء جدول من ثلاث خانات و اجعل حجم الإطار ( 0 ) وانسخ الصفحة للخلية في المنتصف ( ولكن الطريقة الأولى أفضل )
قم بالضغط على منطقة الكتابة ضغطة واحدة واحذف الصورة الموجودة ..
اضغط بالزر اليمين في المساحة الفارغة واختر :
Cell Properties

ومن ثم اذهب إلى Background ، و أعد ما فعلناه مع خلفية الصفحة
ولكن هذه المرّة افعل ذلك مع لون القائمة على اليسار ..

ومن ثم اذهب إلى Background ، و أعد ما فعلناه مع خلفية الصفحة
ولكن هذه المرّة افعل ذلك مع لون القائمة على اليسار ..

في حالة كانت خلفية الكتابة عبارة عن صورة أو تدرّج ( أكثر من لون )
قم بتفعيل خيار الخلفية الصورية ، و اختر الصورة المطلوبة ..









قم بالكتابة و وضع الروابط ،
نموذج حصلنا عليه بعد التطبيق :

عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ]


منقول..