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