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 مره

موضح بالصورة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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