Игорь Штанг (nobelfaik) wrote,
Игорь Штанг
nobelfaik

Categories:

Подружить текст с картинкой

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

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

1

На этом плакате заголовок и подзаголовок сверстаны по форме — огибают фигуру с левой стороны:


Татьяна Теуш, Минск


Динамика. Текстовые блоки поддерживают заданное иллюстрацией движение вверх и вправо:




Размеры. Высота заголовка примерно равна ширине текстовой колонки, а также ширине головы и туловища девушки:




Выравнивание. С правой стороны у скульптуры и текста одинаковое поле. С левой и заголовок, и фигура уходят под обрез. Голова выровнена по верхнему выносному элементу буквы б:




Форма. Плавные штрихи б и а рифмуются с изгибами тела. Сначала слово БАНИ было написано прописными, и этой связи не наблюдалось. Строчная б с изогнутым хвостом спасла положение:




Еще одна рифма, про которую нельзя не сказать, — овалы:




И наконец, правая граница текста повторяет форму изгиба, который находится прямо под ней. На первых вариантах граница текста была ровной, потом мы специально ее «загнули»:



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

2

На следующем примере самая важная связь — ритмическая: черные полоски «глаза» повторяются в строчках текста. Ритмические элементы близки по размеру и количеству:


Ксения Апресян, Волгоград


Текстовый блок аккуратно вписан в изображение. Проблема в том, что линии иллюстрации изогнутые, а строчки текста прямые. Абсолютного совпадения тут не получится, но кое-что всё-таки можно выровнять. Текст держится за два уголка картинки:




Список заполняет внутреннее пространство круга и не выходят за его границы. Особенно аккуратно уместилась вторая колонка: две ее строчки почти коснулись направляющей. Заголовок касается окружности с внешней стороны:



3

Текст зеркалит картинку:


Дмитрий Старокожко, Ростов-на-Дону


Верхние границы текстовых блоков выровнены по горизонталям изображения:




Высота текстов соотносится с размером «перекладин». Сверху больше, снизу меньше:



4

Последняя строчка заголовка попадает в горизонтальную «полоску» кувшина:


Ольга Ракова, Волгоград


Иконка из ромбов поддерживает верхнюю часть ручки кувшина и закрывает прямоугольник. Адрес сайта стоит напротив нижней части ручки:



5

Вертикальные полоски на канистрах рифмуются с горизонтальными цветными полосками на фоне. Заголовок «Довборы» примерно равен по размеру большой черной полоске на иллюстрации:


Александр Концевой, Омск


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



6

Тут и объяснять ничего не нужно:


Александр Маслак, Санкт-Петербург

Рекомендации


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

  2. Дальше смотрите на форму, направление, цвет, ритм, фактуру и другие параметры, которые можно связать.

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


См. также:
Переверстка №12. Плакат фестиваля Culinary Zinema
Верстка по форме
Tags: афиша, верстка, знаю как, иллюстрация, сетка, статья, типографика, швейцарский стиль
Subscribe

Posts from This Journal “статья” Tag

  • Локализовать текст

    Есть такой хороший прием — локализовать текст. Это значит, что вы не пытаетесь занять текстом весь формат, не размазываете материал, а…

  • Дыра или воздух

    В эфире рубрика ???. Павел Ореховский спрашивает: Не дает покоя переверстка с рецептом. Я понял про этажность и модульную схему. Но клиенту будет…

  • Как мы собираем макеты по алгоритму верстки

    Расскажу об одном задании с мастер-класса «Большая переверстка», а именно о том, как мы собираем макеты по алгоритму верстки. Это метод,…

  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments