الجزء الاول: تنبيهات + التخطيط الشامل + نصائح قبل تطبيق الدرس


ننتقل معكم اخوانى الاعضاء مشتركى الدورة إلى أقوى وأطول درس راح تشوفه على النت بإذن الله ...

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

الدرس راح يكون مٌطول, لذلك لابد من قراءة الدرس مرة واثنين وثلاثة وبتركيز شديد ...

والدرس مقسم خمسة أجزاء

1-التخطيط للموقع وتحديد المطلوب فيه .
2- التصميم والتقطيع للموقع على الفوتوشوب.
3- ملفات الموقع وصفحاته html وشرح أكوادها بالتفصيل الممل +jquery
3- ملف الcss الخاص بالموقع وشرحه بالتفصيل الممل.
5- المثال العملى وتجربة الموقع الذى تم تنفيذه بحمدالله



تنبيهات هامه جدااا قبل تطبيق الدرس:


1-الدرس لابد من قراءتة مرة واثنين وعشرة وعدم التسرع فى التطبيق الا قبل فهم كل جزء بإمعان

2- الدرس ليس لتعليمك مهارات الفوتوشوب, فتطبيقك لابد اون تكون على دراية باستخدام الفوتوشوب,
وهذه لها دروس منفصلة خارج الدورة يمكن التعلم منها

3- الدرس راح تستفيد منه حركات جديدة فى الفوتوشوب
4- الدرس لا يهمنى فيه ان يكون الناتج النهائى لتطبيق دقيق,
لكن ما يهمنى ان تفهم الفكرة فقط, فالاحتراف لن يأتى من درس واحد

فلابد من التطبيق واعمال اكثر من تصميم


ملاحظه اخيرة

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

devian art

وهو شخص محترف جدا ويعمل باحد الشركات الكبرى بالusa وعجبنى طريقة تصميمه, واحببت ان اتعلم منه, لانه اقل ما يقال عنه انه

professional


الجزء الثانى: التصميم على الفوتوشوب


التصميم والتقطيع للموقع على الفوتوشوب.

نبدأ على بركة الله ...

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

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


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

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

منذ 3 سنوات منذ تعلقى بموضوع تطوير الويب


قبل تطبيقك : سوف يكون الناتج النهائى لملف psd بالشكل الاتى:




اولا: افتح الفوتوشوب وقم بعمل جديد
بمقاسات 1600 فى 1200 بكسل




قبل المباشرة فى العمل, لابد ان يكون شغلنا منظم ودقيق

لذلك سنحتاج لاستخدام المسطرة فى الفوتوشوب
اختار view من فوق ثم
rulers

ولا تنسى ان نختار مقاس المسطرة بالبكسل



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



نبدأ من الان بعمل شغلنا...

اولا: تصميم القائمة العلوية
status bar

اختار اداة رسم مستطيل rectangle tool ثم ارسم مستطيل فى الاعلى بطول 50 بكسل
شوف



ثم باستخدام اداة التدرج gradient tool سنقوم بعمل تدرج لهذا المستطيل

قم بعمل لير جديدة ثم قم بدمجها بعمل create clipping mask



ثم قم بعمل التدرج




بعد ذلك سنقوم بالكتابة على هذا الشريط العلوى status bar

ملاحظه هامه
فى التصميم سوف تلاحظ اننا سوف نكتب كلمات واشياء كثيرة

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

لذا وجب التنبيه ...

نقوم الان بكتابة كلمة الترحيب

شوف عند الخط الارشادى 400 اكتب كلمة الترحيب



بعد ذلك سوف نقوم بعمل مستطيل خاص بالازرار الثلاثة:

دخول - خريطة الموقع - الاتفاقية

قم باختيار اداة رسم مستطيل ذو حواف دائرية rounded rectangle tool

ثم ارسم مستطيل من اول الخط الارشادى 600 الى الخط الارشادى 800



اختار اى لون بكيفيك , فانا لا يهمنى جمال التصميم الان بقدر ان تفهم الفكرة

لا تنسى الخط الفاصل بين الكلمات الثلاثة يمكنك عمله

بضغط shift + الزر اللى بجانب زر المسح backspace فوق enter

وشوف الحين الطبقتين الخاصة بهذ المستطيل




قم باضافة بعض التأثيرات عليه





الحين انتهينا من هذا نكمل .....
الحين نسوى مستطيل البحث

اولا اختار custom shape tool لنقوم بعمل صورة مكبر



وباختيار نفس الاداة السابقة rounded rectangle tool
قم بعمل مستطيل واضف له بعض التأثيرات



انتهينا الحين من الجزء العلوى

ننتقل للجزء الموجود أسفل الجزء العلوى وهو الــ header

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

وقم بتسيق طولها باستخدام ctrl+t بحيث تكون بداية الصورة
عند الخط الارشادى
50 ونهايتها عند 300

ولاخظ ان طبقة هذه الصورة سوف نقوم بعمل
create clipping mask

للجزء العلوى




ثم سنقوم بالكتابة عليها عند الخط الارشادى 400



تمام الحين انتهينا من الهيدر بكل سهولة

ننتقل للجزء الاهم وهو المحتوى content

سوف نقوم برسم مستطيل باستخدام الاداة rectangle tool

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



ثم قم برسم الخطوط الارشادية هذه ايضا حتى تحدد حدود كل شىء

شوف هذه الصورة لتفهم قصدى



فى مربع السلايد شو الخاص بعمل عرض سلايد شو

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

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

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

اختار اداة rounded rectangle tool
وارسم المستطيل , ثم باستخدام polygonal tool وجعل الجوانب 3

قم برسم مثلث بحيث يكون خاص بعمل السابق والتالى للصور



الحين خلصنا من السلايد شو

ننتقل لكتابة كلمة رئيسية للموقع

ليست مهمه كثير شوف



ننتقل لعمل الازرار الرئيسية للموقع

سوف نقوم بعمل مربعات حتى تكون عبارة عن ازرار الموقع

قم باستخدام اداة rectangle tool برسم المربعات الاتية

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

ولا تنسى ايضا ان تقوم بعمل خط ارشادى حتى تكون الازرار على عرض واحد
يمكنك تكرار الطبقات بعمل ctrl+j



ملاخظه: فى اول زر على اليمين لو ليك خبرة فى الفوتوشوب,يمكنك استخدام

اداة الــ pen tool لحذف حدود اى زر شوف





المهم....بعد رسم الازرار راح يصبح الشكل كالاتى:



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



ثم بعد ذلك قم بالكتابة على كل زر, واضافة زر السابق والتالى
كما فعلنا سابقا



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

ثم اختار اى صورة مثل ما سوينا فى الهيدر بالظبط

وضعه فى اسفل التصميم



اخر شىء سوى خلفية للصفحة

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

وقم بجعل لونها ابيض يميل الى الرصاصى برقم
#f3f1f3



بهيك نكون انتهينا من هذا الجزء

يتبع