Глубина, даже будучи представленной весьма абстрактно, создает чувство реализма. Это дополнительное свойство может создать гораздо больший интерес к любому проекту, будь это графический дизайн, логотип, веб-дизайн или что-то еще. Создание глубины на плоской в прочих отношениях странице также может стать отличным способом выделения отдельные элементы и создать правильную иерархию дизайна. Более плоские поверхности привлекают меньше внимания, в то время как имеющие глубину – больше.
В этой статье мы рассмотрим пять дизайнерских методик и тенденций создания глубины дизайна и несколько примеров, которые могут стать примером для дальнейшего развития. Также раскроем, когда следует применить, а когда лучше отказаться от применения глубины и особенности 3D в дизайне и расскажем, когда это выглядит привлекательно, а когда – уже слишком.
5 дизайнерских приемов
Реалистичные интерфейсы
Хотя эта точка зрения слишком стандартна, она весьма эффективна. Вид настоящих, нажимаемых кнопок и элементов создает глянцевый дизайн, с которым, как кажется, гораздо проще взаимодействовать. Градиенты, тени и прочие слишком часто используемые элементы не должны усеивать страницу, но добавление к кнопке нескольких блестящих эффектов может реально выделить ее. На примере ниже можно увидеть, как выделяется эта 3D-кнопка по сравнению со ссылкой рядом с ней, побуждая к действию.
Создание реалистичных интерфейсов, однако, может сделать хуже. Мы все видели проекты, в которых применяется слишком много градиентов и отбрасываемых теней, и являются ничем иным, как хитрой уловкой. Ключ к созданию успешных элементов интерфейса с глубиной – представить, как они будут выглядеть в реальности – выглядит ли эта отбрасываемая тень на самом деле так, как будто она падает от кнопки (или другого элемента на ваш выбор), или просто смотрится как отбрасываемая тень, размещенная там без особых на то причин? Не просто делайте 3D-элементы интерфейса, делайте их реалистичными.
Обертки и ленты
Создание оберток последние год-два было обычной тенденцией дизайна, а так как используется она часто, то это и хорошая техника, создающая глубину дизайна и красивый зрительный эффект, а также легко привлекает внимание к любым областям, где это требуется, как в нашем первом примере вверху.
Для нее имеется множество вариантов, от твердого загиба вверху до более закругленного и мягкого. Огромную выставку этих элементов можно найти на WebDesignFan: «Витрина 3D-элементов веб-дизайна».
Такие ленточки можно часто использовать для заголовков, датирования блогов, выдающихся элементов или просто чего угодно, что требуется выделить, например, призывающий к действию дизайнерский элемент (Подписаться, Контакты и т.д.). Просто просмотрите вышеупомянутую витрину или любую подобную ей, и она может дать вам представление о том, где их обычно применяют, и расскажет о некоторых отлично подходящих для них местах. В других обстоятельствах некоторые дизайнеры применяют обертки для создания эффекта глубины и отделения разных элементов сайта.
Например (выше) нижний колонтитул может отделить себя от находящихся выше разделов страницы, действуя как упаковка из самого себя, обернутая вокруг слоя контента.
Перспектива
Создание уникальной перспективы также может добавить визуально очень привлекательной глубины. Этот способ не такой хитрый, как прочие дизайнерские приемы эффекта глубины, и часто применяется для привлечения общего интереса к проекту. Классный эффект, и часто ощущение реальности (пусть даже «мультяшной») оказывает длительное впечатление на многих посетителей.
Подход к дизайну с перспективой может проявляться множеством разных форм, и на самом деле написано не так уж много точных пошаговых руководств по их проектированию, таких как это. Вернее, проекты с перспективой довольно уникальны у каждого дизайнера, хотя общая идея – уже тенденция.
Основные правила создания перспективы во многом такие же, которые вы, возможно, изучали на уроках изобразительного искусства в школе – следование единообразным углам и горизонтальной линии разметки создают правильный вид, как и верные пропорции размер в размер и любое изменение углов на протяжении горизонтального пространства. Рассмотрите некоторые учебники с художественной точки зрения: одноточечной перспективы, множественной перспективы.
Вверху приведен отличный пример абстрактной перспективы в веб-проектировании. Точно так же имеются более реалистичные примеры, так как эффект глубины создает реализм в 2D-пространстве в любом виде.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении
Marc’s Design предлагает реалистичные интерфейсы и эффект глубины, применяя некоторые из вышеприведенных способов, а также эффект перспективы для фокусирования внимания на основном элементе: компьютерном интерфейсе, показывающем элементы портфолио. Перспектива, в основном создающая сильный визуальный интерес, также может указывать на интересные места страницы.
Разбиваем сетку
Иногда может не быть или быть совсем немного свойств дизайна, придающих глубину элементу, таких как отбрасываемые тени, кривые линии и градиенты. Эффект глубины можно легко создать, перекрыв сетку и поместив некоторые элементы над или под другими. На проекте внизу область содержимого просто перекрывает остальные области, чтобы казаться больше и ближе – создавая в проекте глубину при помощи одних только плоских элементов. Легкая падающая тень здесь применяется для усиления эффекта, но, кроме того, существует много примеров, где глубина создается аналогичным образом без добавления этого штриха.
На проекте внизу почти все элементы страницы плоские. Однако путем перекрывания нескольких фрагментов создается эффект глубины и упорядоченности. Так средствами дизайна создается некоторый интерес и проект не выглядит слишком плоским или скучным.
Наконец, мы видим веб-проект, где в основном применяются плоские элементы и разделы, а глубина создается внутри изображений сайта. Перекрывающие друг друга элементы создают глубину всего проекта, а чашка кофе действует, как часть этого изображения, а потом перекрывает заголовок, создавая большую глубину и взаимодействие между разделами сайта.
Игра с тенями
Создание эффекта глубины при помощи теней – последний дизайнерский прием, который мы сегодня обсудим. Это популярная тенденция, и можно видеть, что она уже применялась во многих показанных выше дизайнерских техниках. Тем не менее, существует гораздо больше интересных вещей, которые можно делать при помощи теней, помимо создания легкого эффекта. Такие вещи, как плавающие элементы, искривленные страницы и так далее – это все творческие эффекты, которые можно создать уникальным применением теней.
Закругленная тень ниже элемента на странице дает ему возможность выглядеть так, как будто это 3D-пространство, неважно, является ли «как живой» плавающий элемент интерфейсом как на изображении выше или более плоской дизайнерской деталью.
Можно применить более реалистический подход, и довольно легко. Просто использовав фотографию или какой-нибудь элемент с включенной тенью, можно выделить его, если применить с правильной перспективой, как на примере вверху. Или же для элементов, исполненных в Photoshop’е, можно имитировать цифровым методом реалистические тени из другой уникальной перспективы.
Тень от источника света, падающего спереди, может дать ощущение того, что в прочих условиях плоский элемент явно «стоит ближе» или поддерживается для показа. Обратите внимание на легкие градиенты слева и справа внизу от скриншота, а также на маленькую реалистичную тень под iPhone. Этот дизайнерский эффект также имитирует тень, которая была бы на глянцевой поверхности. Представление разных текстур, на которые ложится тень – это еще один прекрасный способ творчески подойти к ее эффектам.
Наконец, искаженные тени – самый последний тренд, который во многих ситуациях может легко применяться и большую часть времени гарантировать ощущение глубины без жертвования структурой с точки зрения разработки. (Видите, что область содержимого вверху все еще остается квадратной и не нуждается в собственном изгибе – легко кодировать и легко растягивать. ) Подобная техника, загибание углов или страниц, также часто применяется для создания привлекающих внимание точек.
Заключение
Эффект глубины не всегда обязан применяться в проекте для создания хорошего вида, но это – распространенная тенденция, дающая великолепные результаты. Существует несколько работающих методик, а также кое-чего нужно избегать. Выше мы раскрыли пять из самых обычных приемов создания эффекта глубины в веб-дизайне, но, конечно, их существует гораздо больше. Если вы знаете о каких-то еще примерах, учебниках или тенденциях, не стесняйтесь дать на них ниже ссылку!
Когда приходится создавать глубину резкости в программе Photoshop, многие пользователи применяют размытие по Гауссу или другие технические приёмы, после применения которых, эффект с трудом выглядит как реалистичный или близко даже нет к той глубине резкости, которую создаёт настоящая камера. В этом уроке, я покажу вам, как создать реалистичную глубину резкости в программе Photoshop, используя Карту Глубины. Наслаждайтесь.
Используя размытие по Гауссу для создания Глубины Резкости не самый хороший способ для достижения и вы чётко это видите на краях объектов и мелких деталях. Посмотрите на изображение ниже, которое приведено в качестве примера. Как вы можете увидеть, Размытие при малой глубине резкости выглядит более реалистично.
Что такое карта глубины?
Карта глубины в программе Photoshop это ничего более, чем изображение серой шкалы, которое используется в качестве альфа канала. Карту глубину можно применять через фильтр (Lens Blur filter), чтобы создать “выборочное размытие”. Фильтр применяет различную степень размытия к каждому оттенку серого. На более тёмных оттенках серого, будет меньше применяться размытие к вашему изображению. Посмотрите на изображение, расположенное ниже. Градиент справа - это используемый градиент, в качестве альфа канала.
Имитация глубины резкости на различных расстояниях
Для получения реалистичного эффекта глубины резкости в программе Photoshop, вы должны применить различную степень размытия на объектах в зависимости от их расстояния до камеры, точно так же, как будто до настоящей камеры. Мы собираемся сделать это с помощью карты глубины. Мы вручную создадим карту глубины, путём наложения различных оттенков серого на объекты в зависимости от их удалённости. На нашей карте глубины, самые близкие объекты будут темнее, а объекты, которые расположены подальше будут в более светлых оттенках серого.
Практический пример
Я взял фото из Интернета и поместил несколько шаров на различном удалении.
Создание карты глубины
Следующий шаг - создание карты глубины. Как я уже говорил, единственный способ это сделать -это самим его создавать, потому что мы хотим, чтобы заполнение было серыми оттенками. Просто взять и превратить изображение в чёрно-белое не поможет.
Оттенки серого, которые вы применяете к каждому объекту, в действительности зависят от того, какой объект вы хотите сфокусировать и соответственно закрасить этот объект в чёрный цвет.
Например, если вы хотите, чтобы был сфокусирован жёлтый шар. Вы должны закрасить его в чисто чёрный цвет, а другие шары в различные оттенки серого, в зависимости от их удалённости от жёлтого шара. Немного запутано, но если вы увидите это, то это легко понять.
Первое, что вы должны сделать, это создать новый слой и нарисовать градиент от чёрного к белому в зависимости от того, какую глубину резкости вы хотите получить. На моей фотографии, окно в конце коридора самое удалённое от камеры, потолок и пол постепенно приближаются к камере. Таким образом, я создал свой градиент. (Я удалил половину градиента, так что вы можете увидеть, как он выглядит в палитре слоёв над существующим изображением).
Примечание переводчика: Автор создал градиент, удалил половину градиента, скопировал и соединил. Вы можете воспользоваться Зеркальным градиентом (Reflected Gradient).
Следующий шаг - это выделение объектов и назначение каждому из них различного оттенка серого. Вы можете выделить объекты вручную с помощью инструмента Перо (Pen Tool) или Прямолинейного лассо (Polygonal Lasso Tool). В моём случае, у меня уже была копия шаров на отдельных слоях, поэтому, мне было намного легче их выделять.
Очень важно, чтобы детали карты глубины в точности соответствовали каждому объекту, в противном случае, вы не получите желаемого результата. Будьте уверены, что детали карты глубины должны создаваться на отдельных слоях, потому что на последнем шаге, вы будете сливать все слои вместе.
Примечание переводчика: под деталями карты глубины, автор имеет ввиду слой градиента и слой с шарами или слои с другими объектами.
Я закрасил синий шар в чёрный цвет, потому что я хочу, чтобы он был сфокусирован и я придал различные оттенки серого остальным шарам. Зелёный шар (самый удалённый от синего шара) закрашен в светло-серые оттенки, почти что белый, таким образом, он будет самый размытый из всех шаров. Синий шар вообще не будет размыт, потому что я его закрасил в чёрный цвет.
Итак, карты глубины работает также как и слой-маска, но вместо регулирования прозрачности, она регулирует степень применения эффекта.
После того как вы создали все детали, слейте слой градиента и детали в один слой, перейдите в закладку Каналы (channels), создайте новый слой и вклейте карту глубины.
Примечание переводчика: слейте слой градиента и слои с шарами или с другими объектами в один слой Слой - Объединить слои (Layer - Merge layers) или выделить слои и нажать Ctrl+ E. Потом выделите слой Ctrl+ A, скопируйте выделение Ctrl+ C, перейдите на альфа канал и вклейте выделение на альфа канал Ctrl+ V. При создании деталей, например шаров, создайте копию шара - оригинал выключите (сделайте невидимым), а на копии слоя залейте шар светло-серым оттенком, если он самый дальний шар. То же самое проделайте с другими шарами, но заливайте оттенками серого по мере приближения. Самый близки нам шар залейте чёрным. Если вместо шаров у вас будут другие объекты, то проделываем то же самое с объектами, как в случае с шарами.
В следующем шаге применяем фильтр Размытие при малой глубине резкости (Lens Blur filter) заходим в меню Фильтр - Размытие - Размытие при малой глубине резкости (Filter>Blur>Lens Blur). В настройках, в карте глубины установите Источник (source) альфа канал и примените желаемую степень размытия.
Если ваше изображение оригинал состоит из элементов на разных слоях, то вначале вы должны их слить, перед тем как применить размытие ко всем элементам композиции.
Примечание переводчика: так как мы в самом начале сделали копии шаров или объектов, теперь включаем видимость слоёв и сливаем все слои, кроме созданной карты глубины, объединённый слой, который мы использовали для альфа канала и сделайте его невидимым.
Вы можете чётко увидеть постепенное размытие на изображении сверху. Но помните, что не все карты глубины также легко создать как ту, которую мы создали.
Это более сложная карта глубины. Эта карта также создавалась вручную с помощью инструмента Перо (Pen Tool) примерно за 25 минут. Количество объектов, которые вы выделяете, зависит от вашей выборности при создании вашей карты глубины.
Результат (примечание: люди за 2 мужчинами должны быть темнее, потому что слишком много размытия применяется к ним)
Сказать, что я был разочарован, когда Apple выпустила iOS7 в 2013 году, это ничего не сказать. Чтобы быть в тренде, Apple сплюснула весь свой пользовательский интерфейс без каких-либо реальных усиливающих принципов. Это сопровождалось бесчисленными ошибками для пользовательского опыта, который отошел на задний план, чтобы избавится от скевоморфизма. Это была плоскость во имя плоскости. Сравните это с Material Design Google, который появился вскоре после этого. Material Design по максимуму использовал плоский дизайн с помощью одной особенности – имитация реальных материалов. Этот, создающий эффект присутствия, язык дизайна содержал плоский вид, одновременно поддерживая глубину. Как? Используя большие мягкие падающие тени.
Просто взглянув на два языка дизайна, становится понятно, что материальный дизайн придерживался лучшего подхода. Даже отложив в сторону богатые анимации, Material Design обеспечил более понятный пользовательский интерфейс, который также был перспективным и визуально привлекательным. Он был плоским, но с важным компромиссом тени. Этот небольшой компромисс позволяет материальному дизайну поддерживать глубину и выглядеть более элегантным. Даже Apple, похоже, думает также. С тех пор они позволяют падающим теням ненавязчиво присутствовать в своих пользовательских интерфейсах.
А теперь Microsoft, которые были плоскими до того, как это стало клевым, объявили о своем новом языке дизайна – Fluent Design. Он выглядит великолепно, но он также выглядит очень модно – большие, мягкие тени.
Странно, что тень – это визуальная реликвия, которой удалось десятилетиями цепляться за дизайн пользовательского интерфейса. Не имеет значения, какие нынче в моде модели дизайна, падающие тени – это наш привычный способ для создания глубины. Но почему? Должно ли так быть? Может ли занудный плоский дизайн по-прежнему иметь глубину и, действительно, быть свободным от падающих теней? Как бы это выглядело?
Другой подход
Дело в том, что нас окружает мир полный глубины, и очень малая его часть определяется тенью. Если мы заменим тени в наших визуальных метафорах пользовательского интерфейса, то мы должны посмотреть на другие варианты, которые создают глубину в окружающем нас мире.
Итак, как мы воспринимаем глубину, когда нет теней? Есть несколько простых ответов. Масштаб – это самое очевидное решение. Большие вещи рядом, маленькие объекты находятся далеко. Линейная перспектива – другой вариант, использующий размерность объектов, чтобы удалять в пространство. Но для того, чтобы любой из этих подходов был действительно эффективным, потребовалась бы 3D-среда. Построение двумерного пользовательского интерфейса вокруг этих трехмерных принципов было бы неудобным и отвлекающим. Пока дополненная и виртуальная реальности более распространены, это просто не вариант.
Это привело меня к другому, менее известному типу восприятия глубины. Атмосферная перспектива – это явление, в котором атмосфера между зрителем и объектом смещает значение и оттенок объекта. Чем дальше объект, тем больше атмосферы и тем сильнее эффект. Если вы посмотрите на далекий горный хребет, вы поймете, о чем я говорю. Использование этого принципа – обычная техника в живописи и искусстве. Я впервые познакомился с этой концепцией при изучении традиционных Если вы хотите более свежий пример, возьмите любую книгу об , и вы увидите, что она активно используется в среде и ландшафтах. Итак, что если бы мы приняли эту концепцию и применили ее к дизайну пользовательского интерфейса? Я решил для себя изучить эти возможности.
Создавая э ффект
В качестве доказательства концепции – и небольшого побочного проекта – я решил попробовать, чтобы понять, будет ли это на самом деле работать. Но прежде чем создать какие-либо элементы пользовательского интерфейса, мне нужно было вывести базовую формулу для моделирования этого эффекта. Я хотел подходить к этому как к концепции большой картины, чтобы увидеть, может ли она поддерживать всю систему дизайна, а не только несколько экранов в одном приложении. Во-первых, я разделил эффект на три основных компонента: содержание, атмосфера и оттенок.
Это представляет собой фактический объект, будь то фотография или кнопка в пользовательском интерфейсе. Это объект с полной экспозицией и правильным цветом.
Атмосфера
Этот слой представляет плотность атмосферы между пользователем и объектом. Это влияет на значение объекта, приглушая оттенки. Белые менее белые, черные менее черные.
Оттенок
Этот слой только сдвигает оттенок объекта, включая слой атмосферы под ним. В реальном мире этот цветовой сдвиг относится к цвету, который отражается в атмосфере. Часто это синий по тем же причинам, что и небо, но это может быть любой цвет, который становится преобладающим в свете. Например, на закате цвета становятся более оранжевыми и красными. Чтобы имитировать эту гибкость, этот слой приобретет цвет другого объекта в пользовательском интерфейсе – фоновое изображение, возможно, обложку – и будет способствовать смещению оттенка всех других элементов в этом представлении.
Создание шагов
Но создание основного эффекта было только первым шагом. Если бы это использовалось для моделирования глубины, это означало бы, что ему нужно несколько уровней или шагов. Кроме того, я хотел использовать стандарт при создании своих проектов, а не просто на глазок прикидывать каждый экран, чтобы “выглядело хорошо”. Поэтому я разработал базовую 10-ступенчатую систему для представления различных слоев глубины, которые были возможны в дизайне.
Большая выгода здесь заключается в том, что объекты не приближаются к концам спектра значений, как это происходит при использовании типичных наложений или тени. Наложения просто затемняют все элементы, подталкивая их ближе и ближе к черному (или белому, если это белое наложение). В модели атмосферы объекты фактически приближаются к области среднего спектра. Это означает, что черные и белые цвета становятся менее ясными и более приглушенными.
Это создает большую возможность для контраста, что очень важно для моделирования глубины. Если вы создаете свой передний план на первом уровне, имея фон на шестом или седьмом уровне, вы фактически можете использовать более широкий диапазон ярких цветов и значений. Используйте черный текст. Используйте белый текст. Он будет отличаться от контраста, придавая дизайнам большую гибкость.
Реализация в пользовательском интерфейсе
Поработав над этим, настало время проверить концепцию, применив ее к пользовательскому интерфейсу. Я решил попробовать с музыкальным приложением, потому что, эй, миру действительно нужен еще один дизайн музыкального приложения, верно? Честно говоря, это было простое начало. Используя базовый дизайн, я разбил пользовательский интерфейс на несколько групп, а затем применил атмосферную систему к каждой из них. Интерактивные элементы, такие как панель вкладок и элементы управления воспроизведением, были сохранены на первом уровне, а фоны и подчиненные элементы были перенесены на другие уровни. Фотография обложки использовалась как цветовое влияние, придавая всему виду тонкое влияние розовых оттенков.
Результат? Система работала. По крайней мере, на мой взгляд. Может быть, вы думаете: “Нет, этот дизайн выглядит размытым и приглушенным”. На самом деле он отлично смотрится на самом устройстве. Что меня больше всего удивило, так это то, как мой глаз, естественно, нашел свой путь через интерфейс. Интерактивные элементы казались выпрыгивали , что упрощало их поиск и фокусировку. Остальные элементы отступили в пространстве, все еще обеспечивая контекст и глубину. И лучшая часть?
Не требуется ни одной падающей тени.
Уровень ОС дизайн систем
Я решил продвинуть концепцию дальше. Может ли весь язык дизайна основываться на таком принципе? Как выглядели бы взаимодействия на уровне системы, если бы они включали атмосферную перспективу, чтобы отличать себя от элементов уровня приложения? Я обнаружил, что уровень ОС на самом деле близок к такой концепции. Многозадачность, уведомления, центр управления – это все, что требует концепции глубины, чтобы сломать насыщенность других приложений, используемых на экране. Это особенно важно на мобильных устройствах, где приложение занимает все экранное пространство.
Очевидно, что настольная ОС не испытывает тех же потребностей, что и мобильный пользовательский интерфейс, но нет причин, по которым эта концепция не будет масштабироваться для работы на большом экране. Было бы особенно полезно решить одну конкретную проблему – падающие тени, чтобы различать отдельные окна. Независимо от платформы, это одна из проблем, которой никто не может избежать. Используя атмосферную модель, неактивные окна могут быть отброшены назад в пространстве. Это будет держать их полностью видимыми для справки, делая активное окно полностью понятным для пользователя. Возможно так, даже было бы легче сосредоточиться.
Таким образом, это – плоская визуальная система, которая все еще может использовать глубину, не ставя под угрозу ее плоскость. В целом эксперимент был успешным, и что-то, что я хотел бы видеть включенным в систему дизайна. Это было бы здорово в одном приложении, но действительно выделялось бы, если бы кто-то вроде Apple использовал такую концепцию, чтобы укрепить их дизайн.
Несколько примечаний напоследок
Эти дизайны не готовы до конца . Они не готовы к выпуску на миллионах устройств по всему миру. Они довольно грубые и содержат множество оплошностей. Я знаю это. Все это просто доказательство концепции и, результат одного дизайнера, который провел несколько самостоятельных исследований в течение нескольких ночей и выходных. Я не целая команда, и я бы не стал притворяться, что более способный, чем любой из людей в Apple, Google или где-либо еще. Есть бесчисленное множество других факторов, необходимых для того, чтобы полностью реализовать такую концепцию, и сама система могла бы использовать намного более тонкую настройку. Моя цель состояла в том, чтобы выяснить, есть ли этот потенциал. Я думаю, что он есть.
Исчезнут ли когда-нибудь падающие тени из пользовательского интерфейса? Вероятно, нет. Несмотря на это доказательство концепции, я все равно буду часто их использовать. Я даже использую их на этом сайте. В идеальном мире концепция пользовательского интерфейса, подобная этой, вероятно, все еще будет включать падающие тени, чтобы развить ее еще дальше. Я просто решил бросить вызов самому себе, полностью избегая использовать тени. Дело в том, что большой видимый мир за пределами наших глаз, естественно воспринимаем нами. Как у дизайнеров, в нашем распоряжении есть много инструментов для перевода этого мира в интерфейс. Нет необходимости всегда придерживаться того, что было сделано в прошлом.
Наконец, я хотел бы узнать, что вы думаете! И дайте мне знать.
Привет!
Я Скотт, и я люблю писать статьи подобного рода. Но большую часть времени я провожу работая дизайнером.
Мы живем в трехмерном мире, и веб-дизайнеры часто пытаются отразить это в своих работах, воспроизводя эффект глубины и объема. Ведь глубина дизайна способна добавить реализма всей странице и привлечь пользователя изучить сайт детальнее.
Создание эффекта глубины в веб-дизайне может быть проще чем кажется. Ключ к созданию эффекта трехмерности на двухмерном экране — картинки! Способов достижения эффекта немало: это могут быть фотографии сами по себе, создание многослойности изображения, фотоманипуляции или же специальные эффекты.
Многослойность
Многослойность — это техника, которая предусматривает расположение объектов определенным способом, с целью достижения эффекта трехмерности.
Все мы видели примеры макетов с использованием лежащих друг на друге фотографий. Это известный «фокус». Стопка фотографий выглядит трехмерной, а вы чувствуете себя так, словно бы наяву листали фотокарточки. Это и есть пример многослойности. Иногда применение техники заметно (как в примере с фото), а иногда совсем не бросается в глаза.
Часто для достижения эффекта глубины несколько изображений объединяют в одно, чтобы визуально в одной картинке скомбинировать два плана — передний и фон. Если работа проделана хорошо, то эффект практически незаметен. Посмотрите на сайт Range Rover (в примере выше). И машина и город выглядят впечатляюще, а их комбинирование вызывает ощущение что если бы вы стояли за машиной, то смотрели бы с высоты на город.
Другой эффективный способ достижения многослойности — размещение изображений на фоне, который выглядит плоским. Особенно интересно смотрятся фотографии с необычных ракурсов, размещенные под углом, а также градиентные фоны. (Смотрите сайт Аdlucent в примерах).
Ну и в конце концов некоторые изображения могут быть созданы с подразумевающейся многослойностью. Эта техника фотографирования подразумевает наложение линий, которые формируют объекты в кадре, чтобы создать эффект глубины. Часто эти линии подчеркиваются цветом и контрастом, чтобы визуально отделить один объект от другого. Справедливости ради стоит заметить, что для начинающий фотографов техника может оказаться слишком сложной.
Фотография
Один из самых полезных инструментов при создании «глубокого» веб-дизайна являются фотографии. Грамотные кадрирование и композиция могут сделать процесс создания глубины минутным делом.
Но как сделать подходящую фотографию? Конечно вы можете нанять профессионального фотографа и просто объяснить ему что вам нужна глубина. Однако если вы решили сделать фотографию самостоятельно, воспользуйтесь следующими подсказками.
Создайте заметный интерес на переднем плане. Убедитесь что у фотографии есть тема и фон. Думайте о теме фотографии на переднем плане и о фоне как о двух разных вещах. В таком случае вам проще будет выстроить кадр.
Измените угол видения. Сделайте фотографию с неожиданного ракурса. Так вы внесете изменение в перспективу как объекта на переднем плане, так и фона, что визуально придаст фотографии объем. Поэкспериментируйте с ракурсом и кадрированием.
Попробуйте фотографировать в портретной ориентации. Меняя ракурс по вертикали вы измените кадрирование.
Думайте о естественных линиях и тенях. Иногда объекты в кадре сами по себе создают эффект глубины. К примеру вы можете получить отчетливые тени, четко сфокусировавшись на объекте с переднего плана, расширив при этом фон.
Манипуляции с изображением
Используя графические редакторы, такие как Adobe Photoshop, дизайнеры могут собственноручно добавить глубины картинке, с которой работают. Даже если в момент съемки фотограф не позаботился об этом моменте. Для этого используется один простой прием.
Оставьте на переднем плане четкое изображение главного объекта и размойте весь задний фон. (В Photoshop, можно воспользоваться фильтром Gaussian blur с радиусом в 5.0)
Этот трюк поможет создать эффект глубины, а также акцентирует внимание на главном объекте, отвлекая пользователя от фона.
Тени
Тени — один из самых простых и естественных способов создания эффекта объема. Расположение, степень затемнения и форма тени могут придать картинки совершенно новое значение и вид. Ключ к успеху в создании теней — их естественный вид.
Лучше всего смотрятся утонченные, полупрозрачные тени соответствующие освещению. Убедитесь также что тень повторяет контуры объекта, который ее отбрасывает. Если первое что видит пользователь при взгляде на картинку — тень, то скорее всего работа сделана неправильно.
Округлые тени располагающиеся ниже объектов, которые их отбрасывают, помогут создать 3D-эффект парения в воздухе. Это простая техника, часто использующаяся при создании кнопок, реже — других более мелких ui-элементов. Тени расположенные прямо перед плоским объектом сделают так, что объект будет казаться стоячим, как в примере выше — сайт Guest’d. (Заметили ли вы тени до того как специально обратили на них внимание?) Неправильные тени — те, которые не повторяют очертания объекта — тоже имеют право на существование. Они могут придать иное значение объекту, который отбрасывает несвойственную ему тень, или же могут выделить объект с заднего плана.
Также тени помогут придать реалистичности. Тень расположенная за фигурой человека извлекает его из фона, помещая на передний план. Это простая техника, но очень важно чтобы тень оказалась противоположна источнику света. Тогда картинка будет выглядеть естественно.
Иллюстрации и другие изображения
Те же концепции и техники, о которых мы говорили ранее действуют и для иллюстраций, рисунков и прочих картинок. Разница в том, что создавать все эффекты придется самим во время рисования. Пример выше отлично иллюстрирует применение техник.
Выводы
Эффект глубины — замечательный способ добавить дизайну реалистичности. Это поможет наладить контакт с пользователем, позволит ему почувствовать себя причастным к происходящему на экране, а композиция покажется ближе.
Эффекты можно применять как к фотографиям и рисункам, так и к кнопкам и прочим элементам ui. Так что удачи вам в создании «глубокого» веб-дизайна!
Режим «Портрет» на iPhone - учимся снимать правильно.
Режим «Портрет» на iPhone позволяет создавать великолепные снимки с эффектом боке (глубины резкости). Снимать в портретном режиме крайне просто, однако, для достижения по-настоящему качественного результата необходимо знать некоторые «фишки». В этом материале рассказали о том, как правильно снимать в режиме «Портрет» на iPhone, а также собрали ценные советы от профессиональных фотографов.
Режим «Портрет» на iPhone - что это, какие устройства поддерживает?
Режим «Портрет» позволяет снимать фотографии с эффектом боке (глубины резкости). Этот эффект делает резкий фокус на объекте, вместе с этим красиво размывая фон. Режим позволяет снимать фотографии с имитацией студийного света практически в любых условиях.
Портретный режим поддерживают только iPhone с двойной камерой. На текущий момент воспользоваться режимом «Портрет» могут владельцы следующих моделей:
- iPhone 7 Plus
- iPhone 8 Plus
- iPhone X
На iPhone с одной камерой съемка с эффектом глубины резкости также возможна, но лишь с использованием сторонних приложений из App Store, например, PortraitCam , AfterFocus или Fore Photo . Их главный минус заключается в том, что эффект боке в них реализуется программным образом. Из-за этого он не такой «живой» и глубокий, как создаваемый двойными камерами iPhone аппаратный эффект.
Как снимать в портретном режиме на iPhone
Шаг 1. Запустите приложение «Камера » с главного экрана iPhone или выполнив свайп влево на экране блокировки.
Шаг 2. В приложении «Камера» представлены различные режимы съемки, доступ к которым осуществляется путем свайпа влево или вправо по любому месту интерфейса. Выберите режим «Портрет », он располагается справа от стандартного режима съемки.
Шаг 3. Для съемки качественного портретного снимка вам необходимо расположить камеру на расстоянии до 2,5 метров от объекта. При этом подносить iPhone слишком близко к объекту тоже нельзя. Забегая вперед к советам, скажем, что лучше снимать объект как можно ближе. Почему именно рассказали ниже.
Определить оптимальное расстояние поможет само приложение «Камера». В случае, если объект съемки находится далеко от камеры, то вверху приложения появится предупреждение «Удаление от объекта не должно превышать 2,5 метра».
Если же вы поднесли камеру очень близко, то появится уведомление «Переместитесь дальше».
Важно заметить, что «Камера» позволяет снимать в портретном режиме даже если вы не находитесь на оптимальном расстоянии от объекта съемки. Другими словами, вы можете игнорировать всплывающие предупреждения. Например, в случаях, когда отойти назад или подойти вперед к объекту возможности нет. В Apple заявляют, что при игнорировании оптимального расстояния снимки в портретном режиме могут получать плохими. Однако наши эксперименты показывают, что сделать достойный кадр можно и без четкого следования инструкциям приложения «Камера».
Шаг 4. Убедитесь, что освещения достаточно. Если условия плохие, то «Камера» оповестит и об этом сообщением «Слишком темно». Решить эту проблему поможет поиск другого более освещенного места для съемки или включение вспышки (мы предпочитаем и рекомендуем естественное освещение).
Шаг 5. Когда все приготовления выполнены, вы можете снимать в портретном режиме. По умолчанию в режиме выбран обычный естественный свет, но при желании можно выполнить съемку со студийным, контурным, сценическим или сценическим (моно) светом. Подробнее об эффектах и их различиях рассказали ниже.
Портретный режим съемки на iPhone, как и любые другие, поддерживает разнообразные предустановленные фильтры. Для их выбора необходимо нажать на иконку с тремя перекрывающимися кругами в правом верхнем углу интерфейса. Важно уточнить, что при выборе фильтра вы сможете снимать в портретном режиме только с применением естественного света (выбирается по умолчанию).
Какая разница между эффектами в режиме “Портрет”?
В режиме “Портрет” на iPhone доступно пять эффектов, позволяющих снимать с различным типом света. Разница между эффектами существенная, каждый из них лучше всего подходит для конкретных сценариев съемки.
- Естественный свет - фокусировка на лице объекта съемки, размытый фон. Позволяет создавать наиболее качественные крупные планы лица человека с эффектом боке.
- Контурный свет - полутона с темными и светлыми участками. Используется для того, чтобы подчеркнуть лицо в условиях недостаточного или искусственного освещения.
- Студийный свет - лицо объекта ярко освещено, изображение максимально четкое. При съемке с таким светом рекомендуется снизить экспозицию для того, чтобы не засветить кадр.
- Сценический свет - лицо объекта будто освещено прожектором, насыщенный черный фон.
- Сценический свет-моно - аналогичный предыдущему эффект, но в черно-белых тонах.
Снимки в режиме «Портрет» на iPhone создаются с особыми художественными эффектами, с которыми можно и даже нужно экспериментировать. Впрочем, некоторые правила для съемки качественных фотографий в портретном режиме все же есть.
Для того, чтобы добиться самого высокого качества требуется находиться достаточно близко от объекта съемки - до 2,5 метров. Фон за объектом, наоборот, должен находиться как можно дальше.
Чем больше расстояние между объектом съемки и фоном, тем более сильным окажется эффект глубины.
Если же объект вашей съемки стоит у стены, то заметного эффекта практически не будет (эффекты сценического и сценическим (моно) света - исключение).
Также важно освещение. В условиях искусственного освещения режим «Портрет» работает далеко неидеально. При естественном же освещении режим раскрывается по полной, позволяя создавать шикарные снимки, поэтому рекомендуется “ловить” удачный свет.
Если вы хотите делать как можно больше удачных кадров с эффектом глубины резкости, то обязательно используйте ручную фокусировку. Для этого необходимо просто коснуться объекта при съемке. Камера тут же сфокусируется на нем.
При съемке в режиме «Портрет» на iPhone (впрочем, как и на любую другую камеру) следует стараться избегать небольших предметов в кадре, расположенных на одном уровне с объектом. Такие объекты могут нарушить эффект глубины и полностью испортить фото. Более того, чаще всего так и происходит.
Лучшие снимки с эффектом глубины отличаются простотой. Ищите простые композиции, которые позволят эффекту по-настоящему раскрыться.
Примечание: о каких профессионалах идет речь? Когда Apple только разработала режим «Портрет», она предложила опробовать его профессиональным фотографам (Джереми Коварт, Пей Кетрон, Бендж Хейш и другие). Фотографы оценили разработку Apple и дали ценные советы о том, как создавать качественные снимки с эффектом боке на iPhone.
1. Разместите объект «спиной» к солнцу . Солнечный свет станет отличной «подсветкой», а вместе с этим и фоном. Главное же, что фон и объект в таком случае будут четко определены для камеры iPhone и ей не составит труда разделить их, применив эффект боке.
2. Приблизьте камеру к объекту съемки на максимум . Режим «Портрет» позволяет снимать с эффектом глубины резкости на расстоянии до 2,5 метров, но лучше подойти к объекту как можно ближе, чтобы подчеркнуть детали. Заметьте, что на всех промо-фотографиях портретного режима от Apple, объекты съемки (чаще всего люди или животные) находятся прямо перед камерой. Фотографы Apple делают это не просто так. Они знают, что в таком случае кадры получаются изумительными.
3. Уменьшите экспозицию чтобы сделать изображение более кинематографическим . Уменьшать экспозицию следует совсем незначительно, опустив ползунок буквально на пару миллиметров. Для того, чтобы изменить экспозицию требуется нажать на дисплее в приложении «Камера», а после фокусировки дотронуться до дисплея и провести пальцем вверх (увеличение) или вниз (уменьшение).
4. Объект съемки не должен двигаться . Для достижения идеальных результатов съемки сделайте так, чтобы объект не двигался. В случае со съемкой людей это весьма просто, их просто нужно попросить, а вот при съемке животных придется набраться терпения.
5. Идеальный свет для портретного режима - мягкий и рассеянный . От мягкого рассеянного света не образуется резких глубоких теней, что улучшит портрет и вновь - поможет камере точнее определить объект.
У вас есть полезные советы по съемке в портретном режиме на iPhone? Делитесь ими в комментариях!