4 заметки с тегом

цвет

Результаты конкурса «Возвращение квадрата»

27 июня я предложил студентам второй ступени Школы редакторов (и всем сочувствующим) поучаствовать в конкурсе «Возвращение квадрата в тихом лесу». Условия:

У вас есть квадрат 1000 × 1000 пикселей. У вас есть одна шрифтоваая гарнитура и два её начертания. У вас есть ваша любимая фотография с вами на природе. Обязательное условие: на этой фотографии есть зелёная листва. У вас есть текст «Я мог бы поехать на природу, но вместо этого я делаю шрифтовую композицию в квадрате 1000 × 1000 пикселей. Спасибо, Школа редакторов!» У вас есть какие-то другие слова по вкусу.

Соберите из этого композицию, выложите ее в Фейсбук и пришлите в чат ссылку на публикацию с хештегом #опятьквадрат. Срок — 30 июня, 23:59

Кажется простым, но есть несколько хитростей:

Очень трудно поставить текст на изображение листвы, цветов и любого другого неоднородного фона. Об этом писал Бирман в статье «Текст поверх фотографии» и я в статьях «Не ставьте текст на фотографию» и «Семён, не тули»

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

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

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

Бронза

Анастасия Свирид вроде бы ловко вышла из ситуации с пёстрым фоном. Но обтравка очень резкая, и, самое главное, текст подходит слишком близко к лицу. Если сделать заголовок в полтора раза меньше, привязав к правому верхнему углу, было бы не хуже
Владимир Тупикин решил вопрос плашками, но полупрозрачные плашки — это полумеры (см. статью Бирмана). И не успел к дедлайну
Ксения Сергеева подобрала удачную фотографию с точки зрения размещения текста, но у картинки проблема касаний: всё друг друга неприятным образом чуть-чуть касается. Текст чуть-чуть касается головы, голова чуть-чуть вылезает над линией горизонта (?), рука чуть-чуть касается куста. Все эти касания создают неприятное ощущение
Ксения Ткачева радикально решила проблему фона — просто не совмещала фотографию и текст, так нормально. Но композиция на фотографии не отцентрована, а на фоне много мусора, который хочется вычистить. Фон активнее фигуры, вся фотография пестрая, тонально разваливается (хотя по сути она должна быть глубокой). Сравните с цветами Тупикина — там всё плоское, но он и стоит у плоскости с цветами, там это нормально. У текста неприятный рваный правый край.
Петр Рябиков не обратил внимание на левый верхний и левый нижний угол фотографии, из которых виднеется бетонность нашей жизни. Нужно было клон-кистью замазать, создав ощущение сада. И мелкий текст неприкаянный, буквально, в подмышке.

Серебро

Александра Селезнева выбрала безопасную фотографию, где много неба и мало Саши. Фигура и текст слишком близко. В целом квадрат не торкает, потому что Саша стоит к нам спиной. А может быть, это и не Саша вовсе, откуда ж я знаю... А, и в ЛНУ видны следы клон-штампа, грубоватая работа
Дарья Юрченко сделала хорошо и эффектно, но тексту плоховато на листве, а фотография несколько мыльная. Светлому тексту на темном фоне (это называется вывороткой) нужно давать больше кегль и интерлиньяж
Екатерина Сазонова тоже выкрутилась и не поставила текст на фото (это нормально). Подвела типографика заголовка: слишком большой интерлиньяж, текст слишком близко подошел к краю
У Ивана Устякина всё ровно с типографикой, но фотография некачественная, темная и без листвы. Горящая голова — эффектно
У Ирины Ситниковой элегантное решение с полосой сбоку, но оно не выдержало проверку заголовком. Заголовок можно было смело уместить на полоску, было бы хорошо. Недостаточный контраст жирности между заголовком и основным текстом
Мария Митина всё сделала хорошо и ровно, особенно мне нравится текст в две колонки. В идеале бы, конечно, заголовок наверх, но как сейчас — тоже эффектно. Не дотягивает только из-за цвета фотографии
У Ники Лобановой элегантное решение с текстом (кстати, заголовок уместился на узкой полосе). Но освещение на фотографии слишком жесткое. Да, редактор тоже должен думать, с какими фотографиями работает. Фотографию с таким светом не поставишь на сайт или в журнал
У Федора Глумова всё окей, кроме текстовой подмышки и пасмурной фотографии. На лбу заметно, что фотографию тянули кривыми или уровнями, мало диапазона в светах. На гистограмме виден провал в светах

Золото (получают приз)

Алина Мишуренко использовала цитату из Монеточки в последние деньки, когда это еще было модно
У Михайлины Лепкой получилось классное легкое настроение
У Кристины Смагуловой настроение совсем другое, но типографика прочная, фотография эффектная
У Камиллы Газиевой всё совпало: эмоция, свет, цвет и типографика. Единственное, что мне не нравится — что весь текст решён как один длинный абзац. Я б побил на два, а то и на три. Или подсократил. Секрет Камиллы в том, что это фотография хорошего свадебного фотографа, видимо, с ее свадьбы. Тут есть и эмоция, и свет, и цвет

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

Оттачивайте мастерство вёрстки и насмотренность в новом тренажере, написанном в вашу честь

Цвет и фактура как способ создать настроение

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

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

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

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

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

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

Из-за этого от клипа странное ощущение. Непонятно, что хотели сказать. Сердце не дружит с головой.

Как это связано с редактурой и дизайном? Допустим, у нас есть два сайта: один — частная клиника с высочайшими стандартами, порядком и стерильностью; второй — сайт подвальчика, в котором потные мужики и девушки занимаются спортом. Какой сайт вы сделаете стерильно белым с Гельветикой и прямыми углами, а какой сделаете упорото-темным с вылезанием за края?

2018   настроение   цвет

Цвет как информационный слой

Цвет — это вам не хухры-мухры. Цвет — это информация. Если вы красите текст в какой-то цвет, это нужно делать не просто так, а по какой-то причине.

Давайте пошагово. Вот просто текст:

Допустим, мы что-то выделили внутри, оно обращает на себя внимание:

Теперь я хочу что-нибудь на поля:

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

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

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

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

Мораль такая:

Не надо добавлять цвета в текст ради красоты. Только если вам нужно с чем-то текст связать.

Вот примеры, где это нормально работает:

Цветной фон в тексте показывает, к какой части схемы этот текст относится. Картинка из курса Ильи Бирмана «Пользовательский интерфейс и представление информации»
Цвет в заголовке становится легендой к схеме. Из канала «Смотрю»
Фактоид говорит: «Я отношусь к красному графику». Из студенческой работы

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

Широкие слайды — в два столбца

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

Я поклялся на Мильчине, что закрою секретные данные

Первый шаг — убрать отступы слева. Заодно сократили текст:

Осталась проблема с правым краем: строка длинная, заголовки проделывают в макете большие горизонтальные дыры, сноска внизу тоже создает дыру.

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

Еще поработали с цветом, но об этом в другой раз
2017   верстка   дизайн   цвет