[ د-م-1 | 2 ] - دورة تصميم ستايل منتديات - تصميم الهيدر والفوتر وتقطيعهما

[X100]

http://mexat.com/vb/attachment.php?attachmentid=1234397&stc=1&d=1282157199

كيف حالكم اخوآني الكرآم ؟

ان شاء الله بخير وصحة وعافية ::سعادة::

ونعود مرة أخرى ومع الدرس الثاني من دورة تصميم الستايل


والذي وبإذن الله سيكون سهلآ عليكم ،، لأن هذا الدرس سنصمم به :رامبو:


،،،


http://mexat.com/vb/attachment.php?attachmentid=1234399&stc=1&d=1282157199


اولاً النتيجة النهائية لهذا الدرس :


http://mexat.com/vb/attachment.php?attachmentid=1234439&stc=1&d=1282158599


النتيجة التي وضعتها عادية ، والابداع يجب أن يظهر منكم ::جيد::


~ ~ ~ ~ ~ ~

اولاً سنشرح بعض الأشياء المهمة في الستايل ،،

فـ الستايل يتكون من 4 أشياء رئيسية !

1- الهيدر ( وهو الجزء العلوي من الستايل )

2- الفوتر ( وهو الجزء السفلي من الستايل )

3- الخلفية ( وهي خلفية المنتدى الرئيسية )

4- نقطة التمدد ( وهي أهم جزء في الستايل ، حيث يكون في منتصف الستايل )
سٌميت بنقطة التمدد ، لأنها الجزء الذي بإمكانه التمدد بدون تشويش ، وهذا شرح مصور ،،

فمثلاً ، الستايل هذا صحيح :

http://mexat.com/vb/attachment.php?attachmentid=1234439&stc=1&d=1282158599

وذلك لوجود فراغ بالمنتصف يسمح بالتمدد بدون أية مشاكل وتشويه بالصورة ،


أما هذا الستايل فهو خاطئ :

http://mexat.com/vb/attachment.php?attachmentid=1234544&stc=1&d=1282167079

وذلك لعدم وجود مكان لنقطة التمدد في الهيدر ! فـ صورة ناروتو لو تمددت ستشوه الستايل حتماً ، لذلك يجب ان تكون نقطة التمدد متناسقة ،،

- - - - - - - - - - - - - -

انظروا الى هذه الصورة مثلآ ،، الجزء العلوي المظلل بالأبيض هو " الهيدر " ،، اما الجزء السفلي المظلل بالأبيض هو " الفوتر " ، والخلفية فنستطيع تغييرها بخيارات المنتدى الذي انشأناه ..

http://mexat.com/vb/attachment.php?attachmentid=1234440&stc=1&d=1282158599

=============================


أما هنا ، فـ الجزء الذي بالمنتصف الذي بين الخطين ، فهو " نقطة التمدد " ، وهو فراغ منتظم بالتصميم ..

http://mexat.com/vb/attachment.php?attachmentid=1234441&stc=1&d=1282158599

--------------------------



ونبدأ العمل ،،


[ الخطوة الأولى ]


نفتح عمل جديد بمقاس 800 للعرض 600 للطول ،

http://mexat.com/vb/attachment.php?attachmentid=1234442&stc=1&d=1282158599


نختار أداة الدلو http://mexat.com/vb/attachment.php?attachmentid=1234459&stc=1&d=1282159945 ونملأ العمل باللون الذي نريده ( وهو لون الخلفية بالستايل )

http://mexat.com/vb/attachment.php?attachmentid=1234460&stc=1&d=1282159945


نفتح لير جديد ، ونختار أداة التحديد المربعة http://mexat.com/vb/attachment.php?attachmentid=1234461&stc=1&d=1282159945 ونصنع شكلاً مستطيلاً بالأعلى ، وهو " الهيدر " ، ونضيف ما نريد من تأثيرات وألوان ،،

http://mexat.com/vb/attachment.php?attachmentid=1234462&stc=1&d=1282159945


و نفتح لير جديد ونختار أداة التحديد المربعة مرة أخرى ، ونصنع مستطيلاً بالأسفل وهو " الفوتر " ، ونضع ما نريد من تأُثيرات وألوان ،،

http://mexat.com/vb/attachment.php?attachmentid=1234463&stc=1&d=1282159945


[ الخطوة الثانية ]


نضع الصور والكلمات التي نريدها على جانبي الهيدر وجانبي الفوتر ، ولا ننسى كتابة الوصلات مثل ( الرئيسية - التسجيل - الدخول ... وما الى ذلك ) ،، شرط أن لا يكون هناك أي اضافات على موقع " نقطة التمدد " مثلما وضحنا سابقاً

http://mexat.com/vb/attachment.php?attachmentid=1234470&stc=1&d=1282160266


[ الخطوة الثالثة ]

الآن وصلنا الى المرحلة الأخيرة وهي مرحلة التقطيع :D ،، ركزوا معنا ،،


اولاً نضغط Ctrl + R أو نذهب الى :

http://mexat.com/vb/attachment.php?attachmentid=1234472&stc=1&d=1282160266

ستظهر خطوط بيضاء تسمى " مسطرة " ،،


نختار الآن هذه الأداة http://mexat.com/vb/attachment.php?attachmentid=1234471&stc=1&d=1282160266 ثم نذهب الى المسطرة العلوية ونضغط عليها ونسحب باتجاه الأسفل الى ما تحت الهيدر بقليل ، مثل ما هو موضح بالصورة :

http://mexat.com/vb/attachment.php?attachmentid=1234473&stc=1&d=1282160266


ونسحب الآن مرة أخرى الى ما فوق الفوتر بقليل ، مثل ما هو موضح بالصورة :

http://mexat.com/vb/attachment.php?attachmentid=1234483&stc=1&d=1282161107


الآن نسحب من المسطرة التي باليسار ، ونسحبها الى المنتصف مثل ما هو موضح بالصورة :

http://mexat.com/vb/attachment.php?attachmentid=1234484&stc=1&d=1282161107


ونسحب مرة أخرى ونجعلها بجانب الخط السابق :

http://mexat.com/vb/attachment.php?attachmentid=1234485&stc=1&d=1282161107


وبهذه الخطوط ، وهذا التقسيم ، ستلاحظون بأن الهيدر مقسوم الى 3 أجزاء ، على هذا النحو :

الجزء الأيمن - نقطة تمدد - الجزء الأيسر

والفوتر كذلك ،

الجزء الأيمن - نقطة تمدد - الجزء الأيسر


الآن من الجزء العلوي بالفوتوشوب ، نضغط على الخيار Slices From Guides :

http://mexat.com/vb/attachment.php?attachmentid=1234486&stc=1&d=1282161107


سيظهر لنا هذا الشكل :

http://mexat.com/vb/attachment.php?attachmentid=1234487&stc=1&d=1282161107


الآن نفتح لير جديد في سطح المكتب مثلاً ، ونسميه بأي اسم نريده ، انا سميته New Style ،،

http://mexat.com/vb/attachment.php?attachmentid=1234500&stc=1&d=1282162180


الآن نذهب الى File > Save For Wep & Devices

http://mexat.com/vb/attachment.php?attachmentid=1234501&stc=1&d=1282162180


الآن نغير الاعدادات التي بالجزء الأيمن ، التي عليها خط أحمر بالصورة ، ونغير اعدادات كل جزء من الصورة حسبما نريد ، ثم نضغط على Save ،

http://mexat.com/vb/attachment.php?attachmentid=1234502&stc=1&d=1282162180


الآن نذهب الى الملف الجديد الذي صنعناه قبل قليل ، سنجد بداخله ملف اسمه images

http://mexat.com/vb/attachment.php?attachmentid=1234503&stc=1&d=1282162180


ندخله ، وسنجد الصور مقطعة كلاً على حدة ،،

نحدد على صور الخلفية الثلاث ، ونحذفها لأننا لن نحتاجها ابداً ،،

http://mexat.com/vb/attachment.php?attachmentid=1234504&stc=1&d=1282162180



ملاحظة : لإخفاء المسطرة نضغط على Ctrl + R

وبهذا ينتهي درسنا لهذا اليوم :تدخين:

المطوب منكم بهذا الدرس وضع تصاميمكم للستايل هنا حتى نرى ابدآعكم ونشاطكم ::جيد::

أتمنى أن يكون بسيطاً عليكم ..

أي مشاكل او استفسارات المرجو وضعها في هذا الموضوع وليس عبر الرسائل والتعليقات رجاءً


http://mexat.com/vb/attachment.php?attachmentid=1234398&stc=1&d=1282157199

[MohammadALshwaf]

شكرا لك


ياااا


م
ب
د
ع