Этому попапу больше бы подошла кнопка «Непонятно».

Откуда-то из прошлой жизни всё еще долетают посылки: вышел анонс проекта трехлетней давности с моим участием.

Но что-то от этого внутри особо ничего не колышется, поэтому вместо подробностей о проекте хочу рассказать об утилитарном приеме Размывающая Тень®™, который я недавно придумал* и использовал при подготовке этого анонса к выпуску.

*ну то есть додумался до него сам и не встречал до этого, а так наверняка его много кто использовал и до меня.

Это будет графоманская простыня-исследование, извините. Короткая версия в одно сообщение — в самом конце.

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

Такая возможность обычно есть при работе над афишей концерта, обложкой журнала и других исключительных случаях. При ежедневной же рутине вроде смм-конвейера или подборе фотки для новости на сайт такой роскоши нет. Я писал на канале о сложности этой задачи еще четыре года назад: https://news.1rj.ru/str/meow_design/47.

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

Хорошо, если об этим подумали еще на этапе разработки айдентики, и подобные упрощающие жизнь приемы уже заложены в визуальный язык, вроде тонировки изображений у билайна или двуцветных надписей у ворлд чесcа:

Если же подобных фирменных приемов не запасено, приходится идти во все тяжкие.

Возьмем некий макет с пестрым фоном и плохо считывающимся из-за этого текстом:

Прикинем перечисленные выше стандартные приемы улучшения читабельности текста:

Все эти приемы слабые.

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

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

Вот, например, как выглядели банеры на стильном сайте pye optics два года назад и сейчас. Через них можно прям почувствовать, как ребята хотели чистоты и страдали из-за этого, а затем всё же переступили через себя и пожертвовали стилем ради читабельности:

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

Это если взять Афишу Дейли и отключить у нее затемнения: