Дизайн-джем special: блендер, стиральная машинка, робот-заяц и другие герои обложек дайджеста глазами их создателей

В олдскульном выпуске от Futura by red_mad_robot

Мало что греет сердце роботам так же сильно, как приятные воспоминания о первых выпусках «Джема». У кого-то при фразе «old school» в голове включаются Run-D.M.C. и Aerosmith, а мы ловим GIF-флешбэки с диджейским пультом и соковыжималкой.

Графические дизайнеры Кристина Скворцова и Рома Борцов поделятся «кулстори» о создании фирменного стиля обложек «Джема» и расскажут, какие использовали инструменты, как искали вдохновение и оживляли буквы от выпуска к выпуску, и закладывали пасхалки в обложки.

Привет! Сегодня поделюсь своими любимыми обложками, которые я делала для «Джема». Начнём с блендера.

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

Гифка с блендером — это самая первая гифка для нашего дайджеста. Она задала стиль всем последующим обложкам. Идея с перемещением букв появилась считай сразу и строилась на «фишке», что с надписью «design jam» постоянно что-то происходит. Это уже потом у нас каждая обложка Джема стала привязана к теме выпуска, а изначально, мы старались делать акцент на буквах.

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

Работала со stop motion анимацией: нарезала буквы на кусочки и покадрово двигала их, отрисовывала каждый кадр, чтобы создать ощущение, будто буквы перемешиваются между собой. Часто в анимации появлялись сильные скачки, на поиск плавности ушло часа четыре. Конечно, раз это stop motion, то это всё равно чуть-чуть дёрганая анимация, как ни крути, но в этом есть своя эстетика.

Следующая обложка — стиральная машинка. Ещё когда я рисовала первую гиф, мне в голову пришла идея сделать не просто stop motion, а воссоздать физику букв. Хотелось снова создать эффект перемешивания, и так в какой-то момент перед глазами у меня появилась стиральная машинка.

Анимацию делала в After Effects с помощью плагина Newton, который позволяет делать физику объектов. В нём есть гравитация, падения, эффект пружины — в общем всё то, что необходимо для воссоздания стирки. Буквы в гиф замкнуты в круге и заанимированы, через плагин я как бы перемещала силу гравитации по кругу и сделать это было довольно легко:

• собираем в After Effects элементы, которые хотим заанимировать;
• заходим в плагин Newton и прописываем значения: выбираем, какие из объектов должны быть статичными, а какие динамичными и подвергаться силам гравитации;
• нажимаем «Play» и смотрим на результат;
• если что-то пошло не так, то меняем значения.

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

Если каждый раз придумывать коктейль из букв, то в какой-то момент ты придёшь в тупик. Поэтому в диджейском пульте движется пластинка, а буквы уже отдыхают. Тут отличается анимация, но по смыслу концепция выдерживается, буквы продолжают жить своей жизнью. Вращение пластинки сделала в After Effects через Attention.

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

При создании перекати-поля я всё также использовала After Effects: задала анимацию объекта из точки a в точку b и поставила эффект motion blur, от этого появилось смазывание при движении. На самом деле, перекати-поле уже изначально катится с буквами, просто их не видно. На слой с буквами я наложила маску и когда перекати-поле попадает в область планшета — то есть в поле маски, то буквы появляются, а за переделами маски — исчезают.

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

Мушки — это два маленьких квадрата, на которых я накинула эффект Wiggle в After Effects. Это такой «рандомный позишн», который раскидывает объект в разные стороны по осям x-y-z. Задаёшь частоту и диапазон, проигрываешь анимацию и смотришь: похоже это на мух или нет. Если слишком резко или дёргано, то начинаешь корректировать.

Мне кажется, что каждый выпуск — это отдельная история. По этим пяти гифкам можно увидеть, как менялась концепция обложек, а вместе с ней и весь «Джем».

Привет! Обложки для «Джема» были для меня чем-то новым не только в плане стиля, но и в плане моей работы в принципе: только начав свой путь в иллюстрации мне уже нужно было их анимировать. Моя самая первая анимация — это гиф для «Джема»

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

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

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

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

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

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

Когда я придумываю сюжет анимации, то накидываю какие-то визуальные образы, метафоры, которые ассоциируются с темой выпуска. Бывает так, что в процессе «разгона» мысль цепляется за что-то отстраненное от темы, но отлично объясняющее её суть. Так было и в этот раз.

Было лето. Помню, посмотрел с утра ТЗ от команды и поехал в аэропорт. Еду в аэроэкспрессе, погружаюсь в тему, ищу на ноутбуке референсы, и моя девушка подсказала, что раз выпуск про WWDC, то это, по сути, про выжимку всех соков из яблок. В итоге, мы сидели и «гуглили», как может выглядеть процесс соковыжимания. Я себе всегда представлял такую апельсиновую, где ещё нужно давить сверху. А оказалось, что соковыжималки бывают очень разные.

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

В работе над гиф для «Джема» мне всегда нравилось достраивать сюжет, чтобы анимации складывались в какую-то историю и каждый элемент нёс свой смысл. В гифке с отсылкой к «Ну, погоди!» я постарался не упустить ни одну деталь. Эта гиф — дань уважения тем, кто это рисовал мой любимый мультик детства.

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

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

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

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

Пиши свои варианты в комментариях. Мы обновили стиль и теперь эти гифки для ностальгии, заглядывай в наши дайджесты с новыми обложками и не забудь подписаться на Telegram-канал Design Jam, а мы убежали собирать следующий дайджест. Да пребудет с тобой сила роботов! 🤖

#redmadrobot #futura #designjam #cover #gif #old