شرح تقطيع وتركيب التصميم متمدد بطريقة سهله جدا للمبتدين (الجزء الاول) !!

[help]

السلام عليكم ورحمه الله وبركاته

اقدم لم لكم
شرح تقطيع وتركيب التصميم على الاستايلات

وان شاء الله من خلال الشرح راح تتضح لكم فكره بشكل سليم جدا

طبعنا درسنا هذا بيعتمد على برنامج غير (فوتوشب , فرنت بيج)

راح يكون على برنامج الفايروركس للتقطيع+دريم ويفر لتحرير وتركيب التصميم وتصديره الى الاستايل منتدى

نقول اول شي بسم الله وتوكلنا على الله


افتح التصميم على برنامج فايروركس سوى كان PSD من فوتوشب او كان تصميم من نفس برنامج فايروركس

الحين نبدء بالهيدر :

http://3elmdgn.com/stely/FW.jpg

الحين نروح الى الادوات ونختار اداة Slice tool من اداوات Web
صورة توضيحيه:

http://3elmdgn.com/stely/Slice-tool.jpg

الحين نورح الى جهة اليمين من التصميم ونحدد عليه بشكل هذا

http://3elmdgn.com/stely/fw-1.jpg

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

http://3elmdgn.com/stely/fw-2.jpg

الحين مثل مو موضح تمسك الطبقة وتنزلها تحت الى مكان محدد عليه سهم ليتم تكرير الطبقة

http://3elmdgn.com/stely/fw-3.jpg

شوف الحين اصبح لدينا طبقتين الحين اضغط على طبقة الثانية منسوخه
ونزل الى خصائص الطبقات بشكل هذا

http://3elmdgn.com/stely/fw-4.jpg

الحين رقم الي مظل عليه بالاحمر امسحه وضع مكانه صفر كذا راح يتغير مكانه ويتجه الى جهة الاخرى ونشوف الحين

http://3elmdgn.com/stely/fw-5.jpg

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

نحدد مكان الان بشكل هذا

http://3elmdgn.com/stely/fw-6.jpg

لاحظ نسوي جزء وتسوي له تكرار وتسحبه بالمواس الى جهة ثانية وتضبط العرض من خصائص زي ما سوينا في الجزء تبع الاعمدة
وبكذا انهينا الهيدر وتم تحديد التقطيع له يبقى عليكم الاعمدة

نكملها

نورح الى الاعمود الاول ونحدد بنفس مقاس حق الهيدر

http://3elmdgn.com/stely/fw-7.jpg

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

http://3elmdgn.com/stely/fw-8.jpg

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

http://3elmdgn.com/stely/fw-9.jpg

فقط لا تروح الى الطبقات كلك يمين وتكرر لها بشكل هذا

http://3elmdgn.com/stely/fw-10.jpg

الحين عندك طريقتين يا تمسكاها وتنزلها على تحت او بالاسهم في كيبورد وتضغط على تنزيل ليكون شكلها كذا

http://3elmdgn.com/stely/fw-11.jpg

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

http://3elmdgn.com/stely/fw-12.jpg

الحين اقول لك مبروك تم تحديد اماكن التقطيع بشكل صحيح ورائع

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

http://3elmdgn.com/stely/fw-13.jpg

او من قائمة File>>Export

راح يظهر لكم مربع وفيه خيارات

http://3elmdgn.com/stely/fw-14.jpg

انا فكيت لك نوع التصجير وحدد لكم على انه يكون صور

يمكنكم ايضا اختيار وضع HTML and Images
يعني ان برنامج راح يصدر لك الصور مدموجة مع ملف HTML ويكون الوضعها بشكل التالي:

http://3elmdgn.com/stely/fw-15.jpg

الحين مربع الاول محدد لكم انه حيتصدر لك التصميم مع ملف صفحة وتحت تجد ايضا محدد على مصار الصور مع التصدير يكون الصور مثال:

Images/im_yousef.jpg

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

اتمنا ان يحوز الشرح على رضاكم وان يكون سهل عليكم التطبيق جدا
تقبلو تحياتي
help

[عبدالله ابراهيم]

ما قصرت حبيبى هلب والله

[help]

مكور للرد الكريم اخواني

[خ ــادم الإسلام]

بارك الله فيك يا الطيب :)

[ولد الفجيرة]

بارك الله فيك يالغالي

[بو هشام]

يجــــــزيكـ الخيـــر يا الغاليـ [:)]

[الشروق]

مشكور وجزءكم الله خيرررررررررر

[الشبح]

تسلم يالغالي

[DR JORDANIAN]

شكرا لك أخي الغالي

لكن الصور غير ظاهرة لدي

[عمر]

بارك الله فيك