تصميم صفحات الويب عبرَ الفوتوشوب ( شرح مفصل بالصور )

[هيثم النقيب]

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

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

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


[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات](2)%20copy.jpg
اختر لونين لصندوق الألوان على يسار الشاشة ، بحيث يشكِّلان اللونين الرئيسين لصفحتك.
لون الخلفية بدرجة خفيفة من أحد اللونين باستخدامِ دلو التعبئة ..


[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات](3)%20copy.jpg
أنشئ طبقة جديدة ، واختر أداة التحديد المستطيل ( العليا على اليسار ) ، وقم بتحديد منطقة مناسبة للبانر و عبئها بدلو التعبئة
بالونِ الآخر .


[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات](4)%20copy.jpg
اذهب إلى قائمة Layer ، ثمَ إلى Layer Style ... و اختر Drop Shadow ،
اجعل الزاوية 90ْ ، وهذا هوَ المهم ، أما بقية الإعدادات ، فتعتمد بشكل أكبر على ذوقك ورغبتك الشخصية .
في حال استخدمت ألوان فاتحة قليلاً بدل الـBlend Mode ... إلى Normal ..


[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات](6)%20copy.jpg
افتح أي صورة مناسبة لدمجها برأس الصفحة ، و استخدم أداة التحريك لنقلها إلى مساحة العمل ..
و ضعها فوق منطقة البانر كيفما أردت ..

[هيثم النقيب]

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


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


[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات](11)%20copy.jpg
أنشئ طبقة أخرى ، وقم بعمل ما عملته مع السابقة ، وهذهِ الطبقة ستكون للقائمة الرئيسة .


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

[هيثم النقيب]

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات](14)%20copy.jpg
أنشئ طبقة جديدة لتكون شريطاً للتحديثات ( مثلاً ) و اعمل نفس الخطوات السابقة ( لا تحتاج التدرّج )
و اسحب هذه الطبقة لتكون تحت طبقتي حدود الصفحة .


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


[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات](16)%20copy.jpg
قم بالكتابة على البانر ، و بإمكانك إضافة المزيد من التفاصيل عليه بنفس الطرق التي استخدمناها على الصورة الأولى


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

[هيثم النقيب]

[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات](22)%20copy.jpg
اختر أداة التقطيع ( Slice Tool ) الموضّحة في الصورة ، وقم بتقطيع الصفحة ، إلى أقسام ..
لاحظ أن هذا القسم من الدرس يتطلّب دقّة شديدة في العمل ،
راعِ أن تعزل المناطق التي ستقوم بالكتابة داخلها في مربع واحد ..بدون اختلاط ألوان أخرى معه ..


لاحظ هذا التفصيل من الصورة :
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]


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


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

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

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

قم بالكتابة و وضع الروابط ،
نموذج بعد التطبيق :
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات]

[حياة الروح]

ماشاءالله عليك أخوي صاحب
يعطيك العافية على الشرح الكافي والله
مميز بمواضيعك الله يعافيك

[هيثم النقيب]

:1 (51): :1 (51): :1 (51):
كل الشكر على المرور

[المهاجر]

مشكوووووووووووووووووووووووور صاحب

[منابر]

جزاك الله خير
ماقصرت

[عآزف آلحرف]

مجهوٍوٍوٍود رآئع

يعطيك آلف آلف آلف


عآفيـ..ـه

مـع اعذب تحيـ..ـه

مـ..ـرمرٍ

[هيثم النقيب]

كل الشكر قيصر على المرور والرد شاكرا لك اهتمامك

[أحمد__2005]

مشكووووووووووووور

[عاشق]

جزاك الله عنا كل خير
ومشكور على
الموضوع الممتاز

[ريهام]

مشكوو وو ر اخوي

شرح وتصميم ولا أروع

يعطيك الف عافية

[عمدة المنتدى]

الله يعطيك العافية يامشرفنا الغالي على المجهود الرائع





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

[اسيـ الاحزان ـره]

يعطيك ربي الف الف عافية يالغالي
عالمجهود الرائع..........

[عـــــط ــالغلاء ـــــــر]

يسلمووووووووووو على الموضوع الرائع
تحياتي ابــــــــــــــــــ منال ـــــــــــــــــــــــو