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

Заранее подготовив такое изображение в фоторедакторе (Photoshop, Figma), вы можете использовать его в качестве обложки для самого курса или отдельного раздела в уроке. В конструкторе Scroll для этого можно использовать такие блоки, как «Изображение», «Слайдер», «Карточки».

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

Мы сомневались насчёт того, чтобы даже включать этот способ. Но технически возможно разместить текст прямо на изображении так, чтобы он выглядел хорошо.

С этим способом есть множество разных проблем и предостережений.

1. Изображение должно быть тёмным и не иметь большого количества контрастных границ.
2. Текст должен быть белым. Попробуйте найти хотя бы один обратный пример, который был бы чистым и простым. Серьёзно, хотя бы один.
3. Протестируйте текст на каждом экране/размере окна, чтобы убедиться, что он читаемый.

Если вы смогли справиться со всеми требованиями, то здорово, вы получите хороший результат. Но уже никогда не сможете поменять текст и изображение на другие.

Этот способ довольно редко используют в профессиональных проектах. И мы упомянули его скорее как контрольный. Но если подобрать правильное изображение, то можно создать действительно красивый эффект.

Возможно, самый лёгкий способ поместить текст на изображение – это перекрыть изображение. Если оригинальное изображение недостаточно тёмное, вы можете перекрыть его полностью с помощью прозрачного чёрного цвета.

Вот пример с пёстрым изображением и тёмным перекрытием.

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

Этот способ также отлично подходит для превью и маленьких изображений.

Чёрное перекрытие – самое простое и универсальное, но можно также встретить и цветные перекрытия. Однако будьте с ними осторожны.

В конструкторе Scroll мы позаботились о том, чтобы вы могли использовать любое изображение для обложки курса. Поэтому добавили возможность наложить сверху на обложку дополнительный цвет. Вы сможете использовать любой цвет, какой захотите (можно выбрать из предложенной палитры или добавить свой собственный) и настроить его прозрачность.

Этот способ невероятно простой и очень надёжный. Сделайте слегка прозрачный чёрный прямоугольник и поместите на него белый текст. Если прямоугольник достаточно непрозрачный, то вы можете поместить почти любое изображение внизу и текст всё ещё будет полностью читаемым.

Вы можете также добавить немного цвета, но, как всегда, будьте благоразумны.

Удивительно хороший способ сделать перекрывающий текст читаемым – это размыть часть перекрываемого изображения.

Например, в iOS 7 эффект размытия использовался очень активно.

Вы также можете использовать часть фотографии без фокуса в качестве размытия. Но будьте осторожны – этот способ не так динамичен. Если вы когда-то будете менять изображение, то убедитесь, что текст всё так же останется на размытой части.

Просто попробуйте прочитать мелкий подзаголовок на изображении ниже.

Затемнение внизу – это когда изображение постепенно уходит в чёрный цвет в самой нижней части и поверх этой области расположен белый текст. Это довольно изобретательный способ. И иногда он может быть почти незаметным. Взгляните на пример ниже.

Кажется, что на этих обложках белый текст просто помещён на изображения. Но это не так. Здесь есть очень тонкий градиент от центра (чёрный с нулевой непрозрачностью) к низу изображения (чёрный с примерно 20% прозрачности).

Этот градиент сложно увидеть, но он точно там есть и точно улучшает читаемость текста.

Также обратите внимание, что у текста на этих обложках есть лёгкая тень, чтобы ещё больше улучшить читаемость.

Благодаря этому способу можно разместить почти любой текст на практически любом изображении и сохранить его читаемость.

Почему изображение должно уходить в чёрный цвет именно в нижней части? Ответ прост – так как свет всегда идёт сверху. Чтобы выглядеть более естественно для нашего глаза, изображение должно затемняться внизу — так же, как и всё остальное, что мы видим вокруг себя.

Продвинутый способ –это использовать размытие и затемнение вместе.

Как получается сохранить читаемый заголовок поверх этих изображений? Ведь они не тёмные и довольно контрастные.

Ответ: рассеивание.

Рассеиватель – это приспособление для фотографии, которое делает свет мягче. Сейчас этот приём также используется в графическом дизайне, чтобы сделать изображение мягче, и чтобы наложенный сверху текст был читаемым.

Этот приём проще заметить на однотонном голубом фоне, чем на контрастных фотографиях.

Здесь есть градиентная рамка вокруг заголовка.

Это, пожалуй, самый незаметный способ разместить текст поверх фотографии. Но, тем не менее, запомните его. Когда-нибудь он может вам пригодиться.