Вы наблюдаете это повсюду: вдохновляющие цитаты на Instagram и смешные колкости на Facebook; целевые страницы сайта и онлайн-объявления. Текст и изображения смотрят на нас с рекламных щитов и бизнес-карт. Множество дизайн конструкций, с которыми мы сталкиваемся каждый день, имеют нечто общее. О чем это мы? Один из фундаментальных блоков графического дизайна — сочетание текста с изображением. Иногда, помещая броскую фразу на приятное фото мы не получаем того эффекта, на который надеялись. Не волнуйтесь, с советами и рекомендациями, которые мы поместили в этой статье, вы узнаете о методах, которые можно применить практически к любому дизайнерскому проекту.
Итак, внимание!
01. Обдумываем композицию
Размещение и расположение текста по отношению к изображению может разрушить дизайн. Если текст слишком мал, а фон слишком перенасыщен и отвлекает, или в дизайне присутствует что-либо еще, что ставит под угрозу читаемость, ваш проект не будет эффективным, или визуально привлекательным.
Однако текст только одна половина уравнения. Если в проекте появляется изображение – оно в той же степени важно. Поэтому следует обратить внимание на два следующих действия:
Состав изображения. Подбирая фото к вашему проекту, убедитесь, что на нем имеется хорошее пустое место для размещения текста (если вы, конечно, не хотите, добавить элемент дизайна, который будет оттенять текст и/или маскировать собой фон — подробнее об этом позже).
Например, эта обложка журнала имеет вертикально ориентированное пейзажное фото с изображением большого пространства с небом. Фотографии природы с большой площадью изображения неба или воды часто становятся замечательным фоном для текста, обеспечивая лаконичное пространство, позволяющее тексту выделяться.
Общая композиция создается объединением теста и изображения. Дизайн больше, чем совокупность его частей. У вас может быть привлекательное изображение, эффективное сообщение и хороший читабельный шрифт, но если хотя бы два элемента не сочетаются между собой – результат будет так себе.
Один из способов создать композицию, где изображение и текст дополняют друг друга — это подогнать текст к форме, присутствующей в изображении. Обратите внимание, как заголовок дизайна этого сайта использует творческий подход к расположению текста: он размещен так, что изображение сразу является рекламой продукта. При этом блоки текста и фотографии продукции одинаково сбалансированы и устаканивают композицию.
Еще один эффективный способ – рассматривать композицию шире, чем просто изображение в качестве фона с текстом вверху. Элементы могут быть организованы бесконечным количеством способов – отпустите свою фантазию. Например, макет на примере ниже напрямую связывает тематику текста с изображением через обрезку фотографий в определенной узнаваемой форме.
А следующие примеры обрезки фотографий позволяют взглянуть на изображения через форму обычного почтового конверта.
02. Определяем фокус
В хорошей композиции один из наиболее важных элементов всегда является ее центром. Это своего рода визуальная сердцевина, которая бросается в глаза и служит отправной точкой для пользователя. В контексте макета, включающего только изображения и текст, таким центром будет или одно, или другое. Поэтому необходимо решить, что из них важнее и помочь ему выделиться через цвет, размер, положение, или какой-либо другой дизайнерский прием.
Дизайн примера ниже ставит в центре внимания картинку места для отдыха, что вполне подходит веб-сайту о туризме, отдыхе и путешествиях. Из-за своей значимости (это темная часть макета, в то время как все остальное светлое) и размера (оно охватывает всю ширину страницы), изображение имеет большой визуальный вес. В то же время, вы не хотите, чтобы остальные элементы дизайна исчезли вообще. Поэтому геометрические формы, присутствующие на фото вместе с вертикальными акцентированными линиями помогают привлечь внимание обратно к тексту, а ярко-синие пятна в центре позволяют сфокусировать на нем внимание.
На этой веб-странице наоборот, именно текст выбран в качестве фокусной точки (с жирным шрифтом и большими заглавными буквами) и нивелирует изображение с наложенным прозрачным цветом. Тем не менее, текст и изображение организованы с использованием слоистого эффекта, который соединяет два элемента и делает композицию динамичной.
Бывает так, что текст и изображение в равной степени важны и должны визуально объединяться в единое целое. В следующем примере обложки этот эффект достигнут в буквальном смысле обертыванием текста заголовка вокруг изображения цветка, смешивая их вместе и заставляя смотреть на оба элемента одновременно.
03. Добиваемся баланса
Рассмотрим еще одну составляющую хорошей композиции: баланс. Как качание на качели ребенка на одной стороне и взрослого на другой, конструкция получится несбалансированной, если в дизайне одна из частей слишком тяжела визуально.
Мы не говорим о фокусировке, потому что визуальный вес это то, что отличает элемент от других составляющих. Мы имеем в виду плохо организованный дизайн. Он может быть перегружен или иметь признаки суматохи. Например — все содержимое помещено на одной стороне макета, или — не выдержаны расстояние и выравнивание между элементами. Любая из этих проблем может выбить дизайн из равновесия.
Для простых конструкций, которые содержат только текст и изображение, как некоторые из тех примеров, что мы уже рассмотрели, баланс особенно важен: более минимальный, или более яркий дизайн был бы плохим выбором.
На следующем примере упаковки название фирмы компенсируется изображением ниже. Оба примерно равны по размеру и объединены цветом. Изображение само по себе обеспечивает пространство для текста.
А этот дизайн достигает баланса просто через расположение текста на фотографии. Если бы текст был выровнен по правой стороне, двойной координационный центр. Силуэт фигуры на фото и белый текст были бы сгруппированы вместе, оставляя большое пустое пространство слева и создавая беспорядок. В представленном варианте обе стороны имеют равную визуальную значимость, и дизайн выглядит сбалансированным.
04. Выбираем изображение мудро
В дизайн-проекте образность не просто задает тон или акцентирует внимание, а играет намного большую роль: это может подтекст, тон, эмоции. Если эти качества соответствуют и поддерживают текст, вам легче взаимодействовать с аудиторией. Не хотите, чтобы в композиции присутствовало визуальное противоречие – подбирайте образ под смысл текста.
Вот интересный пример этой концепции в действии. Размытие изображения и размещение текста над глазами человека и усиливают идею «дискуссии», что и есть названием книги. Дизайнерские решения работают вместе и создают композицию, где отношение между текстом и изображением ясно, наглядно и интересно.
В качестве другого примера, возьмем упаковку: что может лучше продемонстрировать свежесть и качество продукта, чем красочные фотографии хрустящих овощей? К тому же, копирайтинг поддерживает эти понятия: «свежесть», «фермерский рынок», «сезонный характер». Изображения и текст работают вместе, чтобы взаимодействовать с клиентом.
05. Создаем фон для текста
Мы уже упоминали, что создание пространства для текста, где его будет легко видеть и читать, является важным шагом в дизайне. Существуют два основных способа сделать это:
Выберите изображение с пустым пространством. Фотографии, которые имеют большие, чистые области, размытие или мягкую фокусировку и обеспечивающие минимально подходящее пространство для текста, являются лучшими кандидатами. Слишком детализированные изображения или фотографии с текстом очень сложно использовать под копирайтинг.
К примеру, эти изображения достаточно просто размыты для фоновой картинки. При этом уровень размытия достаточен и для идентификации продукта и для типографики, которая не потеряется на таком фоне.
Можно редактировать изображение или добавлять к нему эффекты. Допустим, вы нашли идеальный образ для проекта, но картинка не подходит для размещения текста. Возможно, на ней нет четких пустых пространств, или она перенасыщена множеством интересных деталей. Изображение все равно можно использовать, но над ним придется немного потрудиться. Есть несколько способов сделать картинку более подходящей, в том числе:
Добавление фоновой формы: плотная или прозрачная форма, которая покрывает только часть изображения, где будет размещаться текст.
Наложение прозрачного цвета поверх изображения: прозрачный цветовой блок, заполняющий все изображение, поможет свести к минимуму и преуменьшить детали, создавая более равномерную поверхность для текста.
Осветление или затемнение изображения: если вы не хотите добавить дополнительные элементы в макет, то иногда можно отредактировать саму фотографию, чтобы помочь тексту выделиться.
На этом примере фотографии были затемнены, чтобы выделить белый текст
А здесь некоторые фотографии сами по себе темнее по цвету, но обратите внимание, как темный градиент в нижней части каждого изображения дополнительно поддерживает текст.
06. Повышаем видимость с помощью цвета.
Итак, вы выбрали изображение и хотите убедиться, что текст будет выделяться на странице или экране. Цвет и контраст – два лучших способа сделать это.
Цвет. Есть много подходов выбора цветовых схем для дизайна. Но давайте рассмотрим два, которые конкретно относятся к парованию текста и изображения.
Координирование: для наиболее гармоничного вида, можно применить к тексту цвета, заимствованные из самого изображения.
Выбор противоположностей: для большего драматизма попробуйте контрастные цветовые сочетания. Цветовой круг будет полезен в выборе пар противоположных цветов: синий и оранжевый, фиолетовый и желтый, как мы видим на примерах.
Контраст. Вы можете достичь контраста не только через цвет (как в предыдущем примере), но и с помощью других характеристик: размера, формы, положения и т.п. Дизайн открытки, взятой для примера ниже, использует все эти качества: розовый цвет заголовка контрастирует с холодными синими и зелеными цветами фотографии; размер слов противопоставлен друг с другом через выбор шрифта; наклонная, изогнутая ориентация слова «road» контрастирует с остальной типографикой. Все эти варианты создают визуально интересную композицию и помогают выделить текст.
И в конце давайте рассмотрим несколько дизайнов, которые сочетают некоторые методы, о которых мы рассуждали в статье.
Листовка:
1) содержит фото с пустым замутненным пространством в верхней части для текста; 2) цвет текста заимствован из фото (обратите внимание на бирюзовые оттенки на рубашке человека).
Обложка: 1) используется текстурированная фоновая форма….2), но это фото содержит пустое пространство на обороте, где текст повторяет форму изображения передней части; 3) текст в контрастных цветах (синий и оранжевый).
Целевая страница: 1) имеет вертикально сбалансированную композицию; 2) текст и изображение дополняют и поддерживают друг друга, как в плане визуального стиля, так и в плане темы/сообщения.
Обложка каталога: 1) также сбалансированный макет; 2) изображение и текст работают вместе — изображение показывает продукт компании в действии, а текст объясняет его преимущества.
Брошюра: 1) использует расфокусированную область изображения, на которую помещен текст; 2) включает в себя поп цвета, чтобы выделить некоторые части текста.
Надеемся, что нам удалось мотивировать вас на свежие идеи. Счастливого проектирования!
