• :: 5 خدع بسيطة لتحقيق الضوء و الظل الخاص بك ::

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


    5 خدع بسيطة لتحقيق الضوء و الظل الخاص بتصميمك


    لا مفر من اضوء والظل - إنها في كل مكان تنظرون اليه

    كل ما تراه يعكس الضوء ويلقي نوعا من الظل.

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


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

    تشريح سريع للضوء والظل


    في الصورة أدناه ، يمكننا أن
    نرى أن مصدر الضوء قادم من اليسار.

    تسليط الضوء ... حيث ضوء أقوى، والظلال تقع على الجانب الأبعد من مصدر الضوء.


    ظهور الضوء والظل يقول لنا الكثير عن السطوح
    والقوام
    في الصورة.



    ولكن ماذا يعني هذا ؟ وهل لها علاقة بتصميم الموقع؟

    إذا كنت تحاول تصميم ،واجهات اللمس والمواقع الإلكترونية، الضوء والظل أصدقائك.
    .
    في القفز بنفس الطريقة التي يستخدمها فنانين الكلاسيكية للقفز بلوحاتهم التي من قماش،
    ويمكنك استخدام الضوء
    لإعطاء التصاميم الخاصه بك العمق والاهتمام
    البصري.

    دعونا نصل الى ذلك.

    1-استخدام مصدر الضوء


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

    يمكنك استخدام "تأثير ضوء عالمي" حتى يتسنى لجميع من تأثيرات الإضاءة الخاص بك اتبع نفس الاتجاه ضوء.

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

    أمثلة على الويب


    استخدام وابلا من أشعة
    الضوء الذي ينقل الشعور لشروق الشمس وراء التصميم.



    استخدام الضوء لتغرق في الموقع تحت الماء العميق .




    استخدام اكثر من مصدر للاضائة
    لإضافة الاهتمام البصري، والتعادل مع نمط الإضاءة مثل المكتب و المصباح.




    استخدام مصدر ضوء خفي وراء الشعار لإعطاء أهمية للشعار المرئي
    على الصفحة.






    2.التدرجات


    .

    استخدام التدرجات بمهاره هي وسيلة رائعة لتوفير العمق وجعل الأمور
    تدب فيها الحياة على الشاشة.

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




    أمثلة على الويب



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




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





    3.البروز


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

    ولاضافة خدعة جيدة لتسليط الضوء يجب التكبير على مكان العمل
    ليظهر التأثير بوضوح
    ويكون التكبير على 200ظھ أو أكثر، لأنه في 100ظھ يمكن أن يكون من الصعب معرفة ما تفعلونه
    بوضوح.
    أمثلة على الويب


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




    وقد تلاحظ بروز جميل في الجزء السفلى من العناصر و الكلمات
    وتعطيك شعورا جيد ومريح للبروز


    30


    4.الظلال الأساسية



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

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



    أمثلة على الويب



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

    يضيف ظل دقيقا للغاية في
    الجزء السفلي من عناصر الشريط الجانبي لخلق الوهم من العمق.




    مع صفحة ربما الأشد العامل
    على شبكة الإنترنت - لا تزال تستثمر استخدام ظلال خفية لصفحة البحث.


    5.الظلال المتقدمة



    يمكنك أن تفعل الكثير وراء الظلال، لإعطاء
    العناصر الأساسية البعد الثالث.
    تعد الظلال هي طريقة رائعة لتغيير
    العلاقة المكانية بين الكائنات الموجودة على الصفحة.

    في الأمثلة أدناه، يتم إعطاء نفس علبة كوكاكولا
    مواقف مختلفة تماما في الفضاء اعتمادا على التظليل والظل.






    أمثلة على الويب


    بإستخدامهما بذكاء
    الظل
    (والضوء) لفتح صفحة جديدة كأنها شقة في الطابق.





    ظل يتحرك عند تغيير حجم الصفحة، وكأن الضوء قد يتحول.



    تستطيع عمل ارضية على خلفية بيضاء
    بتوظيف لكل من الضوء والظل.






    تم بحمد الله
    ارجو ان يكون الموضوع مفيد ...
    نسألكم الدعاء

    الرابط....

    http://www.smashingmagazine.com/2009...-your-designs/

    كما يوجد في اسفل الموضوع دروس مفيدة في هذا الصدد

    هذه المقالة تم اقتباسها من الموضوع : :: 5 خدع بسيطة لتحقيق الضوء و الظل الخاص بك :: بواسطة ::حامل المسك:: معاينة المشاركة الاصلية
    تعليق 19 تعليق
    1. صور رمزية omarzonex
      omarzonex -
      درس رائع من مجتهد اروع

      بارك الله فيك على هذا المجهود الضخم

      جزاك الله خيرا حامل المسك
    1. صور رمزية osama saleh
      osama saleh -
      جزاك الله خيرا
    1. صور رمزية النمر الخطاط
      الله يفتح عليك تصدق كنت بحضر درس فديو مشابه لكده بس ان شاء الله هاستفيد منه فى التقدمة للدرس او الاقتباس

      بارك الله فيك يابنى ونفع بك
      د

      سأنقله لخبرات مصمم لافادة الغير
    1. صور رمزية Shady Moustafa
      Shady Moustafa -
      معلومات مفيده خصوصا انى بحب الرسم اليدوى
    1. صور رمزية bionic
      bionic -
      شكرا لك على المعلومة اخي حامل المسك
    1. صور رمزية Kingof$peed
      Kingof$peed -
      درس بمنتهى الروعة
      جزاك الله خيراً
    1. صور رمزية ::حامل المسك::
      اقتباس الموضوع الأصلي كتب بواسطة omarzonex معاينة الرد
      درس رائع من مجتهد اروع

      بارك الله فيك على هذا المجهود الضخم

      جزاك اللهخيرا حامل المسك
      واياك اخي الحبيب عمر وفيك بارك
      انت الاروع : )
      الله يكرمك يا رب

      اقتباس الموضوع الأصلي كتب بواسطة os.sa.al معاينة الرد
      جزاك الله خيرا
      واياك اخي الحبيب اسامة

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

      بارك الله فيك يابنى ونفع بك د

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

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

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

      اقتباس الموضوع الأصلي كتب بواسطة Kingof$peed معاينة الرد
      درس بمنتهى الروعة
      جزاك الله خيراً
      واياك اخي الحبيب
      مرورك ومشاركتك هي الاروع : )
      الله يبارك فيك يارب
    1. صور رمزية dlb
      dlb -
      جزاك الله علخير على هذا الابداع الكبير
      والله ما اعرف كيف اشكرك اخي الحبيب اول ما دخلت المنابر حبيت ارد على هذا الابداع
    1. صور رمزية ::حامل المسك::
      اقتباس الموضوع الأصلي كتب بواسطة dlb معاينة الرد
      جزاك الله علخير على هذا الابداع الكبير
      والله ما اعرف كيف اشكرك اخي الحبيب اول ما دخلت المنابر حبيت ارد على هذا الابداع
      واياك يا رب
      لا شكر على واجب اخي الحبيب بارك الله فيك
      و الحمد لله ان الموضوع حاز على اعجابك : )
    1. صور رمزية ::حامل المسك::
      و الشكر موصول لاخونا الحبيب اكتوم لنشره للموضوع فجزاه الله عنا خيرا
      وبارك الله في جهوده
    1. صور رمزية عادل2010
      عادل2010 -
      جزاك الله خيرا
    1. صور رمزية ::حامل المسك::
      اقتباس الموضوع الأصلي كتب بواسطة عادل2010 معاينة الرد
      جزاك الله خيرا
      واياك اخي الكريم
      الله يبارك فيك
    1. صور رمزية بكل الحب
      بكل الحب -
      درس احترافي .... بالتوفيق اخي الكريم ...
    1. صور رمزية ::حامل المسك::
      اقتباس الموضوع الأصلي كتب بواسطة بكل الحب معاينة الرد
      درس احترافي .... بالتوفيق اخي الكريم ...
      حياك الله اخي
      وشاكر ليك مرورك العطر
    1. صور رمزية فلاشي 8
      فلاشي 8 -
      بارك الله فيك وشكراً لك
    1. صور رمزية ::حامل المسك::
      اقتباس الموضوع الأصلي كتب بواسطة فلاشي 8 معاينة الرد
      بارك الله فيك وشكراً لك
      وفيك بارك اخي الحبيب
      ولا شكر على واجب
      وجزاك الله خيرا على مرورك العطر
    1. صور رمزية Majd135
      Majd135 -
      شكرا جزيلا يا معلم
    1. صور رمزية ::حامل المسك::
      اقتباس الموضوع الأصلي كتب بواسطة Majd135 معاينة الرد
      شكرا جزيلا يا معلم
      حياك الله اخي
      ولا شكر على واجب
    1. صور رمزية مصطفي صلاح
      أخى الغالى اقسم لك بالله انى عندما قرات كلماتك احببتل دون باقى الاعضاء الذين ردوا على ففيها تفهما كبيرا لما يحدث لى واشعر انك القريب البعيد كما يقال.
      انا اعشق الماكس واحلم بتعلمه لكى يتثنى لى تصميم ما بخيالى . اشعر بمتعة فى تصميم الاجسام وتحريكها حلمى ان اشارك يوما ما فى صنع فيلم او مسلسل اواعلان هذا هو اتجاهى ولكن كيف وبم ابدأ لا اعرف انتظر الرد بفارغ الصبر