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

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

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

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

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

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

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

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

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

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

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

Атмосфера

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

Оттенок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Привет!

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

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

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

Фильтры размытия в Photoshop удобно использовать для постепенного изменения глубины резкости в фотошопе в пределах одного снимка. В частности, фильтр Lens Blur (Размытие при малой глубине резкости) в сочетании с черно-белым градиентом в альфа-канале позволяет создать плавный переход от четкого переднего плана к размытому заднему. Главное - определить фокусный центр, после чего все области, обозначенные в альфе-канале тем же самым оттенком серого, окажутся в фокусе. Остальные же будут размыты в зависимости от того, какой цвет градиента им соответствует.

Подобные публикации:

• Как увеличить глубину резкости в фотошопе
• Имитация глубины резко изображаемого пространства

Откроем исходную фотографию.

Перейдём в палитру "Каналы " и создадим новый канал, для чего щёлкнем по второй справа иконке внизу палитры "Каналы ". Появится канал "Альфа 1 " (название по умолчанию) и всё изображение зальётся чёрным цветом.

Включим видимость композитного канала RGB - щёлкнем по "глазику" этого канала, изображение зальётся красным цветом. Нажмём клавишу "D " - установим цвета переднего и заднего планов по умолчанию.

Выберем инструмент линейный "Градиент " (G ), от основного к фоновому.

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

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

Щёлкаем по синему полю композитного канала RGB .

Переходим в "Фильтр - Размытие - Размытие при малой глубине резкости... ".

Значения всех ползунков устанавливаем на ноль (за исключением "Изогелии " - оставляем по умолчанию), щёлкаем по чёрной стрелке правее поля "Источник " и выбираем созданный ранее канал "Альфа 1 ".

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

Автоматически ползунок "Фокусное расстояние размытия " передвинется на величину, соответствующую ранее выбранной точке на изображении (где мы щёлкнули).

Ползунок "Радиус " передвигаем вправо и добиваемся оптимального с Вашей точки зрения уровня размытия изображения. Ползунком "Фокусное расстояние размытия " корректируем фокусный центр. Нажимаем клавишу "Да ".

Сначала я был полностью потрясен , а затем вышли iPhone X, iPhone XS и iPhone XS и удивили еще больше.

Но, проблема в том, что я не хочу телефон большого размера, а «Портретного режима» не был доступен на iPhone 7, iPhone SE или iPhone 6.

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

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

Лучшие приложения для съемки в портретном режиме на старых iPhone

Depth Effects

Depth Effects позволяет делать снимки с помощью камеры или выбрать изображения из своей фотогалереи. После того, как фотография загрузиться, вы можете на функцию размытия (Blur ), а затем нажмите Mask . После вы можете выбрать стиль кисти, круглой или квадратной формы, а также увеличить или уменьшить непрозрачность кисти и отрегулировать размер.

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

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

Если вы допустили ошибку, вы можете нажать на reverse , он сотрёт область, которую вы нарисовали. Нажмите на View (просмотр), чтобы увидеть, как эффект будет смотреться на изображении.

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

FabFocus — portraits with depth and bokeh

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

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

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

Fore Photo

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

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

AfterFocus

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

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

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

Patch: Smart Portrait Editor

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

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

Приложения о которых стоит упомянуть

Я перечислил приложения для редактирования фотографий, которые, как я думаю, лучше всего создают эффект глубины портретного режима на iPhone 8 Plus, iPhone 7 Plus и iPhone X. Но есть и другие которые не вошли в мой список, но достойны, чтобы на них обратили внимание.

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

Big Lens — инструмент немного неуклюжий и мало функций. Приложение хорошее, но недостаточно, чтобы быть наверху.

Bokeh Lens — приложение очень простое в использовании, но оно не обновлялось для iOS 11, поэтому его пришлось опустить в самый низ.

Tadaa SLR — я раньше часто использовал это приложение, у него есть фантастическая функция автоматического маскирования, которая работает очень хорошо, но оно также не обновлялось для iOS 11, поэтому остается внизу.

Сравним эти приложения с оригинальным Портретным режимом

Я сравнил оба приложения Depth Effects и Patch с режимом портрета iPhone 7 Plus. Я должен признаться, я был удивлён тем, насколько хорошо работают оба приложения. За исключением моих незначительных ошибок в «закрашивании», глубина эффекта выглядит почти также хорошо, как эффект в портретном режиме.

Один плюс в использовании этих приложений по сравнению с портретным режимом на iPhone 7 Plus, в том, что не нужно настраивать камеру перед съемкой. При съемки с iPhone 7 Plus, вы должны быть на определённом расстоянии, а освещение должно быть хорошим. Используя Depth Effects и Patch, вы можете снимать в темноте и с очень близкого расстояния и потом сделать эффект глубины.

Какое приложение у тебя?

Используете ли вы приложения, чтобы создавать эффект глубины, как у портретного режима на iPhone 7 Plus, iPhone X или iPhone 8 Plus? Какое ваше любимое и почему?

Мы покажем, как с помощью простейших техник и инструментов Photoshop Elements вы можете «размыть» фон и имитировать эффект малой глубины резко изображаемого пространства (ГРИП).

• Прим. переводчика - подробнее о ГРИП Вы можете узнать из третьей части серии

Малая ГРИП - прекрасный способ акцентировать внимание зрителя на каком-то объекте снимаемой сцены и создать из фона волшебное боке. Этот способ стал классическим для портретной фотографии.

Обычно, вы можете получить малую ГРИП, если установите значение диафрагмы равным между 2,8 и 4. Но большой диаметр отверстия, созданного лепестками диафрагмы, не единственное условие малой ГРИП.

Фокусное расстояние объектива и дистанция съёмки также влияют на ГРИП. Чем больше фокусное расстояние, и чем ближе вы располагаетесь к снимаемому объекту, тем меньше ГРИП.

Наш исходный снимок

Несмотря на то, что исходный снимок сфотографирован со значением диафрагмы равным 4, из-за малого фокусного расстояния равного 18 мм фон выглядит довольно резким. Мы применим фильтр Гаусса (Gaussian blur filter) - инструмент Photoshop - чтобы имитировать малую ГРИП: акцентируем внимание на модели и «размоем» второстепенные по смыслу детали.

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

Шаг #1. Выделите главный по смыслу объект

Откройте исходный снимок в Photoshop Elements. Четырежды нажмите на клавиатуре сочетание клавиш «Ctrl» + «J» («CMD» + «J» на Mac), чтобы создать четыре копии исходного изображения.

Выберите инструмент «Быстрое Выделение» (Quick Selection tool) и рисуйте им вокруг главного по смыслу объекта (в нашем случае - модели). С помощью клавиш «[» и «]» вы можете менять размер кисти. При рисовании зажимайте клавишу «Alt», когда хотите вычесть из выделения новую область.

Выберите в главном меню команду «Выделить» -> «Уточнить Край» (Select -> Refine Edge). В появившемся диалоговом окне установите значения параметров «Сглаживание» (Smooth) и «Выступ» (Feather) равными 10 и 0,5, соответственно. Нажмите «ОК».

Шаг #2. Дополните выделение

Отобразите панель «Слои» (Layers) с помощью команды в главном меню: «Окно» -> «Слои» (Window -> Layers). Переименуйте верхний слой в «Зона резкости».

Возьмите инструмент «Кисть Выделения» (Selection Brush tool), установите режим «Маска» и установите малую жёсткость кисти (прим. переводчика - в Photoshop для подобного способа выделения используется Режим Быстрой Маски (Quick Mask Mode). Чтобы войти (и выйти из него) нажмите клавишу «Q» на клавиатуре. Рисуйте белой или чёрной обычной кистью (Brush). ). Добавьте в выделение фрагмент исходного изображения, который соответствует пространству, расположенному вдоль плоскости фокусировки (удалённому на одинаковое с моделью расстояние).

Шаг #3. Создайте маски

Нажмите левой кнопкой мыши на кнопке-пиктограмме «Создать Маску Слоя» (Add Layer Mask), расположенной внизу панели «Слои». Выделение превратится в маску слоя.

Выделите нижележащий слой. Выберите в главном меню команду «Фильтр» -> «Размытие» -> «Размытие по Гауссу» (Filter ->Blur -> Gaussian Blur). В появившемся диалоговом окне установите значение параметра «Радиус» (Radius) равным 1,5 пикселам. Нажмите «ОК».

Переименуйте слой в «Размытие 1,5 пикс.». Затем зажмите на клавиатуре клавишу «Alt» и нажмите левой кнопкой мыши на кнопке-пиктограмме «Создать Маску Слоя». У активного слоя появится полностью чёрная маска.

Шаг #4. «Размойте» передний план

Возьмите инструмент Кисть (Brush) и выберите в качестве основного цвета белый. Нажмите левой кнопкой мыши на пиктограмму-изображение маски у слоя «Размытие 1,5 пикс.». Рисуйте по переднему плану снимка и по дереву.

Выделите нижележащий слой и переименуйте его в «Размытие 3 пикс.». Как и прежде, примените к слою фильтр Гаусса со значением, указанным в названии слоя.

Создайте чёрную маску для этого слоя.

Шаг #5. «Размойте» сильнее

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

Выделите нижележащий слой и переименуйте его в «Размытие 6 пикс.». Как и прежде, примените к слою фильтр Гаусса со значением, указанным в названии слоя. Этот слой сильнее предыдущих «размоет» оставшиеся фрагменты снимка, в частности, соответствующие деревьям вдалеке.

Шаг #6. Проведите тоновую и цветовую коррекцию

Наконец, добавьте корректирующие слои, чтобы улучшить цветопередачу. Выделите верхний слой и нажмите на кнопке-пиктограмме «Создать Корректирующий Слой» (Create Adjustment Layer), расположенной внизу панели «Слои».

В появившемся списке выберите «Яркость/Контрастность» (Brightness/Contrast). Установите значение параметра «Яркость» (Brightness) равным 6, а значение параметра «Контрастность» (Contrast) равным 12.

Затем добавьте корректирующий слой «Цветовой сдвиг/Насыщенность» (Hue/Saturation) и установите значение параметра «Насыщенность» (Saturation) равным +7.

Возможности Photoshop

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

Когда дело доходит до создания глубины резкости в фотошоп , многие пользователи используют фильтр «Размытие по Гауссу» (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 минут. Количество объектов изоляции зависит от того, насколько подробно вы хотите распределить количество размытия для каждого из них.

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