Иллюстрации

Следующая история, про которую хочется поговорить, — это иллюстрация. Иллюстрация может поспорить с заголовком в плане важности и заметности на странице или другом формате. Она очень сильно привлекает взгляд. И к выбору иллюстрации надо относиться ответственно — это всегда дизайнерская работа. Не надейтесь, что вы поставите серый квадратик, а потом придёт волшебник на голубом вертолёте и поставит туда красивую картинку. Если вы не поставите, то никто не поставит. А если и поставит, то что‑нибудь уродское. Поэтому всегда очень внимательно относитесь к выбору иллюстрации.

Иллюстрации должны, в первую очередь, доносить информацию. Но иногда бывает, что они могут или не доносить информацию, или вместе с информацией доносить и эмоцию:

Чем иллюстрация выразительнее и эмоциональнее, тем лучше. На примере выше фотография, посвящённая сноубордингу. Обратите внимание, как здесь клёво подобрана динамическая композиция и какая напряжённая поза у сноубордистки: неизвестно, удачно она приземлится или неудачно. Люди за ней смотрят. Ещё специально всё наклонено, чтобы выглядело динамичнее. Легко представить такую иллюстрацию в спортивном журнале или на спортивном сайте с рассказом о каком‑то событии. Такую штуку хочется разглядывать, она сразу вызывает переживания.

Ниже иллюстрация из еженедельного журнала «Гардиан». Что‑то про плохое молоко, генетическую селекцию и какой‑то вред. Смотрите, какие здесь недовольные быки, коровы, как они злобно сморят на зрителя. И всё это классно сочетается с заголовком Bad milk. Этих коров совсем не хочется злить. То есть вот такая эмоция.

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

Ещё обратите внимание: если поверх иллюстрации появляется текст — на плашке или как подпись внизу, — он не пересекает жизненно важных вещей. Например, на морду корове или быку никто не наехал.

А вот ещё иллюстрация, точнее, разворот из того же самого «Гардиана», посвящённый какому‑то мосту:

По‑моему, это очередной самый длинный мост в мире, который построили и открыли. И насколько хорошо подобрана фотография, которая демонстрирует весь мост. Прямо ощущение: «Господи, какой он длинный! Люди же построили!»

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

Вот пример иллюстрации, которая никакой информации не доносит. Она призвана просто создать настроение:

Статья про какие‑то шпионские штуки и упоминает автора «Шпион, выйди вон!» Джона Ле Карре. Поэтому на иллюстрации какая‑то шпионская история и происходит. Иллюстрация пытается игриво взаимодействовать с текстом — быщ, воткнулась. Но за этой штукой вообще нет никакой функции, кроме как привлечь внимание и немного развлечь читателя. Это, можно сказать, не иллюстрация, а картинка.

Вот из той же статьи исключительно развлекательная картинка с какой‑то игрой. Здесь какие‑то лица превращаются в силуэт человека в шляпе:

А вот иллюстрация с пчёлами очень классно взаимодействует с темой статьи:

История про вторжение пчёл. И специальная иллюстрация, где пчёлы чуть ли не на меня вылетают — и прямо стрёмно: «Господи, сейчас эта хрень на меня выскочит и укусит!» Смотрите, как их много и как они тут все расселись.

Ещё здесь есть дешёвый приём — всякие врезки в соты засунули. Думаю, это тоже отчасти работает, хотя не очень тонкий юмор.

И ещё какая‑то статья в «Гардиане». Иллюстрации с какой‑то информацией и инфографикой:

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

Перед нами какой‑то банер, посвящённый акции на сайте, где продают детскую одежду и обувь. Ребята что‑то нарисовали и изобразили радостную девочку: «Ура, ура, мне сейчас купят детскую обувь!» Проблема в том, что эта девочка отвернулась от своего текста и вообще живёт в какой‑то отдельной комнате от этого текста. Может сложиться ощущение, что она не радуется, а, наоборот, кричит в ужасе: «Выпустите меня из этого жёлтого квадрата! И зачем вы мне показываете здесь эти 15%?»

Круче сделать как‑нибудь вот так:

Во‑первых, текст и иллюстрация поселились в одной комнате, девочка смотрит на эти 15% и теперь гораздо более убедительно им радуется.

Вот очередной Франческо Франки. Я сейчас приглашаю вас посмотреть на этот разворот и с учётом того, что я сказал про направление взгляда иллюстрации, подумать, что здесь не так:

Комментарии из зала: «Мужчина под вторым номером смотрит на свой текст, а третий… Я не понимаю. Мне кажется, непонятно соотношение. Второй куда относится — к нижнему тексту или к тексту сбоку?»

«Вторая страница, последняя колонка, там шестой и пятый номер. Непонятно, шестой относится к боковому или к нижнему».

«Или к четвёртому, или они вместе?»

На самом деле вот с первым и вторым особо проблем нет. Они настолько хорошо подружились со своим текстом, потому что они на свой текст смотрят, а сам текст их огибает. Так что особых вариантов нет.

А дальше уже начинается проблема. Третий дядя смотрит на текст от Марко Поло, а на свой текст ему пофиг. И только методом исключения мы способны догадаться, что всё‑таки они связаны. Видите, как направление взгляда сильно влияет.

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

Когда ставите иллюстрации, смотрите, чтобы они не образовывали какие‑нибудь подобные конфузы:

А вот ещё пример из более свежего:

Комментарий из зала: «Да, как будто это Навальный, а не Песков».

Следом давайте поговорим про пропорции иллюстрации. Классическая, всем привычная иллюстрация — это горизонтальная. Она соответствует нашему кругозору и тому, как устроено наше зрение. Нам такие штуки удобно обозревать, поэтому это самая какая‑то безопасная история:

При этом вертикальные иллюстрации — отчасти недооценённый формат. Потому что с ними гораздо сложнее работать. Они, как правило, гораздо более динамичны в силу своих пропорций. И если их удаётся хорошо встроить в макет — все только выигрывают. Их не надо бояться, с ними нужно просто учиться работать.

Вот здесь, видите, какой, казалось бы, статичный сюжет, какая‑то просто переговорка в Коворкафе. Но сами пропорции фотографии, ещё сочетание этой сужающейся перспективы — прямо такая очень классная штука:

Поговорим о том, как фотографии и иллюстрации кропить на примере такого снимка:

Общее правило такое — иллюстрации можно обрезать и отрезать от них столько, сколько необходимо, пока иллюстрация не «закричит». В данном случае я могу её отрезать и отрезать — и ничего страшного не случится. Мне это может пригодиться, например, если я хочу показать ребёнка более крупно, если у меня полностью фотография не влезает, если мне нужно слегка изменить пропорцию:

Если же я начну делать что‑то вот такое, то и ребёнок, и фотография «закричит», потому что я откусил пятку:

Или обрезал не пятку, а ручку — тоже плохо:

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

Когда я начал отрезать ребёнку руки, я стал ругаться. Это не потому что плохо отрезать ребёнку руки. Всем плохо отрезать руки. Но обрезать мои руки — а это мои руки держат ребёнка — можно. Потому что они не несут существенной роли на этой иллюстрации. На самом деле, если бы здесь этих рук не было, а ребёнок висел в воздухе, всё было бы только лучше. Мои руки здесь только мешают, поэтому их можно чикать и чикать, и ничего не будет. А вот если бы я попадал в кадр целиком, то надо было бы разбираться, как быть.

Теперь по поводу того, как обрезать иллюстрации, когда они обтравлены. Перед нами портрет какой‑то девушки:

И ей кто‑то ампутировал руки и плечи. Взяли обрезали воздухом ей плечи. Так плохо делать.

Хорошо делать вот так:

В данном случае у девушки всё‑таки плечи и руки на месте, она откуда‑то выглядывает. Если бы я её хотел поставить, например, на сайт, то я бы это без проблем сделал. Сейчас покажу как. Если поставить её просто так, получится плохо, потому что, опять же, она обрезана воздухом.

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

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

Теперь маленький приём, который я подглядел у Жени Арутюнова в своё время в интернете. Бывает, надо сделать классную фотосессию, но времени или бюджета на это нет. Иногда можно с помощью очень простых спецэффектов добиться нужного впечатления:

В данном случае ребята взяли какую‑то фотографию, судя по всему, с фотостоков, нарендерили своё мороженое и поставили фотографии так, чтобы девочка смотрела на это мороженое вожделеюще, открыв рот и распахнув руки. Прямо видно, что она это мороженое хочет. Это картинки совершенно из разных источников, совершенно точно. Но между ними прямо чувствуется связь.

Конечно, это выглядит не так круто, как если бы это была настоящая фотосессия с мороженым, но нужный эффект создаётся. И вот то же самое — девушки много, здесь она тоже всё ещё хочет мороженое:

Мы с вами до этого видели картинку, где между иллюстрациями произошла плохая связь. А здесь тем же приёмом воспользовались, но с умом. Берите на вооружение.

Иногда в роли иллюстрации может выступать не какая‑то нарисованная картинка, а просто красиво свёрстанный текст:

Вот перед нами какие‑то передовицы газеты «Учёт. Налоги. Право». Когда в бюро обновляли дизайн этой газеты, у них были иллюстрации, шаржи на каждый номер. Проблема была в том, что эти иллюстрации очень сильно устарели в плане стиля и продолжать эту традицию не хотелось. А придумывать какой‑то новый стиль — это было куча трудностей, потому что нужно было искать подходящего художника, этот стиль утверждать, добиваться, чтобы эти картинки можно было нарисовать очень быстро, потому что газета выходит часто. Короче, целый геморрой.

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

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

Или солнышко — тоже не бог весть какая иллюстрация дружит со стилем всего остального: