Куди не кинь оком, скрізь присутній світло і всюди присутня тінь. Все, що ви бачите, відображає свою частку світла і природно кидає тінь на що-небудь ще. Візуально світло і тінь «пояснюють» нам, що саме ми бачимо перед собою, і допомагають нам розуміти текстуру, обсяг і проекцію об'єкта.
Тому для тих, хто дійсно відданий веб-дизайну і намагається робити свої проекти природними, вражаючими і інтуїтивними, неймовірно важливо мати розуміння світла і тіні. Нижче наведено 5 способів удосконалення використання світла і тіні з метою поліпшення якості вашого веб-дизайну.
ШВИДКЕ ВСТУП В анатомії СВІТЛА І ТІНІ
У простій діаграмі нижче можна побачити, що джерело світла знаходиться зліва. Блик знаходиться з того боку, на яку припадає найбільша кількість світла, а тіні знаходяться з протилежного від світлового джерела боку. Розміщення світла і тіні багато розповідає нам про поверхні і текстуру зображення.
Але ви запитаєте: «Яке відношення це має до веб-дизайну?»
Якщо ви розробляєте високоякісні і «відчутні» на погляд поверхні або веб-сайти, то світло і тінь - ваші друзі. Також як і великі художники змушували свої картини оживати, так і ви можете використовувати світло, щоб надавати своїм дизайнам глибину і візуальну привабливість. Приступимо ж.
1. ВИКОРИСТАННЯ ДЖЕРЕЛА СВІТЛА
Найважливіше в роботі зі світлом -Розумієте звідки цей світ виходить. Джерело світла, швидше за все, відразу покаже боку його попадання, а також сторони, на які припадають тіні (хоча в веб-дизайні ці правила можна іноді порушувати). Якщо ви працюєте в Photoshop, ви можете використовувати ефект під назвою «global light» з тією метою, щоб всі ваші світлові ефекти були підпорядковані одному і тому ж світловому напрямку.
Контроль і правильне використання іточніка (ів) світла в ваших проектах (навіть в найпростіших з них) допоможе створити потрібну атмосферу на сторінках вашого сайту. Крім того, це допоможе вам направляти початкове увагу відвідувачів в потрібну вам точку проекту.
Campaign Monitor використовує пучок сонячних променів для створення ефекту висхідного сонця на тлі.
Icebrrg використовує світло для того, що «занурити» свій сайт глибоко під воду.
Mike Precious використовує більше одного джерела світла для додавання візуального ефекту, що гармоніює зі світлом настільної лампи.
Deaxon використовує ледь помітний світло, джерело якого знаходиться за логотипом, для створення ефекту опуклості на сторінці.
У реальному світі у дуже небагатьох речей однотонні і «плоскі» тони. Світло і тінь присутні скрізь. Обережно градієнтів - чудовий спосіб надати зображенню глибини і оживити його на екрані.
Найважливіше щодо градієнтів - це не перестаратися. Якщо ви використовуєте Photoshop, не забувайте використовувати стилі шарів для своїх градієнтів. Це дає вам можливість редагувати їх в будь-який момент. Крім того, якщо ви вирішите змінити розмір елемента, то градієнт автоматично також змінить свій розмір.
Ресурс nclud's - чудовий приклад акуратного і дуже ефективного використання градієнтів з метою створити вражаючий і гармонує фон сторінки.
CSS ninjas начебто як використовує однотонні тони, але це тільки на перший погляд, так як кожна з колірних областей має ледве помітний градієнт, який в цілому надає сайту текстуру.
3. ВИДІЛЕННЯ (додачу БЛИСКУ)
Виділення допомагають збалансувати тіні і повинні використовуватися на найближчих до джерела світла кутах того чи іншого об'єкта. Виділення часто непомітні при першому погляді, так як саме таке використання їх коректно. Але таке враження помилкове. Якби їх дійсно там не було, то загальне враження від зображення було б інше. Чим «гостріше» виділення, тим яскравіше буде здаватися поверхню.
Для того щоб повністю оцінити виділення, нам потрібно дещо збільшити зображення. Хороший спосіб для додавання виділень - це збільшити робочий матеріал на 200% або навіть більше, так як на 100% буде складно чітко бачити з чим ви працюєте.
Icon Dock і Newism використовують напівпрозору білу лінію у верхньому кутку елемента сторінки, щоб кілька виділити її із загальної картини. Така лінія ледве помітна, але завдяки їй загальна картина наповнена блиском.
Ви, напевно, не раз користувалися сайтом Apple. Але ви, напевно, ніколи не помічали милі виділення внизу навігаційних посилань, які дозволяють словами виглядати більш поглибленими.
Як і градієнти, використання падаючої тіні стало найважливішим елементом, що використовується більшістю веб-дизайнерів. Тіні можуть значно додати візуальної глибини і текстури об'єкту, але тільки якщо вони правильно використані. Фішка в тому, щоб не перестаратися.
Якість тіні залежить від напрямку світла і насиченості, так само як і від відстані між об'єктом і поверхнею, на яку падає тінь. Чим сильніше світло, тим темніше і чіткіше тінь. Чим слабкіше світло - то менше тінь.
Коли мова заходить про приклади падаючих тіней в мережі, то головним фактом є наступне: таких прикладів аж надто багато. Якщо використовувати тіні з розумом, то вони можуть додати об'єм навіть в самі мінімальні розробки.
LinkedIn додало дуже легку тінь внизу бічній панелі для створення ілюзії глибини.
Google. з можливо своїй найзавантаженішій сторінкою в Інтернеті, також використовує падаючу тінь.
5. БІЛЬШЕ СКЛАДНІ ТІНІ
Ви можете робити трохи більше, ніж створювати звичайну падаючу тінь з метою створення об'єктів в трьох вимірах. Довші тіні - відмінний спосіб змінити просторове розташування двох і більше об'єктів на сторінці.
У прикладах нижче, та ж сама банку Коли має абсолютно різні розміщення в просторі тільки завдяки використанню різних тіней.
Emotions by Mike дуже розумно використовує тінь (і світло) для того щоб перетворити звичайну сторінку в ... підлогу.
Superkix використовує тінь для розташування кросівок «поверх» сайту. Крім того, тінь змінюється при зміні розміру сторінки, що створює враження зміни розташування світлового джерела.
Sofa створила підлогу на білому тлі завдяки якісному використанню як світла, так і тіні.
Цікава інформація ніколи не буває зайвою!
Сьогодні ми хотіли б поділитися кількома ідеями стосується ефекту блочного розкриття, яку ви можете використовувати для своїх проектів.
Якщо ви хочете істотно підвищити рівень безпеки вашого сайту на WordPress, то вам не уникнути конфігурації файлу .htaccess. Це дозволить не тільки уберегтися від цілого ряду хакерських атак, а й організувати перенаправлення, а також вирішити завдання пов'язані з кешем.
Material Design - це набирає обертів тренд від Google. У даній збірці зібрані безкоштовні теми для WordPress, виконані в цьому популярному стилі.
Ефекти на те й існують щоб вражати наших відвідувачів. У цій збірці зібрано кілька десятків ресурсів, чиї творці дуже постаралися вразити своїх відвідувачів.
Під кінець місяця пропонуємо ознайомитися з набором безкоштовних матеріалів для веб дизайнерів за минулий місяць.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!