دورة تصميم الستايلات [ تقطيع التصميم] الدرس الثاني. [الأرشيف]

مشاهدة النسخة كاملة : دورة تصميم الستايلات [ تقطيع التصميم] الدرس الثاني.

Khaled J. Ahmad

23-07-2009, 02:38 AM

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

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

متمنياً من الله ان يوفقكم في التطبيق وننهي هذه الدورة بخير وسلام

من دون إطالة اترككم مع الدرس

اول شيء نقوم بفتح التصميم الذي صممناه بالدرس الاول .

ثم نختار اداة القص كما بالصورة التالية

http://www.abc4web.net/4upload/uploads/images/abc4web_b7965d84db.gif (http://www.abc4web.net/4upload)

ثم نقص التصميم كما توضح الصورة التالية

http://www.abc4web.net/4upload/uploads/images/abc4web_455f095d09.jpg (http://www.abc4web.net/4upload)

الان لدينا ستة قطع

الهيدر : جزء يمين -- تمدد -- جزء يسار .
" التمدد هو لكي يتناسب الستايل مع جميع قياسات الشاشات " .

الفوتر : جزء يمين -- تمدد -- جزء يسار .
التمدد ذكرته .

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

بعد ما قمنا بالتقطيع نأتي للحفظ

ومن قائمة file نختار save for web
والصورة التالية توضح .

http://www.abc4web.net/4upload/uploads/images/abc4web_57f85afb6f.gif

الان تطلع لنا هذه النافذة

[/URL]
http://www.abc4web.net/4upload/uploads/images/abc4web_1fc9caa47c.gif
ونختار save

ثم تظهر هذه

نسمي الصور بأسم " abc4web"
وباقي الخيارات موضحة بالصورة.

[URL="http://www.abc4web.net/4upload"]http://www.abc4web.net/4upload/uploads/images/abc4web_ac2185519a.gif (http://www.abc4web.net/4upload/uploads/images/abc4web_1fc9caa47c.gif)

الان نحذف صفحة الانترنت ونقوم بتسمية ملف الـ images بأسم " abc4web" .

تابع الصورة التالية

http://www.abc4web.net/4upload/uploads/images/abc4web_20e0da30a6.jpg (http://www.abc4web.net/4upload)

وبعد ذالك ندخل الي ملف الصور

وهذه صورة توضح صور التصميم المقطعة

http://www.abc4web.net/4upload/uploads/images/abc4web_066a0f0885.jpg (http://www.abc4web.net/4upload)

الان بعد تطبيق الشرح انا جاهز للاسفسارات .

اخوكم خالد صبح.

مُجمع الخبرات

23-07-2009, 02:48 AM

جاري التطبيق....

Khaled J. Ahmad

23-07-2009, 02:50 AM

حياك الله تطبيق موفق

مُجمع الخبرات

23-07-2009, 03:00 AM

سؤال : لا حظت عندك أن يمين الهيدر أكبر من يسار الهيدر ؟
سؤال 2 : هل يجب أن يكون يمين ويسار الفوتر بنفس مقاس التي في الهيدر ؟
سؤال 3 : هل يجب إخفاء الكتابة في الهيدر؟

Khaled J. Ahmad

23-07-2009, 03:28 AM

سؤال : لا حظت عندك أن يمين الهيدر أكبر من يسار الهيدر ؟

لا يهم ايهم اكبر الايمين او اليسار المهم ان تكون هناك نقطة تمدد.

سؤال 2 : هل يجب أن يكون يمين ويسار الفوتر بنفس مقاس التي في الهيدر

نعم يجب ان تكون بنفس المقاسات والا ستحدث مشاكل بالتركيب.

سؤال 3 : هل يجب إخفاء الكتابة في الهيدر؟

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

ان شاء الله تكون اكتفيت من الاجوبة وان كان هناك المزيد من الاسئلة انا بالخدمة

مُجمع الخبرات

23-07-2009, 03:34 AM

السلام عليكم أخي خالد صبح
انتهيت من التقطيع

وهذا التطبيق
http://img204.imageshack.us/img204/8787/32911819.png

ولقد جعلت يمين الهيدر أكبر قليلا لكي يكفي عند الكتابة عليه

وشكرا لك أخي على سرعة الرد في الاستفسارات

محترفة

23-07-2009, 11:13 AM

هذا عمليييييييييييييييييييييي ييييي

http://www.up-00.com/dqfiles/9qx36611.gif (http://www.up-00.com/)

وهل مقاس الهيدر والفوتر من بداية العمل مهم او اي مقاس ,,,, لاني اشتغلت على المقاسات من عندي ؟؟

سالي الفلسطينية

23-07-2009, 11:26 AM

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

أبو يوسف

23-07-2009, 12:42 PM

أجزل الشكر لك أخي خالد ؛ وقد كنت اتمنى متابعة الدروس منذ البداية ؛ ولكن وقتي ضيق

إن شاء الله سأحاول من البداية

تحيتي لك

.

ابو صفد

23-07-2009, 12:55 PM

هذا تطبيقي ... بارك الله بيك اخي خالد :abc_138:

http://img228.imageshack.us/img228/3417/59622442.jpg

Khaled J. Ahmad

23-07-2009, 03:18 PM

اعمالكم جميلة لكن عندكم اخطاء

اولا الاخطاء بأسم التصميم

يجب ان يكون اسم الصورة بالانجليزي

اي مثلما عندي
abc4web_01
وهكذا
ومثل عن اخي ابو صفد

اما اختي محترفة مقاس التصميم يجب ان يكون مثلما كان بالشرح

والصور المقطعة يجب ان تكون بنفس المقاسات .

اي استفسارات بالخدمة

المصرى

23-07-2009, 04:08 PM

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

تقبلوا تحياتى ......السلام عليكم جميعا رواد طريق الاحتراف

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

http://img198.imageshack.us/img198/2175/96724710.jpg

1: فى البدايه حجم الملف الجديد بالفوتوشوب .....اختياره يعتمد على ماذا....؟

2: يفضل ان يكون حفظ التقطيعات فى صورة gif hl jpg ام ماذا

3: فى تطبيقى بعض المقاطع الاخرى ارجو التوضيح

شكرا على ما تقدمون

محترفة

23-07-2009, 04:15 PM

شكرررررررا على الرد ,,,

وراح اعدل الصور وانزلها ,,,,

Khaled J. Ahmad

23-07-2009, 04:21 PM

المصرى

23-07-2009, 04:35 PM

المقاسات

http://www.abc4web.net/4upload/uploads/images/abc4web_2ecc17ed74.jpg

السؤال الثاني

السؤال الثالث
يفضل ان تكون gif

03 // 06 //08
11// 12// 13
احتفظ بهذه الصور وقم بحذف الباقي

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

Khaled J. Ahmad

23-07-2009, 05:00 PM

نعم كل واحد يعمل على مقاس مختلف
لكن هذا المقاس مناسب لعدم حدوث المشاكل بالتمدد
مع الذين يتصفحون على نسبة عرض 800 - 600

بالتوفيق

محترفة

24-07-2009, 04:02 PM

هذا تطبيقي من جديد

عدت الاخطاء .....

http://www.l44l.com/upfiles9/hIM40432.gif (http://www.l44l.com/)

Khaled J. Ahmad

24-07-2009, 05:21 PM

ممتاز يا محترفة بانتظار تطبيق الاخرين

كينج نت

24-07-2009, 08:07 PM

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

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

الراعي

24-07-2009, 09:27 PM

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

http://www.abc4web.net/4upload/uploads/images/abc4web_7efa2957de.jpg

رائد ابو فيصل

24-07-2009, 10:39 PM

http://img198.imageshack.us/img198/2175/96724710.jpg

ما بلزم ارفع صوره ثانيه لانها نفس الصوره عندي

Khaled J. Ahmad

25-07-2009, 12:58 AM

تطبيق ممتاز اخر الراعي

لكن لاحظت في تصميمك انه كان يوجد ازرار في الهيدر اين ذهبت؟
http://www.abc4web.net/4upload/uploads/images/abc4web_901ecd57a7.gif

Khaled J. Ahmad

25-07-2009, 01:00 AM

لا يهم اخي رائد احذف الزائد واحتفظ بالستة قطع

التمدد للهيدر والفوتر

واليمين واليسار للهيدر والفوتر

الراعي

25-07-2009, 08:23 PM

تطبيق ممتاز اخر الراعي

لكن لاحظت في تصميمك انه كان يوجد ازرار في الهيدر اين ذهبت؟
http://www.abc4web.net/4upload/uploads/images/abc4web_901ecd57a7.gif

أخي خالد انا قمت بتقطيع الواجهة بدون ازرار ..وملا حظتك بخصوصها تقودني الآن الى بعض الأسئلة :
1_ هل يجب ان تكون الازرار والصور والكتابة على الهيدر قبل التقطيع لأن في نيتي اضافة
ازرار أخرى وبعض الصور والكتابة بطبيعة الحال ؟؟

2_ كما تلاحظ أخي خالد أن الأزرار التي وضعت هي أزرار منسدلة بمعنى أنها تتجاوز الهيدر
المتمثل بالخط الأحمر وتنتهي فوق الخلفية ..فهل التقطيع في هذه الحالة يجب أن يأخذ
الأزرار بعين الاعتبار وينزل عند تقطيع الهيدر الى حدودها ؟؟؟

أرجو أن يتسع صدرك أخي خالد لهذه الأسئلة لأن الإجابة عنها سيفيدني ان شاء الله وقد
يفيد اخوتنا الأعضاء المشاركين في الدورة .

دمتم بعافية

أبو يوسف

26-07-2009, 12:17 AM

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

فأرجو أن تجدوا له عذرا

abohmam

26-07-2009, 01:05 AM

حياكم الله إخواني

بخصوص تساؤل أخى الراعي

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

http://img253.imageshack.us/img253/7155/78597288.png

http://img253.imageshack.us/img253/5158/47068860.png

موفق بإذن الله ... لك مني أجمل تحية .

abohmam

26-07-2009, 01:36 AM

الراعي

26-07-2009, 01:41 AM

بسم الله الرحمن الرحيم
الله عليك غالينا ابو همام على الشرح الرائع والتوضيح باستفاضة للموضوع
محور التساؤلات ...الآن اتضحت بفضل الله الصورة وعليه سيتم اعادة التقطيع ..
جزاك الله خيرا اخي الكريم ابو همام ولا حرمنا من عطاءك.
دمت بود

الراعي

26-07-2009, 01:53 AM

حياك الله أخى خالد

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

http://www.abc4web.net/vb/uploaded/1_11248561325.png (http://www.abc4web.net/vb)

ملاحظة:
إذا كان التصميم غير رباعي الأطراف فلايُشترط تناسق جداول الهيدر والفوتر حيث ان كل جدول منفصل عن الآخر

بالتوفيق ان شاء الله

عذرا على الازعاج اخي الفاضل ابو همام .. ملا حظتك بخصوص التصميم غير رباعي الاطراف؟؟؟؟
ما المقصود بهذا....... وذاك ؟؟؟ ( اي رباعي الاطراف) .

كينج نت

26-07-2009, 04:32 PM

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

عذرا على الازعاج اخي الفاضل ابو همام ..
ملا حظتك بخصوص التصميم غير رباعي الاطراف؟؟؟؟
ما المقصود بهذا....... وذاك ؟؟؟ ( اي رباعي الاطراف) .

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

الراعي

26-07-2009, 08:53 PM

بسم الله الرحمن الرحيم
جزاك الله ووالديك الجنة أخي الفاضل كينج نت على الشرح الذي وان كان موجزا كما قلتَ
الا أنه بالنسبة لي كان وافيا اذ أوضح لي الفرق الذي قصده الفاضل أبو همام..
أشكركما على تعاونكما وأشكر الاخ خالد على مجهوده ..ورده الله من سفره سالما.

الراعي

27-07-2009, 09:15 PM

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

http://dc01.arabsh.com/i/00337/h0gcf0qzopu0.bmp

http://dc01.arabsh.com/i/00337/4pnx18zqe0js.bmp

Khaled J. Ahmad

27-07-2009, 09:21 PM

شكرا لكم جميعا

الاخ ابو يوسف والاخ ابو همام و الاخ كينج نت

على المساعدة

واعتذر من الجميع عن هذا التوقف

لو كان بالامكان لوضعت الدرس الثالث

لكن في سوريا الخطوط ضعيفة
"خطوط الانترنت"
والبرامج ليست موجودة لوضع الشرح

ان شاء الله سأضع الدرس الثالث فور وصولي للمنزل في الاردن

تمنياتي لكم جميعا بالتوفيق.

Khaled J. Ahmad

27-07-2009, 09:25 PM

جميل اخي الراعي

وهناك طريقة بسيطة لتقطيع التمدد

يمكنك اعتبار الازرار صورة من الهيدر

اي القطعة اليمين مع الزرين والتمدد وقطعة يسار
بالتوفيق

الراعي

29-07-2009, 09:35 PM

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

Khaled J. Ahmad

14-08-2009, 12:11 AM

عدنا من جديد

قريباً الدرس الثالث

وتر الغرام

03-09-2009, 02:38 PM

الله يوفقك اخوي خااالد ..

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

وبالنسبه لك يالراعي .. مثل ما قال اخي الكريم .. خالد .. اعتبرها ربااعيه .. وقطع الاستايل .’ هيدر يمين وهيدر شمال .’ ومثلها في الفوتر ..

وبعد تركيبك الاستايل في الفرونت بيج .. يتم اضافة الازار .. وترتيبها ^.^

دمتم بود

مُجمع الخبرات

05-09-2009, 11:01 AM

السلام عليكم
هل تم إيقاف الدورة؟

من زمااااان مشفنا الدروس الباقية
ما المشكلة

؟

Khaled J. Ahmad

10-09-2009, 05:25 PM

ااااااعتذر منكم عن التاخير

ان شاء الله الدورة رح تخلص ونكملها

بس بعتذر لاني مشغول في موقعي الجديد
http://www.manaraa.com/

وان شاء الله فور الانتهاء منه ساضع الدرس الثالث .......

محمود عفيفى

21-09-2009, 04:45 AM

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

حنظلة

01-11-2009, 02:16 PM

هاد عملي :

http://img519.imageshack.us/img519/4994/112200941407am.jpg

و التقطيع :

http://img442.imageshack.us/img442/5549/112200941323am.jpg

بس سؤال

أنا ما قطعت قلب الستايل .. بس ظهرت له صورة ؟؟ كيف ؟؟

متأخرة :abc_022: بس حابه أتعلم

الفتة الطائر

12-11-2009, 10:56 AM

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

Khaled J. Ahmad

12-11-2009, 11:36 PM

مو مشكلة اخوي حنظلة ما تظر ولا تعمل شيء

هلا اخوي الفتة

عادل نت

24-11-2009, 03:09 PM

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

تفضل هذا التقطيع ..

http://upload.arab-nic.com/pfiles/37213/1.gif

شكراً على الدرس .

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

بالتوفيق لي وللجميع .

Khaled J. Ahmad

24-11-2009, 03:39 PM

لا بأس بالتقطيع فهو ممتاز

راجع الموضوع المثبت عن اكمال الدورة

البرواز لن يتم شرحه في هذه الدورة

لانه يسبب البطء في تصفح الموقع

الهيدر سأشرح لك منفرداً عن نقط التمدد لانه هناك نقطتان

كل نقطة في التركيب تكون بكسل تمددها هو 50 بكسل

عادل نت

24-11-2009, 11:24 PM

لا بأس بالتقطيع فهو ممتاز

راجع الموضوع المثبت عن اكمال الدورة

البرواز لن يتم شرحه في هذه الدورة

لانه يسبب البطء في تصفح الموقع

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

كل نقطة في التركيب تكون بكسل تمددها هو 50 بكسل

لم افهم هذه النقطه ارجو التوضيح وهل هو سبب عدم ظهور التمدد في المثال التالي ؟؟

http://www.ala5oh.fi5.us/vb/index.php?styleid=5

أبو النور

28-11-2009, 02:43 AM

هذا هو ناتج التقطيع ..

http://up4.m5zn.com/9bjndthcm6y53q1w0kvpz47xgs82rf/2009/11/27/04/dvs76dbh0.jpg