| دورة تصميم المواقع بإسلوب المحترفين web2.0 دورة تصميم المواقع بإسلوب المحترفين web2.0
ملقي الدورة: [vista-design] |
  |
| | LinkBack | أدوات الموضوع | انواع عرض الموضوع |
|
#1
15-02-2010, 02:23 AM
| |||||
| |||||
 [الدرس الثانى عشر2] تطبيق كامل لتصميم موقع احترافى الجزء الاول التصميم
 نعود اليكم اعضاءنا الكرام, وهاقد أوشكنا على انهاء الدورة وسوف نقوم فى هذا الدرس باستغلال كل ما تعلمناه فى الدروس السابقة اولا: تنبيهات هامه جدااااااا قبل تطبيق الدرس 1-الدرس لابد من قراءتة مرة واثنين وعشرة وعدم التسرع فى التطبيق الا قبل فهم كل جزء بإمعان 2- الدرس ليس لتعليمك مهارات الفوتوشوب, فتطبيقك لابد اون تكون على دراية باستخدام الفوتوشوب, وهذه لها دروس منفصلة خارج الدورة يمكن التعلم منها 3- الدرس راح تستفيد منه حركات جديدة فى الفوتوشوب 4- الدرس لا يهمنى فيه ان يكون الناتج النهائى لتطبيق دقيق, لكن ما يهمنى ان تفهم الفكرة فقط, فالاحتراف لن يأتى من درس واحد فلابد من التطبيق واعمال اكثر من تصميم التصميم والتقطيع للموقع على الفوتوشوب. نبدأ على بركة الله ....... اولا قبل كل شىء : لابد ان تعود نفسك فى جزء من هذا الدرس على كثرة التطبيق قبل انتاج الناتج النهائى لانك لازم تثق انك راح تخطىء مره واثنين وعشرة قبل ان تجيد كل نقطة بالدرس وانا نفسى فيه بعض عدم الاحترافية , وقد اكون لم اغطى بعض النقط فى شرح الدرس بحكم ان الدرس يمكن من اطول الدروس اللى كتبتها على النت للان منذ 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  بهيك نكون انتهينا من هذا الجزء تابعوا بقية الدرس ان شاء الله ....... vista-design توقيعي عالم مطورى الويب لتعليم برمجة وتصميم المواقع www.advphp.com |
|
| العلامات المرجعية |
 مواضيع جديدة في قسم دورة تصميم المواقع بإسلوب المحترفين web2.0 |
| |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
|
|
|
المواضيع المتشابهه | ||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| [الدرس الثانى عشر4] تطبيق كامل لتصميم موقع احترافى الجزء الثالث والاخير التقطيع+css | vista-design | دورة تصميم المواقع بإسلوب المحترفين web2.0 | 0 | 22-02-2010 02:26 PM |
| [الدرس الثانى عشر3] تطبيق كامل لتصميم موقع احترافى الجزء الثانى الhtml | vista-design | دورة تصميم المواقع بإسلوب المحترفين web2.0 | 0 | 18-02-2010 01:06 PM |
دخول الاعضاء
العرض العادي
