درس تصميم موقع بالفوتوشوب
نبدأ الدرس
![]()
اولا يجب ان يكون لديك برنامج فوتوشوب الاصدار السابع 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 وهو صور التصميم المقطعه |
| ملاحظة : الصور والاشكال التي قمت بتصميمها يمكنك تغييرها ولكن وقت التقطيع يمكنك متابعة الدرس حتى تحصل على واجهة موقعك سريعة التصفح ومتساوية في تقطيع الصور |