ملتقى مدينة العيون

ملتقى مدينة العيون (http://www.aloyun.com/vb/index.php)
-   ♣ التقنية والكمبيوتر/ Technical and computer ~ (http://www.aloyun.com/vb/forumdisplay.php?f=13)
-   -   الدرس الأول : ’ لَ تصميم ستايل متمدد , + مقدمة لنقطة التمدد . (http://www.aloyun.com/vb/showthread.php?t=61005)

الهنوف 10-25-2011 09:47 PM

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



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
- إن شاء الله يكون الدرس واضح
ويكون شرحي مفهوم وماهو بصعب ..

موفقين : )


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



الهنوف 10-25-2011 09:51 PM

نقطة التمدد .
 




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:





Gamrat Gaza 10-25-2011 11:21 PM




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

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

..

ваяɪsɪн ▪ 10-26-2011 06:33 AM

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

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

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










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

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

Gamrat Gaza 10-27-2011 03:29 AM

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

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

..

الهنوف 10-27-2011 05:37 AM

اقتباس:

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


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

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

..

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

:118:

J e n a n 10-27-2011 05:39 AM


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

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

الهنوف 10-27-2011 05:42 AM

اقتباس:

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

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

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










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

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


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

الهنوف 10-27-2011 05:46 AM

اقتباس:

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

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

..

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

J e n a n 10-27-2011 05:49 AM

اقتباس:

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

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

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










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

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



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

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



الهنوف 10-27-2011 05:50 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة جـنـان (المشاركة 629277)

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

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

اللهم آمين ي رب ,
لا يَ خية مايشترط تشاركي , ماهو إجباري
بس نتشوق نشوف تطبيقك معنآ ..
الدروس هذي تمهيديه للي مايعرف
علشان لو أعلنت عن ابتداء المسابقة
يكون الكل عنده الخبره الكافية ..
بس برضوآ , متشوقة اشوف تطبيقك
كون لك خلفية وخبرة بالموضوع
طبقي حاجات خفيفه , بس ترى ماهو شرط اساسي ..
موفقة جنآن : )

الهنوف 10-27-2011 05:53 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة جـنـان (المشاركة 629280)
بعد أذن الاخت الهنوف ...:179:

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



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

J e n a n 10-27-2011 06:02 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة الهنوف (المشاركة 629282)
يَ هلا أختي ,
بعد توزيعهآ بالاكسبريشن ويب ماتتشوه ,
لاني احط لها طول معين , والزخرفه هنا باترن متكرر
وقد جربتها في استايلاتي السابقة ..
انتي توزيعك بالفورنت !

ايوا بالفورنت وماقط جربت بالاكسبرشن او الدريم ويفر

وشكرا عالمعلومة الحلوه الله يعطيك العافية



الهنوف 10-27-2011 06:07 AM

|
ربي يوفقك آختي , : )
أنتظر تطبيقك إن حبيتي ..
موفقة دايم .

Gamrat Gaza 10-27-2011 02:13 PM

مدري أش فيني مومركزه =(
شوفي نقآط التمدد مضبوطه ولآ .؟
و قيييد التغيير الشكل بغير كثير فيه يمكن .!
>> الآلوان الباترونات قريبه من بعض عندي
طفشت من الرصاصي ,:170:



http://www.pp11.com/upfiles/0vn13568.png

والمخطوطه شكلي بشيلهآ إلي ب اسم الملتقى
نقدك + تصحيحك :)


الساعة الآن 07:33 AM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.

new notificatio by 9adq_ala7sas
ملتقى مدينة العيون

Security team