[الـــنـــايـــف]

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


واقوم بعمل الاعدادت التاليه على هذا الخط ..




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


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


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

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

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


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


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


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


ليصبح معنا المربع نفسه بالشكل التالي :


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



الآن لكي نمنح مربع الشات وروابطه بعض الجماليات نقوم برسم دائرهـ صغيرهـ على الطرف ..




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




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



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



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


ملاحظة (اللون الذي استخدمناه في خاصية stroke او الحد هو اللون المغاير للون الذي رسمنا به المربع) ..
الآن نعود للمربع الذي رسمناه ونقوم برسم مربع (بلون مغاير) داخله ..


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


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


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



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



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




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



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


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


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


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

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