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

Оригинальный текст: 5 простых приемов, которые помогут добавить свет и тень в ваш дизайн.

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

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

Краткий анализ принципов освещения и затенения.

На рисунке ниже источник света расположен слева. Светлые участки — это наиболее освещенные части, а тени располагаются дальше всего от источника света. Существование света и тени помогает нам воспринимать большой объем информации о материале поверхности объекта .

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

Если вы планируете создавать насыщенные текстурированные интерфейсы и веб-сайты, свет и тень могут вам помочь. Точно так же, как многие традиционные художники используют свет в картинах, вы также можете использовать свет, чтобы придать своим рисункам глубину и визуальный интерес.

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

Следует сказать, что при использовании освещения знание того, где находится источник света, является наиболее важным базовым вопросом. Положение источника света определяет расположение бликов и теней (хотя в веб-дизайне вы можете нарушить эти правила). В Photoshop вы можете использовать «Глобальное освещение» в стилях слоя, чтобы гарантировать, что источники света всех создаваемых вами эффектов света и тени находятся в одном и том же положении.

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

В примерах из Интернета

Campaign Monitor используются расходящиеся источники света для создания эффекта восхода солнца.

Icebrrg использует освещение, чтобы сделать страницу подводной.

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

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

2. Градиенты

В реальном мире ничто не всегда бывает ровным тоном. Свет и тень цепляются за все. Использование градиентов — отличный способ создать глубину и аутентичность.

Ключ к использованию градиентов – не переусердствовать . При рисовании градиентов в Photoshop используйте наложение градиента в стиле слоя. Это обеспечит возможность редактирования вашего градиента, а поскольку слой масштабируется, градиент также можно масштабировать без потерь.

Примеры из Интернета:

на веб-сайте nclud используются тонкие, но эффективные градиенты для дифференциации и организации контента.

На первый взгляд кажется, что CSS Ninjas использует плоские цвета. Однако каждая цветовая область на самом деле имеет слабый градиент, создающий захватывающий материальный эффект.

3. Световые блики.

Световые блики могут сбалансировать тени и должны располагаться на краю объекта рядом с источником света . Основные моменты в основном игнорируются, потому что при правильном использовании вы едва их заметите. Однако не все ситуации подходят для существования бликов. Незначительный блик может привести к огромной разнице в полировке поверхности объекта. Чем «резче» блики, тем сильнее глянцевитость поверхности объекта.

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

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

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

Каждый должен быть знаком с веб-сайтом Apple . Но вы, вероятно, не заметили тонкую подсветку внизу меню навигации. Именно эта изюминка придает меню выразительность.

4. Базовые тени

Как и градиенты, тени также широко используются веб-дизайнерами. При правильном использовании тени действительно могут добавить визуальной глубины и текстуры дизайну. Главное – не переусердствовать и не злоупотреблять.

Глубина тени зависит от направления и интенсивности света, а также от расстояния объекта от проекционной поверхности. Чем сильнее свет, тем резче и темнее тень; чем слабее свет, тем слабее тень;

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

В Интернете слишком много примеров проецирования.

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

Google — возможно, самая сложная для дизайна страница в Интернете — по-прежнему использует тонкую тень на своей странице поиска.

5. Расширенные тени

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

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

В примере в Интернете

«Эмоции» Майка умело используются тени (и освещение), чтобы буквально превратить плоскую страницу в пол.