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

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


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


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


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

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


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







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




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




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





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

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

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




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




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




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




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



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

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




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





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





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




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







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


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




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





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




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



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





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










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

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





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





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







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



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

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

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

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


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



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




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





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

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


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



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


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



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





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





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




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




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









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

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







تم بحمد الله









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



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


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


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


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

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



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







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




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

[align=center]الله يعطيك العافية
أخوي عبدالله
ماقصرت شرح كافي ووافي
بس بصراحه شغله متعبه الله يعينك
كل الشكر لك أخوي على هذا المجهود

تقبل تحياتي وتقديري


[/align]

الله يعافيك اختي بنت بوها


اي والله انه دوخت راس ههههههههههههه


بس يستاهل منتدى الويلان و اعضائه


اشكرك على مرورك الرائع و الرد على الموضوع


العفو اختي .... و حياك الله









تحياتي

[align=center]الله يعطيك العافيه اخوي عبدالله

عساك على القوه وربي يوفقك

مشكور على ماتقدمه اخي العزيز

تحياتي لك[/align]

[align=center]الله يعطيك العافية اخوي عبدالله . استاذ بحق وحقيقي وتقدر توصل المعلومة باسهل الطرق .شرح اكثر من رائع وموضوع متميز


تم تثبيت الموضوع لتعم الفائدة للجميع [/align]

المشاركة الأصلية كتبت بواسطة أبــــ بنت ــــوهـا

[align=center]الله يعطيك العافية
أخوي عبدالله
ماقصرت شرح كافي ووافي
بس بصراحه شغله متعبه الله يعينك
كل الشكر لك أخوي على هذا المجهود

تقبل تحياتي وتقديري


[/align]

[align=center][all1=FFCC99][align=center][align=center]العضو المميزعبدالله العنزي......
الف شكر لك على هالموضوع المميز
مشاء الله عليك بصراحه رووووووعه ...
تسلم يدينك وعن جد يستحق التثبيت
والله يقويك شاكرين لك جهودك المميزه
تحياااااااااااااااااتي لك[/align][/align][/all1][/align]

الريم



يعطيك العافية اختي على مرورك الجميل


الف شكل على الرد على الموضوع


تقبلي تحياتي

اخوي سعد وربي كلامك شرف لي


كلي فخر بما تقول


اشكرك من كل قلبي


و اشكرك ايضاً على تثبيت الموضوع


اطيب التحايا و خالص الود و التقدير لشخصكم الكريم