c0ptin_hackers
01-14-2009, 01:57 PM
http://img246.imageshack.us/img246/9650/11cy0qv9.gif
كيفكم اليوم اعزائي اعضاء و زوار منتديات نيوستايل ؟؟ إن شاء الله تكونوا بخير .
سنتعلم اليوم سويا كيفية صنع فوتر للموقع الخاص بنا من نوعية التصماميم WEB 2.0 ,,
النتيجه النهائيه لدرس اليوم :
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-12.jpg
الخطوه 1 :
التدرجات تعتبر ثمه اساسيه من التصاميم ال WEB 2.0 , و لتطبيق درسنا بشكل إحترافي سنستعمل بعضا منها ,, ستجدون ملف خاص بها في المرفقات اسمه web_2_0_grads_v30 ,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-2.jpg
بالنسبه لطريقة إستعمالها في الفوتوشوب , شاهد الصوره التاليه
http://www.pxll.com/usersupload/montexo/howtoloadgrad.jpg
لخطوه 2 :
قم بفتح مساحة عمل جديده , انا اخترت الابعاد 1440*900 PX
بالطبع الفوتر لا يجب ان يكون بهذا الكبر , و لكن هذا جيد لمحاكاة ماذا يحدث عندما تكون نافذة المتصفح متمدده ,,
قم بإختيار لون الخلفيه , انا اخترت كلون الخلفيه الخاص بي تدرج من اللون #b0b0b0 و اللون #e1e1e1 ,,قم بتحريك مؤشر الماوس مع الضغط علي زر SHIFT لخلق تدرج رأسي منحدر ,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-3.jpg
الخطوه 3 :
بالنسبه لتصميم المواقع يجب عليك ان تحدد نوع التصميم , هل هو من التصاميم التي العريضه التي تتمدد عبر المتصفح , او من التصاميم ذات الابعاد الثابته التي لا تتغير (معظم التصاميم من نوعية WEB 2.0 ذات ابعاد ثابته لا تتغير ) ,,
في الفوتر الخاص بنا سنتعامل مع ابعاد ثابته و هي حوالي 760px x 420px ,,و تلك القياسات ستضمن لنا انه حتي لو تم إستعراض الموقع بشاشة ذات ابعاد 800px x 600px screen سيظل الفوتر الخاص بنا مخافظ علي ابعاده ,, و يظهر بصوره جميله لا عـيـب فيها ,,
استعمل ادله او (guides) لتحديد ابعاد الموقع الخاص بك كما في الصوره التاليه ,,
لاحظ انك لو اردت ان تجعل الفوتر ملائم للابعاد 1024px x 768px يجب عليك ان تضبط الدليل او ال guides علي 955px x 600px ,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-4.jpg
خطوه 4 :
بالرغم من إن الفوتر اللذي نصممه ذو ابعاد ثابته , و لكننا مازلنا نحتاج إلي جعل الفوتر يتمدد في الصفحات و يملئ الاماكان الفارغه إن وجدت ,,
و لفعل هذا سنستعمل باترن يمكنكم الحصول عليه من المرفقات ستجد اسمه pattern.jpg ,,, المهم فائدة هذا الباترن هو انه يحاكي شكل اللوحه المعدنيه ,
طريقة إستعمال هذا الباترن : قمخ بفتح الصوره الخاصه به في الفوتوشوب , ثم قم بالذهاب إلي Edit > Define Pattern و قم بتسميته بإي اسم تريد ,,,
,, الان قم بفتح ملف جديد او مساحة عمل جديده بالابعاد التاليه عرض 1440px , طول 86px ,,
قم بالذهاب إلي Edit > Fill ثم إختر الباترن اللذي قمنا بعمله منذ قليل ,,
قم بالضغط علي CTRL+A ,
قم بعمل CUT ,,
قم بعمل paste في اسفل مساحة العمل الاولي ,,
ستحصل علي نتيجه تشبه الاتي
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-5.jpg
الخطوه 5 :
الان حان الوقفت لإستعمال ال gradient package التي حصلنا عليها من الخطوه الاولي ,,,
قم بعمل طبقه جديده ,,
قم برسم مستطيل بإستعمال الاداه Marquee Tool (M) ارسمه بعرض مساحة العمل كلها و بطول حوالي 21px ,,
قم بإستعمال اداة Gradient Tool (G)
قم بإختيار تدرج جذاب, انا اخترت "Black 5 - Gloss" من المجموعه التي سبق و حلمناها ,,
قم بتحريك اداة التدرج عموديا فوق المستطيل مع الضغط علي زر SHIFT حتي نتأكد انها عموديه بالفعل ,.
قم بتحريك النتيجه إلي اعلي الشكل اللذي قمنا بعمله في الخطوه 4 ,,
النتيجه الحاليه ,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-6.jpg
الخطوه 6 :
قم بإاضافة تأثير drop shadow علي الطبقه التي قمنا بعملها في الخطوه 5 ,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-7.jpg
لخطوه 7 :
قم بضبط اللون الامامي (Foreground) علي #545557 ,,
قم بضبط اللون الخلفي (Background Color) علي #1e211f ,,
قم بعمل طبقه جديده اسفل الطبقه التي قمنا بعملها في الخطوه ال 4 ,,
قم بإستعمال الاداه Marquee Tool (M) لتحديد ما تحتويه الطبقه الخاصه بالخطوه ال 4 ,,
قم بإختيار الاداه Gradient Tool (G) ...
قم بإختيار التدرج الاول و جمع بين الالوان الاماميه و الخليفه ,,
قم برسم التدرج مع الضغط علي زر SHIFT للحصول علي تدرج عمودي ,,
الان قم بالذهاب إلي الطبقه الخاصه بالخطوه ال4 و قم بضبط blending mode علي Multiply ,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-8.jpg
خطوه 8 :
قم بعمل طبقه جديده اعلي جميع الطبقااات ,,
قم برسم مستطيل دائري الاركان في المنتصف ,,
قم بتلوينه باللون #dfdfdf ,,
قم بالنقر بزر الماوس الايمن علي الطبقه و قم بإختيار Blending Options ,,
قم بعمل Drop Shadow علي المستطيل ,,
ثم قم بالنقر بزر الماوس الايمن علي الطبقه الخاصه بالتأثير قم إضغط علي الخيار "create layer" حتي تحصل علي طبقه عاديه خاصه بها ,,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-9.jpg
الان انت تمتلك طبقه خاصه بالمستطيل و طبقه خاصه بالظل (shadow) ,,
قم بتغير حجم الطبقه الخاصه بالظل (shadow) لتحصل علي نتيجه تشبه الاتي ,, من الممكن ان تضغط علي زر CTRL+T لتحصل علي وضع التحريك الحر و تفعل ما تشاء بسهوله , ثم قم بالنقر علي زر الماوس الايمن و تختار Perspective ,,
قم بسحب المقبضين العلوين كل منهما في إتجاه الاخر ,,
يمكنك تحريك الظلال إلي اسفل ثم إستعمل اداة الممحاه بفرشاه ناعمه و تمحو اعلي الحواف ,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-10.jpg
لخطوه 10 :
لجعل الفوتر جاهز للعمل في ملفك ال HTML الخاص بموقعك , قم بحذف النصوص ( النص سيضاف في الملف ال HTML) ,,
قم بعمل CUT للخلفيه الخاصه بالفوتر كما في الصوره التاليه ,,
قم بعمل paste لها في ملف جديد ,,
قم بتحديد منتصف الفوتر و قم بعمل CUT له و قم بعمل PASTE له في ملف اخر ,,
قم بحفظ الملفين بإستعمال الامر Save > Save For Web & Devices ثم إختر JPG و اختر جوده مناسبه ,,
الصور من نوع JPGs و PNGs مناسبه جدا للصور التي تحتوي علي العديد من التدرجات و الالوان بدرجاتها ,,
الصور من نوع GIF مناسبه للصور التي تحتوي علي لون مسطح ,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-11.jpg
النتيجه النهائيه
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-13.jpg
إنتهي الدرس
كيفكم اليوم اعزائي اعضاء و زوار منتديات نيوستايل ؟؟ إن شاء الله تكونوا بخير .
سنتعلم اليوم سويا كيفية صنع فوتر للموقع الخاص بنا من نوعية التصماميم WEB 2.0 ,,
النتيجه النهائيه لدرس اليوم :
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-12.jpg
الخطوه 1 :
التدرجات تعتبر ثمه اساسيه من التصاميم ال WEB 2.0 , و لتطبيق درسنا بشكل إحترافي سنستعمل بعضا منها ,, ستجدون ملف خاص بها في المرفقات اسمه web_2_0_grads_v30 ,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-2.jpg
بالنسبه لطريقة إستعمالها في الفوتوشوب , شاهد الصوره التاليه
http://www.pxll.com/usersupload/montexo/howtoloadgrad.jpg
لخطوه 2 :
قم بفتح مساحة عمل جديده , انا اخترت الابعاد 1440*900 PX
بالطبع الفوتر لا يجب ان يكون بهذا الكبر , و لكن هذا جيد لمحاكاة ماذا يحدث عندما تكون نافذة المتصفح متمدده ,,
قم بإختيار لون الخلفيه , انا اخترت كلون الخلفيه الخاص بي تدرج من اللون #b0b0b0 و اللون #e1e1e1 ,,قم بتحريك مؤشر الماوس مع الضغط علي زر SHIFT لخلق تدرج رأسي منحدر ,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-3.jpg
الخطوه 3 :
بالنسبه لتصميم المواقع يجب عليك ان تحدد نوع التصميم , هل هو من التصاميم التي العريضه التي تتمدد عبر المتصفح , او من التصاميم ذات الابعاد الثابته التي لا تتغير (معظم التصاميم من نوعية WEB 2.0 ذات ابعاد ثابته لا تتغير ) ,,
في الفوتر الخاص بنا سنتعامل مع ابعاد ثابته و هي حوالي 760px x 420px ,,و تلك القياسات ستضمن لنا انه حتي لو تم إستعراض الموقع بشاشة ذات ابعاد 800px x 600px screen سيظل الفوتر الخاص بنا مخافظ علي ابعاده ,, و يظهر بصوره جميله لا عـيـب فيها ,,
استعمل ادله او (guides) لتحديد ابعاد الموقع الخاص بك كما في الصوره التاليه ,,
لاحظ انك لو اردت ان تجعل الفوتر ملائم للابعاد 1024px x 768px يجب عليك ان تضبط الدليل او ال guides علي 955px x 600px ,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-4.jpg
خطوه 4 :
بالرغم من إن الفوتر اللذي نصممه ذو ابعاد ثابته , و لكننا مازلنا نحتاج إلي جعل الفوتر يتمدد في الصفحات و يملئ الاماكان الفارغه إن وجدت ,,
و لفعل هذا سنستعمل باترن يمكنكم الحصول عليه من المرفقات ستجد اسمه pattern.jpg ,,, المهم فائدة هذا الباترن هو انه يحاكي شكل اللوحه المعدنيه ,
طريقة إستعمال هذا الباترن : قمخ بفتح الصوره الخاصه به في الفوتوشوب , ثم قم بالذهاب إلي Edit > Define Pattern و قم بتسميته بإي اسم تريد ,,,
,, الان قم بفتح ملف جديد او مساحة عمل جديده بالابعاد التاليه عرض 1440px , طول 86px ,,
قم بالذهاب إلي Edit > Fill ثم إختر الباترن اللذي قمنا بعمله منذ قليل ,,
قم بالضغط علي CTRL+A ,
قم بعمل CUT ,,
قم بعمل paste في اسفل مساحة العمل الاولي ,,
ستحصل علي نتيجه تشبه الاتي
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-5.jpg
الخطوه 5 :
الان حان الوقفت لإستعمال ال gradient package التي حصلنا عليها من الخطوه الاولي ,,,
قم بعمل طبقه جديده ,,
قم برسم مستطيل بإستعمال الاداه Marquee Tool (M) ارسمه بعرض مساحة العمل كلها و بطول حوالي 21px ,,
قم بإستعمال اداة Gradient Tool (G)
قم بإختيار تدرج جذاب, انا اخترت "Black 5 - Gloss" من المجموعه التي سبق و حلمناها ,,
قم بتحريك اداة التدرج عموديا فوق المستطيل مع الضغط علي زر SHIFT حتي نتأكد انها عموديه بالفعل ,.
قم بتحريك النتيجه إلي اعلي الشكل اللذي قمنا بعمله في الخطوه 4 ,,
النتيجه الحاليه ,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-6.jpg
الخطوه 6 :
قم بإاضافة تأثير drop shadow علي الطبقه التي قمنا بعملها في الخطوه 5 ,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-7.jpg
لخطوه 7 :
قم بضبط اللون الامامي (Foreground) علي #545557 ,,
قم بضبط اللون الخلفي (Background Color) علي #1e211f ,,
قم بعمل طبقه جديده اسفل الطبقه التي قمنا بعملها في الخطوه ال 4 ,,
قم بإستعمال الاداه Marquee Tool (M) لتحديد ما تحتويه الطبقه الخاصه بالخطوه ال 4 ,,
قم بإختيار الاداه Gradient Tool (G) ...
قم بإختيار التدرج الاول و جمع بين الالوان الاماميه و الخليفه ,,
قم برسم التدرج مع الضغط علي زر SHIFT للحصول علي تدرج عمودي ,,
الان قم بالذهاب إلي الطبقه الخاصه بالخطوه ال4 و قم بضبط blending mode علي Multiply ,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-8.jpg
خطوه 8 :
قم بعمل طبقه جديده اعلي جميع الطبقااات ,,
قم برسم مستطيل دائري الاركان في المنتصف ,,
قم بتلوينه باللون #dfdfdf ,,
قم بالنقر بزر الماوس الايمن علي الطبقه و قم بإختيار Blending Options ,,
قم بعمل Drop Shadow علي المستطيل ,,
ثم قم بالنقر بزر الماوس الايمن علي الطبقه الخاصه بالتأثير قم إضغط علي الخيار "create layer" حتي تحصل علي طبقه عاديه خاصه بها ,,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-9.jpg
الان انت تمتلك طبقه خاصه بالمستطيل و طبقه خاصه بالظل (shadow) ,,
قم بتغير حجم الطبقه الخاصه بالظل (shadow) لتحصل علي نتيجه تشبه الاتي ,, من الممكن ان تضغط علي زر CTRL+T لتحصل علي وضع التحريك الحر و تفعل ما تشاء بسهوله , ثم قم بالنقر علي زر الماوس الايمن و تختار Perspective ,,
قم بسحب المقبضين العلوين كل منهما في إتجاه الاخر ,,
يمكنك تحريك الظلال إلي اسفل ثم إستعمل اداة الممحاه بفرشاه ناعمه و تمحو اعلي الحواف ,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-10.jpg
لخطوه 10 :
لجعل الفوتر جاهز للعمل في ملفك ال HTML الخاص بموقعك , قم بحذف النصوص ( النص سيضاف في الملف ال HTML) ,,
قم بعمل CUT للخلفيه الخاصه بالفوتر كما في الصوره التاليه ,,
قم بعمل paste لها في ملف جديد ,,
قم بتحديد منتصف الفوتر و قم بعمل CUT له و قم بعمل PASTE له في ملف اخر ,,
قم بحفظ الملفين بإستعمال الامر Save > Save For Web & Devices ثم إختر JPG و اختر جوده مناسبه ,,
الصور من نوع JPGs و PNGs مناسبه جدا للصور التي تحتوي علي العديد من التدرجات و الالوان بدرجاتها ,,
الصور من نوع GIF مناسبه للصور التي تحتوي علي لون مسطح ,,
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-11.jpg
النتيجه النهائيه
http://www.pxll.com/usersupload/montexo/how-to-create-a-simple-sleek-web-20-site-footer-13.jpg
إنتهي الدرس