Давайте поговорим про подписи — это мы берём и что угодно подписываем, например, берём ту же картинку с ребёнком. Втаскиваем её в Фигму, добавляем к ней подпись. Пока мы смотрим просто на картинку, мы не понимаем, на что мы смотрим. Если мы добавляем к ней подпись «Варя в возрасте полутора лет» — сразу понимаем:
То есть подпись помогает нам вникнуть в суть того, на что мы смотрим. Нередко подпись выступает в роли генератора внимания. Мы можем смотреть на какой‑нибудь разворот или страницу и не хотеть читать весь текст. Но мы видим какую‑то красивую иллюстрацию, она привлекает наш взгляд, мы хотим понять, что же изображено. И в этот момент нам помогает подпись. Мы её читаем и понимаем: «Ого, здесь что‑то интересное, пойду‑ка я теперь почитаю текст вокруг этой иллюстрации», — и читаем всю статью.
Предположим, что у нас какая‑нибудь статья, посвящённая детской одежде с типографикой на ней. Тогда пишем что‑то в духе: «Боди с „Гельветикой“». Там могла бы быть ещё какая‑нибудь картинка с другим шрифтом — «Футболка с „Футурой“»:
Что здесь произошло? Подпись помогает мне понять, что я перед собой вижу. Здесь ребёнок, я и так это понимаю. Я вижу, что здесь есть шрифт. Мне не надо подписывать, что это шрифт, но я не могу понять, что это за шрифт. А в принципе у меня вся статья про это, поэтому я и пишу, что это боди с «Гельветикой», а это футболка с «Футурой».
А когда у меня была подпись «Варя в возрасте полутора лет», я тоже слова написал не о том, что кто‑то ребёнка держит на руках — это и так видно из иллюстрации. Но я объяснил, что это ребёнок, его зовут так‑то и ему столько‑то лет. Я объяснил то, чего из иллюстрации я никак узнать не мог.
Общее правило подписи такое — подпись никогда не может быть крупнее основного текста. Желательно делать её заметно меньше, но при этом не настолько мелкой, чтобы приходилось доставать микроскоп, чтобы её прочитать. Подписи желательно не делать супердлинными. Если подпись превращается в два полноценных предложения, скорее всего, это повод текст подписи втащить в основной текст статьи или страницы, а в подписи оставить что‑то более короткое.
В конце подписи не надо ставить точку. Даже если она у вас состоит из двух предложений, то в конце первого предложения точку можно поставить, а в конце второго не надо:
Вопрос из зала: «Как определить расстояние подписи от фотографии, чтобы не прилипло?»
Правило внутреннего и внешнего.
Вопрос из зала: «То есть просто на глаз, без вычислений?»
Да, никаких вычислений. В первом случае прилипло, а во втором отлипло:
Хорошая штука временами — это отличать подпись от основного текста не только с помощью кегля и размера, но и с помощью начертания. Если посмотреть на сайт бюро, то основной текст у нас набран «Бюросерифом» — антиковой. А подписи намеренно более мелкие и набраны более тонким начертанием. Они прямо явно отличаются от всего остального. Это удобно:
Давайте теперь посмотрим, что ещё с подписями можно делать.
Вот перед нами очередной разворот «Учёт. Налоги. Право»:
Где появляются подписи? Во‑первых, передовица с анонсами материалов — это всё подписи. Они могут жить сами по себе и подписывать какие‑то иконки. Здесь есть какая‑то цитата из интервью, фактоиды, иконки. Есть подписи к авторам: есть автор материала и подпись, кто этот автор такой. Есть ещё подпись к фактоиду и подпись с данными героя в социальных сетях, чтобы читатели приходили к нему дружить.
Подписи необязательно ставить аккуратно под иллюстрацию, как мы вставили в историю с ребёнком. Иногда можно ставить как‑то более прикольно. Перед нами плакат из Японии со всякими видами рыб, посмотрите, как клёво здесь подписи стоят:
Если присмотреться, то подписи стараются даже взаимодействовать со всякими рыбками, которых мы здесь видим, и стоят настолько аккуратно, что я ни за что не перепутаю, какая подпись к чему относится. Где‑то подпись аккуратно встала под плавник рыбы, где‑то у хвоста. В результате рыбок можно поставить очень компактно, но я очень хорошо различаю, что к чему относится.
Иногда подписи поставить просто рядом нельзя. Можно использовать выносные линии.
Перед нами ещё рыбы. На этот раз не из Японии, а из Испании:
Здесь показана схема запчастей тунца с помощью выносных линий. Благодаря грамотному расположению мы без проблем понимаем, что к чему относится. Единственное, что здесь бесит, — это то, что эти выносные линии очень шумные, толстые, пунктирные, и в тунца втыкаются чёрные точки. В результате сами выносные линии привлекают к себе гораздо больше внимания, чем могли бы.
На этом месте я предлагаю как раз пойти в Фотошоп и научиться работать с выносными линиями.
Это какой‑то выпуск Школы дизайнеров бюро. Мы взяли сфотографировались в Коворкафе. И у нас здесь куча выносных линий и куча подписей, которые я расставил, чтобы запомнить, а кто здесь вообще был. Потом на старости лет буду вспоминать:
Но расставил я эти подписи и выносные линии очень плохо. Выносные линии жутко толстые, местами пересекают лица героев, местами их не видно, они сливаются с чёрным фоном. Где‑то они пересекаются друг с другом — полная жесть.
Давайте последовательно это всё причешем.
Первое, что нужно сделать, — это, конечно же, добиться того, чтобы выносные линии были очень тонкие. Они всё равно будут видны, но нет никакой необходимости делать их настолько толстыми, как я сделал сначала. Я их сделал в четыре раза тоньше — и никто не умер, всё нормально видно:
Следующее правило — выносные линии не должны пересекаться между собой. У нас тут две выносные линии пересекаются. Как можно починить? Просто поменять блоки местами. Линии перестали пересекаться:
Подпись, которая втыкается в имя «Яна», — это плохо. Подписи не должны так втыкаться, должно быть минимальное расстояние. Можно руководствоваться и правилом внутреннего и внешнего, и просто каким‑то чувством вкуса. При этом желательно стремиться к тому, чтобы в рамках одной иллюстрации с выносными линиями расстояния были примерно одинаковые:
Посмотрим, где ещё линии пересекаются, и двигаем выносную линию от Кристины. Больше явных пересечений нет:
Плохо, когда выносная линия втыкается в тот объект, на который она указывает. Здесь выносная линия воткнулась нещадным образом в голову Яны. Лучше сделать так, чтобы мы всё равно понимали, что эта выносная линия относится к Яне, но не угрожает её жизни:
Выносные линии не должны пересекать какие‑то значимые объекты. И вообще должны как можно меньше пересекать иллюстрацию. Здесь есть проблема — выносная линия от подписи «вероятно, Михаил Устименко» прошла через голову Лены. Решение следующее — мы просто освобождаем место для Михаила. Так как я здесь придуривался, а потом вспомнил, что это действительно он, можно подпись слегка сократить, и получится гораздо лучше: «Михаил Устименко». И тоже не будем втыкать ему это в голову. Таким макаром мы эти штуки причёсываем:
Следующее правило. Представьте, что в центре какой бы то ни было иллюстрации, вокруг которой у вас есть выносные линии, находится солнышко. А вот эти выносные линии — это лучики солнышка. И как у всякого уважающего себя солнышка, лучики у него должны стремиться расходиться из центра. Так же у вас должны и выносные линии стремиться к какому‑то центру, хотя бы приблизительно. Тогда это выглядит гораздо приятнее, аккуратнее и собраннее. На нашей фотографии выносная линия от ноутбука стремится не в центр, а куда‑то вниз. Мы возьмём и просто чуть‑чуть подвинем. Вот она стремится к центру:
Когда вы рисуете выносные линии, следите за тем, чтобы они как можно более уверенно и убедительно не то что втыкались, а направлялись к своим подписям и к своим объектам. Если посмотреть на выносную линию от Коли Товеровского, то она довольно плохо проходит по касательной к его голове. И, если её продлить, вообще промажет мимо самой подписи. Поэтому неплохо бы это поправить:
И напоследок нам нужно что‑то предпринять с тем фактом, что подписи плохо видны поверх фотографии. Способы могут быть самые разные. В данном случае можно просто поменять их способ наложения, чтобы они подстраивались под картинку, которая находится под ними:
Теперь они не чёрные, а чёрные поверх белого фона, а там, где фон тёмный, они становятся или белые, или светло‑серые, и их видно гораздо лучше:
Я хочу показать ещё пачку картинок на тему того, как вообще с подписями можно играть:
Смотрите, здесь подписи каких‑то красивых вкусных пончиков и бутербродов, и вместо того, чтобы просто подписать фотографию, написали прямо поверх фотографии и ещё как‑то по форме объектов, которые на этой фотографии находятся. Клёво выглядит и подчёркивает какую‑то кулинарность всей темы.
Так иногда тоже можно делать. Понятное дело, что всё это требует суперручной работы, на поток такое не поставить, по крайней мере пока. Но берите на вооружение.