تصميم استايل أحترافي متمدد بالصور ( الجزء الاول )

[ansaralhojah]

السلام عليكم

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

مقدمة :

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

لم افهم قصدك كيف يكون في اطار عمل محدد ؟؟

اقصد هنا ان تصميم الاستايلات يحتوي على 4 اجزاء
1_ الهيدر
2_ الفوتر
3_ الاعمدة
4_نقاط التمدد

في بداية الموضوع قلت انك سوف تعلمنا تصميم استايل متمدد ما هو قصدك بالمتمدد ؟

هناك نوعان لتصميم الاستايلات احدهم المتمدد واحدهم الغير متمدد المتمدد هو المستخدم غالباً في تصاميم المنتديات فهو الذي يمتد اي يكبر ويصغر مع محتويات الصفحة فمثلاً لو كانت توجد صورة باحد مواضيع منتداك كبيرة جداً سوف يتمدد استايلك مع هذه الصورة

هل يوجد مثال للاستايل الغير متمدد ؟

من خلال بحثي السريع لا على التعيين رأيت هذا المنتدى انظروا كيف انه محدد ولا يتمدد التصميم مع الصفحة كاملاُ :
http://ayaam.com/vb/

ذكرت لنا ان هناك نقاط تمدد لم توضح ما هي ؟

سوف اقوم بشرحها داخل الدرس


بعد هذه المقدمة البسيطة التي تجيب على بعض الاسئلة نبتدأ بالدرس .


قم بفتح الفوتوشوب وعمل صفحة جديدة

http://www.jannatalhusain.info/2008/uploads/982f7ab09f.jpg (http://www.jannatalhusain.info/2008/)

اعمل قياسات الصفحة 800*600 كما في الصورة

http://www.jannatalhusain.info/2008/uploads/0aba55ffd0.jpg (http://www.jannatalhusain.info/2008/)

بعد فتح الصفحة من منسق الالوان قم باختيار لون هادئ قريب من الابيض ولكن لا تجعله يميل للابيض كثيراُ لانه سوف يأذي العين :22: وكل واحد وذوقه في اختيار الالوان


http://www.jannatalhusain.info/2008/uploads/1b37ca4b4a.jpg (http://www.jannatalhusain.info/2008/)


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


http://www.jannatalhusain.info/2008/uploads/e28990de53.jpg (http://www.jannatalhusain.info/2008/)


سيكون كالتالي :

http://www.jannatalhusain.info/2008/uploads/5309f32391.jpg (http://www.jannatalhusain.info/2008/)

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

http://www.jannatalhusain.info/2008/uploads/202acdb462.jpg (http://www.jannatalhusain.info/2008/)

الان سوف اقوم بشرح اقسام التصميم كما قلت لكم سابقاً ان اقسام تصميم الاستايل 4 وهي
1_ الهيدر
2_ الفوتر
3_ الاعمدة
4_نقاط التمدد

1_ الهيدر : وهو القسم الاعلى للتصميم وتستطيع التفنن باشكاله فانا هنا عملته مستطيل فتستطيع اضافة المنحنيات والزخرفات وماشابه

http://www.jannatalhusain.info/2008/uploads/0b8fbd61a8.jpg (http://www.jannatalhusain.info/2008/)

2_ الفوتر : وهو القسم الاسفل للتصميم انا تركته فارغ عادةً يوضع به حقوق المصمم او حقوق المنتدى او ما شابه

http://www.jannatalhusain.info/2008/uploads/48c497c363.jpg (http://www.jannatalhusain.info/2008/)

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

http://www.jannatalhusain.info/2008/uploads/2a125888ce.jpg (http://www.jannatalhusain.info/2008/)

نقاط التمدد : سوف نقوم بشرحها في الجزء الثاني


يتبع بأذن الله بالجزء الثاني



الان احفظ عملك بصيغة psd لكي نكمل بأذن الله تعالى في الجزء الثاني


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



تحياتي

[نور على نور]

وعليكم السلام ورحمه الله وبركاته....
يعطيك العافية أستاذ..
تقريباً قبل ماأبدأ بأي شي كل شي واضح
بس..
فيه سؤال الهيدر انت عملته من ضمن صفحة العمل او لوحده <<أدري سؤال بايخ :D
ولي عودة بالتطبيق..

[ansaralhojah]

اختي اكيد يكون من ضمن صفحة العمل

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

[نور على نور]

اختي اكيد يكون من ضمن صفحة العمل

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

طيب عرفت ..
الآن انت قلت عمل استايل احترافي متمدد ,يعني فيه غير متمدد واذا فيه انواع للإستايلات
اذكرهم لنا..اذا مافيه زحمه..

[ansaralhojah]

في بداية الموضوع قلت انك سوف تعلمنا تصميم استايل متمدد ما هو قصدك بالمتمدد ؟

هناك نوعان لتصميم الاستايلات احدهم المتمدد واحدهم الغير متمدد المتمدد هو المستخدم غالباً في تصاميم المنتديات فهو الذي يمتد اي يكبر ويصغر مع محتويات الصفحة فمثلاً لو كانت توجد صورة باحد مواضيع منتداك كبيرة جداً سوف يتمدد استايلك مع هذه الصورة

هل يوجد مثال للاستايل الغير متمدد ؟

من خلال بحثي السريع لا على التعيين رأيت هذا المنتدى انظروا كيف انه محدد ولا يتمدد التصميم مع الصفحة كاملاُ :
http://ayaam.com/vb/


اختي هذا قصدج ؟

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

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


اختي لو الدرس كله مو واضح عذريني لاني اختصرت فيه

[نور على نور]

اختي هذا قصدج ؟

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

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


اختي لو الدرس كله مو واضح عذريني لاني اختصرت فيه

لا أستاذ الدرس واضح انت ماتصدقني الا لمن احط التطبيق اصبر عليّ وانزله..:o

[ansaralhojah]

اوكي اختي الحمد لله توقعت مارح يكون مفهوم يالله ننتضر ابداعج

[حاملة الراية]

شرح اكثر من رائع

عاشة ايدك

[ع ــبدالله]

يعطيك العافيه بو حسين ..

روح انا وياك بس وضح وضح اكثر شوي بالدروس اليايه لانه انا شوي فيني غب غب :p

[ansaralhojah]

يعطيك العافيه بو حسين ..

روح انا وياك بس وضح وضح اكثر شوي بالدروس اليايه لانه انا شوي فيني غب غب

حياك الله عزيزي عبود

اخوي الدرس واضح عندك ؟ وان شاء الله الدروس الجاية رح يكون فيها تفاصيل اكثر


تحياتي

[ع ــبدالله]

الله يحيك بو حسينـ ..

الدرس اي واضح بس يعني هاذي الصفحه الرئيسيه للموقع ؟ مو جنها صغيره ؟

[ansaralhojah]

هذا التصميم للستايلات. صغيرة لانها بدون نقطة تمدد بالجزء الثاني رح تعرف فائدة نقطة التمدد

تعال وين تطبيقك ؟ :p

[نور على نور]

وهذا تطبيقي .. :D
إن شاء الله صح ,على انك ماشرحت شلون نعمل الأعمده ..:o
http://www.jannatalhusain.info/2008/uploads/d13a2af5f1.jpg

[ansaralhojah]

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



وان شاء الله قريباً الجزء الثاني