Пиши, соблазняй

Управление вниманием, драматургия и подача текста. Для тех, кто освоил информационный стиль

Битва текстов

Вот у студента в работе стоит два столбца с текстом под общим заголовком:

Такое положение подразумевает, что они спорят:

Если спора нет, то ставить их друг напротив друга нельзя, нужно ставить один под другим:

8 марта   верстка

Великая дилемма Нью-Йоркского метрополитена и главное свойство человеческой природы

Вот вам идеальный образец того, что такое человек в интернете и как его вовлечь.

В интернете очередной флешмоб, на этот раз — «Какое место лучше». Это как «Какого цвета платье», только нагляднее. Дядька в Твиттере спрашивает, какое место в метро лучше:

Разумеется, это сразу же супервирусный материал, миллион комментов, статья в «Нью-Йорк Таймсе», и сейчас российские бренды выйдут с каникул и каждый сделает свою кавер-версию.

Почему это идеальный вирусный пост:

Люди могут показать, какие они умные, опытные, видавшие жизнь и вообще молодцы. Если у тебя есть мнение по вопросу сидений в метро, ты можешь считать себя красавчиком. Даже если — и особенно если — ты не живешь в Нью-Йорке, а просто был там проездом. Максимальное социальное полезное действие.

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

Тема доступна и понятна. Это не химия, не программирование и не секвенирование генома, а поездка в метро. Почти все, кто это увидят, хотя бы раз были в метро, даже если не в Нью-Йоркском.

Боевая часть сделана картинкой. Это не лонгрид с длинной затравкой, а простая картинка, причем понятная даже без подписи. Мгновенное срабатывание в любой соцсети, при любом виде репоста.

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

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

Пляшите от визуалки

Проверяю курсовые студентов Школы редакторов, и вдруг дошло. Часто вы делаете так: сначала написали какой-то рассказ, а потом думаете, как в него вставить иллюстрации. Вы ищете, какие места в вашем рассказе можно проиллюстрировать, и иллюстрируете их как можете.

Например, статья про оформление какой-нибудь кредитной карты по сравнению с каким-нибудь потребкредитом и микрозаймом. Сначала написаны разделы, в них вся теория: про проценты, условия, штрафы. И потом автор смотрит на эту статью и думает: как проиллюстрировать?

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

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

А как?

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

В статье про кредитки наверняка будут интересны такие визуальные ходы:

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

Это навскидку. Если подумать, можно еще с десяток сочинить. И это в статьк на абстрактную тему! Представьте, какая будет визуалка в статье про путешествия или потребительские продукты.

— Постойте, но как же лонгриды? Как же вдумчивое чтение, длинные красивые тексты, всяческая глубина? Неужели люди настолько отупели, что им только картинки подавай?

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

Обязательное чтение

Не путай картинку и иллюстрацию
Как иллюстрировать
Что иллюстрировать, а что — нет
Как рисовать схемы
Что не так с картинками из фотобанков

Клипы горой

Проверил сегодня с десяток промостраниц в Школе редакторов, и почти у всех был примерно такой узел:

Здесь автор предлагает посмотреть видео в маленьком окне и еще в двух других маленьких. Так сделано типа чтобы эффективнее занять экран по ширине: не ставить же видео на всю ширину?

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

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

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

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

Еще с огромной осторожностью нужно относиться к многоколонникам с фотографиями — есть проблема сомасштабности.

Наглядность схем: транзисторы

В «Коде» пишем статью про транзисторы. Чтобы объяснить транзисторную логику, нужно было показать разные схемы соединения. Нашли хороший референс в Ютубе, перерисовали более наглядно:

Что тут произошло:

Упростили вид транзистора, убрали лишний реализм. Для нас важна логика этого процесса, а не физический внешний вид чипа. К тому же, в жизни чип не красный и не зеленый.

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

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

2019   схема

Самсунг против Айфона

А вот «Самсунг» и «Эпл» рекламируют одну и ту же возможность: широкоугольную съёмку. У одной компании колхоз и позорище, у другой кайф и радость:

В чем отличие:

Сюжет. У «Эпла» искусство, путешествия и приключения, у «Самсунга» бытовая сценка на платформе Ховрино. Зачем она там стоит? Что она делает? Это танцы? Тогда надо показывать видео. У «Эпла» есть ощущение масштаба и контраста большого и малого. У «Самсунга» обычные бытовые человеческие масштабы.

Мусор на фото. У «Самсунга» мусор везде: интерфейс приложения, какая-то грязь под перилами, сами перила случайные, ливневка криво сделана, торчат столбы, из-за горизонта виднеются дома. У «Эпла» идеальная природа, чистый песочек, ни одного окурочка туристы не оставили.

Мусор вокруг фото. «Эпл» тщательно зачистил сайт, чтобы фотография стояла максимально контрастно и четко. У «Самсунга» пришли маркетологи и попросили добавить второй этаж меню, кнопку сделать побольше, еще и стрелочку скролла добавить. А потом пришли юристы и потребовали GDPR-плашку с куками и выбором языка. Получился колхоз.

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

У «Самсунга» съемка такая, будто просто прохожему дали в руки смартфон, сфоткай, мол. Съемка в солнечный день — значит, куча ненужных паразитных теней, особенно на перилах. Перила эти занимают большую часть фотографии, хотя они по смыслу там на хрен не нужны. Рисунок перил создает страшный дребезг. Небо пустое, смотреть не на что. Фигура ни туда ни сюда. Пятно развалилось: голова девушки влипла в кусты, сама фигура чудовищно дробная: белый верх, черный низ, контраст кожи и волос. Фактуры, графика, пятна — всё в целом случайное и разбалансированное.

Как улучшить

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

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

С такими хорошими фотографиями белый фон как-то не комильфо. Но чу!

«Эпл», это ты?

Что не так с картинками из фотобанков

Пора объясниться по поводу фотобанков.

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

Проблемы начинаются, когда мы идем в фотобанк за людьми.

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

Люди в жизни так никогда не делают. Очевидно, что это не фотография вашего дружного коллектива, а постановочная фотография на тему «Дружный коллектив»
Просто представьте эту сцену в реальности

Люди одни и те же. Чтобы фотограф окупил расходы на одну фотосессию и что-то заработал, он должен за день отснять несколько сотен фотобанкопригодных кадров. Он берет одну модель, несколько смен одежды, визажиста и студию с декорациями. И начинает снимать. Вы покупаете фотографию красивой девушки-туристки, а она же уже была и медсестрой, и стюардессой, и депутатом, и проституткой, и службой техподдержки, и заботливой мамой, и ревнивой подругой, и героиней ваших любимых мемасов:

Это одна из СТА ДВАДЦАТИ страниц с фотографиями одной и той же модели — я называю ее Аленой. Выбирая фотографию Алены для своей статьи, будьте уверены, что она была уже в тысячах других статей

Люди из фотостока полезны, когда вам нужен не конкретный человек, а просто любой какой-то человек. Но если вам подходит любой человек, у вас плохая иллюстрация — вы не иллюстрируете, а разбавляете текст. Это значит, что текст слабый, продукт в целом слабый, и единственное, что его украшает — это Алена, королева Фотостока.

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

настоящие фотографии того, о чём пишете;
репортажные фото;
скриншоты и сканы документов;
схемы, графики, диаграммы, инфографику;
на худой конец — коллажи из объектов, которые вы скачали в фотобанке.

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

Прочитайте обязательно:

Что значит «разбавлять статью»
Чем плохо позирование
Полный урок по иллюстрациям
Схемы

Автономность первого абзаца

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

Вот пример. «Арзамас» присылает рассылку о новом курсе. После логотипа идет обращение «Друзья», дальше связный текст, заголовок и большая иллюстрация. А после большой иллюстрации текст продолжается: «мы сделали его»:

Если читатель сразу прыгнул в первый абзац, он не поймет, кто «мы» и кого «его». Слово «видеокурс» спрятано где-то во вступительном тексте, и чтобы его увидеть, нужно прямо почитать.

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

Сравнение несравнимых долей

Допустим, мы провели исследование по поводу кофейных напитков. Мы задали десяти тысячам человек два вопроса:

Какой кофе вы предпочитаете (черный или с каким-то видом молока)?
Как вы его предпочитаете пить — с сахаром или без?

Мы выяснили, что среди любителей черного кофе 85% пьют его без сахара, а среди любителей кофе с молоком без сахара пьют только 25%. Ну и логично было бы нарисовать какую-то такую картинку, да?

Нет! С этой картинкой куча проблем!

Главная проблема в том, что здесь сравниваются 85% и 75%, 15% и 25% — они ведь стоят рядом и они похожи по размерам. Но это не абсолютные доли людей из опроса, а доли относительно ответивших «черный» и «с молоком». Вот эти 85%, пьющих черный кофе без сахара — это 85% от какого числа?

И выясняется, например:

В нашем опросе из 10 тысяч человек
Черный кофе из них пили только 20%, остальные 80% предпочитали пить с молоком
85% от пьющих черный кофе — это 10000 × 20% × 85% = 10000 × 17%
75% от пьющих кофе с молоком — это 10000 × 80% × 75% = 1000 × 60%

И график, соответственно, будет выглядеть несколько иначе:

А вся проблема в том, что данные по двум группам респондентов стояли на одном графике. Формально и те, и другие измерялись в процентах, но это были проценты от разных величин, они не были приведены друг к другу.

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

Иллюстрации: теория, фотографии, рисунки

Фрагмент курса «Дизайн текста и визуальное повествование»:

О чем тут

Чем отличаются картинки от иллюстраций
Как подбирать картинки к статьям (никак и вообще это неправильный вопрос)
Обязательно ли иллюстрация должна быть картинкой
Как иллюстрации воздействуют на чувства
Фотографии
Рисунки

Разбор конкурса «Двуцветный квадрат»

Задание

Студенты второй ступени Школы редакторов получили такое конкурсное задание:

У вас есть холст белого цвета 2000 × 2000 пикселей. У вас есть ваша фотография, на которой вы себе нравитесь. У вас есть две краски: черная и любой цвет из веера «Пантон».

У вас есть текст: «Это конкурсное задание в Школе редакторов бюро. Я тренируюсь расставлять изображения и текст на квадратном холсте, учитывая технологические ограничения. Например, здесь у меня есть вот этот готовый текст и всего две краски, которыми я могу печатать. Как вам такая композиция?»

Ваша задача — составить композицию из текста и фотографии с учетом ограничений по цветам. Можно добавить заголовок. Результат — картинка в Фейсбуке со ссылкой на Школу редакторов. Ссылки на публикации в Фейсбуке скидывайте в этот чат с хештегом #опятьквадрат.

Что нужно было сделать

Это задание на композицию и работу с цветом. У него два измерения: аккуратность и выразительность.

Сделать аккуратно — то есть выдержать поля, подобрать хорошую шрифтовую пару, прилично обтравить фотографии или избежать обтравки, не налепить лишнего.

Сделать выразительно — то есть чтобы фотография была красивая и мощная, чтобы цвет в работе что-то обозначал или был невероятно красивым. Можно было обойтись без цвета.

Общие рекомендации

Просто соблюдайте правила вёрстки: внутреннее и внешнее, якорные объекты, принцип контраста, подбор кегля и интерлиньяжа, шрифтовые пары. Всё это есть в книге Горбунова о типографике и вёрстке.

Выбирайте выразительные, интересные фотографии. Когда что-то делаешь — это лучше, чем когда просто позируешь. Когда ничего не делаешь, то лучше улыбаться, чем нет. Самый кайф — когда фотография рассказывает историю. «Я стою у стены» — это не история. См. информативность фотографии

Старайтесь не обтравливать фотографии, особенно чтобы заменить темный фон на светлый или наоборот. Чем меньше обтравки, тем меньше проблем.

Не используйте цвет для красоты, рассказывайте им историю. Не надо просто так красить текст или фон каким-то цветом См. цвет как информационный слой.

Результаты

Дмитрий Мишейкис. Текст лежит неаккуратно, плашка невыразительная и случайной формы, текст внутри плашки упирается в края. Второй блок текста непропорционально растянут. Сама плашка врезается в голову «почти, но не совсем». Цвет ничем не помогает. Выразительность: 1; аккуратность: 1.
Анна Третьякова. Нарушены требования по размеру изображения. Неаккуратная обтравка фотографии. Не выдержаны поля. Фотография сама по себе хорошая, градиент сверху — норм идея. Аккуратность: 1; выразительность: 2.
Иван Афонченко. С полями почти хорошо, но обтравка слабая, цветной контур невыразительный. Если делать типа грубую обтравку, то контур должен быть выразительным, мощным. А тут обтравили как получилось и добавили обводку просто так. Выбранный синий делает фотографию тусклой. Аккуратность: 2; выразительность: 1.
Галина Хан. Хорошо выбрана и поставлена фотография, но ей не хватило динамического диапазона, то есть контраста. Блики серые, тени чёрные, в целом траурно. В типографике: не соблюдены поля, пережат интерлиньяж, некрасивая форма колонки текста, недостаточно контраста между заголовком и текстом. Цвет так можно делать, если бы он не наехал на белую часть кофты, отчего создалось дребезжание. Аккуратность: 1; выразительность: 2.
Лена Жернова. Интерлиньяж пережат, расстояния между блоками текста случайные, композиция развалилась на пятна. Фотография интересная, но обтравлена с артефактами. Псевдотень ничем не обоснована: не добавляет глубины, просто создаёт дополнительный визуальный дребезг. Аккуратность: 1; выразительность: 2.
Кира Калимулина. Выразительная фотография, грамотная работа с цветом (его нет, и это хорошо). Подвело общее пятно и типографика: интерлиньяж пережат на выворотке, ощущение вёрстки впритык, фотографию объяли жирные заголовки с двух сторон. Нужно было убрать нижний заголовок, сделать кегль мельче и аккуратнее, колонку текста ровнее по форме (можно использовать переносы). Аккуратность: 2; выразительность: 3.
Мария Эл. Мощная, выразительная фотография. Текст развалился: то утыкается почти впритык под грудь, то чуть касается волос, при этом переносы ведут себя непредсказуемо. Аккуратность: 2; выразительность: 3.
Лена Кулачикова. Всё бы хорошо, но подвела форма абзаца — слово «краски» опасно нависло над макушкой. Шутка с квадратом Малевича не вызывает восторга. Фотография тонально не принадлежит пространству «Чёрного квадрата», но обтравлена так, будто принадлежит. Видны артефакты обтравки. Аккуратность: 3; выразительность: 2.
Любовь Верещинская. Смелое решение — разбить квадрат на части и работать с каждой как с отдельным холстом. Решение оправданное. С полями у текста всё хорошо, но выключка вправо вызывает вопросы. Плашка под заголовком создаёт лишнюю декоративность и дребезг. А вот узорчик на фоне создаёт приятное освежающее ощущение, получается приятная такая фактура. Аккуратность: 3; выразительность: 3.
Юлия Занкевич. Идея с двумя столбцами текста — норм, хотя левый столбец без переносов чувствует себя дырявым. Поля и интерлиньяжи на грани. На фото есть эмоция, но нет действия, этого не хватило. Цвет ничего не даёт, но и не портит. Аккуратность: 3; выразительность: 3.
Владимир Тупикин. Отступы на грани, интерлиньяж пережат, цвет не портит, но и не помогает. Фактурка освежает, но физическая природа изображаемой ей тень неубедительная, из-за чего пространство скорее ломается, чем создаётся. На фото сдерживается эмоция, но ничего не происходит. Аккуратность: 4; выразительность: 3.
Наталья Турачёва. Яркая, запоминающаяся композиция, ради которой пришлось пожертвовать читаемостью. Наслоения и пересечения усложняют чтение, а не помогают. Получился дизайн ради дизайна. Аккуратность: 3; выразительность: 4.
Кристина Лунина. С типографикой вроде всё прилично. Серое небо на фото позволило не страдать обтравкой, но оно же и убило выразительность. Фигура мелковатая, лица не видно. Что происходит на фото — неясно. Если Кристина фотографирует текст, то он должен был вписаться в пространство фотографии (он не вписывается). Аккуратность: 4; выразительность: 3.
Алексей Плетнёв. Выразительная фотография. Наконец-то кто-то что-то делает, а не просто сидит и смотрит. Перебор по контрасту в фотографии, пятно довольно дробное. Интерлиньяж на грани, можно чуть больше. Правый край рваный, хорошо бы включить переносы. Поля документы выдержаны хорошо. Шрифтовая пара не нравится. Эмодзи — норм. Аккуратность: 4; выразительность: 4.
Анна Волкова. Несмотря на дополнительное усложнение в виде двойного набора полей композиция читается, есть пространство, приятная графика декоративного шрифта. В обтравке ничего криминального не вижу. Губы можно было не красить. Аккуратность: 5; выразительность: 4.
Андрей Евтеев. Ещё более замороченная конструкция: текст на трёх холстах! На счастье, почти везде отступы работают, форма основного абзаца неплохая. Не хватает контраста между заголовком и основным текстом. Фото невыразительное, но есть эмоция. Цвет ничего не даёт. Аккуратность: 5; выразительность: 4.
Лена Жукович. Выразительная фотография: лицо, причёска, крупный план, фактура, глубина резкости. Нормальная форма столбца текста, нормальный интерлиньяж. Тяжеловато читать часть текста на светло-сером фоне. Аккуратность: 5; выразительность: 5.
Алиса Ястремская. На фото яркая эмоция, и даже артефакты сжатия её не портят. Обтравка не понадобилась благодаря светлому фону. Весело использован цвет. Придирка по типографике — жирность основного текста и форма основной колонки. Можно включить переносы и сделать текст обычной толщины, всё будет нормально читаться. Аккуратность: 5; выразительность: 5.
Вячеслав Лазарев. Выразительная фотография, которая, заметьте, не ломает чётко выстроенный каркас. С полями, интерлиньяжем и контрастом всё хорошо. Цветная надпись хорошо сидит в пространстве. Фотография залезает на текст, но не мешает читаемости. Обтравка без явных проблем. Аккуратность: 5; выразительность: 6.
Марья Янкович. Впервые на фотографии есть не только эмоция и действие, но и история. Наложить текст и заголовок — смелое решение, и оно было бы оправданным если бы цвет был не таким контрастным или текст был пожирнее. Сейчас напряжно читать. Но всё это не проблема, когда есть история. Аккуратность: 4; выразительность: 7.

Редактура таблицы

Хьюстон, у нас таблица. В целом Нормальная, но много мелочей, которые хочется исправить.

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

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

Во втором и третьем столбце повторяются «до». Всё, что повторяется, — кандидаты на вынос в заголовок таблицы.

Остались мелочи: выровнять текст в ячейках по верху и вернуть заголовок на место.

Кинофильм:

Топология и форма схемы

Перед вами три схемы с одинаковой топологией, но разной формой связей. Оцените, как меняется ощущение от схемы в зависимости от формы:

2019   схема

Краткое введение в фотографию: пятно

Я ничего не понимаю в фотографии, у меня всегда завален горизонт, поэтому не слушайте, что я вам говорю и идите учиться на кафедру теории фотографии. Но пока идете — вот небольшая заметка о пятне.

У человека два глаза: левый и правый. Когда они работают вместе, мозг соединяет два изображения от глаз и создает у нас иллюзию объемной картинки. Главное преимущество объемной картинки в том, что мы понимаем, где фигура, а где фон; где главное, а где — второстепенное.

Допустим, бежевый человек стоит на фоне песчаных дюн.

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

Мозг проигнорировал даже полоску неба, потому что для него тут главное — фигура другого человека.

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

Мужчина, вы бы прикрылись

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

Человека почти не видно, потому что его пятно перебило дерево и его тень

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

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

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

Общее правило: чтобы предмет хорошо читался на фотографии, он должен быть хорошо считываемым и не слишком пёстрым пятном.

Теперь к студентам Школы редакторов. Вот вы делаете страницу об агентстве праздников и выбираете, допустим, вот такую фотографию. Какое у неё пятно? Листаните:

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

Теперь проблема, что шары совершенно не дружат с остальной фотографией, и надо бы их вообще убрать. Но это проблема, с которой будут работать дизайнеры. Редактору достаточно сказать «ПЯТНО!».

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

И уже когда вы понимаете, как воздействует форма пятна на настроение фотографии, вы уже сможете проектировать нужные вам по смыслу фотографии — не только на уровне сюжета, но и на уровне визуального воздействия.

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

Например, у вас вот такая фотография детского праздника. Очевидные проблемы: девочка на переднем плане провалилась в стену, всё внимание перетягивает на себя девочка справа, потому что её пятно гораздо чётче:

Решение — какими-нибудь минимальными штрихами спасти пятно главной девочки:

А то и вовсе исправить фон:

Короче, котаны, думайте о пятне.

Я баклан

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

В реальном проекте надо давать фотографу грамотное техническое задание: «Братан, надо, чтобы дети веселились, показывали искренние эмоции, держали в руках кубики Майнкрафта и, по-братски, хорошо читались на однородном светлом или темном фоне. По-братски, братишка, следи за пятном, от души душевно в душу».

Операция «Конфетти». Краткий мастер-класс Фотошопа

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

Задача: сделать фотографию более эффектной, чтобы серый фон уходил в белое пространство страницы.

Первый шаг: откусываем фотографию в отдельный слой и двигаем в ней кривые так, чтобы серый фон стал белым. Скажу сразу: это варварский способ, потому что он на хрен выжигает все настоящие света этой фотографии и убивает пятно. Нормальные пацаны в такой ситуации берут инструмент «Осветлитель» и вручную светлят фон. Но я устал, я хочу пельменей, поэтому кривые. Результат: серый фон стал белым, вся фотография стала светлее.

Второй шаг: масштабируем фотографию, чтобы она занимала нужное нам пространство. Для этого используем CMD+T, то есть «свободную трансформацию», зажимаем Shift для сохранения пропорций. Сразу скажу: пиксели поговняются, но — пельмешки! Слою с большой картинкой ставим режим Multiply, чтобы сквозь нее просвечивался фон:

Видите пацана в клетчатой рубашке справа? Я — нет. Это какой-то артефакт хренового фотографа. Берем белую кисть и замазываем это недоразумение. Заодно берем кисти в цвет локтя пацана слева и дорисовываем бедолаге локоть. Кто отрезает людям руки на фотографиях, самому надо руки отрезать:

Последний штрих: нужно добавить классных конфетти. Находим кусок с более-менее чистыми конфетти, выделяем, нажимаем CMD + J и создаем таким образом копию куска слоя. Я повыделял кучу кусков, чтобы конфетти были разнообразными:

Теперь с помощью Free Transform и копирования слоя раскидываем большие и маленькие копии этого конфетти под разными углами. Самые большие можно будет потом размыть с помощью Lens Blur, если пельмешки не всплывут раньше. Вот так выглядят слои с новым склонированным конфетти, если выключить все нижние слои:

Теперь всем этим слоям с конфетти ставим режим Multiply или Darken. Лишнее чистим маской или ластиком (в случае пельменей — ластиком):

Масло, сметана, второй сезон «Лютера».

Ранее Ctrl + ↓