درس تصميم واجهة موقع احترافية جداً

السلام عليكم


-

نقوم بعرض الواجهه النهائية التي سنصممها



نبداء بالجزء الأول وهو تصميم .. الخلفيه مع البنر .. وهو الجزء الاصعب
بالموقع والأهم .. لذالك خصصنا له الجزء الاول كاملا .. وبعده نكمل

الموقع بالجزء الثاني كاملا ..

,,,,,,,,,,,,,,,,,,,,,,,,



افتح برنامج الفوتوشوب بالضغط مرتين على ايقونة البرنامج ( دبل كليك )



نختار من ملف .... جديد .




نضبط المقاسات كما تلاحظ 770 - 800 بكسيل



نختار لونين متناسقين واحد ثقيل والاخر خفيف ... ونقوم بتلوين الخلفيه باللون الخفيف كما تلاحظ



الان نرسم بالدائره ( اذا لم تكن واضحه الدائره عندك اضغط الزر الايمن على
المربع وخترها من القائمه ) نرسم 3 دوائر ويكون شكلها كما تلاحظ بالصوره

اثنتين بشكل طولي والاخرى كبيره بالنص



الان نحول الدوائر جميعا لنتمكن من التعامل معها بشكل افضل ... تابع الصوره لتحويل الدوائر الى اشكال عاديه



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

والتعبئه




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

بالصوره ونذهب للخيار الاخير .



نعمل كما تلاحظ بالصوره وهذا لأعطاء الدائره تحديد على اطرافها



الان نرسم دائرتين بالاعلى كما تلاحظ



ونعدل على الدوائر لنعطيها شكل افضل



نبداء بضبط الاعدادات كما تلاحظ بالصور التاليه









وهذا التعديل الاخير ولاكن انتبه عند الانتهاء من ضبط الاعدادات نضغط على
الزر المحدد باللون الأحمر . نيو ستايل . لنحفظ التعديلات ونطبقها بكل
سهوله على

اي شكل اخر ... بعد الحفظ اضغط اوكي ..




الان نطبق الاعدادات على الدائره الثانيه نفس الاولى .. وهذا بالذهاب الى
قائمة الستايلات او الانماط .. وختيار اخر نمط . وهو الذي قمنا بحفظة قبل
قليل

. ومن لم تظهر له هذه الانماط يذهب الى .. قائمة وندوز او نوافذ .. ثم
يختار ستايل او نمط ....... بعد تعديل الدوائر . نرسم مستطيل فوقها


ونعطيه الاعدادات نفس مافعلنا بالدوائر .. ونقوم بتعبئتة بالباترن كما تعلمنا قبل قليل ... ينتج هذا الشكل



الان نريد ان نرسم اشكال على الاطراف للبنر ... نختار الشكل من قائمة
الادوات ونحدد الشكل الذي نريد كما تلاحظ بالصوره وهو محدد باللون الاحمر

ومن لم تظهر هذه الاشكال عنده يضغط على الزر الصغير بأقصى اليمين .. وهو
محدد باللون الازرق بالصوره التاليه .. تظهر قائمه . اختر كلمة all

او الكل




نرسم بالشكل المحدد اثنين ونوزعها على اليمين واليسار بشكل منسق ونعطيها
اعدادات مثل الدوائر السابقه من قائمة ستايل التي حفظنا الاعدادات بها كما
تلاحظ

بالصوره



والان نختار شكل جديد وليكن الموجود بالصوره التاليه



نرسم ورقه يمين وننسخها او نرسم اخرى يسار ونعطيها ستايل نفس ستايل الاشكال
الاخر .. وتلاحظ تكرار الاعدادات او الستايل على الكل وهذا لتنسيق الموقع

بشكل احترافي .. الان نريد ان نضبط الشكلين بحيث يظهر الثاني عكس الاول
وهذا لتنسيق الشكل بين اليمين واليسار للموقع .. نقوم اولا بتحديد الشكل

المطلوب تابع الصور التاليه



ثم نعكسها باأتباع الصوره التاليه



ينتج هذا الشكل الى الان ..



نرسم دائره متناسقه بالنص ونعطيها نفس ستايل الاشكال الاخرى .



الانر نريد ان نجعل للدائره التي بالنص خلفية ولتكن صوره .. نذهب الى ملف ... فتح .



نختار الصوره ونضغط فتح



الان نجعل الصوره فوق الدائره .. وندمجها .. باتباع الصوره التاليه .




بعد الدمج نريد تعديل الوان الصوره لتتناسق مع الموقع .. تابع الصوره لتعديل الألوان



تظهر نافذه التعديل .. اول شي نأشر بعلامة صح على المربعات الموضحه تحت .. ثم نسحب الموشر ليعطينا اللون المطلوب للصوره



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



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



تظهر نافذه تحذيريه .. اضغط اوكي



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

مره اخرى اضغط على الزر المحدد باللون الاحمر للتعديل .. بعد ضبط الخط اضغط اوكي



الان نكرر الخط ونعمل الشكل المطلوب مع الدائره الصغيره التي رسمناها .. ونكرر هذا الشكل لتوزيعه على البنر كما تريد ..

ينتج عندنا هذا البنر بشكل احترافي مع الخلفيه ........



ويبقي الجزء الثاني وهو اضافة البنر السفلي .. الفوتر .. والقوائم والعشر مواضيع او الاهداءات ومربع الشات ... وننهي درسنا ..

اتمنى التطبيق لتعم الفائده ...

مع خالص تمنياتي للجميع بالتوفيق
ــــــــــــــــــــــــــــــــــــــــــــــــــ
ــــــــــــــــــــــــــــــــــــــــــــــــــ
ــــــــــــــــــــــــــــــــــــــــــــــــــ
ــــــــــــــــــــــــ

بسم الله الرحمن الرحيم

( اللهم لاعلم لنا الأ ماعلمتنا )


بعد ان اجتزنا الجزء الاول من تصميم الواجهه الاحترافيه .. وكان الدرس عن
تصميم البنر والخلفيه ... نبداء الان بالجزء الثاني وهو الاخير لتصميم
الواجهه ولكن ليس الدرس الاخير بالسلسله ...

فبقي علينا بعد تصميم الواجهه تقطيعها وطريقة رفعها على الانترنت وادراج
الروابط والجماليات مثل الاهداءات واخر 10 مواضيع وخلافه وايضا طريقة تركيب
الشات وضبط اعداداته ... فالطريق مازال طويلاً ومن يريد ان يتعلم كل شي
ماعليه الا ان يتابع وان شاء الله تتوضح كل الامور للجميع


درس اليوم هو انهاء الواجهه الرئيسية وسيكون الدرس على الفوتر ثم مربع العشر مواضيع ومربع الاعلانات والشات والقوائم

على بركة الله نبداء ....

نفتح عملنا السابق ونرسم مربع اسفل الواجهه وهو الفوتر على شكل مستطيل منحنى الاطراف



ندرج صوره ونجعلها فوق الفوتر ونضغط الاختصار CTRL+G من لوحة المفاتيح ليتم
دمج الصوره مع الفوتر وهي حركه تجميليه للفوتر وتستطيع ان تستغني عنها



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



بعد رسم المربع نضبط اعداداته او شكل كما عملنا سابقا بالبنر .. ونوزع الشكل على الفوتر يمين ويسار بحيث يتناسب مع بعضه



نرسم دائره بالنص ونكتب مانريد داخلها من حفظ حقوق وخلافه ... والى هنا ننتهي من الفوتر





الان بعد الانتهاء من الفوتر نصمم مربع الاخر 10 مواضيع وهو شكل تجميلي للواجهه ... بالبداية نرسم مستطيل باطراف منحنيه كما تلاحظ



نكرر المستطيل او نرسم واحد اخر ولكن بشكل اصغر بكثير ونضعه فوق الاول ونكتب مثلا اخر 10 مواضيع بالشكل التالي



الان انتهينا من اخر 10 مواضيع .. نبداء بتصميم المساحات الأعلانيه وانا
اعتبرها من الأساسيات بالموقع .. فهي التي تحقق شهره للموقع بالتبادل
الاعلانيه وغيره

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



نرسم مربع اخر بنفس الشكل ولاكن اصغر منه قليلا ونضعه فوق الاول



الان ندرج صوره تجميليه ونضغط كما فعلنا سابقا CTRL+G لدمجها مع المربع
العلوي وهي حركه تستطيع الاستغنى عنها . ونكتب مثلا مساحه اعلانيه كما
تلاحظ بالصوره التاليه وتلاحظ ايضا ترتيب اللير ليسهل عليك معرفة تصميمها



الان انتهيناء من المساحه الاعلانيه ... مثل ماصممنا الاولى نصمم الثانيه ونجعلها تحت بهذا الشكل




نبداء بتصميم مربع او نافذة الدردشه . الشات . نرسم دائرتين يمين ويسار كما تلاحظ



فوق هذه الدوائر نرسم مربع بأطراف منحنيه ..



نرسم مستطيلين صغيرين فوق وتحت ونكتب مانريد كما تلاحظ



نرسم مستطيلات مثل السابقه ونوزعها كما تلاحظ بالصوره ونضع روابط الشات عليها



وهكذا نكون خلصنا من تصميم مربع الشات .. ومثل ماتلاحظ العملية كلها رسم مربعات وتنسيقها لا اكثر .

نبداء بتصميم القوائم وهي اخر ماتبقى لنا .. نذهب الى الأشكال ونختار الشكل المحدد كما تلاحظ بالصور وتستطيع ان تستبدله بأي شكل تريد



الان نرسم الشكل الذي اخترناه ونرسم ايضا اشكال اخرى بطريقة متناسقه كما تلاحظ هنا



نرسم دائره فوقها جميعا



نرسم اشكال اخرى فوق كما تلاحظ لندمجها مع القائمه



ندمجها واحدا واحدا بالضغط كما تعلمنا سابقا على CTRL+G وهذه الحركه تجميليه ..



نرسم شكل اخر فوق كما تلاحظ



نرسم الازرار وهي مستطيلات متناسقه كما تلاحظ



نرسم دائر تجميلية صغيره لها كما تلاحظ



نضع روابط للقائمه ..





منقول للامانة