От автора: креативное манипулирование изображениями, от разбиения на слои до создания спецэффектов, может добавить веб-проектам глубины.
Мы живем в трехмерном мире, который дизайнеры каждый день стараются воспроизвести в веб-дизайне. Элемент глубины добавляет некоторым дизайнерским проектам оттенок большего реализма.
Создать его проще, чем вы думаете. Загадка имитирования реальности на 2D-экране заключается в создании глубины с помощью изображений. Добиться этого можно множеством способов, от самой фотографии до разбиения изображения на слои, манипулирования и применения специальных эффектов.
РАЗБИЕНИЕ НА СЛОИ
Разбиение на слои – инструмент, который можно намеренно применять в отношении размещения изображений и объектов в проекте, как инструмент манипуляции изображениями или целенаправленно в самом изображении.
Мы все видели разметку, где изображения бессистемно помещаются поверх друг друга, чтобы это смотрелось как кипа отпечатанных фотографий. Вы знаете этот прием. И он работает, создавая ощущение глубины, при этом появляется чувство, как будто вы перебираете фотографии. Это и есть разбиение на слои в процессе дизайна. Иногда эффект очевиден, как в данном случае, а иногда он более скрыт.
Часто множество фотографий сливаются в одну для создания двух отдельных частей изображения – переднего плана и фона. Будучи хорошо сделанным, эффект фактически незаметен. Посмотрите на сайт Range Rover выше – как автомобиль, так и изображение города очень зрелищны и, будучи скомбинированными, заставляют испытать ощущение, как будто вы стоите возле авто, оглядывая город.
Другим эффективным инструментом разбиения на слои является раскладка фотографии или изображения поверх, казалось бы, плоского фона. Это фантастически срабатывает с непривычно ориентированными или снятыми под иным ракурсом изображениями и фонами с градуированным цветом.
Наконец, некоторые изображения созданы с учетом разбиения на слои. Эта фотографическая техника основана на идее использования перекрывающих друг друга контуров, созданных различными объектами на изображении, для создания глубины. Зачастую контуры изображения выделены цветом и контрастностью с целью отделить объекты в месте действия один от другого. Эта техника может оказаться трудной в исполнении фотографами-любителями.
ФОТОГРАФИЯ
Один из самых важных инструментов создания глубины в изображениях. Кадрирование и компоновка изображений при постоянном учете глубины способны сделать ее создание сущим пустяком.
Но как вы таким образом создаете компоновку фотографий? В то время, как многие предпочтут нанять профессионального фотографа и просто проинструктировать его по поводу глубины, это не всегда единственная альтернатива. Если вы сами делаете снимки для проекта, при съемке позаботьтесь о глубине и помните следующие советы.
На переднем плане создайте некую область зрительной привлекательности. Убедитесь, что у фотографии есть предмет и фон. Если думать о них, как отдельных частях, вам удастся лучше кадрировать и создать изображение.
Смените точку зрения. Сделайте снимок с неожиданного ракурса. Это изменит перспективу как предмета, так и фона, добавив визуальный размах. Еще так можно сделать, поиграв с ракурсами; кадрируйте то же изображение с удобной плоскости и под более широким углом.
Делайте снимки в портретной ориентации. Сменив ракурс на вертикальный, вы по-разному кадрируете снимки.
Поразмыслите о естественных линиях и тенях. Иногда именно они добавляют снимку собственное чувство глубины. Четкие тени, например, могут создать объекту более сильный фокус, одновременно расширяя фон.
МАНИПУЛИРОВАНИЕ ИЗОБРАЖЕНИЕМ
Применяя редакторское программное обеспечение, такое как Adobe Photoshop, дизайнеры способны несколькими простыми приемами создать на снимках дополнительную глубину. Это – отличный выбор при работе с портретами и прочими изображениями, снятыми без заботы о глубине.
Прием состоит в следующем: при имеющемся на переднем плане предмете назначьте фону размытие blur, не применив его лишь к самому объекту. (В Photoshop’е гауссово размытие (Gaussian blur), установленное на радиус 5.0, творит чудеса.)
Этим простым приемом предмет изображения фокусируется, и в то же время создается ощущение глубины путем выведения фона из визуального приоритета.
ЭФФЕКТЫ ТЕНИ
Тени – один из самых простых и естественных способов создания ощущения глубины и помещения объектов и изображений. Размещение, степень плотности и контур тени могут подразумевать очень специфическое значение. Ключевой момент использования теней – их натуральный вид.
Самые лучшие тени – легкие и следующие принципам светоотражения. Убедитесь, что тени отражают ощущения от тех изображений, которым сопутствуют. Если первое, что видит пользователь – это тень, то, возможно, методика не работает.
Закругленные тени, лежащие под объектами, могут создать парящий эффект в стиле 3D. Это обычная техника, применяемая к кнопкам и мелким элементам пользовательского интерфейса. Тени перед объектами, соответствующие их форме, дают возможность плоскому объекту казаться правдоподобным, как на сайте Guest’d. (Вы хотя бы замечали тени до того, как о них было упомянуто?) Деформированные тени – те, что не отображают контуры предмета, к которому относятся – могут зрительно исказить очертания объекта или выделить фоновое изображение.
Тени также добавляют предмету или элементу оттенок реализма. Тени позади человека помогут выделить его из фона, выдвигая объект на передний план изображения. Это простой прием, но при этом очень важно, чтобы тени на изображении падали противоположно источникам света с тем, чтобы конечный результат смотрелся естественным и непритянутым за уши.
ИЛЛЮСТРАЦИИ И ПРОЧИЕ ИЗОБРАЖЕНИЯ
Та же самая концепция и манипуляции, результативные на снимках, также срабатывают для иллюстраций и изображений, используемых в дизайнерских проектах. Разница состоит в том, что зачастую вам приходится создавать эти эффекты самим.
Яркая, глубокая тень, примененная выше, является отличным примером. Светлые и темные части фона специфически связаны с изображением, заставляя его «выдвигаться вперед» из остального сайта.
ЗАКЛЮЧЕНИЕ
Глубина – отличный инструмент создания чувства реализма в дизайнерских проектах. Она объединяет пользователей с тем, что они видят на экране, заставляя их чувствовать себя частью пейзажа.
Даже изображениями, от фотоснимков до векторных элементов пользовательского интерфейса, которым недостает настоящей глубины, можно манипулировать с целью добавления им ощущения трехмерности. Разбиение на слои, расположение объекта и тени являются одним из самых лучших инструментов создания дополнительной глубины.
Автор: Carrie Cousins
Источник: //tympanus.net/
Редакция: Команда webformyself.
Комментарии (1)