Ожидание обычно такое: есть один по-настоящему удачный снимок, и он закроет все — обложку главной, превью в карточке, первый кадр слайдера и фон под формой заявки. Кадр хороший, значит, и подойдет везде.
На деле у каждого места на сайте свои требования. Обложке нужна горизонталь и свободное поле под заголовок, карточке — объект по центру и одинаковые пропорции с соседями, мобильной версии — кадр, который не теряет смысла после обрезки по бокам. Один и тот же снимок в этих местах выглядит по-разному, а иногда не подходит вовсе. Ниже — какие фотографии нужны для каждого блока и как выбор исходника влияет на объем обработки.
Почему один кадр не подходит для всех блоков
Блоки сайта различаются тремя вещами: пропорциями, тем, что лежит поверх снимка, и тем, как кадр ведет себя на разных экранах.
Пропорции у обложки, карточки товара и слайдера разные. Вертикальный снимок, снятый на телефон, в широкую обложку можно вписать только с сильной обрезкой, и от кадра часто остается полоска без главного объекта. Горизонтальный снимок в квадратной карточке теряет края.
Поверх одних фотографий стоит текст и кнопка, поверх других — ничего. Для первых нужен спокойный участок, где текст будет читаться. Для вторых это не важно, зато важны детали.
И, наконец, экраны. На компьютере обложка широкая, на телефоне от нее остается центральная часть. Если главный объект стоит у края кадра, на телефоне его просто не будет видно.
Обложка и первый экран
Для обложки нужен горизонтальный кадр с запасом по краям. Главный объект лучше располагать ближе к центру или к одной из сторон так, чтобы рядом оставалось спокойное поле под заголовок: небо, стена, однотонный фон, размытый задний план.
Слишком детальный снимок мешает тексту. Мелкий узор, яркие пятна и контрастные линии за заголовком делают его трудночитаемым, и тогда фото приходится сильно затемнять. Полупрозрачный темный слой спасает не всегда: снимок становится мрачным и теряет выразительность. Иногда нужны локальная коррекция света, другой кадр или согласованная переработка нейросетью, например чтобы продлить фон и освободить место под текст.
Если обложка нужна для рекламной страницы, к ней стоит отнестись особенно внимательно. На лендинге первый экран отвечает за то, поймет ли человек, куда попал, и обработка фото под обложку первого экрана учитывается в смете отдельно.
Фоновые фотографии
Фон отличается от обложки тем, что на него не смотрят специально. Он задает настроение блока, а внимание забирают текст, цифры, форма. Поэтому для фона подходят кадры с низкой детализацией: текстуры, размытые интерьеры, природа без резких контрастов.
Плохой фон — снимок, на котором есть что разглядывать: люди, вывески, мелкие предметы. Посетитель начнет смотреть на них, а не на текст. Если такой кадр нужен по смыслу, его лучше поставить отдельным изображением рядом с текстом, а не под ним.
Карточки товаров и превью
В каталоге карточки стоят рядом, и любое различие между ними бросается в глаза. Поэтому для карточек важнее единообразие, чем художественность отдельного кадра: одинаковый фон, похожий ракурс, одинаковые пропорции, объект примерно одного размера в кадре и с полями по краям.
Если товары сняты в разное время на разном фоне, их можно привести к единому виду: вырезать, поставить на одинаковый фон, выровнять свет. Это реальная работа, и в интернет-магазине с большим ассортиментом она часто занимает заметную часть всего проекта. Проще, когда товары изначально снимаются по одной схеме.
Превью в статьях, кейсах и подборках работают похоже. Маленькое изображение должно читаться с первого взгляда: один понятный объект, без мелких деталей, которые на превью сольются.
Галереи и слайдеры
Галерея показывает объект или работу с разных сторон. Ей нужны разные планы: общий вид, средний план, детали. Десять почти одинаковых снимков с одной точки не дают посетителю ничего нового, даже если каждый по отдельности хорош.
В слайдере кадры обычно показываются в одних пропорциях, поэтому вертикальные и горизонтальные снимки в одной ленте придется обрезать под общий формат. Если в серии много вертикальных фото, лучше сказать об этом заранее: возможно, для них удобнее другой тип галереи.
Для обоих форматов важна общая цветовая гамма. Снимки, сделанные в разном свете, рядом выглядят случайным набором, а выравнивание цвета — тоже отдельная работа.
Мобильная версия
На телефоне широкая обложка становится узкой, и от снимка остается центральная часть. Иногда для мобильной версии лучше подготовить отдельный кадр или отдельную обрезку, где главный объект крупнее.
Проверить это можно до передачи фото: мысленно закройте края снимка, оставив примерно центральную треть. Если главное осталось видно, кадр, скорее всего, переживет мобильную версию. Если нет, для телефона понадобится другой вариант.
Как удачный исходник сокращает обработку
Каждое несоответствие кадра месту исправляется обработкой: кадрированием, ретушью в Photoshop, достраиванием фона, коррекцией света, а иногда нейросетевой переработкой. Чем ближе исходник к требованиям блока, тем меньше таких операций и тем быстрее согласуется дизайн.
Правильный выбор не отменяет обработку полностью. Почти любому снимку нужны хотя бы коррекция и оптимизация под сайт. Но разница между «немного подправить» и «собрать кадр заново» большая, и она видна в сроках и смете.
С нейросетевой обработкой отдельная оговорка. Она помогает расширить фон или убрать мелкую помеху, но такие изменения я согласовываю заранее. Изображение, измененное нейросетью, нельзя выдавать за документально точную фотографию объекта, особенно если это интерьер, товар или результат работы, который клиент потом увидит вживую.
Если вы планируете съемку для сайта
Когда фото еще только предстоит снять, многие проблемы можно решить заранее, и это дешевле любой обработки. Фотографу полезно знать, для каких блоков нужны снимки, и получить простой список.
Для обложки стоит попросить несколько горизонтальных кадров с запасом по краям и свободным местом с одной стороны. Для мобильной версии пригодятся вертикальные дубли тех же сюжетов. Товары лучше снимать на одном фоне и при одном свете, с одинакового расстояния. Для галерей нужны разные планы одного объекта, а не много попыток одного и того же кадра.
Если структура сайта уже согласована, список можно составить прямо по ней: какой блок, какой сюжет, какая ориентация. Его стоит передать фотографу вместе с примерами кадров, которые вам нравятся.
Подходящие и неподходящие композиции
Сводка по блокам. Это ориентиры для отбора, а не технические требования конкретной платформы.
| Блок | Подходит | Скорее не подойдет |
|---|---|---|
| Обложка | Горизонталь, объект в центре или сбоку, спокойное поле под текст | Вертикальный кадр, объект у края, пестрый фон за заголовком |
| Фон | Текстура, размытый план, мягкий свет | Люди, вывески, много мелких деталей |
| Карточка товара | Один объект, одинаковый фон и ракурс с соседями, поля по краям | Товар на случайном фоне, обрезанный край, разный масштаб |
| Галерея | Общий план, средний план, детали, единая гамма | Серия почти одинаковых кадров с одной точки |
| Слайдер | Кадры одной ориентации и похожего света | Смесь вертикалей и горизонталей без запаса на обрезку |
| Превью | Один понятный объект крупно | Общий вид с множеством мелких деталей |
Если вы не уверены, какой снимок куда подойдет, это нормально: выбирать композицию под блок — задача разработчика. Достаточно передать лучшие кадры и сказать, что на них важно. А чтобы обсудить, сколько работы с фотографиями будет в вашем проекте, начните с квиза на сайте: я посмотрю на задачу и предложу, как подготовить снимки с наименьшими затратами.