?

Log in

No account? Create an account

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

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

1

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


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


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




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




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




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




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




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



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

2

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


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


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




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



3

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


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


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




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



4

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


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


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



5

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


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


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



6

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


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

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


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

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

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


См. также:
Переверстка №12. Плакат фестиваля Culinary Zinema
Верстка по форме

Записи из этого журнала по тегу «статья»

  • Прижать линейку

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

  • Маркеры в многоуровневых списках

    В эфире рубрика ???. Алексей Зотов спрашивает: Какие маркеры использовать в многоуровневых маркированных списках? Отвечаю: никакие. В русской…

  • Амнистия серого текста

    У Ильи Бирмана недавно вышла заметка про серый текст. Я планировал рассказать примерно о том же, но раз Илья меня опередил, придется писать…