Сказочный, загадочный эффект игрушечного мира, миниатюры, как его еще называют, или Tilt-shift способен преобразить дизайн сайта, который впечатлит посетителей своей уникальностью. Несмотря на множество современных тенденций, накладывать на фотографии разные эффекты до сих пор уместно и необходимо. Как часто вам приходится убирать небольшие пересветы, корректировать тон фотографий и многое иное? Иными словами, если решено в веб-дизайне использовать фотографию, то нужно готовится и к её обработке.
В тоже время, работу с эффектом миниатюры чаще можно увидеть в сфере фотодизайна, а не веб. Почему? С одной стороны – сложность создания; с другой – особенности тематики проекта. Миниатюра города, улицы, замка и поля/луга/гор, леса и объекта какого-либо, еды на столе – это одно. Но если учесть, что на сайте по туризму, недвижимости, кафе/ресторанов используется очень много фотографий, да еще и новые подгружаются частенько, создавать эффект для каждой – утомительно, да и заказчику не всегда нужно.
Впрочем, веб-мастера создают сайты с фотографиями в стиле миниатюр и выглядят они великолепно.
Особенности Tilt-shift
Эффект наклона и сдвига все больше набирает популярность. Напомним, что эффект миниатюры – это просто вариант работы с фокусом, при котором выбирается и фокусируется объект или группа их, а фон делают размытым. При этом размывается он «градиентно», не однородно. Таков принцип работы фотообъектива. Уникальность эффекта как раз в том, что результат необычен: объект становятся маленькими, а фон большим. Отсюда и визуальное восприятие – миниатюра, игрушечный мир.
Посмотрите на фотографию ниже. Что вы видите? Образцовую деревушку? Возможно. Эдакое средневековое европейское поселение городского типа. Но в действительности это Кампус-ду-Жордан, что в Бразилии, туристический город на юго-востоке страны.
Те, кто знаком с телесериалом Шерлок от ВВС, должны помнить заставку, где также применяется данный эффект вместе с синемаграфией.
Впрочем в самом фильме этот эффект тоже можно видеть на некоторых видеокадрах. Дело в том, что не только фотографии обрабатывают Tilt-shift’ом. Видео тоже. Например, Нью-Йорк в миниатюре или Монтенегро. Представьте такое видео на сайте? Ухудшиться ли восприятие? Не думаем, посетители будут смотреть диковинку.
Работа с эффектом
Если углубиться в науку (а без нее качественная работа невозможна), то создание эффекта базируется на Принципе Шаймпфлюга и бесконечной глубине резкости. Иными словами, на возможности нахождения плоскости поворота, когда объект отобразится четким и визуально создастся впечатление, что он расположен в профиль. На деле же нельзя сфотографировать объект в профиль, если он так не расположен изначально. Но можно изменить и положение объектива, и фокус.
Создавать такой эффект можно разными способами.
- Для профессиональной фотосъемки рекомендуется применять Tilt-shift объектив, который и изменяет перспективу при повороте, наклоне, сдвиге плоскости относительно светочувствительного слоя. Выпускают такие штативы и Canon? и Nikon. Но удовольствие не дешевое.
- Более простыми способами являются мобильные приложения для iOS/Android/Windows Phone и даже зачастую этот эффект уже встроен в приложения Камера той или иной системы. Именуется он «Размытие фона».
- Также существуют приложения и сайты, которые позволяют создать эффект в режиме онлайн. Можно и в социальных сетях создать миниатюру. Но, разумеется, более всего развязными руки веб-мастеров становятся при использовании Photoshop.
Мы рассмотрим все варианты работы с эффектом, но сначала посмотрим на сайты, где мастера решили размесить фотографии миниатюр. Да, зачастую, рассматривая ту или иную фотку, сложно сказать, есть этот эффект или нет. Дело в том, что фокусировка может быть разной: радиальной или линейной, резкой и не очень. А может просто фотография изначально создавалась с, эдаким, псевдо-эффектом.
Проще говоря, вариаций много, как и вариаций применения параллакса.
Prospega предлагает услуги маркетинга и аналитики. Но сайт создали необычным. Каждый раздел имеет свою фотографию, и каждая такая фотография оснащена эффектом миниатюры. Таким образом, весь сайт использует Tilt-shift. Красиво, ярко, уникально.
Frankenwerbung также использовали эффект, но в единичном количестве, и в неярко выраженном виде. То есть фон замылен, но и объекты не обладают большой резкостью. Так или иначе, но это «сдвиг-наклон».
The Open аналогично использовал готовые фотографии, отснятые на камеру и со слабовыраженным эффектом. Но миниатюрность визуально ощущается и воспринимается.
Градъ, рассказывая о своей строительной деятельности, решили представить свой ЖК в виде миниатюр. Получилось оригинально, уникально, красиво. При этом обратите внимание, что миниатюризация создавалась сложной, с несколькими крупными объектами.
Rdcm оснастили раздел Услуг фотографией, на которой одна большая миниатюра здания на размытом фоне и части переднего плана. Не совсем тот самый настоящий эффект, но вариация его, а потому выглядит свежо и убедительно.
Youngminds детский образовательный портал также использовал ээфект сдвига и наклона. И казалось бы, что на фотографиях и так игрушки изображены, но обратите внимание на фокус, на восприятие картины в целом. В свете же тематики проекта использование эффекта, при котором маленькие игрушки становятся большими на размытом фоне, более чем оправдано.
Также стоит обратить внимание на фотографии на tenontours, pullmanhotelsfrance, magellanresorts, toscanaovunquebella.
Мы также подобрали для вас и наборы фотографий, что созданы профессиональными фотографами и не только Vincent Laforet, Lachlan Sear, Automatt, timmythesuk, roevin, patrix.
Создание эффекта миниатюры
Как мы писали выше, создавать эффект можно разными способами. Мобильные приложения или эффекты, что уже встроены в приложения Камера (размытие фона) хороши, но, как часто это бывает – этого недостаточно.
На практике найти сцену, что убедительно подойдет для миниатюрного эффекта сложно. Как и сложно четко определить границы размытия. А достаточно ли четко вы сможете пальцем на экране смартфона выделить объект или несколько? Не думаем. Поэтому зачастую используют линейное размытие, которое также имеет свои огрехи. Ниже приведено изображение линейного размытия. Но миниатюры не видно.
Необходимо поднять немного границу размытия по центру (чуть выше часов).
Но и это не слишком прибавляем реализма игрушечной ж/д станции. При изменении кадрирования, обрезки изображения эффект совсем иной. В таком варианте, использование мобильного устройства приемлемо.
В режиме онлайн можно поработать на сайте tilt shift maker. Настроек много, существует предпросмотр и выгрузка готовой работы. Особенность в том, что настраивается только граница размытия, но не выделение объекта в ручную при необходимости.
Что же Photoshop
Photoshop CS/CC позволяет делать эффект сдвига-наклона быстро и более правильным. Более того, такой эффект уже включен в приложение. Мы рассмотрим два разных примера создания миниатюризации.
Вариант 1 с высоты птичьего полета
Лучшие фотографии для такого варианта создаются непосредственно с высоты. И чем больше угол между вами и землей – тем лучше. Если угол меньше – это не страшно, но эффект не будет обладать убедительностью, и работать будет с ним чуть кропотливее. И, разумеется, дневное время суток, когда с высоты можно хорошо различимы мелкие объекты. Таким образом, подбирая фотографии для сайта, необходимо обращать на все это внимание.
Открываем фотографию и выбираем Фильтр -> Галерея размытия -> Наклон-смещение. Здесь много иных вариаций, и все они споосбны создать миниатюру. Эффект миниатюры появится сразу и по центру, но отдельно можно задать положение резкости, размытия, настроить степень «замыленности» и границы перехода от резкости к «туманности».
Кружочек в центре это резкость. Поэтому при решении сделать некий объект четким на размыленном фоне, кружочек и должен будет оказаться на этом самом объекте. Но дополнительно, можно обозначить и еще точки резкости. Просто кликая ЛКМ в нужных местах.
Не забудьте настроить ширину перехода к размытию (сплошная линия) и область полного размытия (пунктир).
Дополнительно можно наложить корректирующий слой Сочность или Вибрация (в зависимости от версии Photoshop) и придать цветность изображению. Удивительно, но факт, такая коррекция позволяет совсем по-иному увидеть фотографию.
Важно: применять фильтр удобно для панорамного эффекта, например выделения крыш зданий, домов вдоль улицы, объекта на фоне леса и прочее. В случае же выделения какого-то небольшого сюжета, или одного объекта данный фильтр может не слишком пригодиться. Для этого лучше взять Размытие диафрагмы.
Вариант 2 точечная миниатюризация
Открываем фоточку или создаем просто еще одни слой от начального изображения и создаем слой маску. Проверяем, чтобы цвета в палитре были по умолчанию и выбираем градиентную заливку, применяя её к маске.
Теперь делаем активным слой с фотографией, открываем фильтр Размытие - >Размытие при малой глубине резкости и в качестве Источника указываем Слой-маска.
Настраиваем Фокусное расстояние (для каждого случая оно разное, так что подбирайте) и Радиус диафрагмы тоже немножко меняем. Нажимаем Ок. Видим, что здание церкви частично замылилось. Может даже верхняя часть фотографии осталась без размытия.
Выделяем слой-маску и мягкой кисточкой с белым цветом поправляем размытие. Затем берем кисточку с черным цветом и прорисовываем наши детали здания. То есть, аккуратно крышу, крест, стены. Мы также справа прорисовали домик и несколько деревьев. Но при этом руины, дорожки кустики на переднем плане оставили размытыми.
Если нужно что-то еще размыть, что не вошло в область фильтра, то можно воспользоваться инструментом «Размытие» и сделать это на слое-маске. Помните о том, что размытие не должно быть однородным.
Теперь к оригинальному слою добавляем корректирующий слой «Цветовой тон/насыщение» и добавляем насыщенности. Обратите внимание, что как раз церковь и здания справа становятся более яркими. Если начинают проступать артефакты, то переходим на слой-маску копии слоя и кисточкой с черным цветом затираем их.
Также к оригинальному слою добавим Фильтр - > Усиление резкости -> Контурная резкость. И выбираем силу эффекта желаемую, а радиус оставим около 1 градуса. Вы сможете увидеть, как объекты станут более четкими, ярко-выраженными.
И вот он результат.
Важно: корректировку краев объекта проводите четко и точно при малом размере кисточки. Да и фотографии лучше выбирать в большом разрешении и высокого качества.
И еще варианты. Можно, разумеется, использовать и размытие диафрагмы, поля и прочее, но корректировать по маске, сочности и прочее придется, если есть желание создать настоящую миниатюризацию.
Завершение
Эффект Tilt-shift не является сложным, ни секретным или особенным. Да, настоящий фотоэффект стоит дорого по созданию, а в Photoshop еще нужны и навыки, и видение того, какой должна быть готова работа. Но это отличный вид творчества для дизайнеров. Это возможность создавать сайты с действительно красивыми фотографиями и изображениями. Не обязательно же в миниатюре обрабатывать только фотки!
Эффект «сдвига-наклона» также уникален и необычен, как и неоновые цвета в веб-дизайне, эффект параллакса или синемаграфия. Это творческий путь, для которого, как говорится, «еще руку набить надо». И путей реализации миниатюры очень много.