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

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

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

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

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

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

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

http://www.m5zn.com/uploads/c8f5e4e4f6.jpg

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

http://www.m5zn.com/uploads/e85ed00379.jpg

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

http://www.m5zn.com/uploads/7bea66da39.jpg

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

http://www.m5zn.com/uploads/d4b1607299.jpg

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

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

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

http://www.m5zn.com/uploads/3313a6d133.jpg

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

http://www.m5zn.com/uploads/6e07b4cdf5.jpg

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

http://www.m5zn.com/uploads/c2c5d3c421.jpg

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

http://www.m5zn.com/uploads/4241e23ee1.jpg

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

http://www.m5zn.com/uploads/26da59b464.jpg

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

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

http://www.m5zn.com/uploads/62581ae779.jpg

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

http://www.m5zn.com/uploads/7d953ce900.jpg

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

http://www.m5zn.com/uploads/421f43f2d3.jpg

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

http://www.m5zn.com/uploads/5dc741fa4d.jpg

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

http://www.m5zn.com/uploads/fa15b89b0f.jpg

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

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

http://www.m5zn.com/uploads/9ac6b4c678.jpg

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

http://www.m5zn.com/uploads/f31e4a86eb.jpg

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

http://www.m5zn.com/uploads/b09db55dbb.jpg

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

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

http://www.m5zn.com/uploads/5aac9d586c.jpg

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

http://www.m5zn.com/uploads/00b60bdf09.jpg

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

[align=center]( ركزوا معي الله يخليكم شوي :D ) ... تأكد من ان طبقة الصورة فوق طبقة البنر .... وان طبقة الصورة محددة بشريط التمرير الازرق .... اذهب الى الشففية ( فوق بجانب ملف , تحرير , صورة ... الخ ) ثم اختار تجميع مع السابق ... تظهر لك هذه النتيجة :

http://www.m5zn.com/uploads/acb3a7ffb1.jpg

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

http://www.m5zn.com/uploads/298aa531c5.jpg

تم بحمد الله الانتهاء من تصميم البنر :D

http://www.m5zn.com/uploads/de548e2171.jpg

الحين نبدا بتصميم الفوتر و هو يأتي بالدرجة الثانية من حيث الاهمية في الموقع

الفرق بين البنر و الفوتر حاجتين وهم :

1- البنر في اعلى الموقع و الفوتر في اسفل الموقع

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

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

حتى لا اطيل عليكم ... تصميم الفوتر نفس تصميم البنر بالضبط

مثلا اختار الصورة هذي عشان اركبها للفوتر

http://www.m5zn.com/uploads/03d705f2a4.jpg

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

http://www.m5zn.com/uploads/0c111d8679.jpg

الان نقوم بادرج لوحات الاعلانات للموقع ... نختار من الاشكال ( شكل المستطيل دائري الزوايا ) و نقوم برسم مستطيل بالمحجم الذي نريده

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

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

http://www.m5zn.com/uploads/5b803f8955.jpg

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

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

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

http://www.m5zn.com/uploads/3eabc5d3b2.jpg

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

http://www.m5zn.com/uploads/67658057e4.jpg

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

http://www.m5zn.com/uploads/34693411e8.jpg

الان نقوم بإدراج اربع مستطيلات لكي نستخدمها كروابط في الموقع انظر الى الصورة :

http://www.m5zn.com/uploads/bf5ddf59fe.jpg

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

http://www.m5zn.com/uploads/912b1937f8.jpg

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

اضغط هنا لتحميل الملف

تم بحمد الله

يالله ....... والله تعبت هههههههههههههههههههههههه

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

ان شاء الله راح نشوف تصاميمكم عن قريب بأذن الله

تمنياتي لكم بالنجاح و التوفيق

( هل الموضوع يستحق التثبيت؟ .... اترك الحكم لكم وانا راضي بما تحكمون )

لا تنسونا من دعواتكم

هذا والله اعلم و احكم .... و صلى الله على نبينا محمد و على آله و صحبه الى يوم الدين

اخوكم/ عبدالله العنزي

تحياتي و تقديري للجميع[/align]