دورة لتصميم واجهات المواقع (باحتراف) ..::+::.. الجزء الثالـ أ ـث ..::+::..

بسم الله الرحمن الرحيم ..
الحمد لله وحده والصلاة والسلام على من لانبي بعدهـ .. (وبعد) :
تعلمنا في الجزء الأول من دورة تصميم واجهة interface المواقع بإحتراف كيفية عمل الخلفيات بشكل مقبول ومميز ..
كما تعلمنا في الجزء الثاني .. كيفية رسم البنرات (الهيدر header والفوتر) بشكل احترافي ومقبول ..
الآن وفي الجزء الثالث سنتعلم كيفية تزيين منطقة منتصف التصميم (مابين الهيدر header والفوتر) ..
طبعاً سنحتاج الى اطارات جانبيه للتصميم .. وسنحتاج ايضاً لمساحات اعلانية .. وكذلك الروابط .. ومدخل الشات اضافة للروابط الخاصه بالشات ..
العمل هنا سيكون طويلاً جداً وسيحتاج منا الى تعب وتركيز .. وفي النهاية من سيطبق أكثر سيتعلم ويستفيد أكثر ..
لأن التصميم يتطور بالممارسه ولا شيء غير الممارسة ..
هذا الجزء الثالث سيحتوي على عدة دروس .. ولن يكون بمقدورنا شرح طريقةها مرة واحدهـ ..
كذلك فإن تجزيء شرح طريقةها سيعطي المتعلم فرصة أكبر للتعلم والتطبيق بدون ان تتراكم عليه المعلومات والدروس ..
لذلك فإن الجزء الثالث سيحتوي على 3 أجزاء : أ- درس مفصل تصميم مدخل الشات وروابطه اضافة الى الاطارات .
ب- درس مفصل تصميم المساحات الاعلانية .
ج- درس مفصل تصميم روابط التصميم .
الآن سنبدأ بالدرس مفصل أ من الجزء الثالث ..
بسم الله ..
طبعاً نفتح العمل اللي سوينا له خلفية مميزهـ وايضاً بنرات جميله ..
نبدأ برسم اطار جانبي للتصميم .. وهذي مسألة بسيطة ولها أكثر من فكره ..
مثلاً انا قمت بفتح عمل جديد بنفس طول العمل اللي انا اشتغل عليه (800)
وبأداة المربع (التي رسمت بها البنرات في الجزء الثاني) اقوم برسم خط (يكون عرضه قليل جداً لأنه بيكون اطار) ..
كما في الشكل ..(نلاحظ ان هذا الخط يكون في ليره مستقله)
http://www.l22l.com/l22l-up-1/01b3ac9dbd.jpg

واقوم بعمل الاعدادت التاليه على هذا المستقيم ..
http://www.l22l.com/l22l-up-1/2304dab7b6.jpg

الآن ومن خلال هذه الاداهـ http://www.l22l.com/l22l-up-1/0941304e69.jpg .. اقوم بسحب الخط الذي رسمته وانزاله على العمل الاصلي للتصميم ..
ونقوم بوضعه على اقصى يمين العمل ليكون اطار جانبي ايمن ..
قد يكون الاطار يظهر فوق البنر والفوتر .. لأنه اخذ اول طبقة عندما انزلناه على التصميم فنقوم إذن بالضغط على طبقة الاطار وانزاله الى اسفل طبقتي الهيدر header والفوتر ليظهر معنا بالشكل التآلي :
http://www.l22l.com/l22l-up-1/1434e55855.jpg

الآن ولكي نقوم بنقل نفس الاطار للجهه اليسرى ..
نذهب الى طبقة الاطار ونضغط عليها (كليك يمين) ونختار من القائمه الخيار الثالث duplicate layer
ويعني تكرار او تدبيل الطبقة ..
الآن اصبحت طبقة الاطار عباره عن طبقتين كل ما علينا هو الضغط على احداهما بأداة التحريك http://www.l22l.com/l22l-up-1/0941304e69.jpg وثم الذهاب بها الى اقصى اليسار لتشكل لنا اطاراً ايسراً جميلاً ..
http://www.l22l.com/l22l-up-1/f3255e03ed.jpg

بهذا نكون انتهينا من تكوين اطارات للتصميم ..

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

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

http://www.l22l.com/l22l-up-1/3be5576fa4.jpg




ولكي نمنح هذا المربع شكل اكثر جاذبيه نستخدم اداة الباث ونعطيه شكلاً عشوائياً جميلاً ..(تعلمنا اكثر من مرهـ استخدام اداة الباث) ..
وبعد اختيار الاداهـ نقوم بتوزيع نقاط على هذا المربع ..
انا بالمثال سأقوم بتوزيع النقاط كالتالي :

http://www.l22l.com/l22l-up-1/dfafc027ba.jpg

وبنفس طريقة (تحريك النقاط التي تعلمناها سابقاً سأحرك هذه النقاط حتى يصبح معي الشكل كالتالي) :

http://www.l22l.com/l22l-up-1/e45473444c.jpg

(نلاحظ انني قمت بإضافة ثلاث نقاط بأداة الباث في أعلى المربع لأني رأيت انها ستكون اكثر جمالاً) ..

الآن وبعد ان وصلنا لشكل المربع النهائي نمنحه الاعدادات التالية :

http://www.l22l.com/l22l-up-1/bd7ec0f9c3.jpg

ليصبح معنا المربع نفسه بالشكل التالي :
http://www.l22l.com/l22l-up-1/511cc1f1f1.jpg

الآن نقوم برسم مربع منحني الجوانب بوسط هذا المربع (نراعي تغيير اللون حتى يظهر لنا هذا المربع) ..

http://www.l22l.com/l22l-up-1/35088492ff.jpg

الآن لكي نمنح مربع الشات وروابطه بعض الجماليات نقوم برسم دائرهـ صغيرهـ على الطرف ..
http://www.l22l.com/l22l-up-1/3281792da1.jpg

ونعطيها الاعدادات التالية لكي تصبح لماعه وجذابه :

http://www.l22l.com/l22l-up-1/411a6ae4a9.jpg

والآن نقوم بتكرار طبقة الدائرهـ (كما تعلمنا سابقاً) الى اربع طبقات ونوزعها على اطراف مربع الشات
ليظهر معنا الشكل كالتالي :

http://www.l22l.com/l22l-up-1/39eb698c9a.jpg

الآن نستطيع ان نقول اننا وصلنا الى شكل ملائم .. رغم انني لم اكثر من تزيينه حتى لا اطيل في الشرح طريقة ..
فالهدف ليس اظهار امكانياتي في التصميم بقدر ماهو ايصال الفكره والفائدهـ لكم ..
الآن بطريقة ما نريد ان نضيف روابط الشات الى هذا المربع بشرط ان تكون الفكرهـ جميله ..!
فنقوم مثلاً برسم مربع على احد اطراف (مربع الشات) ..

http://www.l22l.com/l22l-up-1/f0a249926d.jpg

ولكي يظهر المربع كاملاً على كافة اجزاء الخلفية بتدرجاتها اللونيه نقوم بـمنحه خاصية (stroke)

http://www.l22l.com/l22l-up-1/c5bbe65f1b.jpg

ملاحظة (اللون الذي استخدمناه في خاصية stroke او الحد هو اللون المغاير للون الذي رسمنا به المربع) ..
الآن نعود للمربع الذي رسمناه ونقوم برسم مربع (بلون مغاير) داخله ..
http://www.l22l.com/l22l-up-1/b523424a2a.jpg

ونمنح هذا المربع الجديد المزايا التاليه :

http://www.l22l.com/l22l-up-1/4b3e38162f.jpg

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

http://www.l22l.com/l22l-up-1/1166b08bf8.jpg

ومن ثم سأذهب لطبقة المربع الآخر وسأقوم بالضغط على مكان (الفرشاه في المربع الاول) وسيظهر لنا شكل (سلسله) ..

http://www.l22l.com/l22l-up-1/e745fd48d5.jpg

الآن اقوم بالضغط على ( ctrl+e) فنجد ان الطبقتين قد دمجتا في طبقة واحدهـ ..!!
للفائدهـ : ctrl+E اختصار لدمج الطبقات ..
الآن وبعد ان اصبح المربعين السابقين طبقه واحده نقوم بتكرارها (كما تعلمنا سابقاً) الى اربع طبقات ..
فنقوم بإنزال الطبقة الاولى الى اسفل المربع على اليمين ويصبح معنا كما بالشكل :

http://www.l22l.com/l22l-up-1/975e978302.jpg

ثم نذهب الآن للطبقة الثالثه والرابعه ..
وقبل ان نقوم بتحريكهم نحتاج الى ان يكونوا بنفس شكل الروابط التي على يمين مربع الشات ..
فنقوم اولاً بعكس اتجاههم عن طريق الذهاب الى edit ثم transform ثم flip horizontal فنجد ان المربعين قد اخذا شكلاً معكوساً نظراً بشكلهم السابق واصبح بإمكاننا وضعهما في اليسار ليتطابقا مع مربعات الروابط في اليمين ..
كما في الصورهـ ..

http://www.l22l.com/l22l-up-1/0d4a6ff4cf.jpg

الآن اصبح مربع الشات بشكله النهائي كالتالي

http://www.l22l.com/l22l-up-1/b37ba33cc4.jpg

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


http://www.l22l.com/l22l-up-1/1faaf18087.jpg

الآن نقوم بإختيار الخط واللون المناسبين لكي نكتب على الروابط ..

http://www.l22l.com/l22l-up-1/ef3568e957.jpg

ويصبح معنا الشكل في النهاية كالتالي :

http://www.l22l.com/l22l-up-1/6ed69c66e7.png

(كلمة دخول المراقبين سيتم تحريكها فيما بعد بالايميج ريدي) ..

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



https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©