ArtLana Design

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

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

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

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

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

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

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

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

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

Примеры в  Web.

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

Icebrrg используют свет, чтобы создать ощущение погружения под воду.

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

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

2.Градиенты

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

Примеры в Web
nclud’s website – образец использования тонких, но от этого не менее эффективных градиентов, чтобы отделить и организовать контент страницы.

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

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

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

Чтобы четко увидеть яркие акценты и блики, нужно увеличить изображение. Хороший способ добавить бликов – работать при масштабе 200 % и больше, потому что при 100 % размере изображения может быть трудно четко видеть то, что вы делаете.

Примеры в Web

Icon Dock и Newism используют полупрозрачную белую линию на основной границе элемента страницы, чтобы придать ему яркий акцент. Эта линия едва заметна, но придает глянцевый блеск  и завершенный вид дизайну сайта.

Вы наверняка уже видели  сайт компании Apple’s, однако, возможно, не заметили яркие акценты  у основания навигационных пунктов, которые придают словам рельеф и объем.

4. Основные тени

Примеры

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

LinkedIn добавляет очень тонкую тень к основанию навигационного меню, чтобы создать иллюзию глубины.

Google все еще вкладывает капитал в тонкое использование тени для страницы поиска.

5. Продвинутые Тени

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

В примерах ниже, одна и та же банка кока-колы занимает совершенно разные позиции в пространстве  в зависимости от ее штриховки и тени.

Примеры в Web

Emotions by Mike умело используют свет тень, чтобы превратить плоскую страницу в пол.

Superkix использует тень, чтобы поместить тапочки “над” страницей сайта. Тень перемещается, когда Вы изменяете размеры страницы, как если бы свет действительно светил.

Sofa создает пол на белом фоне с большим использованием и света и тени.

На этом советы по применению теней для совершенствования вашего сайта пока заканчиваются.

Источник: www.smashingmagazine.com