:: دوره تصميم أستايلات في بي :: الدرس الثاني :: تـصميم الهيدر و الفوتر + تقطيعـــه

الدرس الثانى: درس تصميم الهيدر والفوتر وتقطيعـــة


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

بسم الله الرحمن الرحيم

نعود معكم من جديد ونبدأ الشغل الجد

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


يلا بينا..........

اولا : نقتح عمل جديد بمقاسات 777 x 666

شوف

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

ثم نقوم بأختيار اللون اللى راح نرسم بيه كلا من الهيدر والفوتر ( الكحلى)
شوف.....ولاحظ رقم اللون

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

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

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

ملحوظه: ( اضغط ctrl+' حتى يتقسم العمل الى مربعات) -- او من view فوق ثم show ثم grid

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

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

بعدين نختار بأداة التحديد المنقطة الجزء الاوسط ما عدا الاجزاء العلوية والسفلية
ثم نضغط ctrl +c للنسخ

شوف.......

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

ثم نروح للعمل اللى احنا شغالين عليه وبعدين اضغط ctrl+v للصق الصورة فى العمل

شوف.....


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

نختار بأداة التحريك ونحرك الصورة لليسار كما بالصورة...

شوف....

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


باستخدام اداة الاشكال ,نرسم مستطيل سفلى واخر علوى
شوف.......

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

نقوم بتطبيق الكلام السابق بالظبط على الصورة اليمنى

احفظها على جهازه وسوى مثل السابق

شوف.....

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




شوف.....

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





نأتى الان لكى نزيل حواف الصورة حتى يكون شكل الهيدر حلو


راح نستخدم اداة الممحاة بتركيز 45

شوف.......

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


شوف.....



بهيك نكون سوينا الهيدر بكل خفة وبساطة

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


ثانيا: تصميم الفوتر

وراح نرسمه بسيط

شوف.......

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

الحين انتهينا من التصميم.....

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

ننتقل لمرحلة التقطيع

اولا: قواعد أساسية قبل ان نكمل:

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

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



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

1-جزء ايسر
2-جزء اوسط (نقطة التمدد)
3-جزء أيمن

شوف الصورة.....

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 720x274.

بالمثل: راح نقطع بنفس الطريقة الفوتر.....

شوف.......

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

هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 758x203.

بهيك نكون انتهينا من التقطيع



الحين راح نحفظ عملنا


اضغط

file

ثم

save for web


ثم شوف الصورة......

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



شوف.....

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



انتظروا الدرس الثانى

التوزيع على الفرونت بيج

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