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

[الهنوف]

السلآم عليكم ورحمة الله وبركآتة , | بسم الله , نبدأ الدرس الأول : طريقه تصميم الهيدر والفوتر ترجع للمصمم نفسه .. طبعا كل مصمم وخياله وذوقة .. يحاول يبتكر طرق وأفكار مختلفة وإحترافيه لتصميمه .., في درسنا راح أسوي ستايل عَ السريع وَمرا خفيف .. فقط للشرح ! .. الدرس طويل لكن ممتع , وسهل .. نبدأ .. > نفتح الفوتوشوب .. نفتح عمل جديد .. نختار المقاسات مع إسم التصميم الآن فتح العمل أمامنا .. لوحة بيضاء فارغه .. طيب .. في خطوة قبل لنكمل الشغل .. و دايم يستخدمونها مصممين الإستايلات .. اللي هي : عمل الشبكه على التصميم .. طريقة عمل الشبكه مثل ماهو واضح بالصورة .. من الخيارات بالأعلى إختار .. مجرد ماتحط علامة الصح على كلمة grid راح تلاحظ إن تصميمك تحول على هيئه شبكه .. و إذا تبغى تلغي الشبكه ألغيها بإزالة الصح .. طيب . الحين نبداء بمرحله أوليه .. اللي هي إختيار لون الإستايل يعني لون خلفية الاستايل .. يجي لون ويجي باترن .. وبشرح لكم الطريقتين .. طريقة اللون : من صندوق الأدوات اللي على يسار الفوتوشوب .. إختار أداة [السطل] و صورتها زي كذا : بعدها إختار لك لون على ذوقك .. اي لون مو مهم و نقره وحده على التصميم راح يتلون لك التصميم على اللون اللي أنت أخترته .. طريقة الباترن : من صندوق الليرات نجي للي محددته بالأزرق وتضغطونه ثم نختار خيار الباترن , اللي هو بالعربي ( حشو ) ونختار الباترن اللي نبيه وافضل لو يكون باترن ناعم جداً له زخرفة خفيفه وناعمه .. نجي اللحين للنقطه المهمه اللي هي تصميم الهيدر .. الهيدر هو أعلى المنتدى مثل ماقلنا قبل شوي .. ! طيب نبغى نصمم هيدر خفيف و مو صعب على الجميع .. يعني أي شخص يقدر يتقنه .. من الأدوات على اليسار نختار أداة الشكل المستطيل و هذي صورتها .. أكيد راح يكون لون الهيدر مختلف إختلاف بسيط عن لون الخلفيه اللي قبل شوي سويناه .. بعد إختيارك للأداه .. أختر أداة الألوان و أختار لك لون مشابة للون اللي قبل شوي .. و مو مشكله لو كان لون ثاني .. أهم شي يكون فيه تناسق مع اللون اللي قبله .. اوك ؟ طيب نرسم مستطيل أعلى التصميم .. مثل الصورة هذي .. لو تلاحظون لنقاط الشبكه .. تحصلون أخذت 9 او اقل نقاط .. صحيح ؟ الحقيقه هي على كيفك .. بس أعتبر إن هذا هيدر يعني لا ينزل كثير عن الحد ! .. ملاحظه : في مجال انكم تشيليون المستطيل هذا بعد ماتصممون الحاجه اللي تبونهآ يعني الهيدر ماهو مقيد بالمستطيل .. هو تصميم كأي تصميم ثاني لكن بدائياً لكم صمموا بالمستطيل .. والهيدر تصميمه مثل اي تصميم توقيع خاص بس الفرق إن له قياسات معينه و له نقطة تمدد .. نكمل .. خلصنا من الهيدر .. نبغى نتلاعب فيه شوي .. يعني نضيف عليه لمسات خفيفه , نضيف سسكرابز نعوم , او خامات ونغير المود تبعها .. شوفوا انا هنآ اضفت خامه وغيرت مودها إلى ....multiply [ بَتطبيقي غيرت لونهآ علشان يتناسق مع الخلفية ] | ثم اضفت سكرابز وتحكمت بحجمه على حسب ذوقي وغيرت موده إلى ...overlay ثم كتبت فيه اسم الملتقى ثم غيرت لون الخط ولون التأثير وطلع كذا بكذا خلصنا تصميم الهيدر صح ! طيب تشوفوا معي وين نقطة التمدد .. شوفوآ الصوره هذي هي نقطة التمدد ماتحطون فيها شي بس لون أو باترن علشان لما تتمدد معنا ماتشوه الأستايل .. طيب نبي نصمم زراير [ الرئيسية وَ التسجيل وَ لوحة التحكم و الخ ] وش نسوي ! نجي لعند الهيدر و نحط سكرابز او نرسم مستطيل ونلونه يعني براحتكم .. انا استخدمت المستطيل وصغرته شوفوا .. هذا مستطيلين فوق بعض , طيب نروح نكتب فوقهم اسماء الازرار , وَ انا حطيت سكرابز وفرش بسيطه تجميليه .. حلو ! كذا إنتهينا من الهيدر .. نجي لـ الفوتر .. الفوتر هو عكس الهيدر .. أي أن الهيدر هو أعلى المنتدى الفوتر هو أسفل المنتدى .. ما يحتاج أقولكم أبدئوا و أشتغلوا من جديد .. لا نبغى يكون تصميم الفوتر مشابه لتصميم الهيدر .. و العمليه سهله جداً .. على لير المستطيل .. كليك يمين ( نضغط الماوس باليمين ضغطه وحده ) و أختار دبل مثل الصورة هذي .. ثم اختار اداة التحريك الأن روح لمنطقة المستطيل اللي دبلناه و كليك يسار بالفاره ( نضغط الماوس باليسار ونسحبه ) و أسحبه لين تحت .. تحصل إن الهيدر بقي مثل ما هو و الطبقه الثانيه نزلت لين تحت .. حط فـ بالك شي واحد .. إن الفوتر دايم مقاسه أقل من الهيدر يعني أنا أخذت 9 نقاط في الهيدر .. راح آخذ أقل من الـ 9 نقاط بالفوتر و نقول مثلاً 4 نقاط لاحظوا كيف .. مثل ما تشوفون إن مقاس الهيدر أكبر من مقاس الفوتر لحد الحين تمام .. ؟ خلاص ماحنا بحاجه للشبكه نزيلها و مثل ما وضحت فوق طريقة إزالتها .. راح يصبح معنا التصميم زي كذا .. طيب اللحين نصمم مثل ماصممنا بالهيدر بس بحجم أصغر وبنعومة اكثر .. انا عن نفسي ماحب اصمم شي بالفوتر بس احط الحقوق بشكل ناعم والسلام بس علشان تتعلمون لابد تصممون للفوتر : ) .. خآرج النص : لأن بعض الاستايلات ضروري يكون بالفوتر تصميم مثل : الاستايل القبلي : ) نكمل .. | نجي ناخذ الخامه اللي حطيناها بالهيدر نحطها بالفوتر مثل ماسويت انا ثم ناخذ السكرابز ونغير اتجاهه كـ تغيير شكل عن الهيدر ثم نكتب الحقوق كامله طيب اللحين شوفوا معي الجهة اليسرى فاضيه ليه ! انا خليتها فاضية علشانها بتكون نقطة تمدد ونقطة التمدد لابد تكون فاضية مافيها لا سكرابز ولا صور ولا خامات .. .. بكذا اكون خلصت الدرس .. وهذي صورته كامله .. طبعا يكون باقي التأطير اللي هو بمكان جدولة الاقسام اللي بالوسط بس هذا درس بلحاله مع تصميم الازارير حقات الـ [ إضافة رد , موضوع جديد , موضوع قديم ] علشان ماتتلخبطون .. و طبعاً اللي حاب يطبق ويرويني تصميمه يتفضل , واللي عنده استفسار معين يتفضل .. واي خطوة صعبه واجهها يجي يعلمني عليها بكون متابعه لدرسي بحرص : ) , .. واتمنى تكون التصاميم بأسم الملتقى .. <-- تراها نقطة مهمه وملزومة : ) حفاظا على الحقوق طبعاً .. والملحقات اللي استخدمتها بالتصميم رفعتها لكم علشان تساعدكم باترن + سكرابز+ خامه + خط .. ( في شرحي مستخدمه الاصدار الثامن للفوتوشوب الداعم للغتين ’ أي حد مايتوفر عنده البرنامج يعلمني ) http://www.mediafire.com/?qzaeutj47gg3kum | ملاحظه مهمه جداً جداً : بعد ماتصممون الاستايل احفظوه بصيغة الـ psd خلوه ملف مفتوح بَ العربي .. علشان كل ماحصلتوا غلط تفتحونه وتصلحوا عليه .. - إن شاء الله يكون الدرس واضح ويكون شرحي مفهوم وماهو بصعب .. موفقين : ) الدرس حصري لَ ملتقى العيون , : ) ..

[الهنوف]

تعريف عام لـ منطقة التمدد و معرفة اماكنهآ و تكوينهآ ~ | نقطة التمدد نقطة مهمه جداً جداً في الاستايل وتكون خالية من اي اضافات ليسهل على المصمم في تركيبه وظهوره في صفحة النت .. يعني هي مساحة في التصميم تتمدد لتأخذ عرض الشاشة ومايشترط تكون بنفس المنطقه بالضبط اللي انا صممتها لكن المهم إنكم تحددون منطقة خالية من أي اضافات مِثآل : لو كان الهيدر يمين --> تكون نقطة التمدد شمال .. لو كان الهيدر شمال --> تكون نقطة التمدد يمين .. لو كان الهيدر وسط --> تكون نقطة التمدد باليمين والشمآل .. لو كان بالتصميم هيدرين واحد يمين وواحد شمال --> تكون نقطة التمدد بالوسط .. لو كان بالتصميم 3 هيدرات : هيدر يمين , هيدر وسط , هيدر شمال --> فبيكون للتصميم نقطتين تمدد .. لأن الهيدر اذا صار فيه 3 صور وله نقطة تمدد واحده فبيكون تمدده من جهة وحده فلابد نضيف نقطة تمدد بين هيدر شمال وهيدر وسط وهيدر يمين ولاتنسوا نقطة التمدد لابد تكون خالية من اي اضافات .. ودايم تذكروا قانون اخذناه بالفيزياء ينطبق ع اللي قلته <-- أخذناه بثانوي .. كل قوتين متساويتين في الأتجاه محصلتهم تكون صفر .. يعني نقطة التمدد اللي ع الشمال راح تعاكس اتجاه نقطة التمدد اللي ع اليمين وبعدها يضبط التصميم .. أتمنى فهمتوا وش هو معنى نقطة تمدد ووين اماكنهآ ولونتها لكم علشان تستوعبون أكثر .. ويَ ليت تعذروني على تصميمي البسيط لاني اصممه بشكل رسمي , وبسرعه الوقت ضيق عندي .. وأنتظر تطبيقآتكم : ) موفقين ي رب

[Gamrat Gaza]

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

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

..

[ваяɪsɪн ▪]

صبآح الخير

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

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












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

[Gamrat Gaza]

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

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

..

[الهنوف]

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

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

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

..

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

[J e n a n]

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

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

[الهنوف]

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

صبآح الخير

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

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












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

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

[الهنوف]

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

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

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

..

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

[J e n a n]

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

صبآح الخير

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

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












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

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

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