.:: تقطـــ الاستايل style ـــيع ::.

[said]

http://www.dzbatna.com/images/icons/iconrote.gif .:: طھظ‚ط·ظ€ظ€ظ€ ط§ظ„ط§ط³طھط§ظٹظ„ ظ€ظ€ظ€ظٹط¹ ::. (http://www.dzbatna.com/t1280168/)



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

.:: تقطـــ الاستايل style ـــيع ::.

اول حاجه نعملها قبل ما ندخل على ال photoshop ونبدأ التقطيع ,,
ننشئ نيو فولدر ونسميه زي ما نحب ,, عشان ده هيكون فيه الفولدرات الخاصة بالاستايل style
انا عملت فولدر وسميته مثلا Rehab
http://farwlaya.googlepages.com/Rehab-f.gif

,,,,,,,,,,,,

بعد كده نفتح ال photoshop ,,
ونفتح فايل الاستايل style الpsd ,,
او نفتح الصورة النهائية للاستايل style ال gif,,

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

http://farwlaya.googlepages.com/50.gif

.:: تقطيع الهيدر header ::.

مثلا بعد ما فتحنا فايل ال psd للاستايل style اللي قمنا بتصميمه ,,
هنبدأ بتقطيع الجزء الخاص بالهيدر header ,,
ونعمل select على الجزء الخاص بالهيدر header ..
كما في الشكل التالي ..

http://farwlaya.googlepages.com/select-h.gif

1- نذهب للقائمة Edit ثم Copy Merged

2- نفتح قائمة File ثم New ,, ونترك الاعدادات كما هي ,, ثم نضغط Ok

3- هيتفتح لنا مساحة عمل جديده ,, فنذهب الى القائمة Edit ثم Paste ,,
هيظهر عندنا الجزء الخاص بالهيدر header ,,

http://farwlaya.googlepages.com/hed.gif

ودلوقتي هنقوم بتقطيعه .. مثلا لـ 3 اجزاء ,,
صورة على اليمين , وصورة على اليسار , ومنطقة التمدد

4- بعد كده نذهب لاداة ال slice tool http://farwlaya.googlepages.com/slice-tool.gif ,,
ونقف بيها عند اول التصميم " الزاوية اليسرى العلوية " ونبدأ نسحبها كأننا بنعمل select
حتى يتم عمل التحديد على الجزء الايسر للهيدر ,,

http://farwlaya.googlepages.com/hed-1.gif

5- وبعدها نبدأ بسحب الاداة مرة تانيه من عند النقطه المشار اليها بالسهم الموضحه بالشكل ..
ليتم تحديد الجزء الخاص بمنطقة التمدد ..
وفي النهاية اصبح الشكل عندنا مقسم الى 3 اجزاء ,,

http://farwlaya.googlepages.com/hed-slice.gif

6- ولحفظ الاجزاء اللي تم تقسيمها ,, نذهب للقائمة File ثم نختار Save for web
ثم نضغط Save هيطلع لينا ويندو Save Optimized As ,,
ونختار المكان اللي هنحفظ فيه الصور
وهيكون في الفولدر اللي عملناه الخاص بالاستايل style ..
وعند File name نكتب اسم الصور وليكن header
وعند Save as type نختار Images Only

وعند الذهاب لفولدر الاستايل style اللي عملناه ,, هنلاقي جواه اصبح في فولدر اسمه Images
وبداخله صور الهيدر header مقسمه header-01 , header-02 , header-03

وبكده نكون قمنا بتقطيع صور الهيدر header ..

http://farwlaya.googlepages.com/50.gif

.:: تقطيع الفوتر ::.

نذهب مرة اخرى لفايل الاستايل style الاساسي ,,
نقوم بعمل select على الجزء الخاص بالفوتر كما في الشكل ..

http://farwlaya.googlepages.com/select-f.gif

ثم نكرر نفس الخطوات من 1 : 5 كما قمنا في الهيدر header ,,
وهيكون شكل الفوتر بعد التقسيم هكذا ..

http://farwlaya.googlepages.com/fot-slice.gif

ولحفظ صور الفوتر نفعل كما قمنا في الخطوة ( 6 ) ,, ولكن عند الحفظ في File name ,,
نكتب اسم الصور وليكن مثلا footer ,,
ونحفظها في نفس المكان " فولدر الاستايل style الاساسي "
وعند الذهاب مرة اخرى لفولدر images بداخل فولدر الاستايل style الاساسي ,,
سنجد مضاف ايضا صور الفوتر مقسمه footer-01 , footer -02 , footer-03

وكده يكون تم تقطيع الفوتر ..

http://farwlaya.googlepages.com/50.gif

.:: تقطيع الاشكال الخاصة بتأطير القوالب ::.

ايضا بالذهاب الى فايل الاستايل style الاساسي ,, وعمل select على الجزء العلوي الخاص بتأطير الاقسام
كما في الشكل التالي ,,

http://farwlaya.googlepages.com/select-n.gif

ونكرر نفس الخطوات كما سبق ,,
وهيكون شكل الجزء العلوي بعد التقسيم هكذا ,,

http://farwlaya.googlepages.com/n-slice1.gif

وايضا عند حفظ صور الجزء العلوي نفعل كما قمنا في الخطوة ( 6 ) ,, ولكن عند الحفظ في File name ,,
نكتب اسم الصور وليكن مثلا nav ,,

ونحفظها في نفس المكان " فولدر الاستايل style الاساسي "

وعند الذهاب ثانية لفولدر images بداخل فولدر الاستايل style الاساسي ,,
سنجد مضاف ايضا صور الفوتر مقسمه nav-01 , nav -02 , nav-03


,,,,,,,,,,,,,,,,,,


ونكرر نفس العملية مع الجزء السفلي .. كما في الشكل ,,

http://farwlaya.googlepages.com/select-n2.gif

والشكل بعد تقسيم الجزء السفلي سيصبح هكذا ,,




http://farwlaya.googlepages.com/n-slice2.gif

ثم نكرر نفس طريقة الحفظ كما سبق ,,
وباسم مختلف ,, وليكن مثلا navb
وسينتج عندنا بعد حفظ الاجزاء المقسمه داخل فولدر Images ,,
navb-01 , navb -02 , navb-03

,,,,,,,,,,,,,,,,,,,,,,,,

وبكده هينتج عندنا داخل فولدر Images اجزاء الاستايل style مقسمه ,,

http://farwlaya.googlepages.com/images-r.gif

ملحوظه :: يفضل ان تكون منطقة التمدد عرضها يتراوح بين 10 : 20 بيكسل

http://farwlaya.googlepages.com/50.gif

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

وان شاء الله الدرس مفصل القادم هيكون عن البرامج المستخدمه
وشرح طريقة تنصيب setup السيرفر SERVER المحلي ,,
وتركيب install نسخة منتدى عليه
وتمنياتي ليكم بالتوفيق ان شاء الله
http://r.a.4.designs.googlepages.com/0044.gif


تحياتي لكم جميعا