شرح تقطيع استايل في بي

by evergreen Tue Oct 19, 2010 6:06 pm

أقدم لكم مرحله تقطيع الإستايل ..

و المرحله القادمه راح يكون عن تركيب الإستايل بالفرونت بيج
و تركيبه
أيضاً على لوحة التحكم المنتدى

بعد تصميم الإستايل مثل ما
تعلمنا في الدرس اللي فات ..
شرح كامل لتصميم استايل في بي
نحفظ صورة من
التصميم ..

مره بصيغة psd و مره بصيغة jpg ..

ما يحتاج أوضح لكم أكثر .. و أكيد تعرفون إن صيغة psd
تخلي الملف مفتوح .. أي تقدر تعدل عليه بأي وقت

و الصيغه الثانيه و هي
اللي تستخدم للعرض في المنتديات
و هي اللي راح
نستخدم عليها شغلنا ..

أفتح صورة التصميم .. و هذا تصميمي المتواضع

تكبير الصورة تصغير الصورة
تم تعديل ابعاد هذه الصورة. انقر هنا لمعاينتها بأبعادها الأصلية.

راح نقطع الإستايل على أساس :

[~]
صورتين تجميليه على الهيدر
[~] منطقة تمدد
في الهيدر
[~] صورتين تجميليه على الفوتر
[~] منطقة تمدد في الفوتر

الصورتين التجميليتين على الهيدر أو الفوتر .. أكيد
راح تكون
صورة واحده على اليمين و الصورة الأخرى على اليسار ..

طيب كذا
حلو .. أخذت فكرة مبدئيه عن العمل

نبداء

أداة التقطيع موجوده من ضمن أدوات الفوتوشوب .. و تحصل
مكانها هنا ..

و لا ننسى عمل الشبكه ..
سبق و قلت لازم تحدد على التصميم
الشبكه عشان تعرف أماكن النقاط ..

طريقة عمل
الشبكه ..

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

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

تلاحظون الحدود
الصفراء هذي هي مكان التقطيع ..

//

نجي على الصورة اليمنى ..
و بمثل من بداية الخط
اليمين إلى نهاية الصورة اليمنى نحدد بأداة التقطيع ..

تكبير الصورة تصغير الصورة
تم تعديل ابعاد هذه الصورة. انقر هنا لمعاينتها بأبعادها الأصلية.

اممم ..
أكيد
لاحظتوا شي .. اللي هو إن الخط اللي تحت موازي بين
الصورة اليمنى و الصورة اليسرى
و لازم يكون الشي هذا

الحين خلصنا
من صورة يسار و صورة يمين اللي هي الصورتين التجميليتين اللي تكلمنا عنها في بداية المرحله ..

الحين نجي لمنطقة
التمدد .. عقدة الشعب

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

تكبير الصورة تصغير الصورة
تم تعديل ابعاد هذه الصورة. انقر هنا لمعاينتها بأبعادها الأصلية.

منقطة التمدد هي المنطقه رقم = 3
مسكت مقدار نقطه واحده .. و يكفيني الشي
هذا ..

أنتهينا من الهيدر

نحول على الفوتر ..
شوف معاي كيف
الصورة على اليسار بالفوتر كيف أخذتها .. ؟

تكبير الصورة تصغير الصورة
تم تعديل ابعاد هذه الصورة. انقر هنا لمعاينتها بأبعادها الأصلية.

لاحظتوا حاجه .. ؟
أول شي الهيدر اكبر من الفوتر .. و
تكلمنا عن هذا الشي
في نقطة سابقه ..

لكن الشي اللي ابغاك تنتبه له ..
إن الفوتر نفس مكان الهيدر بالعرض ..

نحول على الصورة اليمين ..
نفس الشي مثل اليسار ..
شوف
معاي ..

تكبير الصورة تصغير الصورة
تم تعديل ابعاد هذه الصورة. انقر هنا لمعاينتها بأبعادها الأصلية.

الهيدر أكبر من الفوتر
.. لكن نفس المقاس

نجي
لآخر حاجه نقطة التمدد بالفوتر ..
نفس ما قلنا على الهيدر نطبقه بالتمام
على الفوتر ..

تكبير الصورة تصغير الصورة
تم تعديل ابعاد هذه الصورة. انقر هنا لمعاينتها بأبعادها الأصلية.

و بس ..

صورة
التقطيع بإزالة الشبكه .. عشان توضح الصورة أكثر

تكبير الصورة تصغير الصورة
تم تعديل ابعاد هذه الصورة. انقر هنا لمعاينتها بأبعادها الأصلية.

\\

يمكن
البعض أستصعب عليه شي ..
سويت تطبيق متحرك .. يفيدك أكثر على الرابط هذا

http://up.7cc.com/upfiles/GLD84307.gif

الآن
..

وصلنا للنهاية ..
نحفظ الملف من هنا ..

ثم ..

تكبير الصورة تصغير الصورة
تم تعديل ابعاد هذه الصورة. انقر هنا لمعاينتها بأبعادها الأصلية.

الحين روح للمسار
اللي حفظت فيه الملف ..
تحصل إسم المجلد تغير من
الإسم اللي أنت سميته إلى images
أنت بدورك قوم و
سوي له إعادة تسميه ..

و لو دخلت عليه راح تحصل
جميع الصور اللي أنت قمت بتقطيعها ..

//

المرحله الجاي راح يكون عن تركيب الصور
بالفرونت بيج ..
و تركيب الأكواد داخل لوحة تحكم المنتدى
..

إلى ذلك الحين أتركم في حفظ الله و رعايته