دورة تصميم واجهة موقع (شرح مفصل بالصور)
[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] |
رد: دورة تصميم واجهة موقع (شرح مفصل بالصور)
[align=center]الله يعطيك العافية
أخوي عبدالله ماقصرت شرح كافي ووافي بس بصراحه شغله متعبه الله يعينك كل الشكر لك أخوي على هذا المجهود تقبل تحياتي وتقديري [/align] |
رد: دورة تصميم واجهة موقع (شرح مفصل بالصور)
الله يعافيك اختي بنت بوها
اي والله انه دوخت راس ههههههههههههه بس يستاهل منتدى الويلان و اعضائه اشكرك على مرورك الرائع و الرد على الموضوع العفو اختي .... و حياك الله تحياتي |
رد: دورة تصميم واجهة موقع (شرح مفصل بالصور)
[align=center]الله يعطيك العافيه اخوي عبدالله
عساك على القوه وربي يوفقك مشكور على ماتقدمه اخي العزيز تحياتي لك[/align] |
رد: دورة تصميم واجهة موقع (شرح مفصل بالصور)
[align=center]الله يعطيك العافية اخوي عبدالله . استاذ بحق وحقيقي وتقدر توصل المعلومة باسهل الطرق .شرح اكثر من رائع وموضوع متميز
تم تثبيت الموضوع لتعم الفائدة للجميع [/align] |
رد: دورة تصميم واجهة موقع (شرح مفصل بالصور)
اقتباس:
|
رد: دورة تصميم واجهة موقع (شرح مفصل بالصور)
[align=center][all1=FFCC99][align=center][align=center]العضو المميزعبدالله العنزي......
الف شكر لك على هالموضوع المميز مشاء الله عليك بصراحه رووووووعه ... تسلم يدينك وعن جد يستحق التثبيت والله يقويك شاكرين لك جهودك المميزه تحياااااااااااااااااتي لك[/align][/align][/all1][/align] |
رد: دورة تصميم واجهة موقع (شرح مفصل بالصور)
الريم
يعطيك العافية اختي على مرورك الجميل الف شكل على الرد على الموضوع تقبلي تحياتي |
رد: دورة تصميم واجهة موقع (شرح مفصل بالصور)
اخوي سعد وربي كلامك شرف لي
كلي فخر بما تقول اشكرك من كل قلبي و اشكرك ايضاً على تثبيت الموضوع اطيب التحايا و خالص الود و التقدير لشخصكم الكريم |
الساعة الآن 05:27 PM. |
Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2024, vBulletin Solutions, Inc.