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

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

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

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

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

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

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

D9D9D9 #

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);
...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

...

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

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

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

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

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

أنظــر هنا للشعار

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

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

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

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

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

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

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

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

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

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

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

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

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

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

google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);
...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

426A7C#

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

...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);
...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الدرس من هنا

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

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

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

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

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

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

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

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

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

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

بأداة التقطيع ... نبدأ بسحب من الجهة اليسري للمربع الى انتهاء مربع ثم نظهر امامنا نافذة اللايرز ونافذة الـ 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

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

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

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

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

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

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

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

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

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

google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);
...

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

ثم اضغط sign in

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

نختار Homepage Manager

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

ثم نختار file manager

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

ثم نختار upload files

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

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

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

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

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

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

:)

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

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

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

شكرا على الموضوع املمتاز

مشكووور

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

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

THANX

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

» تصميم موقع بالفوتوشوب و الفرونت بيج من الالف إلى ما بعد الياء]
» درس عزل لون الصورة بالفوتوشوب
» درس عمل تأثير جميل على الكتابة بالفوتوشوب
» 15 نصيحة قبل تعديل السيارة بالفوتوشوب
» درس تصميم توقيع بسيط بالفوتوشوب