تصميم موقع باستخدام الفوتوشوب : تصميم موقع بالفوتوشوب : دروس الفوتوشوب

www.da3e.com

درس تصميم موقع بالفوتوشوب

نبدأ الدرس

اولا يجب ان يكون لديك برنامج فوتوشوب الاصدار السابع Photoshop 7.0 ME

نفتح برنامج الفوتوشوب

تابع في الصورة نفتح عمل جديد file - new

هنا نختار الطول والعرض كما في الصوره ولاتنسى ان تختار pixels بعدها تضغط على كلمة ok وبعدها رح يطلع معاك صفحه بيضاء

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

قم بتحديد المكان الموجود باعلى الصفحة وهذا يسمى البنر او الهيدر

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

نعود الى شريط الادوات على البرنامج وسوف نختار ايقونه التدريج اللوني

اعلى البرنامج سوف تجد هذا الشكل ويمكنك تغيير التدريج من خلال الضغط على اللون المؤشر له بالسهم

من الاعلى هناك سوف تجد تدريجات جاهزه يمكنك استخدامها : في السهم بالاسفل يمكنك عمل تدريجات بنفسك وعلى حسب الالوان التي ترغب بها

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

سوف نحصل على هذ الشكل بعد ماعملنا تمرير بالماوس على المكان المحدد له

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

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

وهذا هو الشكل بعد ادراج الالوان : ملاحظة /// في كل خطوة تجد فيها تحديد وتريد الغاء التحديد فماعليك الضغط على الكيبورد للمفاتيح Ctrl + D

بعدها نضيف استايل للطبقة ... ملاحظة عندما نضيف استايل للطبقة نضغط على يمين الطبقة

سوف يظهر معنا هذا المربع

نختار Drop Shadow ونعمل نفس الموجود بالاعلى

بعدها نختار Bevel and Emboss ونضع مثل ماانا واضع بالصورة وتحت نختر اللون المناسب

ملاحظة : اذا اردنا حفظ الاستايل نقوم بالضغط على New Style

بعدها سيظهر معك هذا المربع واضغط على كلمة Ok

سوف نجد بأن الاستايل تم حفظه في القائمة حتى تتمكن من استخدامه مرة ثانية :::::::::::: نتابع الدرس

الان نختر الاداة الموضحة في الصورة من يسار البرنامج ونضغط كلك يمين ونختار الايقونة الثانية

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

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

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

الان نعمل ادراج لوني للشكل

نضيف الاستايل اللي قبل عملنا له حفظ ونضيف له هذه المادة Stroke

سوف نحصل هذا الشكل بعد اضافة الاستايل

الان نقوم باضافة لاير بنفس الشكل اللي صممناه قبل شوي والطريقة بالصورة توضح لك

سوف يظهر معك هذا المربع ونقوم بعدها بالضغط على كلمة OK

تم اضافة اللير الجديد وماعلينا الان سوى تحريك اللير بأسهم الكيبورد على المفتاح الايسر ونضغط عليه 20 مرة

بعدها سوف نحصل هذا الشكل ونعاود الكره مرة اخرى ونضيف نسخه للاير

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

بعدها نعمل اظهار التخطيط الهندسي بالضغط على Ctrl مع حرف الطاء (ط) وبعدها نختر اداة التحديد ونرسم كما موضح بالصورة

نضيف لاير جديد

بعدها نختار تدريج الالوان

الان كل ماعلينا هو العمل مثل الصورة الموضحة امامك : مهم للشرح /// عند كل لون ضع مسافة رقم خمسة : يعني من بين اللون العنابي للابيض حط خمسه مثال 0 - 5 - 10 - 15 ... وهكذا

تابع في الصورة لان الشرح مكتوب هناك :)

سوف نحصل على هذا الشكل

الحين نضيف فلتر والطريقة موضحه بالصورة

نعمل مثل ماموضح بالصورة بعدها نضغط على كلمة OK

الحين نضيف استايل واكثر من مره عملنا شرح كيف تضيف استايل واختار على الكلمة الموضحه بالصورة

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

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

بعدها نقوم باضافة نسخة لهذه الطبقة وطريقة الاضافة هي

عندما تقوم باضافة نسخة من اللير اسحبه الى اليسار باسهم الكيبورد الايسر واضغط عليه 20 مره

موضح بالصورة

الان سوف نقوم بالضغط على الايقونه المبين بالصورة

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

تم ادخال جميع الليرات داخل المجلد

نقوم باضافة نسخة للمجلد

تم اضافة اللير الجديد وهو للمجلد

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

هنا يبين لكم عندما وضعنا اللير على الجهة اليمنى

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

نقوم بعهدا بعمل ادراج لوني

نعمل مثل مافي الصورة

سوف تحصل على هذه النتيجة بعد عمل ادراج الالوان

نقوم باضافة الستايل اللي قبل عملنا له حفظ

انظر الصورة بالاعلى

نقوم بحذف علامة الصح من الخيار الاول Drop shadow

بعدها نختار Devel and Emboss ونعمل مثل مافي الصورة

نحط الماوس على البنر كما في الصورة

نحط صورة باعلى البنر مثل صورة هذه الطفلة

نختار الان أداة الممحاه أو المسّاحة

انظر كما بالصورة وقم باختيار رقم 21

قم بمسح اطراف الصورة او الاشكال اللي ماتريدها تظهر بالصورة

تابع في الصورة

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

حط الماوس على المكان المؤشر لها بالصورة وهي خلفية للصفحة

نختار اللون المناسب وبعدها نضغط كلك يمين على التدريج اللوني ونختار من هناك على علبة الصبغ

بعدها نضغط في المكان الابيض لتصبح خلفية الصفحة باللون اللي اخترناه وانا هنا اخترت اللون الوردي

بعدها نعمل تحديد باسفل الصفحة مثل الشكل بالاعلى

بعدها نعمل اضافة لاير

بعدها نعمل ادراج لوني

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

نعمل تحديد اعلى الشكل السابق مثل الصورة الموضحه بالاعلى

بعدها نعمل تدريج لوني مثل السابق والصورة بالاعلى توضح ذلك

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

بعد مااضفنا اللير الجديد نسحبه للاسفل

بعدها نختر هذه الاداة ونعمل مثل ماموضح بالصورة التي يوجد بها الاسهم

بعدها نضيف استايل

نعمل مثل ماموضح بالصورة

تابع في الصورة

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

نعمل اضافة مجلد ونكتب عليه اسم الشكال الفوتر ونجمع الاشكال اللي عملناها تحت داخل هذا المجلد

بعدها نعمل نسخ للمجلد

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

الحين نروح لشكل الفوتر اللي تحت عملناه قبل كما موضح معك بالصورة

قم بعمل نفس القيمة الموجودة بالصورة

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

الشرح موضح بالصورة

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

نختار هذه الاداة من يسار البرنامج ونوسع الصورة على البنر ليظهر شكلها مثل الصورة بالاعلى

الحين نضيف فلتر Filter والفلتر المطلوب المبين عليه بالرقم ثلاثة

سيظهر معك هذا المربع وقم بوضع نفس مافي الصورة

الصورة توضح لك

هذه هي النتيجة

تم الانتهاء من تصميم الواجهة وماعلينا الان سوى تقطيع الواجهة لنكمل الدرس

الشرح واضح بالصورة

تابع في الصورة

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

نضغط كلك يمين على المكان الذي عملنا له التقطيع وبعدها نختار الكلمة الموجود عليها السهم

تابع في الصورة

لقد قمنا بتصغير الطول من 184 الى 180 حتى يكون التقطيع متساوي بين البنر لاحظ مكان السهم الموجود عليه كلمة (قمت بتصغير القطعة) لقد تم تصغيرها فعلا وبعدها اضغط على كلمة OK

الان نقطع الجزء الاخر :: لاحظ وجود السهم على الصورة .. التقطيع بحاجة الى تصغير الطول وعملية التصغير مثل الدرس السابق وهو ان تغير حجم الطول من 184 الى 180

بعد التقطيع لاتنسى ان تغير الطول الى 180

تابع في الصورة وانتبه

تابع في الصورة

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

بعد التقطيع لاتنسى ان تغير طول التقطيع من 184 الى 180 ::: ملاحظة .... هذا الطول والعرض موجود في الشرح ولكن يمكنك ان تغير الطول والعرض على حسب رغبتك

الشرح واضح بالصورة

تم تقطيع الفوتر والبنر ومابقى لنا غير الصفحة من الوسط

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

تابع في الصورة

تابع في الصورة

تابع في الصورة

انظر الان تم حفظ التصميم ::: ملف الــ index وهو صفحة الموقع ومجلد images وهو صور التصميم المقطعه

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

الدرس الثاني وهو عباره عن تصميم القوائم التي تضع بجوانب الواجهة ووسط الواجهة

نتابع الدرس الثاني : ولكن قبل ذلك يجب تحميل ملف الفرش من هنا .. قم بحفظ الفرش في الديسك توب حتى تستطيع وجوده وبعدها عليك رفعه في الفوتوشوب

نفتح عمل جديد في الفوتوشوب بنفس الحجم

تابع الشرح في الصورة

تابع الشرح في الصورة

تابع الشرح في الصورة

تابع الشرح في الصورة

تابع الشرح في الصورة

نضيف لاير كما شرحنا سابقا طريقة الاضافة

هنا يجب عليك ان تضع القطعه اعلى العمل ويكون متساوي بين الجوانب

طبعا عرفنا سابقا طريقة اضافة استايل .. بعدما تضغط على اضافة استايل يظهر هذا المربع وحط مثل ماموجود بالصورة

تابع في الصورة

تم اضافة الاستايل

الان نقوم باضافة لاير جديد

سابقا عرفنا مكان وجود الفرش .. نختار الفرشاة رقم اثنين 2 :::::::: ونضيفها اسفل التصميم تابع في الصورة . يجب عليك بعمل تساوي بين القطعه الموجوده بالاعلى

تابع في الصورة

تابع في الصورة

الان نقوم باضافة لاير جديد

نختار اللون المناسب وبعدها نضغط كلك يمين على التدريج اللوني ونختار من هناك على علبة الصبغ

لاتنسى ان تختار لون الخلفية لهذا التصميم مثل لون خلفية الموقع والموجودة في الدرس الاول

الان نقوم باضافة لاير جديد ............ ونختار الفرشاة رقم ثلاثة ...

تابع في الصورة

قم بعمل تحديد بهذه الاداة وبعدها قم بتحديد المكان الموضح بالصورة .. لماذا نقوم بتحديد هذا المكان ؟ لكي نقص الفرشاه من الجزء العلوي وايضا سنقوم قص الجزء السفلي .. طريقة القص قم بالضغط على الكيبورد للمفاتيح Ctrl + X

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

قم بعمل نسخه للاير او العمود

لاحظ العمود اصبح لونه غامق

ايضا مره اخرى قم باضافة نسخه للاير وبعد ذلك قم بسحبها للطرف الايمن

تابع في الصورة

تابع في الصورة

الان نقوم بحفظ التصميم

نضغط على كلمة Save

تابع في الصورة

الان نعمل عمل جديد وتابع في الصورة

الان نعمل لاير جديد

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

هذا هو الشكل التي تحصل عليه عندما تعمل ماطلبته منك

بعدها سوف نقوم باضافة استايل بنفس الاستايل الذي قمنا باضافتة للقوائم السابقة

الان سوف نقوم باضافة الاعمدة كما في الدرس السابق على قوائم الموقع ونفس الخطوات السابقة

نضيف فرشاة الاعمدة على جوانب التصميم ونضيف عليهم نفس الاستايل السابق وبنفس الطريقة اللي علمناها في تصميم القوائم بالدرس السابق

الاان نقوم بصبغ الخلفية بنفس الطريقة السابقة وبنفس خلفية الموقع

تابع في الصورة

نقوم بحفظ التصميم بهذه الطريقة

تابع في الصورة

تابع في الصورة

تابع وركز في الدرس

الصور التي تم تقطيعها موجودة داخل مجلد images

الان نقوم بفتح الصورتين المطلوبتين

تابع في الصورة

تابع في الصورة

نقوم بإلغاء الصورة رقم 7 ونعمل على الصورة التالية :::: ملاحظة .... اذا كان تقطيع الصورة رقم تسعه مشابة حجم التقطيع للصورة رقم سبعه . قم بإلغاء رقم تسعه وانا هنا سأقوم بالغاء رقم تسعه ايضا وساقوم العملعلى التصميم الثاني الموجود بالاسفل