صمم موقعك بالفوتوشوب من الألف الى الياء

سيتضمن الدرس التالي:
1- تصميم شعار
2- تصميم واجهة الموقع
3- استخدام اداة التقطيع
4- طريقة ارفاق تصميمك ببرنامج الفرونت بيج
5- شرح عن كيفية تحميل الموقع على صفحتك بالانترنت


ومنشان هيك نبدأ بالدرس خطوه خطوه حتى المبتدئين نفسهم يقدروا يصمموا اي
موقع المهم ماتنسوا لماساتكم الخاصه مهمه كتير وانا بشرح لكم طريقة التصميم
فقط والباقي عليكم وماشاء الله بالمنتدى صار في فنانين

وقبل البدأ سأرفق شرح كامل عن الادوات حتى يسهل للمبتدئين التعرف عليها واي سؤال صعب يواجهكم بالدرس ماتتأخروا بالسؤال


* من قائمة File > New
العرض : 800
الطول : 600

وهاي المقاسات اكتر استخداماً

* نختار عمل لاير جديد ومن Foreground color نحدد اللون كالتالي

D9D9D9 #

كما بالشكل الموضح لديكم






* نختار عمل لاير جديد وباداة التعبئة مفتاح الاختصار G ونقوم بتلوين
الخلفيه ونسمي الاير بأسم background من خلال الضغط مره واحد على اللاير
ورايت كليك واختار من القائمة Layer Properties اي خصائص اللاير

* قم بتصغير عملك باستخدام اداة العدسه مره واحده حتى يسهل لك التحكم بالعمل

* نفتح عمل لاير جديد ونسمى اللاير بأسم لاير 1 ونستخدم اداة التحديد الدائرية ونرسم دائره
((توجيهات : لمن لا يعرف كيفية رسم الدائره نختار اداة التحديد وفوق عملك
مباشرة نضغط مره واحده بالماوس ونبدأ بالاتجاه للجهة المعاكسه من نقطة بدء
تحديدك مع استمرارية الضغط بالماوس الى ان يظهر لديك الشكل الدائري ))
لاحظ الشكل التالي:





* نختار أداة الدائريه مره اخرى لنحرك بها التحديد ونحركها للأعلى ليصبح كالشكل التالي:




* بالشكل التالى شرح خطوات استخدام اداة تدرج اللون والحرف + باللون الاحمر
هو نقطة البداية ... اما الحرف + باللون الابيض هو نقطة الانتهاء





* نفتح عمل جديد من نافذة اللايرز ونسمى اللاير بأسم دائره 2 وبأداة تحديد
الدائرة نتبع نفس خطوات عمل دائره ولكن ستكون اصغر حجما من الدائره الاولى
ليصبح كمثل الشكل التالي:




(( توجيهات: لعمل لون اضافي لاداة التدرج اضغط مره
واحده مكان حرف + باللون الاحمرالموجود بالشكل التوضيحي وستظهر لك نافذة
لاضافة تدرج جديد ))




* نختار لاير جديد ونسمى اللاير بأسم المربع من نافذة اللايرز ومن قائمة الادوات نختار اداة تحديد المربع كالشكل التالي :




(( توجيهات: تستيطع من اداة التحديد ان تحدد مقاس
الطول والعرض من قائمة Style الموجوده بخصائص اداة التحديد اختر منها
Fixed size والعرض سيكون 504 والطول 17 بيكسل ))


....

* نقوم بعمل لاير جديد ونختار اداة القلم مفتاح الاختصارB ومن الجهة اليمنى
نضغط فوق العمل ونبدأ بالسحب الى الجهة اليسرى مع الضغط على مفتاح Shift
حجم مقاس البرش سيكون 1
ثم ننسخ اللاير ليصبح لديك خطين متساوين قم بتحريك لاير الخط الاول الى الاعلى كما تلاحظ من الشكل




(( اضافة بعض اللمسات على الخطين: من اداة البرش
الناعمه نقوم بتكبير الحجم الى 100 ونختار اداة الممحاة مفتاح الاختصار E
ومن خارج لاير الخط الاول من الجهة اليسرى نضغط مرتين كرر نفس الطريقه مع
الخط الثاني ))

بعد الانتهاء قم بدمج لاير الخطين مع لاير المربع

((توجيهات :لحذف جزء الزائد بالشكل ننشط لاير
المربع عن طريق الضغط على اللاير نفسه من نافذة اللايرز مره واحده ثم نضغط
على Ctrl+ Shift+لاير الدائري 2
ونذهب لقائمة Select> Inverse ونضغط Delete من لوحة الكيبورد ))




ويكون الناتج بنفس الطريقه




* نفتح لاير جديد ونسمي اللاير بأسم مربع 2


* من قائمة الادوات نختار اداة تحديد المربع كما موضح بالشكل التالي:




* نفتح لاير جديد وبأداة القلم حجم البرش يكون 2 نسحب خط من جهة اليمنى الى اليسرى بالضغط على Shfit يكون موازيا للاير مربع 2
بعد الانتهاء نقوم بدمج لاير المربع 2 مع المربع الموازي له
(( اضافة بعض اللمسات على المربعين: من اداة البرش
الناعمه نقوم بتكبير الحجم الى 100 ونختار اداة الممحاة مفتاح الاختصار E
ومن خارج لاير المربع2 من الجهة اليسرى نضغط ثلاث مرات ))

* نختار لاير جديد ونسمي اللاير بأسم مربع 3
ومن قائمة الادوات نختار اداة التحديد المربع بالشكل التالي سيكون مرفق
مقاس التحديد بعد الانتهاء من التحديد نختار اداة التدرج ونسحب من الجهة
اليمنى الى اليسرى انظر للشكل التوضيحي



سيكون الناتج بهذا الشكل





والان يأتي دور اضافة لمسات بسيطه للشعار ننشط لاير 1 ثم رايت كليك بالماوس على اللاير ستفتح قائمة اختر منها Blending options

اختر Outer Glow واتبع الشكل التالي:




والان نذهب لننشط لاير دائرة 2 ونضغط مره واحده مع الضغط على Ctrl لتنشيط
تحديد اللاير ومن قائمة Select > Modify> Expand ستظهر نافذة نكتب
رقم 2 واضغط ok ولا تحذف التحديد ونختار عمل لاير جديد ومن قائمة الادوات
نختار اداة التدرج ونسحب من الجهة اليسرى الى الجهة اليمنى داخل المربع
الذي قمنا بتحديده كما بالشكل التالي مع مراعاة عدم الغاء التحديد:

بعد الانتهاء مازال تحديد موجود على اللاير نذهب الى قائمة select
>modify> contract ستظهر نافذة حدد رقم 2 واضغط ok ثم من لوحة
الكيبورد نضغط delete ونضع الاير اسفل لاير دائرة 2

حتى يصبح كمثل الشكل التالي:



والان بأداة كتابة النصوص مفتاح الاختصار T ستظهر نافذة نكتب اسم الموقع على سبيل المثال كتبت photoshop

واضفت تأثير بسيط للكلمة تسيطع اضافة اي تأثير لاسم موقعك ليكون شكل ناتج الشعار كالتالي:
أنظــر هنا للشعار


وبهيك نكون انتهينا من جزء بسيط من الشرح للشعار : ) اللى يحب يرتاح شوي من الدرس مافي مشكله


* من نافذة Navigator نحدد المقاس لـ 77 عن طريق Zoom out حتى يسهل العمل ثم نغلق النافذة ونترك فقط نافذة اللاير ظاهره امامكم





* نبدأ باختيار عمل لاير جديد بأسم عمودي ثم بأداة القلم ونحدد مقاس البرش 2 بيكسل ونختار اللون الابيض قبل البدأ بالرسم
من اعلى صفحة عملك عند مكان نقطة انتهاء الشعار للتحديد اكثر بمكان نقطة
البداية اضغط Ctrl+R تلاحظ ظهور مسطره حول عملك قم بالضغط مره واحد رايت
كليك عليها واختر منها بيكسل ستكون نقطة البدأ من 120 ونسحب بالاداة من
الاعلى الى الاسفل كالشكل التالي:




* نكرر نفس لاير الخط عمودي عند مقاس 220 كما بالشكل التالي:




* نكرر نفس اللاير العمودي لعند مقاس 770 بمكان الجهةاليمنى

* نختار عمل لاير جديد ونسمى اللاير بأسم الواجهه ومن قائمة الادوات نختار اداة المربع ونقوم برسم مربع الـ Fixed Size العرض: 725
الطول : 408

كما بالشكل التالي:




*مازلنا نعمل على نفس لاير الواجهة نختار اداة التعبئة واللون يكون بنفس لون الخلفيه تمام نضغط مره واحده داخل التحديد المربع النشط

* نضغط على لاير الواجهة رايت كليك ونختار من القائمة Blending options ونختار Stroke واللون سيكون ابيض كما بالشكل التالي:

المسأله سهله جدا وكأنك تصمم خريطه بس الخريطه تكون من خيالك وماتكثر من
تداخل اللالوان بموقعك واهم شي يكون في دقه ووضوح تام باللالوان يعني
تخيلوا بعد كل هادا التصميم واضافته بموقعك تكتشف ان حواف تصميمك خشنه بس
بإذن الله بنتعلم سويا كيف نقدر نمننع من ظهور العيوب بالتصميم ونصلحها
بالفوتوشوب

* اختار لاير جديد ونسميه خطوط ونختار اداة المربع مفتاح الاختصار U ونختار Rounded Rectangle
كما بالشكل التوضيحي:

* ونحدد من الخصائص الاداة الـ Radius: 10

لتحديد مقاس بدأ نقطة رسم المربع نفتح المسطره من Ctrl+R
70الطول
والعرض من 550

نضغط مره واحده ونبدأ بالسحب الى اعلى لنقطة الطول 230 العرض 500

الشكل التوضيحي كالتالي :

* اذهب الى قائمة Select> modify> Contract
الـ Contract =2

والان سأقوم بشرح خطوات الصوره التاليه

اتبع حركات السهم بالجزء الايمن من المربع نقوم بتحديده ثم على نفس اللاير
نضغط delete ونذهب الى اسفل المربع ونحذف ايضا الجزء السفلى ثم باداة
التحريك السهم نقوم بتحريك المربع الى الاسفل كما بالشكل التالي:

* نفتح عمل لاير جديد ونسمى اللاير بأسم الرسم ونختار اداة اللاسو ساشرح خطوات الرسم للمبتدئين ولكن قبل ما ابدأ انظر للشكل التالي

رقم 1 : تأكد من اختيارك للshape
رقم 2: ستظهر لك نافذة جديده بعد تحديدك بالاداة فلا تعتبرها مشكله كل ما
عليك لظهور التحديد ولحذف الshape فقط اضغط رايت كليك بالماوس على لاير
shape واضغط Ctrl وسيظهر التحديد وبعد ظهور التحديد نحذف اللاير الـ shape
وسيختفي اللون الاسود كما نلاحظ الخطوات التاليه بالتفصيل لكيفية الرسم
بأداة اللاسوووو

قمت باظهار لون الشكل حتى الكل يقدر يستوعب طريقة الرسم

سأشرح الخطوات
باداة اللاسو نحدد اول نقطه
ثم بضع خطوات لاعلى الى الجهة اليمنى نضغط مره واحده
سنلاحظ ظهور خط واحد بين النقطتين
نرجع للنقطه الاولى ونلاحظ ان شكل الاداة تغير وأصبح بجانب شكل الاداة
دائره صغيره وهادا يعني للارتباط واقفال العمل من نقطة البداية والنهاية
ستكون لعند نقطة البدايه هههههه متل بيت جحا لفه كبيره بس لنقفل الخط
وعند الضغط على نقطة البداية تلاحظ انه تغير شكل الاداة الى سهم اسود فقط
فقط عند السحب فلنجرب السحب للجهة اليسرى وتلاحظ انه بدأ بعمل تدوير
للتحديد استمر بالسحب الى ان تحدد تحديد دائري بيضاوي كمثل الشكل الذي
اتبعته بالشرح واول ماتنتهى من استخدام الاداة راح يظهر لك شكل لاير
جديد shape لاننا من البدايه حددنا ان نعمل على الـ Shape كل ماعليك فعله
تنشط اللاير واضغط مره واحده عليه ووبنفس الوقت اضغط Ctrl وتلاحظ انه تم
تحديد الشكل احذف لاير الـ Shape مع عدم الغاء التحديد اللى رسمناه وقم
بتلوين الشكل من اداة التعبئه باللون التالي:

426A7C#

واخيرررا انهينا اكبر جزء من الشرح مو فاضل غير تصميم الموقع

* نفتح عمل لاير جديد ونسمى اللاير بأسم خط عمودي وباداة القلم نحدد البرش مقاس 1 واضغط Ctrl+R لتظهر المسطره ولنحدد نقطة بداية رسمك للخط

الطول 234 والعرض 205 من المسطره
اضغط مره واحده وابدأ بالسحب الى الاسفل لينتهى الخط عند شكل اللاير الرسم كالشكل التالي:



* والان قم بتكرار لاير الرسم ونسمى اللاير بأسم الرسم المعكوس وضعه فوق شـــــــكل لاير خط العمودي ومن قائمة Edit> Transform > Filp horizontal
ثم نكرر نفس الخطوات من قائمة Edit> transform>file Virtecal

كالشكل التالي:


* ثم نقوم بعمل لاير جديد وباداة القلم باللون الابيض نحدد من نقطة انتهاء شكل لاير الرسم الذي قمنا بنسخه الى ان تصل نقطة نهاية الخط لمقاس الطول 760

كالشكل التالي :



* نقوم بعمل لاير جديد وباداة القلم مازلنا على مقاس البرش 1 نقوم ببدأ الرسم من نقطة انتهاء اخر خط الى مقاس عرض 250

* نقوم بنسخ لاير الرسم مره اخرى ونصغر الحجم النصف وباستخدام قائمة edite> transform> Rotate نجعل الشكل يدور لاسفل قليلا كهذا الشكل التالي:



* نختار عمل لاير جديد وباداة القلم باللون الابيض نحدد من نقطة انتهاء اللاير الذي قمنا بنسخه وتصغير حجم لاير نسخ الرسم ونبدأ بالسحب لأسفل موازيا للخط الذي قمنا برسمه سابقاً


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


* نختار عمل لاير جديد بأسم تدرج ,,, من اداة تحديد المربع نحدد الجزء الخاص بالجهة اليسرى


وبأداة التدرج نسحب من اسفل الى اعلى

كالشكل التالي:




(( أضافة بعض اللمسات:بالشكل التالي s38 سأشرح خطواتها بالشكل التوضيحي التالي:


شرح الخطوات الشكل السابق :
قم بتكرار لاير الرسم المعكوس ثم ضع اللاير فوق المربع واضغط على الاير الرسم المعكوس مره واحده واضغط بنفس الوقت Ctrl لتحديد الشكل وقم بتنشيط لاير التدرج ثم اضغط Delete وباداة الممحاه نقوم بمسح اجزاء الزائده



والان نتبع نفس خطوات لاير التدرج بعمل لاير جديد ليكون الشكل الاخير لنا كالتالي:



* نختار صوره طبيعيه بالالوان هادئه او ابيض واسود ونقوم بارفاقها بالتصميم بالاير جديد
* سابقا تم شرح درس اندماج صوره مع الخلفيه وهنا وصلة الدرس الذي قمت بشرحه
وضع الصوره كما الشكل التالي :

* والان لنقم بعمل الايقونات نختار عمل لاير جديد بأسم قائمة ... وبأداة تحديــــد المربع بالمقاسات التاليه

* لا تلغى التحديد وبأداة التعبئة نضغط مره واحده داخل المربع الذي حددناه
درجة اللون 486E80 # ثم اذهب الى قائمة Select> modify> contract
الـ contract = 1

* نقوم بتكرار لاير قائمة 7 مرات وقم بترتيب الشكل : انظر للشكل التوضيحي

بعد الانتهاء قم بدمج 7 لايرز الذي قمنا بنسخهم ليكون لديك فقط لاير بأسم قائمة واحد

(( اضافة بعض اللمسات: تستيطع اضافة شكل خلفي للقائمة استخدم انا ورقة شجر وقمت بتخفيف درجة الشفافيه حتى ليصبح لديكم هذا الشكل))

* اختار عمل لاير جديد بأسم شريط وباداة القلم باللون الابيض ارسم خطين
متوازين صغير جدا يربط بين الواجهه وبين القائمة وقم بتكرار لاير شريط 7
مرات

كالشكل التوضيحي التالي:

بعد الانتهاء قم بدمج جميع لايرز الشريط في لاير واحد

* اختار عمل لاير جديد ونسميه بأسم الضوء
باداة الدائريةEllipse Tool مفتاح الاختصار U
ونختار اللون الاساسي ابيض
نقوم برسم دائره صغيرة الحجم مع الضغط على Shift ونقوم بتكرار نفس الاير
ولكن نرسم دائره اصغر حجما باللون 486E80 # ثم ندمجهم ونكرر اللاير 7
مرات كالشكل التالي:

لا تقوم باي دمج للاير الضوء الان

(( لاضافة بعض اللمسات على القائمة : قمت بعمل لاير
جديد واخترت اداة الدائرية باللون الابيض مفتاح الاختصار U وثم من قائمة
Select>modify>contract

ال contract = 4))

وقمت بتنشيط تحديد لاير القائمة ومن Shift+Ctrl+I ثم اضغط delete وسيكون كالشكل التالي:

* اختر اداة النص وقم بكتابة القائمة لديك كالتالي:

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

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


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

عشان هيك نبدأ بوضع لمسه بسيطه عند مرور الماوس على القائمة

من برنامج الفوتوشوب نفتح قائمة file> jump to> imageready


تم شرح سابقا طريقة عمل الـ Rollover اضغط هنا لمشاهدة الدرس

الدرس من هنا

الطريقة التالية التى سنستخدمها للاير الضوء نفتح عمل لاير جديد بأسم ضوء 2
باداة الدائرية مفتاح الاختصار U وباللون 395967 #

سنبدأ بالتقطيع وبنفس الوقت سنرتب عمل لاير الضوء

اداة التقطيع بالايمج ريدي مفتاح الاختصار K
نقوم بتصغير العمل من اداة العدسه لحجم يناسبك والان من اداة التقطيع نبدأ
من الجهة اليسرى من اعلى الى اخر الشعار ونكرر نفس الخطوه لشكل نصف الواجهه
اي بدون شكل القائمة ولن يكون هناك داعي لعمل لايرز جديده لان عملك كله
يسجل بنافذة الـ rollover كما بالشكل التالي:





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

كما بالشرح المرفق لديكم




شرح الشكل السابق:

بأداة التقطيع ... نبدأ بسحب من الجهة اليسري للمربع الى انتهاء مربع ثم نظهر امامنا نافذة اللايرز ونافذة الـ Rollover
light2= هو لاير ضوء2

والان من نافذة الـ rollover اضغط عمل جديد للrollover سيظهر امامنا over
state = اي عند مرور الماوس تستيطع اضافة عمل تأثير اتبع خطوات السهم
مباشرة سيذهب الى نافذة اللايرز ويظهر لاير ضوء 2 (( light2)) ونلاحظ ظهور
الدائره الاكبر حجماً
والان نرجع مره اخرى اتبع شكل السهم ونختار عمل جديد سيظهر بنافذة الـ
rollover الـ down state اي بعد خروج السهم من القائمة فسنقوم بالذهاب الى
نافذة اللايرز ونخفي لاير الضوء 2

انتهينا من الشرح

ولمشاهدة عملك بنفسك اضغط على file> preview in واختر المتصفح من القائمة

والان اذهب الى قائمة File > save optimized as

ستظهر لك نافذة احفظ امتدادك بـ HTML
واكتب اسم ملفك saven7.html


* نفتح برنامج الفرونت بيج

لعمل اي اضافات نصوص عليه سنقوم بتجربتها خلال الدرس
(( اضافة معلومه: ببرنامج الايمج ريدي تستطيع عمل روابط بمجرد الضغط على اي زرار او صوره ))
بما ان الكثير يهتمون ببرنامج الفرونت بيج فحبيت انى اشرح جزء بسيط عنه

* افتح برنامج الفرونت بيج ثم من file> open>saven7.html




* اذا كانت خلفية عملك باللون الابيض ببرنامج الفرونت بيج على نفس الخلفيه رايت كليك واختر خصائص الصفحه page properties

واتبع خطوات السهم واللون محدد مع الصور





* والان كيفية عمل الرابط بالفرونت بيج واتفضلوا درس سبق شرحه عن كيفية عمل رابط
بعد الانتهاء * نضغط على about me ونختار hyperlink واختار من جهازك الصفحه الخاصه بموضوع about me
ثم اضغط موافق وكرر الخطوات علي بقية الازرار

والان ننشر عملنا على الانترنت من خلال برنامج FTP
FTP

او من خلال موقع نفسه ولسهولة الشرح اخترت التحميل على الموقع ونختار موقع جيران

* نفتح المتصفح ونكتب malware-site.www
واكتب اسم الدخول وكلمة السر الخاصه بك

ثم اضغط sign in

او دخول
* والان اتبع الشكل التالي:

نختار Homepage Manager




ثم نختار file manager



ثم نختار upload files




المرحله المهمه هيا ان تختار main folder ستظهر قائمة منها اختر Main Folder/Images
وقم بتحميل فقط فقط الصور على الفولدر images حيث يحمل نفس الاسم من جهازك

كالشكل التالي



ولارفاق الصوره من جهازك اضغط على broswe ستظهر نافذة توجه الى مكان عملك واختر ملف اسمه images وارفق الصور كلها
ثم نعود مره اخرى الى ملفات التحميل ونختار من قائمة main folder نختار منها main folder للرجوع هناك نقوم بتحميل ملفات الـ Html فقط






تفضلوا بزيارة الموقع بعد تصميمه

صمم موقعك بنفسك العمل النهائي


انتهى الدرس واتمنى لكم التوفيق
بعرف ان الدرس طويل ولكن من الممكن حفظ الشرح والصور على جهازك والاستعانه بالدرس في أي وقت
من هذا الدرس ستتمكن من فهم معظم قائمة الادوات حتى لو كنت انت مبتدئ فلا بأس بتصميم موقع من عملك الشخصى