Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

Несмотря на то, что в тренде плоский веб-дизайн, лёгкие эффекты тени добавляют некий шарм всему сайту. Как правило, их используют в небольшом количестве и исключительно для того, чтобы либо подчеркнуть главное, либо исключительно для красоты. Рассуждая об эффекте глубины, мы уже затрагивали тему теней, поэтому слишком уж подробно не будем рассматривать их использование, но новые примеры, конечно, приведем.

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

Светотеневой дизайн

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

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

Material Design от Google базируется на законах физики очень глубоко и очень жестко, поэтому пользователю легко понять интерфейс, его смысл. Если не было бы маломальских теней, не было бы ясно, что активно, по сути, а что нет.

Кроме этого, тени создаются разными по размеру. Зачастую увидеть такое можно на кнопках, когда при наведении курсора тень имеет один размер, при нажатии - другой, а в статическом варианте её еще меньше или нет вообще.

Но главное в использование теней в веб-дизайне – визуальная реалистичность. И достигнуть этого можно, например,  26 способами, дополнительно придав объем нужному объекту, будь то изображение или текстовой блок.

Information Highwayman

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

Campaign Monitor

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

Аналогично выглядят и проекты Alfred, Corvus Design, Squarespace, «Тарелка столовая», Greek Shadows, WaveOC. В каждом из них тени применялись либо для выделения изображений, либо для пунктов меню, либо для отдельных элементов интерфейса. Но при этом каждый такой дизайн является современным, новаторским в той или иной степени, даже авторские работы есть.

Также обратим внимание на тени в логотипах и тени  от изображений, которые удачно вписываются в общую стилистику работ. Это блог Kelli Anderson, Blue Hosting и сайт производителя виски Woodinville Whiskey Co.

Photoshop и тени

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

Необычная тень

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

Шаг 1

Создадим новый текстовой слой с некоторым текстом  (web) и установим справа в слоях значение Заливка в 0%. Обратите внимание, не прозрачность, а именно Заливка, ибо она позволит эффектам слоя быть видимым, а Непрозрачность скроет  и их.

Шаг 2

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

Шаг 3

Здесь же в окне выбираем Тень. Экспериментируйте и подбирайте экстравагантные варианты. Чем меньше значение Размера и Размаха, тем Тень будет жестче.

Многие полагают, что если Заливка слоя установлена на 0%, то Тень должна быть видима и проходить насквозь существующий Текст. Но это не так. Она все равно будет скрыта в тех местах, где это необходимо по законам физики. Но решение есть.

Шаг 4

Закрывайте окошко свойств и обратите внимание на значок Fx справа у текстового слоя, с которым мы работали. Кликайте по нему ПКМ и выберите опцию «Образовать Слой». Вот теперь все эффекты, которые были созданы, как эффекты наложения, разбиты на слои и с ними можно работать отдельно друг от друга. Более того, Тень теперь прошла сквозь Заливку и стала видимой, таким образом нарушив законы физики.

 

Такой вариант создания и работы с тенью позволяет добиться самых разных эффектов, сложных и замысловатых образов. Можно даже размножить количество слоев с тенью и сделать её ступенчатой, разных оттенков и цветов.

Сложные тени в Photoshop

Другим вариантом данного эффекта является более сложное использование тени, которое и создавать чуть более кропотливо. Если рассмотреть изображение с образцами в начале нашей статьи, то речь идет о Тенях с 13 по 26 номер. Они бывают на уголках и в центре, только в центре или только на уголках. При этом визуально создается ощущение того, что углы самого объекта слегка загнуты вверх. Оптический обман, иллюзия, достигаемая градиентами.

Градиенты играют большую роль в веб-дизайне. Они позволяют и установить направление Света и падения Тени от объекта, и создавать удивительные эффекты. И все это при том, что в моде плоский, строгий дизайн.

Шаг 1

Создадим некий объект, например, прямоугольник и растрируем его. Тень же в данном случае будем создавать иначе, нежели чем с помощью Стиля слоя. Можно, и как в примере выше, создать Тень и разбить получившееся на слои, но затем будет гораздо сложнее работать с градиентами. Для нас проще было бы так…

Создадим копию слоя с прямоугольником и немного сдвинем его вниз (или в иную часть, где будет наша Тень). Все, что просвечивается лишнее – удаляем Ластиком и корректируем длину будущей Тени.

Шаг 2

С помощью Трансформирования (Ctrl + T) данную линию-тень можно немного увеличить по высоте. Это удобно визуально для работы, да и затем лишнее можно будет спрятать под Слой с объектом.

Шаг 3

Теперь переходим на Стиль слоя и поверх данной линии-тени накладываем Градиент. Выбираете тот, что вам удобнее и более подходит под задачу. Стиль – Зеркальный, угол 180. Это даст возможность установить Тень на углах, а осветление в центре будет мягким и ровным. Два раза кликаем по полю Градиента и появляется редактор.

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

Шаг 4

Тень не бывает четкой. Обычно. Поэтому теперь к данному Слою применяем Фильтры -> Размытие -> Размытие по Гауссу  и также аккуратно размываем Тень. То, что Тень далеко отстаёт от объекта – не страшно. Тень представляет собой отдельный слой, его можно двигать, дополнительно вернуться в редактирование эффектов и доработать градиент, в случае необходимости.

Шаг 5

По факту, наша Тень от объекта создана, но выглядит все в целом не слишком примечательно. Почему? Опять же – законы физики. Тень не может быть без Света, но Света в нашем случае нет. Объект полностью плоский и Тень выглядите как нечто чужеродное, лишнее.

Именно поэтому придется раскрасить сам прямоугольник. Переходим на этот слой (с прямоугольником) и выбираем Стили Наложения -> Градиент. В Photoshop есть много наборов градиентов, которые изначально еще не загружены. Стиль Ромб и два раза кликаем по полю Градиент, чтобы появилось Окно редактора.

Нажимаем шестеренку и выбираем коллекцию Пастель. Мы взяли «Желтый, зеленый, голубой» и изменили его так, чтобы использовались только голубые оттенки.

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

Добавьте обводку, если есть желание. Причем разный стиль Обводки придаст и разное восприятие объекта.

Шаг 6

В целом, у нас готова самая обычная, но красивая и сложная тень. Можно  сделать её только на углах или как-то вытянуть, это уже  достигается с помощью Трансформирования -> Деформация.

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

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

 Пример сложной Тени можно увидеть в меню проекта Greek Shadow, под слайдером Atiba Mobile (здесь тень была увеличен по центру), dascolabarbers.com также использует тень на углах, за лентой меню.

 

Роль градиента

Не стоит забывать, что градиенты позволяют создавать игру светотени на самом объекте, «без» или «с» использования внешних теней. Например, объёмные панели меню, инфоблоков, границ. Они кажутся объемными, но при этом Тени, вроде, не имеют. На самом деле не так, имеют.  Наглядный пример сайт Apple. Каждый инфоблок обладает тенью, градиентом и заметьте, как падает свет. От этого зависит визуальная выпуклость объекта, будто он «надутый» внизу.

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

Итоги

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

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

Как вам материал?