Блог сложной судьбы

Позднее Ctrl + ↑

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

Задание

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

У вас есть холст белого цвета 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. Лишнее чистим маской или ластиком (в случае пельменей — ластиком):

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

Визуализация процесса

Распространенная ошибка в работах студентов второй ступени Школы редакторов — неинформативное изображение процесса.

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

Она упаковала? Получила? Подменила? Изготовила?

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

Пошаговая схема упаковки — показывает процесс

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

Взрыв-схема упаковки — показывает состав

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

P. S. Школа редакторов — единственное место в России, где учат подаче текста, иллюстрированию и управлению вниманием. Выпускники школы на две головы выше многих людей с опытом в профессии. Все остальные школы редактуры и копирайтинга стеснительно мнутся в стороне.

Вот еще примеры вещей, которым учат в Школе редакторов:

Создание промостраниц
Создание страниц о компании
Организация редпроцесса
Информативность фотографий и подписей к ним
Принцип «Экраном на читателя»
Сомасштабность и связность коллажей
Создание плаката

Ближайший набор в Школу редакторов начнется весной: bureau.ru/school/editors/

Бессмысленный фактоид

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

10 самых популярных программ праздников сняли на видео
300 популярных товаров всегда на складе
136 источников проанализировано в исследовании

Это бессмысленные фактоиды, потому что само число не важно и ни о чём не говорит. Что было бы, если бы популярных программ было 15? Да пофигу, хоть 20, ведь мне нужна только одна программа. Что если мы храним не 300, а 350 товаров? Да плевать, всё равно я не понимаю, храните вы нужный мне товар или нет. Какая разница, там 136 источников, 100 или 150? Да просто ради понта написали, ясно же.

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

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

3 часа на срочный выезд: если нужно срочно провести праздник, мы готовы приехать сегодня же
48 дней на обмен и возврат
Один врач сопровождает вас на всём пути лечения и в курсе всех тонкостей лечения

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

136 источников проанализировано в исследовании
1360 источников проанализировано в исследовании

Подача такси за 5 минут
Подача такси за 50 минут

Сфоткай типа стою

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

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

Бывает, фотографируют сидящих людей со спины. Все сутулятся, лиц не видно:

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

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

В съезде принимали участие рукодитель парткома Ростовской области Иван Георгиевич Матвеев, руководитель парткома Челябинской области Семён Захарович Иванов, председатель парткома и герой труда Виктор Михайлович Калинин... (повторять 20 раз)... и секретарь московского областного парткома Станислав Петрович Сахаров.

Вот настолько унылые эти фотографии.

Есть отдельные случаи, когда фотография жанра «типа стою» полезна. Например, когда вам нужно показать число участников. Вот, мол, целый огромный зал любителей системы управления Рона Хаббарда:

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

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

Если у вас не эти исключительные случаи, гораздо круче, если на ваших фотографиях что-то происходит: кто-то с кем-то говорит, тянет руку, рвет на груди рубашку, бросает в воздух чепчик

См. также: информативность фотографии

Лекция о музыке

В 2018 году я прочитал в школе Антона Маскелиаде о музыке:

Хотел сохранить здесь эту лекцию, вот почему.

Есть лекционная часть: обычный рассказ с информацией. При этом соединен текстовый рассказ, звук и картинка. Максимально задействованы доступные каналы.

Есть часть мастер-класса: показываю, как звучат разные синтезаторы, строю бит при всех, накручиваю эффекты. Все присутствуют при живом конструировании звука. Если просто переложить это в текст, эффект пропадет.

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

Есть связность: на протяжении лекции мы выстраиваем один продукт — трек с акапеллой Рианны. Есть смысл смотреть лекцию целиком.

Есть некоторая драматургия и элементы неожиданности.

Лекция норм, посмотрите.

Схема в обратную сторону

Так. Имеем схему действий по типу «Бусины на нитке». Имеем слайд презентации. Задача — уложить одно в другое:

Первое, что приходит на ум, — уложить слева направо, справа налево и снова слева направо. Проблема — на средней линии придется читать в обратном направлении, это хреново:

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

Е-мое... что ж делать-то?.. Погоди-ка, что это такое? ААА ЧТО ТЫ ДЕЛАЕШЬ НЕЕЕТ ЭТО ЖЕ НИТКА СТООЙЙ ААААРРРГХХХ!!

Можно поставить цифры сверху вниз, столбиками. Можно слева направо, строками. Как хотите. Никита, специально для тебя:

Ранее Ctrl + ↓