دروس تصميم واجهة بسيطة و تقطيعها

[awtil.com]

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

بسم الله نبدا ونفتح عمل جديد بمقاس 600*600
ننشئ لاير جديد ومن قائمة الادوات نختار اداة التدرج GRADIENT TOOLS
ليس مهم اللون لاننا سنغير بالاعدادات بما يناسب
كليك بالزر الايمن للفأرة على اللير ونختار خصائص BLENDING OPTIONS
التغيير الوحيد الدي يهمنا هو ال GRADIENT OVARLYنطبق التاتير التالى


لتغير القيم فقط كليك على الزر وضع القيمة المحددة بالصورة تم كليك على OK
الان سنحتاج الى اداة المسطرة و اهميتها كتيرة منها اننا هنا سنقسم مجال العمل حسب مكونات صفحتنا
متلا منطة للهيدر تم منطقة جسم الصفحة و اخيرا الفوتر
لاظهار المسطرة ابسط طريقة هي من لوحة المفاتيح كليك على CTRL+R
نقوم بسحب سطور من المسطرة لتحديد مكان كل جزء من تصميمنا كما تبين الصورة

منطقة الهيدر كما دكرت باحد المواضيع يكون فيه اسم الموقع و الشعار
منطقة جسم الموقع وهي اهم منطقة لان بها محتويات الموقع من روابط واشعار وغيرهما
اما منطقة الفوتر فبها يوجد حقوق المصمم وتاريخ الموقع وممكن اعلانات
الان نقوم بجلب الصورة التى نريدها ان تكون خلفية بوسط التصميم
يمكنكم مراجعة البوم الصور كما دكرة بموضوع المقدمة كدلك الايقونات متوفرة
اختر ما تشاء الان نفتح صورتنا من خلال الضغظ على CTRL+O
نحدد مكان الصور تم نفتحها ويجب ان تكون اداة ال MOVE TOOL هي المحددة
نقوم بجر الصورة الى وسط تصميمنا ليس مهما ان كانت كبيرة
اغلق الصورة ان اردت فقط انتهي دورها بمجرد وضعها بوسط التصميم
كليك على زر CTRL+T لتغيير حجمها ووضعها بوسط التصميم كما تبين الصورة التالية
نضعها داخل الاطار الاوسط كما تبين الصورة

طبعا الصورة الافضل نعمل عليها تاتير واقترح عليكم طريقتين
الاولى اما من خلال لوحة المفاتيح كليك على CTRL+U
لتغير من خصائص اللون للوصول الى خلفية جميلة
او من خلال التاتير التالى كليك على الصورة من خلال قائمة اللير واختر BENDING OPTIONS
تم نطبق خاصية ال STROK وخاصية PATTERN OVERLY

and

بخصوص خاصية الباترن يوجد موضوع شرحة فيه كيفية عمل الباترن وايضا عمل اشكال عديدة
لمن يريد عمل نفس التاتير يرجع الى درس عمل الباترن فانه سهل للغاية
مازلنا نشتغل في منطقة جسم التصميم والتاتير التالى هو عمل قائمة بها روابط لصفحاتنا
ايضا هنا اقترح عليكم اما عمل ازرار وبها اسم لكل رابط او اتباع الطريقة التالية
من قائمة الادوات نختار اداة ROUNDID RECTANGAL TOOL
وننشء قائمة بيمين الصورة ليس مهما اي لون لاننا سنطبق التاتير التالى

and






لنصح الى النتيجة التالية

نطبق تاتير اخير لاعطاء جمالية لقائمتنا بتغير ال OPACITY الى 25
لنحصل على التاتير التالى

بهدا نكون انهينا 50 بالمائة من عمل منطقة جسم تصميمنا
الان كل ما علينا هو جلب الايقونات و كتابة اسم الروابط مع تطبيق خطورة بسيطة وهي كالتالى
انشئ لاير جديد ومن قائمة الادواة اختر اداة القلمPENCIL TOOL
تم قم برسم خط افقي فوق منطقة قائمة الروابط ولجعل الخط مستقيم ضع اصبعك على زر CTRL
تم ابدا الرسم لتجد ان اتجاه الخط سيكون مستقيم ولا يوجد به اي ميلان
كرر الامر حسب عدد الروابط التى ستستخدمها لنصل الى النتيجة التالية كما تبين الصورة

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

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

اتمنى الشرح يكون واضح واي سؤال لا تترددوا
والله الموفق