دورة تصميم واجهة موقع (شرح مفصل بالصور)

[align=center]بسم الله الرحمن الرحيم


السلام عليكم ورحمة الله و بركاته


اللهم لا علم لنا الا ما علمتنا


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

هي عبارة عن دورة مفصلة لتعليم تصميم واجهة موقع بشكل كامل ... نبدا على بركة الله :


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







اذهب الى برنامج الفوتوشوب وقم بفتحه




بعد فتح البرنامج اذهب الى ملف ثم جديد وقم بضبط المقاسات ونظام الالوان مثلا نختار المقاس 650×900 او حسب رغبتك و نطبق باقي الاختيارات كما هو موضح بالصورة




نختار لونين متناسقين مع بعضهما للتصميم ... واحد غامق والثاني فاتح ثم نذهب الى اداة وعاء الدهان ونلون خلفية التصميم باللون الفاتح كما في الصورة





اول حاجة واهم حاجة بتصميم واجهة الموقع هي ( البنر ) و البنر هو التصميم الموجود في اعلى كل موقع والذي يكتب عليه اسم الموقع و الرابط ويجب الاهتمام به عند تصميمه لانه هو عنوان الموقع ( و مثل مايقال الكتاب من عنوانه ) فزائر الموقع اذا نظر الى البنر ووجد انه مصمم بطريقه رائعه و جميله تلقائيا يرتسم داخل ذهنه ان هذا الموقع رائع و جميل ( كلما كان البنر اكثر جمالا وروعه كان اقبال الزوار اكثر )وطريقة عمل البنر كثيرة وعديدة وهي تعتمد على عقل المصمم و تفكيرة ويستطيع ابتكار أي فكرة جديدة ورائعه ويبني عليها تصميمه للبنر

وطريقة تصميم البنر هي كالتالي:
نذهب الى الاشكال و نختار اداة المستطيل دائري الزوايا كما في الصورة الاتية:

( ماهو شرط مستطيل لك الحرية باختيار شكل البنر )




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




نذهب الى لوحة الادوات ونحتار الاداة الموضحة بالصورة وهي اداة انشاء نقطة الارساء




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




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



الان نقوم باضافات جماليه على البنر مثل عمل ظل ولمعان وتدرج لوني وغيرها من الاضافات لكي تلفت انتباه الزائر .. وهي كالتالي:

نتأكد من وضع التحديد ( اقصد شريط التحديد باللون الازرق ) على طبقة البنر في لوحة الشفائف ... ثم نضغط على الزر الذي يؤشر عليه السهم في الصوره التالية:




نختار كلمة ظل و نضبط التأثيرات بالقيم الموضحه بالصوره الاتيه ثم نضغط موافق :





نذهب الى نفس الرمز الذي اخترنا منه الظل ولكن الان نختار كلمة " تشطيب و تنقيش " .... ثم نقوم بضبط القيم كما في الصوره التاليه :





هذا هو شكل البنر بعد ما اضفنا له بعض التأثيرات




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







ملاحظة: نستطيع ان نركب اكثر من صورة واي صورة حسب رغباتنا و ذوقنا في انتقاء الصور ( اخترت صورة واحده و بسيطه جدا لكي لا يصعب الشرح عليكم وتختلط الامور ببعضها... ولكن طريقة تركيب اكثر من صورة في البنر هي تماما مثل طريقة تركيبنا لهذه الصورة


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




الان الصورة اصبحت داخل التصميم ... و تأكد من ان ترتيب الشفائف هو كالتالي 1-خلفية التصميم 2-البنر 3-الصورة ..... كما هو مبين بالصورة التالية:





الان قم بالضغط على Ctrl+T سوف يظهر لك مربع التحديد على الصورة التي وضعناها بداخل التصميم .... ثم قم بالضغط على مربع التحديد على يمين الصورة المحددة و اسحب الصورة الى جهة اليمين الى ان تصل الصورة الى حد التصميم الايمن ... ثم اضغط على مربع التحديد الايسر وقم بسحب الصورة الى حد التصميم الايسر ........ الان تم تغطية التصميم بالصورة بشكل افقي من الجهة اليمنى و اليسرى للتصميم ( انظر الى الصورة التالية ) :




الان نضغط على اداة التحريك ( و التي سبق وان ذكرتها ووضحتها لكم في اول الشرح ) ..... ثم اضغط على كلمة " تطبيق "



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





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










( يــتــبــع )[/align]