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

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

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

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

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

Женя Бондарев, креативный директор red_mad_robot
Кристина Скворцова
ex-графический дизайнер red_mad_robot

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

Буквенный сок

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

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

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

Неугомонный блендер Кристина Скворцова

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

Кадры, из которых состоит гиф Кристина Скворцова
Кадры, из которых состоит гиф Кристина Скворцова

Эволюция блендера

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

Преемница блендера Кристина Скворцова

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

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

Хэй, DJ

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

DJ Design Jam Кристина Скворцова

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

Живое перекати-поле

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

Перекати-поле фотографируется Кристина Скворцова

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

Ночь, улица, фонарь, мухи

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

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

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

Рома Борцов
графический дизайнер red_mad_robot

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

Первый блин не комом

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

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

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

Вас снимает джем-камера

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

А фотоаппарат фотографирует Design Jam Рома Борцов

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

3D-конвейер

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

Надутые кубики Рома Борцов

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

Сложная соковыжималка

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

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

Гифка заряжена на просмотр предстоящей WWDC Рома Борцов

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

Тушите свет

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

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

Робозаяц Рома Борцов

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

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

Варианты розочек Рома Борцов
Варианты розочек Рома Борцов

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

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

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

2424
3 комментария

Ребята, это офигенно) спасибо, что рассказали, как делали)

4
Ответить

Это дизайн из Ну погоди - про робота. Вроде 70е года.

1
Ответить

Комментарий недоступен

Ответить