Фото на фон

sergey nikolaev
3 min readJan 26, 2020

Подозреваю, что не существует дизайнера, который не пытался спасти макет приемчиком «положу на фончик клевую фотку». Но коварство тут в том, что когда дело дойдет до подбора реальных материалов (с очищенным копирайтом и прочими требования от скучных людей, которые, кажется, зовут себя то ли «юристами», то ли «менеджерами»), такой же классной фотографии, вытягивающей макет в топ, может просто не оказаться. Ну то есть, размещая во весь фон страницы фоточку из подборки «National Geographic’s Best Pictures of 2017», стоит помнить, что через месяц придется давать задание фотографу наснимать чего-то похожго, и результат будет отличаться. Вся надежда на Unsplash.

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

Например, вы нарисовали прекрасный сайт онлайн-сми:

макет, очень сильно зависящий от качества фотографий

Вы великолепны, спору нет. Но сколько проживет в шикарном состоянии эта страница после запуска проекта без Бильда От Боженьки?

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

афиша.дейли: ни текст прочитать, ни фотографию рассмотреть

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

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

попытки спасти белый текст на пестром фоне эффектами и тенями

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

справа в углу — самый опрятный элемент страницы

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

карточка без фона привлекает больше всего внимания

The Question, конечно, просто клад для иллюстирования этой проблемы.

Интересно к задаче подошли в Яндекс.Дзене: из каждой фотографии алгоритмически создается подложка под текст с фейдами, размытиями и подбором фонового цвета. Хотя верхние строчки всё равно шумят.

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

Но онлайн-СМИ пока стесняются таких форматов, а решения Яндекса не вытягивают технически.

--

--