ملتقى مدينة العيون - الدرس الأول : ’ لَ تصميم ستايل متمدد , + مقدمة لنقطة التمدد .

ملتقى مدينة العيون (http://www.aloyun.com/vb/index.php)

- ♣ التقنية والكمبيوتر/ Technical and computer ~ (http://www.aloyun.com/vb/forumdisplay.php?f=13)

الدرس الأول : ’ لَ تصميم ستايل متمدد , + مقدمة لنقطة التمدد .

http://www.q8300.com/images/merc7m9w5yjpdtjqa4i.png

السلآم عليكم ورحمة الله وبركآتة ,
| بسم الله , نبدأ الدرس الأول :

طريقه تصميم الهيدر والفوتر ترجع للمصمم نفسه .. طبعا كل مصمم وخياله وذوقة ..
يحاول يبتكر طرق وأفكار مختلفة وإحترافيه لتصميمه ..,
في درسنا راح أسوي ستايل عَ السريع وَمرا خفيف .. فقط للشرح ! ..
الدرس طويل لكن ممتع :179: , وسهل ..

نبدأ .. >
نفتح الفوتوشوب ..
نفتح عمل جديد ..
http://www.q8300.com/images/mfyx4grhcywyr9hx2sat.png
نختار المقاسات مع إسم التصميم
http://www.q8300.com/images/ni3jm7tmp57mjgr0v6r.png
الآن فتح العمل أمامنا .. لوحة بيضاء فارغه ..
طيب ..
في خطوة قبل لنكمل الشغل .. و دايم يستخدمونها مصممين الإستايلات ..
اللي هي : عمل الشبكه على التصميم ..
طريقة عمل الشبكه مثل ماهو واضح بالصورة ..
من الخيارات بالأعلى إختار ..
http://www.q8300.com/images/z5uy5g02fvq482djxxk.png
مجرد ماتحط علامة الصح على كلمة grid
راح تلاحظ إن تصميمك تحول على هيئه شبكه .. و إذا تبغى تلغي الشبكه ألغيها بإزالة الصح ..
طيب .
الحين نبداء بمرحله أوليه .. اللي هي إختيار لون الإستايل
يعني لون خلفية الاستايل .. يجي لون ويجي باترن ..
وبشرح لكم الطريقتين ..
طريقة اللون :
من صندوق الأدوات اللي على يسار الفوتوشوب .. إختار أداة [السطل] و صورتها زي كذا :
http://www.q8300.com/images/jyw705pkxvv1c3bdhb4g.png

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

طريقة الباترن :
من صندوق الليرات نجي للي محددته بالأزرق وتضغطونه
http://www.q8300.com/images/1hbpoik9mjvoni3b2pt.png
ثم نختار خيار الباترن , اللي هو بالعربي ( حشو )
ونختار الباترن اللي نبيه وافضل لو يكون باترن ناعم جداً
له زخرفة خفيفه وناعمه ..
http://www.q8300.com/images/osk16owcpc98u2v1ky0.png
نجي اللحين للنقطه المهمه اللي هي تصميم الهيدر ..
الهيدر هو أعلى المنتدى مثل ماقلنا قبل شوي .. !
طيب نبغى نصمم هيدر خفيف و مو صعب على الجميع .. يعني أي شخص يقدر يتقنه ..
من الأدوات على اليسار نختار أداة الشكل المستطيل و هذي صورتها ..
http://www.q8300.com/images/b1awaxhkhil2xbulqjww.png
أكيد راح يكون لون الهيدر مختلف إختلاف بسيط عن لون الخلفيه اللي قبل شوي سويناه ..
بعد إختيارك للأداه .. أختر أداة الألوان و أختار لك لون مشابة للون اللي قبل شوي ..
و مو مشكله لو كان لون ثاني ..
أهم شي يكون فيه تناسق مع اللون اللي قبله .. اوك ؟
http://www.q8300.com/images/lyoe5ihsqnku42z0wyms.png
طيب نرسم مستطيل أعلى التصميم ..
مثل الصورة هذي ..
http://www.q8300.com/images/l3lq0llwtmhn0hjxps6.png
لو تلاحظون لنقاط الشبكه .. تحصلون أخذت 9 او اقل نقاط .. صحيح ؟
الحقيقه هي على كيفك .. بس أعتبر إن هذا هيدر
يعني لا ينزل كثير عن الحد ! ..
ملاحظه : في مجال انكم تشيليون المستطيل هذا بعد ماتصممون الحاجه اللي تبونهآ
يعني الهيدر ماهو مقيد بالمستطيل .. هو تصميم كأي تصميم ثاني لكن بدائياً لكم صمموا بالمستطيل ..
والهيدر تصميمه مثل اي تصميم توقيع خاص بس الفرق إن له قياسات معينه و له نقطة تمدد ..
نكمل ..
خلصنا من الهيدر ..
نبغى نتلاعب فيه شوي .. يعني نضيف عليه لمسات خفيفه ,
نضيف سسكرابز نعوم , او خامات ونغير المود تبعها ..
شوفوا انا هنآ اضفت خامه وغيرت مودها إلى ....multiply
[ بَتطبيقي غيرت لونهآ علشان يتناسق مع الخلفية ]
http://www.q8300.com/images/rvu0fd0ioavm5cwx7kcp.png
|
http://www.q8300.com/images/0jenhlorrp0giy4vzfh4.png
ثم اضفت سكرابز وتحكمت بحجمه على حسب ذوقي وغيرت موده إلى ...overlay
http://www.q8300.com/images/0yx7nkv2shznlrsxhj.png
ثم كتبت فيه اسم الملتقى
ثم غيرت لون الخط ولون التأثير وطلع كذا
http://www.q8300.com/images/tuybcyswsw7thsuvqd6.png
بكذا خلصنا تصميم الهيدر صح !
طيب تشوفوا معي وين نقطة التمدد ..
شوفوآ الصوره
http://www.q8300.com/images/j7loxuxp9z5q8zf1n57.png
هذي هي نقطة التمدد ماتحطون فيها شي
بس لون أو باترن علشان لما تتمدد معنا
ماتشوه الأستايل ..
طيب نبي نصمم زراير [ الرئيسية وَ التسجيل وَ لوحة التحكم و الخ ] وش نسوي !
نجي لعند الهيدر و نحط سكرابز او نرسم مستطيل ونلونه
يعني براحتكم .. انا استخدمت المستطيل وصغرته شوفوا ..
http://www.q8300.com/images/2poi235qz1qvm19n6g7.png
هذا مستطيلين فوق بعض , طيب نروح نكتب فوقهم اسماء الازرار , وَ انا حطيت سكرابز وفرش بسيطه تجميليه ..
http://www.q8300.com/images/zhrwpays785x13f4w1cn.png
حلو ! كذا إنتهينا من الهيدر ..
نجي لـ الفوتر ..
الفوتر هو عكس الهيدر .. أي أن الهيدر هو أعلى المنتدى
الفوتر هو أسفل المنتدى ..
ما يحتاج أقولكم أبدئوا و أشتغلوا من جديد .. لا
نبغى يكون تصميم الفوتر مشابه لتصميم الهيدر ..
و العمليه سهله جداً ..

على لير المستطيل .. كليك يمين ( نضغط الماوس باليمين ضغطه وحده ) و أختار دبل مثل الصورة هذي ..
http://www.q8300.com/images/9j9pd5ptrf9o30akptg.png
ثم اختار اداة التحريك
http://www.q8300.com/images/83l3c180bhjfht3vkv.png

الأن روح لمنطقة المستطيل اللي دبلناه و كليك يسار بالفاره ( نضغط الماوس باليسار ونسحبه ) و أسحبه لين تحت ..
تحصل إن الهيدر بقي مثل ما هو و الطبقه الثانيه نزلت لين تحت ..
حط فـ بالك شي واحد ..
إن الفوتر دايم مقاسه أقل من الهيدر يعني أنا أخذت 9 نقاط في الهيدر ..
راح آخذ أقل من الـ 9 نقاط بالفوتر و نقول مثلاً 4 نقاط
لاحظوا كيف ..
http://www.q8300.com/images/nd21lgdusxiawxe2cuja.png
مثل ما تشوفون إن مقاس الهيدر أكبر من مقاس الفوتر
لحد الحين تمام .. ؟

خلاص ماحنا بحاجه للشبكه نزيلها و مثل ما وضحت فوق طريقة إزالتها ..
راح يصبح معنا التصميم زي كذا ..
http://www.q8300.com/images/0yl688vjeowweigemc4.png

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

|

نجي ناخذ الخامه اللي حطيناها بالهيدر
نحطها بالفوتر مثل ماسويت انا
http://www.q8300.com/images/54n9sl641qppk56q10q.png
ثم ناخذ السكرابز ونغير اتجاهه كـ تغيير شكل
عن الهيدر ثم نكتب الحقوق كامله
http://www.q8300.com/images/d1obroaqb4hk1ymprtaw.png
طيب اللحين شوفوا معي
الجهة اليسرى فاضيه ليه !
انا خليتها فاضية علشانها بتكون نقطة تمدد
ونقطة التمدد لابد تكون فاضية مافيها لا سكرابز
ولا صور ولا خامات ..

http://www.q8300.com/images/n103ab8axze7e51dd0pc.png
http://www.q8300.com/images/nwxkjkm6yrka5btk1q1j.png
..
بكذا اكون خلصت الدرس ..
وهذي صورته كامله ..
http://www.q8300.com/images/zml2x2x0ic7w9yx604q.png

طبعا يكون باقي التأطير اللي هو بمكان جدولة الاقسام اللي بالوسط
بس هذا درس بلحاله مع تصميم الازارير
حقات الـ [ إضافة رد , موضوع جديد , موضوع قديم ] علشان ماتتلخبطون ..
و طبعاً اللي حاب يطبق ويرويني تصميمه
يتفضل , واللي عنده استفسار معين يتفضل ..
واي خطوة صعبه واجهها يجي يعلمني عليها
بكون متابعه لدرسي بحرص : ) , ..
واتمنى تكون التصاميم بأسم الملتقى .. <-- تراها نقطة مهمه وملزومة : )
حفاظا على الحقوق طبعاً ..
والملحقات اللي استخدمتها بالتصميم
رفعتها لكم علشان تساعدكم
باترن + سكرابز+ خامه + خط ..
( في شرحي مستخدمه الاصدار الثامن للفوتوشوب الداعم للغتين ’ أي حد مايتوفر عنده البرنامج يعلمني )

http://www.q8300.com/images/ng3foa590bo2482uabk6.png

http://www.mediafire.com/?qzaeutj47gg3kum

|

ملاحظه مهمه جداً جداً : بعد ماتصممون الاستايل
احفظوه بصيغة الـ psd
خلوه ملف مفتوح بَ العربي ..
علشان كل ماحصلتوا غلط تفتحونه وتصلحوا عليه ..
http://www.q8300.com/images/nwxkjkm6yrka5btk1q1j.png
- إن شاء الله يكون الدرس واضح
ويكون شرحي مفهوم وماهو بصعب ..

موفقين : )

الدرس حصري لَ ملتقى العيون , : ) ..

نقطة التمدد .

http://www.q8300.com/images/htm4d6u6ja6av9xrx7cr.png

تعريف عام لـ منطقة التمدد و معرفة اماكنهآ و تكوينهآ ~

|

نقطة التمدد نقطة مهمه جداً جداً في الاستايل
وتكون خالية من اي اضافات ليسهل على المصمم
في تركيبه وظهوره في صفحة النت ..
يعني هي مساحة في التصميم تتمدد لتأخذ عرض الشاشة
ومايشترط تكون بنفس المنطقه بالضبط اللي انا صممتها
لكن المهم إنكم تحددون منطقة خالية من أي اضافات
مِثآل :
لو كان الهيدر يمين --> تكون نقطة التمدد شمال ..
http://www.q8300.com/images/9zl8gla9k455n7ioxz.png

لو كان الهيدر شمال --> تكون نقطة التمدد يمين ..
http://www.q8300.com/images/ind5gr4d5fkc0gnevn.png

لو كان الهيدر وسط --> تكون نقطة التمدد باليمين والشمآل ..
http://www.q8300.com/images/ylzaqappnmuzjg40wwvs.png

لو كان بالتصميم هيدرين واحد يمين وواحد شمال --> تكون نقطة التمدد بالوسط ..
http://www.q8300.com/images/snij1mvp171bigf8zbcg.png

لو كان بالتصميم 3 هيدرات : هيدر يمين , هيدر وسط , هيدر شمال --> فبيكون للتصميم نقطتين تمدد ..
http://www.q8300.com/images/ullf578wicbgsh4azm2r.png

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

أتمنى فهمتوا وش هو معنى نقطة تمدد
ووين اماكنهآ
ولونتها لكم علشان تستوعبون أكثر :001: ..
ويَ ليت تعذروني على تصميمي البسيط
لاني اصممه بشكل رسمي , وبسرعه
الوقت ضيق عندي ..
وأنتظر تطبيقآتكم : )
موفقين ي رب :118:

إن شآء الله مشآركه :008::046:
ولي بآك بتطبيق الدرس , ويسسلمو على المجهود =)
وفآل جميع المتسآبقين وإلي بيشآركون معنآ الفوز
إن شآء الله ...
ومآ يخفي أهم شي بتصميم الآستآيل عشآن يضبط هي
نقآط التمدد ياليت الكل يتحرى الدقه بتعريف النقاط عشآن التصميم
يكون تمآم التمآم وهي سهله جداً جداً , بس تبقي تركيز شوي =)

الهنوف
تقيييم + :118:

..

صبآح الخير:001:

يعطيك العآإفيه , الهنوف ع الشرحَ :118:

هذآ تطبيقي للدرس و أعذريني ع السريع عملته /

تستطيع أن ترى الصورة بحجمها الطبيعي بعد الضغط عليها

آرعصو ع الصوهه :118:

يسعد صبآحك بآريسيه :118:

التصميم نعـوم مرآ وأهـم شي العمل مفتوح معك لآتحذفينه
وننتظـر الهنـوف تدخل وتشوف نقآط التمـدد بتصميمك
>> أنآ للحين مآخلصت أفكر بالهيدر ..:120:

..

اقتباس:

المشاركة الأصلية كتبت بواسطة °•ج ــمرة غ ـضى ـآ•° (المشاركة 629135)

هلآ يَ عين بييّ ,
أنتظر مشآركتكْ وَ تطبيقك البطلْ ..
ربي يوفقك مع كل المشتركين لآحقاً ..
وَ اعتذر جداً عَ التأخير في ردي ,
لضيق وقتي : (
موفقة

:118:

الله ينفع بك شرح وافي وسهل

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

اقتباس:

المشاركة الأصلية كتبت بواسطة ваяɪsɪн ▪ (المشاركة 629181)

صبآح الخير:001:

يعطيك العآإفيه , الهنوف ع الشرحَ :118:

هذآ تطبيقي للدرس و أعذريني ع السريع عملته /

آرعصو ع الصوهه :118:

صَبآحك سَعآدة منقطعة النظير , ..
يعافيك ربي يَ خية ., تطبيقك جداً مُمتآز ,
عرفتي وشلون تتركين نقاط التمدد , وعرفتي كيف تساويين
بين طول نقطة التمدد وطول الهيدر والفوتر ,
أهنيك يَ بطلة , واصصصلي ..:118:

اقتباس:

المشاركة الأصلية كتبت بواسطة °•ج ــمرة غ ـضى ـآ•° (المشاركة 629270)

لية الكسل : (
والله متشوقة كثير لتصاميمكم : (
وين لحن وقالوا علامك ونبوض ونشمية
وضحية وعزوف ولسعة وشوق ودمع
أنا كنت متوقعه احصل كذا تطبيق
بس أطلق وحده , باريسية :068: ,
ربي يوفقهآ معكم ..
,
أنتظرك إنتي والخوات يَ بطه

اقتباس:

المشاركة الأصلية كتبت بواسطة ваяɪsɪн ▪ (المشاركة 629181)

صبآح الخير:001:

يعطيك العآإفيه , الهنوف ع الشرحَ :118:

هذآ تطبيقي للدرس و أعذريني ع السريع عملته /

آرعصو ع الصوهه :118:

بعد أذن الاخت الهنوف ...:179:

هنا الزخرفة في نقطة التمدد اتوقع انها راح تتشوه اثناء التمدد