?

Log in

No account? Create an account

nobelfaik


Блог Игоря Штанга

light gray is the new white, dark gray is the new black


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

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

1

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


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


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




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




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




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




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




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



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

2

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


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


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




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



3

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


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


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




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



4

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


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


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



5

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


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


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



6

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


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

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


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

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

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


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

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

  • Тире или буллит

    В эфире рубрика ???. Мария спрашивает: Какие маркеры ставить в списках на русском языке: тире или буллиты? Вопрос непростой, поэтому начну…

  • Картинка без модуля

    Продолжаю серию статей про неудачные приемы верстки. Сегодня о том, как не надо ставить иллюстрации. (Прошлые выпуски собрал под одним тегом.)…

  • Швейцарские плакаты по-русски

    Недавно я опубликовал заметку под названием « Кириллица и латиница». Главная мысль такая: Несовершенство кириллического алфавита не…