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

контраст

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

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

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

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

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

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

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

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

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

Бронза

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

Серебро

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

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

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

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

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

Плакат для кофейни

Да-да, я знаю:

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

Но всё равно.

Визуальная иерархия: объясняю на котиках

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

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

Что больше, то важнее

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

Приблизим к жизни. Допустим, у нас рассказ о какой-нибудь диджейской штуке

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

Еще бесит белая дыра под заголовком, но о ней потом.

Когда всё одинаково большое, всё одинаковое по важности

Увеличиваем Мурку, И ВНЕЗАПНО ОНА БРОСАЕТ ВЫЗОВ БАРСИКУ КОРМИЛЬЦУ НАШЕМУ ОПЛОТУ СТАБИЛЬНОСТИ В МИРЕ КОТИКОВ:

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

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

Чем больше контраст размеров, тем нагляднее иерархия

Вернемся к исходному варианту, где Барсик был главным. Но теперь Барсика немного уменьшим, а Мурку немного увеличим. Барсик всё ещё больше Мурки, но теперь иерархия не так очевидна. Похоже на бирмановское «Почти, но не совсем».

А теперь наоборот:

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

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

Что когда использовать

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

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

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

Короче, не тупите:

Главное большим, второстепенное мельче

А если у вас на странице всё главное — то у вас проблема с изложением, а не с размером фотографий.

P. S. О мобильной вёрстке

Из травмпункта доносится возмущенный вопль (кажется, дизайнерский), что на мобилке все картинки будут выглядеть одинаково. Это, конечно, плохо. Верстать под мобилку надо так, чтобы визуальная иерархия в каком-то виде сохранялась:

Это, конечно, не все соображения о вёрстке фотографий. Но надо же и работу работать. До скорого!

2017   агрессия   контраст   размер   фотография