Карты глубины в Фотошоп. Реалистичная глубина резкости

Когда дело доходит до создания глубины резкости в фотошоп , многие пользователи используют фильтр «Размытие по Гауссу» (Gaussian Blur) или другие приемы, которые выглядят нереалистичными даже рядом с глубиной резкости, создаваемой камерой. В этом уроке я покажу вам, как создать реалистичную глубину резкости с использованием Карт Глубины (Depth Maps) . Наслаждайтесь.

Я предлагаю вам сначала прочитать этот урок, и как только вы его поймете, еще раз прочитать его и попробовать этот способ на практике, используя свои изображения.
Использование Размытия по Гауссу является не самым лучшим способом для создания глубины резкости, позволяющей ясно увидеть края объектов и мелкие детали изображения. Взгляните на пример ниже. Как видите, применение фильтра Lens blur (Размытие при малой глубине резкости) гораздо эффективнее в этом случае.

Что такое Карты глубины (depth maps) .

Карта глубины в фотошоп - это не более чем изображение в режиме Градаций серого, используемое в качестве альфа-канала. Такое изображение может быть использовано с фильтром Lens Blur для создания «выборочного размытия». Фильтр применяет различное количество размытия для каждого оттенка серого. Чем темнее оттенок серого – тем меньше размытия добавляется к вашему изображению. Взгляните на изображение ниже. Градиент справа является градиентом, используемым как альфа-канал.

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

Имитация глубины резкости на различных расстояниях.

Для создания реалистичного эффекта глубины резкости в фотошоп необходимо применять различное количество размытия для объектов в зависимости от их расстояния до камеры, как при работе на настоящей камере. Мы собираемся достичь такого эффекта, используя Карту глубины. Мы создадим карту глубины вручную, с применением различных оттенков серого в зависимости от расстояния объектов относительно камеры. На нашей Карте глубины ближние объекты будут темнее (в фокусе) , а дальние – светло-серые, т.е более размытые (согласно логике) .

Практический пример.

Я взял фотографию из Интернета и поместил на ней несколько шаров на различном расстоянии.

Создание Карты глубины.

Выбор нужного оттенка серого для каждого объекта зависит от того, какой объект будет в центре внимания (в фокусе) , а какой в отдалении (размытый) . Тот, что в центре внимания будет закрашен черным цветом на карте.

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

Сначала, создаем новый слой (Ctrl+Shift+N) над слоем с изображением и используем на нем черно-белый градиент (Gradient) в зависимости от вашего выбора распределения глубины резкости для объектов изображения.

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

В следующем шаге мы изолируем каждый объект и присваиваем ему определенный оттенок серого. Вы можете выделить объекты вручную, используя инструменты Перо (Pen Tool) или Полигональное Лассо (Polygonal Lasso Tool) . В моем случае у меня уже есть копии шаров на отдельных слоях, так что мне не составит труда выделить их.

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

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

Таким образом, Карта глубины действует подобно маске слоя (Layer Mask) , только вместо контроля прозрачности она контролируем количество добавляемого эффекта размытия.

После того, как вы выполнили детализацию карты глубины объектов, объедините градиентный слой со слоями деталей глубины объектов (Ctrl+клик по миниатюрам слоев, затем Ctrl+E) .

Копируем слой с картой (Ctrl+C) , переходим в панель «Каналы» (Channels) , создаем альфа-канал (клик по иконке нового канала внизу панели) и вставляем на него карту (Ctrl+V) , снимаем выделение (Ctrl+D) . Активируем канал RGB и возвращаемся в панель слоев (Layers) . Выключаем видимость слоя с картой (клик по глазику миниатюры) и встаем на исходный слой изображения.

Следующим шагом будет применение фильтра Размытие при малой глубине резкости (Filter>Blur>Lens Blur) . Используем альфа-карту в качестве источника для добавления нужного количества размытия.

Если исходное изображение состоит из элементов, выполненных на разных слоях, вы обязательно должны объединить их для применения размытия на всех объектах изображения.

Обратите внимание, что размытие объектов постепенное на изображении выше. Имейте ввиду, что не всегда карты глубины также легко создавать, как в нашем примере.
На фото ниже показан более сложный пример создания Карты. Все выполняется вручную с использованием Пера (Pen Tool) около 25 минут. Количество объектов изоляции зависит от того, насколько подробно вы хотите распределить количество размытия для каждого из них.

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

). Слой с землей нужно деформировать, как показано на рисунке. Такой вид деформации «Искажение» позволит создать иллюзию глубины.

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

Под слоями с изображениями создаем новый слой и заливаем его «Градиентом». Цвет градиента подбирается в соответствии с тональностью изображения.

Добавляем к коллажу доску и придаем ей «Искажение» углубляя картинку. Для удобства можно применить «Вспомогательные элементы» — «Сетка» (вкладка «Просмотр»). Следует сузить край доски, это углубит изображение, если понизить доску то глубина будет ещё более выраженной.

При помощи корректирующего слоя «Цветовой баланс», который делаем обтравочной маской по отношению к слою с доской: удерживая нажатой клавишу Alt левой кнопкой мыши нажать по границе слоев. Это позволит изменить цветовой баланс конкретного слоя.

Поверх всех слоев создаем корректирующий слой «Поиск цвета» и подбираем варианты.

Под этим корректирующим слоем будем создавать другие слои. Создаем новый слой и в нем кистью мягкого типа, темного цвета подрисовываем бока и низ изображения. Это будет тень.

К этому слою применяем «Размытие по Гауссу»: вкладка «Фильтр» — «Размытие».

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

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

Под этим слоем создаем новый слой и в нем по бокам доски рисуем темные пятна, которые будут тенью. Придаем им размытие.

К слою с доской добавляем слой-маску и в ней кистью черного цвета непрозрачностью 50 % прокрашиваем край доски, слегка его скрывая.

Под слоем «Поиск цвета» создаем корректирующий слой «Цветовой баланс» и выравниваем тона изображения.

Под этим слоем вставляем изображение птицы, к этому слою добавляем корректирующий слой «Цветовой баланс», делаем его обтравочной маской и подводим тональность птицы под общую тональность изображения.

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

Для того, чтобы слой стал темным и бесцветным необходимо его обесцветить: вкладка «Изображение» — «Коррекция» — «Обесцветить» и корректирующим слоем «Уровни» (который делаем обтравочной маской применительно к слою с тенью) делаем слой темным.

Придаем «Наклон» слою с тенью.

Слою с тенью придаем размытие.

Слой с небом можно слегка деформировать.

Подгоняем длину доски под тень птицы.

Создаем новый слой под корректирующим слоем «Поиск цвета» и в нем внизу изображения подрисовываем кистью темного цвета низ. Придаем размытие. Это придаст затемнение нижней части изображения.

При необходимости поверх всех слоев можно добавить корректирующие слои: «Кривые», чтобы поменять распределение света и тени, также можно добавить слой «Поиск цвета» и подобрать вариант цветовой тональности.

Получаем изображение с эффектом глубины.

Сказать, что я был разочарован, когда Apple выпустила iOS7 в 2013 году, это ничего не сказать. Чтобы быть в тренде, Apple сплюснула весь свой пользовательский интерфейс без каких-либо реальных усиливающих принципов. Это сопровождалось бесчисленными ошибками для пользовательского опыта, который отошел на задний план, чтобы избавится от скевоморфизма. Это была плоскость во имя плоскости. Сравните это с Material Design Google, который появился вскоре после этого. Material Design по максимуму использовал плоский дизайн с помощью одной особенности – имитация реальных материалов. Этот, создающий эффект присутствия, язык дизайна содержал плоский вид, одновременно поддерживая глубину. Как? Используя большие мягкие падающие тени.

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

А теперь Microsoft, которые были плоскими до того, как это стало клевым, объявили о своем новом языке дизайна – Fluent Design. Он выглядит великолепно, но он также выглядит очень модно – большие, мягкие тени.

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

Другой подход

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

Итак, как мы воспринимаем глубину, когда нет теней? Есть несколько простых ответов. Масштаб – это самое очевидное решение. Большие вещи рядом, маленькие объекты находятся далеко. Линейная перспектива – другой вариант, использующий размерность объектов, чтобы удалять в пространство. Но для того, чтобы любой из этих подходов был действительно эффективным, потребовалась бы 3D-среда. Построение двумерного пользовательского интерфейса вокруг этих трехмерных принципов было бы неудобным и отвлекающим. Пока дополненная и виртуальная реальности более распространены, это просто не вариант.

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

Создавая э ффект

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

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

Атмосфера

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

Оттенок

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

Создание шагов

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

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

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

Реализация в пользовательском интерфейсе

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

Результат? Система работала. По крайней мере, на мой взгляд. Может быть, вы думаете: “Нет, этот дизайн выглядит размытым и приглушенным”. На самом деле он отлично смотрится на самом устройстве. Что меня больше всего удивило, так это то, как мой глаз, естественно, нашел свой путь через интерфейс. Интерактивные элементы казались выпрыгивали , что упрощало их поиск и фокусировку. Остальные элементы отступили в пространстве, все еще обеспечивая контекст и глубину. И лучшая часть?

Не требуется ни одной падающей тени.

Уровень ОС дизайн систем

Я решил продвинуть концепцию дальше. Может ли весь язык дизайна основываться на таком принципе? Как выглядели бы взаимодействия на уровне системы, если бы они включали атмосферную перспективу, чтобы отличать себя от элементов уровня приложения? Я обнаружил, что уровень ОС на самом деле близок к такой концепции. Многозадачность, уведомления, центр управления – это все, что требует концепции глубины, чтобы сломать насыщенность других приложений, используемых на экране. Это особенно важно на мобильных устройствах, где приложение занимает все экранное пространство.

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

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

Несколько примечаний напоследок

Эти дизайны не готовы до конца . Они не готовы к выпуску на миллионах устройств по всему миру. Они довольно грубые и содержат множество оплошностей. Я знаю это. Все это просто доказательство концепции и, результат одного дизайнера, который провел несколько самостоятельных исследований в течение нескольких ночей и выходных. Я не целая команда, и я бы не стал притворяться, что более способный, чем любой из людей в Apple, Google или где-либо еще. Есть бесчисленное множество других факторов, необходимых для того, чтобы полностью реализовать такую концепцию, и сама система могла бы использовать намного более тонкую настройку. Моя цель состояла в том, чтобы выяснить, есть ли этот потенциал. Я думаю, что он есть.

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

Наконец, я хотел бы узнать, что вы думаете! И дайте мне знать.

Привет!

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

Мы все знаем, что Photoshop — это очень мощный инструмент. В этой статье я расскажу вам, как использовать фильтр Photoshop CS3 «»:

Мы создадим изображения, выглядящие, будто они были сняты со сдвигом и наклоном объектива. Инструмент «Размытие при малой глубине резкости » создает эффект более локальной глубины резкости, поэтому некоторые участки вашего изображения будут находиться в фокусе, а другие области будут размыты. В сочетании с альфа-каналом, который определяет направление размытости, у нас появляется мощный инструмент создания масок и изменения фотографий.

Проще всего на практике показать вам, как работает «Размытие при малой глубине резкости ».

Давайте рассмотрим простой пример:

Во-первых, мы можем с помощью градиента определить области, которые должны быть абсолютно резкими (белые ), и области, которые должны быть размытыми (черные ).

Мы можем определить, насколько размытой будет самая размытая часть изображения: я объясню это через секунду. Когда вы применяете фильтр «Размытие при малой глубине резкости » и градиент, называемый карта глубины, мы видим, что изображение становится все более размытым слева направо:

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

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

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

Мы можем создать такой эффект в Photoshop . Во-первых, откройте изображение, к которому вы хотите применить эффект. Для пейзажей это подходит больше, особенно для снимков на открытом пространстве. Я буду использовать фото, которое я сделал на Гавайях несколько лет назад:

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

Чтобы изменить цветовой режим, перейдите в Изображение — Режим — Цвета RGB :

• Выберите инструмент «Градиент »;
• В панели инструментов нажмите кнопку «Зеркальный градиент »:

3. Выберите черный в качестве цвета переднего плана, белый — цвета фона;
4. Убедитесь, что для градиента задан переход от цвета переднего плана к цвету фона;
5. В палитре «Каналы » создайте новый канал;
6. Нажмите на значок видимости канала рядом с каналом RGB (первый в списке ):

• Теперь вы можете видеть, что на изображении появилась область красного тона. Создайте градиент, начиная от середины изображения (где будет находиться точка резкого фокуса ), и до точки, отдаленной на три четверти расстояния до верхней части изображения;
• Нажмите на канал RGB в палитре «Каналы »:

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

Прежде, чем мы применить «Размытие при малой глубине резкости », давайте сделаем копию изображения на отдельном слое, потому что оригинал понадобится нам позже. Нажмите на палитру слоев, выберите слой с вашим изображением, и нажмите Ctrl + J . Это создаст копию изображения в отдельном слое.

Теперь, при выбранном новом слое войдите в меню Фильтр — Размытие , а затем «Размытие при малой глубине резкости ».

У вас должно появиться следующее окно:

Для нашей карты глубины источник должен быть уже выбран — Alpha 1 (или как вы назвали канал карты глубины, который мы только что создали ).

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

Далее, мы должны определить, насколько размытыми должны стать остальные части изображения, это делается с помощью параметра «Радиус ». Установите его ползунок приблизительно посередине, и вы уже увидите, как проявляется эффект «подделки миниатюры «. Если захотите повозиться с настройками, вы можете выбрать точное значение радиуса и получить более подходящий результат.

Настройки для других опций этой панели я подбираю в значительной степени с помощью эксперимента. Я установил шестиугольную форму диафрагмы, «Кривизну листа » — 12, «Поворот » — 85, а значения остальных опций оставил по умолчанию.

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

Кроме того, если вы рисуете градиент в неправильном направлении, то не нужно перекраивать карту глубины: просто установите флажок для опции «Инвертировать ».

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

Например, на моем изображении верхняя часть купола слишком размыта, на мой вкус — она должна быть более в фокусе. Я могу взять «Ластик » с довольно большой мягкой кистью и стереть часть слоя, в котором мы применили «Размытие при малой глубине резкости », чтобы проявить резкий слой ниже:

Это довольно несложно! И это значительно лучше, чем покупать специальный объектив. Законченную версию изображения в большом размере вы можете увидеть здесь :

Перевод статьи «How to use Photoshop’s Lens Blur tool for tilt-shift fakery (Part 1 of 2) » был подготовлен дружной командой проекта

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

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

Многослойность

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

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

Часто для достижения эффекта глубины несколько изображений объединяют в одно, чтобы визуально в одной картинке скомбинировать два плана — передний и фон. Если работа проделана хорошо, то эффект практически незаметен. Посмотрите на сайт Range Rover (в примере выше). И машина и город выглядят впечатляюще, а их комбинирование вызывает ощущение что если бы вы стояли за машиной, то смотрели бы с высоты на город.

Другой эффективный способ достижения многослойности — размещение изображений на фоне, который выглядит плоским. Особенно интересно смотрятся фотографии с необычных ракурсов, размещенные под углом, а также градиентные фоны. (Смотрите сайт Аdlucent в примерах).

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

Фотография

Один из самых полезных инструментов при создании «глубокого» веб-дизайна являются фотографии. Грамотные кадрирование и композиция могут сделать процесс создания глубины минутным делом.

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

Создайте заметный интерес на переднем плане. Убедитесь что у фотографии есть тема и фон. Думайте о теме фотографии на переднем плане и о фоне как о двух разных вещах. В таком случае вам проще будет выстроить кадр.

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

Попробуйте фотографировать в портретной ориентации. Меняя ракурс по вертикали вы измените кадрирование.

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

Манипуляции с изображением

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

Оставьте на переднем плане четкое изображение главного объекта и размойте весь задний фон. (В Photoshop, можно воспользоваться фильтром Gaussian blur с радиусом в 5.0)

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

Тени

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

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

Округлые тени располагающиеся ниже объектов, которые их отбрасывают, помогут создать 3D-эффект парения в воздухе. Это простая техника, часто использующаяся при создании кнопок, реже — других более мелких ui-элементов. Тени расположенные прямо перед плоским объектом сделают так, что объект будет казаться стоячим, как в примере выше — сайт Guest’d. (Заметили ли вы тени до того как специально обратили на них внимание?) Неправильные тени — те, которые не повторяют очертания объекта — тоже имеют право на существование. Они могут придать иное значение объекту, который отбрасывает несвойственную ему тень, или же могут выделить объект с заднего плана.

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

Иллюстрации и другие изображения

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

Выводы

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

Эффекты можно применять как к фотографиям и рисункам, так и к кнопкам и прочим элементам ui. Так что удачи вам в создании «глубокого» веб-дизайна!