Нет никакой возможности избежать использования света и тени – они везде, куда бы вы ни посмотрели. Все, что вы видите, отражает свет или отбрасывает тень. Визуально, свет и тень помогают нам понять то, что мы видим, структуру предмета, его размеры и перспективу.

Поскольку мы пытаемся сделать наши сайты более естественными, движущимися и интуитивными, понимание как правильно использовать свет и тень очень важно. Вот 5 способов лучше использовать свет и тень, чтобы улучшить дизайн страниц и заставить их выделиться на экране.

Анатомия света и тени

На рисунке ниже мы видим, что источник света расположен слева. Основной момент – то, где свет является самым сильным, и падение теней на стороне дальше всего от источника света. Появление света и тени говорит нам много о поверхностях и структурах в изображении.

Но какое отношение это имеет в веб дизайну, спросите вы…

Если вы пытаетесь проектировать богатые, осязательные интерфейсы и вебсайты, свет и тень – Ваши друзья. Так же как многие классические художники заставили свои картины спрыгнуть из холста, Вы можете использовать свет, чтобы дать глубину вашим проектам и визуальный интерес. Давайте разберемся в этом поглубже.

1.Используем источник света

Наверное самая важная часть работы с освещением – определить где располагается источник света. Это поможет с наибольшие вероятностью определить, где будут самые освещенные участки и куда будут падать тени (хотя в веб дизайне вы можете позволить себе изменить эти правила в некоторых местах). Если Вы работаете в Photoshop, Вы можете использовать эффект “global light” так, чтобы все эффекты освещения имели одни и те же настройки.

Управление источником света в дизайне ваших сайтов (даже если это касается только линейных или радиальных градиентов) может помочь создать атмосферу в дизайне ваших страниц. Это может также помочь сфокусировать внимание на нужной области страницы.

Примеры в интернете

Компания “Monitor” использует взрыв световых лучей, который передает ощущение восхода солнца на заднем фоне страницы.

Компания Icebrrg использует свет, чтобы погрузить свой веб-сайт глубоко под воду.

Mike Precious использует несколько источников света, чтобы добавить визуальный интерес и создать ощущение стиля освещения настольной лампы.

Deaxon используют тонкий источник света за логотипом, чтобы визуально выделить его положение на странице.

2.Градиенты

В реальном мире очень немногие вещи имеют плоский тон. Свет и оттенок есть во всем. Тонкое использование градиентов является отличным способом обеспечить глубину и заставляет предметы оживать на экране.

Не переусердствуйте с использованием градиентов. Если Вы используете Photoshop, используете стили слоя для градиентов. Это дает вам свободу отредактировать их в любом пункте; это также означает, что, если вы изменяете размеры элемента, градиент так же изменит размер.

Примеры в интернете.

 Сайт “nclud” образец использования тонких, но от этого не менее эффективных градиентов, чтобы отделить и организовать контент страницы.

CSS Ninjas на первый взгляд, использует плоские цвета, но у каждой цветовой области есть тонкий градиент, который придает ей структуру.

3. Яркие участки изображения (блики, акценты)

Яркие акценты и блики помогают уравновесить тени, и должны использоваться на краях объектов, близких к источнику света. Их часто упускают из вида, поскольку они совершенно незаметны, если все акценты расставлены правильно. И в то же время крошечный блик может иметь решающее значение для создания совершенной страницы.

Чтобы четко увидеть яркие акценты и бл …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров