{"id":7302,"title":"$200 \u0442\u044b\u0441\u044f\u0447 \u043d\u0430 \u0441\u0442\u0440\u0430\u0445\u043e\u0432\u043a\u0443 \u0432 \u043f\u043e\u0435\u0437\u0434\u043a\u0430\u0445 \u0438 17 \u0432\u0430\u043b\u044e\u0442 \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0435","url":"\/redirect?component=advertising&id=7302&url=https:\/\/vc.ru\/promo\/295992-korotko-karta-dlya-puteshestvennikov&placeBit=1&hash=116250a21a81e5a548d838f9f86dac8dfd20ac6f36c6c2f8b9a9a56056948502","isPaidAndBannersEnabled":false}
Дизайн
red_mad_robot

Дизайн-джем 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 Рома Борцов

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

Тушите свет

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

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

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

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

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

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

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

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

{ "author_name": "red_mad_robot", "author_type": "editor", "tags": ["redmadrobot","old","gif","futura","designjam","cover"], "comments": 3, "likes": 18, "favorites": 26, "is_advertisement": false, "subsite_label": "design", "id": 248444, "is_wide": true, "is_ugc": false, "date": "Fri, 21 May 2021 18:59:23 +0300", "is_special": false }
0
3 комментария
Популярные
По порядку

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

4

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

1

…диджейский пульт. Это же первая гиф, в которой я спрятала пасхалку.

В этой статье как раз можно было бы раскрыть все пасхалки, я ничего не смог увидеть!:/

0
Читать все 3 комментария
Разбор: «Яндекс» действительно притворяется системным сообщением iOS на iPhone

Чтобы убедиться, так ли это, я решил открыть сайт одиозной компании «Яндекс» на компьютере в браузере Safari, включив режим отладки и используя «юзер-агент» iPhone. И проверить, действительно ли это системное сообщение или «Яндекс» имитирует системное сообщение iOS, используя фишинговый методы?

Власти Москвы обсудили введение локдауна с 30 октября по 7 ноября, QR-коды действовать не будут — Forbes Статьи редакции

Доступ в рестораны, кафе, магазины, салоны красоты, кинотеатры и на массовые мероприятия могут ограничить.

Шпаргалка для инвестора: главное о ETF

Рассказываем основные принципы инвестирования в ETF.

Как сделать рынок лома прозрачным: рассказывает QIWI Business

Делимся опытом создания платежной инфраструктуры для целой отрасли

Сделай сам: умная камера для наблюдения за питомцами

Обучаем нейросеть на котиках.

Саморазвитие: путь к саморазрушению
38 миллиардов долларов США
Объем рынка self-help в 2019
YouTube протестирует функцию прямых покупок товаров из видео с 15 ноября Статьи редакции

Корзина с каталогом товаров из видео будет отображаться в левом углу экрана.

30 стартапов прошли в финал конкурса SaaS Factory Московского инновационного кластера

Конкурс SaaS Factory нацелен на поиск готовых инновационных программных решений для бизнеса и внедрение продуктов и сервисов в корпорации. Эксперты оценили 206 заявок, из них отбор прошли 30 стартапов. Теперь основателей технологических проектов ждет программа развития, где они смогут приступить к совместной работе над инновационными решениями с…

Что пугает в резюме?

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

«Яндекс.Маркет» добавил в приложение просмотр 3D-моделей крупной бытовой техники в режиме дополненной реальности Статьи редакции

Можно посмотреть, поместится ли она в комнате.

«Сбермегамаркет», «Сберлогистика» сперва не могли доставить заказ, а потом не дали осмотреть его — курьер вёл себя грубо

История моя начинается 8 октября. Оформленный и оплаченный заказ на 29 тысяч рублей, успешно был отправлен продавцом и поехал в мой город который далеко за МКАД.

null