В реальной жизни свет и тень существуют повсюду. Все, что вы видите, отражается светом и тенью. Визуально свет и тень помогают нам идентифицировать предметы и распознавать их материал , масштаб и перспективу .
Поэтому, если мы хотим сделать наш веб-дизайн более естественным, динамичным, реальным и интуитивно понятным, очень важно правильно понимать эффекты света и тени. Вот пять советов, которые помогут вам лучше использовать свет и тень. Правильное их использование может сделать ваш дизайн более изысканным и выделиться на фоне других страниц.
Быстрый анализ принципов освещения и теней.
На рисунке ниже источник света находится слева. Светлые участки — это наиболее освещенные части, а тени располагаются дальше всего от источника света. Существование света и тени помогает нам воспринимать большой объем информации о материале поверхности объекта . Но вы можете спросить, какое отношение это имеет к веб-дизайну?
Если вы планируете создавать насыщенные текстурированные интерфейсы и веб-сайты, свет и тень могут вам помочь. Точно так же, как многие традиционные художники используют свет в картинах, вы также можете использовать свет, чтобы придать своим рисункам глубину и визуальный интерес.
1. Используйте источник света
Следует сказать, что при использовании освещения знание того, где находится источник света, является наиболее важным базовым вопросом. Положение источника света определяет расположение бликов и теней (хотя в веб-дизайне вы можете нарушить эти правила). В Photoshop вы можете использовать «Глобальное освещение» в стилях слоя, чтобы источники света всех создаваемых вами эффектов света и тени находились в одном и том же положении.
Управление положением источника света может создать уникальную атмосферу для дизайна вашей страницы (эффекта можно добиться даже с помощью простого линейного или радиального градиента). Эффекты света и тени также могут способствовать смещению зрительного центра.
Campaign Monitor использует расходящиеся источники света для создания эффекта восхода солнца.
Icebrrg использует освещение, чтобы сделать страницу подводной.
Майк Прешес использовал более одного источника света, чтобы добавить визуальный интерес, и повсюду использовал освещение настольными лампами.
За логотипом Deaxon расположен слабый источник света, который фокусирует внимание на странице на логотипе.
2. Градиент
В реальном мире ничто не всегда плоское. Свет и тень цепляются за все. Использование градиентов — отличный способ создать глубину и аутентичность.
Ключ к использованию градиентов – не переусердствовать . При рисовании градиентов в Photoshop используйте наложение градиента в стиле слоя. Это гарантирует, что ваш градиент будет доступен для редактирования, а поскольку слой масштабируется, градиент также можно масштабировать без потерь.
На веб-сайте nclud используются тонкие, но эффективные градиенты для дифференциации и организации контента.
На первый взгляд кажется, что CSS Ninjas использует плоские цвета. Однако каждая цветовая область на самом деле имеет слабый градиент, создающий захватывающий материальный эффект.
3. Основные моменты
Световые эффекты уравновешивают тени и должны располагаться по краям объектов вблизи источника света . Основные моменты в основном игнорируются, потому что при правильном использовании вы едва их заметите. Однако не все ситуации подходят для существования бликов. Незначительный блик может привести к огромной разнице в полировке поверхности объекта. Чем «резче» блики, тем сильнее глянцевитость поверхности объекта.
Чтобы оценить основные моменты, нам нужно увеличить эти детали. При создании глянцевого дизайна рекомендуется увеличить его размер более чем вдвое, потому что вы не сможете понять, что делаете, когда он отображается в исходном масштабе.
И Icon Dock, и Newism используют полупрозрачный белый цвет на верхнем крае страницы для создания эффекта выделения. Несмотря на то, что он очень незаметен, он придает дизайну сильный блеск.
Каждый должен быть знаком с веб-сайтом Apple. Но вы, вероятно, не заметили тонкую подсветку внизу меню навигации. Именно эта изюминка придает меню выразительность.
4. Базовые тени
Как и градиенты, тени также широко используются веб-дизайнерами. При правильном использовании тени действительно могут добавить визуальной глубины и текстуры дизайну. Главное – не переусердствовать и не злоупотреблять.
Глубина тени зависит от направления и интенсивности света, а также от расстояния объекта от проекционной поверхности. Чем сильнее свет, тем резче и темнее тень; чем слабее свет, тем слабее тень;
В Интернете слишком много примеров проецирования.
LinkedIn добавляет очень тонкую тень внизу боковой панели, чтобы создать ощущение глубины.
Google — возможно, самая сложная для дизайна страница в Интернете — по-прежнему использует тонкую тень на своей странице поиска.
5. Продвинутые тени
Чтобы придать объекту ощущение трехмерности, помимо простой проекции, у вас есть много вариантов. Длинные тени могут кардинально изменить пространственные взаимоотношения объектов на странице.
В приведенном ниже примере после того, как одной и той же банке из-под кока-колы приданы разные тени и темные части, все пространственное положение выглядит совершенно другим .
«Эмоции» Майка умело использует тени (и освещение), буквально превращая плоскую страницу в пол.
Superkix использует тени, чтобы кроссовки парили над страницей. Когда вы масштабируете страницу, тень также может перемещаться, точно так же, как смещается источник света. Диван создает пол на чисто белом фоне благодаря превосходному использованию света и тени. Больше ресурсов Следующий контент на английском языке:
Об автореРоб Моррис — австралийский дизайнер, работающий в Японии. Как дизайнер-фрилансер, он работает в компании Digitalmash и имеет клиентов по всему миру. За его приключениями можно следить в Твиттере. |