RUSENG
← К проектам

Газпромбанк

Дизайн коммуникаций для IT- и HR-направлений банка.

Газпромбанк: IT коммуникации, макет 1 Газпромбанк: IT коммуникации, макет 2 Газпромбанк: HR коммуникации, макет 3 Газпромбанк: IT коммуникации, макет 4 Газпромбанк: HR коммуникации, макет 5 Газпромбанк: IT коммуникации, макет 6 Газпромбанк: IT коммуникации, макет 7 Газпромбанк: HR коммуникации, макет 8 Газпромбанк: IT коммуникации, макет 9 Газпромбанк: HR коммуникации, макет 10 Газпромбанк: IT коммуникации, макет 11 Газпромбанк: IT коммуникации, макет 12 Газпромбанк: HR коммуникации, макет 13 Газпромбанк: IT коммуникации, макет 14 Газпромбанк: HR коммуникации, макет 15 Газпромбанк: IT коммуникации, макет 16 Газпромбанк: IT коммуникации, макет 17 Газпромбанк: HR коммуникации, макет 18 Газпромбанк: IT коммуникации, макет 19 Газпромбанк: HR коммуникации, макет 20 Газпромбанк: IT коммуникации, макет 21 Газпромбанк: IT коммуникации, макет 22 Газпромбанк: HR коммуникации, макет 23 Газпромбанк: IT коммуникации, макет 24 Газпромбанк: HR коммуникации, макет 25 Газпромбанк: IT коммуникации, макет 26 Газпромбанк: IT коммуникации, макет 27 Газпромбанк: HR коммуникации, макет 28 Газпромбанк: IT коммуникации, макет 29 Газпромбанк: HR коммуникации, макет 30 Газпромбанк: IT коммуникации, макет 31 Газпромбанк: IT коммуникации, макет 32 Газпромбанк: HR коммуникации, макет 33 Газпромбанк: IT коммуникации, макет 34 Газпромбанк: HR коммуникации, макет 35 Газпромбанк: IT коммуникации, макет 36 Газпромбанк: IT коммуникации, макет 37 Газпромбанк: HR коммуникации, макет 38 Газпромбанк: IT коммуникации, макет 39 Газпромбанк: HR коммуникации, макет 40 Газпромбанк: IT коммуникации, макет 41 Газпромбанк: HR коммуникации, макет 42

За год работы в ГПБ ИИ стал основным дизайн-инструментом

Нейросети участвуют в каждой задаче: предлагают идеи и тексты, генерируют объекты и сцены, меняют ракурс и материалы, увеличивают изображения и адаптируют макеты под форматы. За мной — выбор идеи, отбор вариантов, композиция и соответствие брендбуку.

Сначала было 6⁠–⁠20 макетов в месяц с применением ИИ.

  1. Идея, тексты, концепции · 15% Opus 5.5, GPT Astra, Gemini · половину делает ИИ
  2. 3D-объекты и сцены · 30% Krea, Runway, Nano Banana, GPT Image
  3. Ракурс, цвет, материалы · 15% Runway, Nano Banana
  4. Апскейл и чистка · 5% Topaz, Krea
  5. Адаптации под форматы · 10% Nano Banana и вручную · 30 % делает ИИ
  6. Вёрстка, типографика, бренд · 25% Opus 5.5 и вручную · 20 % делает ИИ

Сначала было 6⁠–⁠20 макетов в месяц с применением ИИ.

  1. Идея, тексты, концепции · 15% Opus 5.5, GPT Astra, Gemini · половину делает ИИ
  2. 3D-объекты и сцены · 30% Krea, Runway, Nano Banana, GPT Image
  3. Ракурс, цвет, материалы · 15% Runway, Nano Banana
  4. Апскейл и чистка · 5% Topaz, Krea
  5. Адаптации под форматы · 10% Nano Banana и вручную · 30 % делает ИИ
  6. Вёрстка, типографика, бренд · 25% Opus 5.5 и вручную · 20 % делает ИИ

Что делает ИИ, а что — я

  1. Референсы и задача

    Собираю референсы и ставлю задачу

  2. Идеи и метафоры

    Предлагает идеи и метафоры под тему

  3. Идея и промпт

    Выбираю идею и пишу промпт

  4. Генерация объектов и сцен

    Генерирует объекты и сцены, десятки вариантов

  5. Отбор и правки

    Отбираю лучший вариант и даю правки

  6. Ракурс, цвет, материал

    Меняет ракурс, цвет и материал по одной фразе

  7. Макет по брендбуку

    Собираю макет по сетке и брендбуку

  8. Вырезка, апскейл, чистка

    Вырезает объекты, увеличивает и чистит изображение

  9. Правки заказчика

    Вношу правки заказчика

  10. Пересборка вариантов и форматов

    Быстро пересобирает варианты и форматы

  11. Финал — за мной

    Финал — за мной: проверяю пост в ленте и сторис и сдаю.

Общий пайплайн

Подход к созданию коммуникаций на примере дизайна одного из постов для социальных сетей.

Тест идеи по референсам

Обложка первого варианта

Первая идея — монеты в стеклянных блистерах.

GPT ImageNano BananaKrea

Проработка идеи

Монеты в стеклянных блистерах на цепи среди гор

Блистеры на цепи среди гор: доработка света и фона.

Nano BananaPhotoshop

Развитие идеи

Делаем рубль в упаковке, но подороже.

Набросок вручную

Черновой рендер куба с монетой из Blender

Форму и ракурс куба задаю моделью в Blender.

Blender

Генерация по наброску

Стеклянный куб с монетой на синем бархате

Стеклянный куб на синем бархате: рендер плюс фото бархата со стока.

стокNano Banana

Проработка визуала

Куб с монетой и конфетти

Конфетти и надпись на подставке.

Nano Banana

Работа над деталями

Куб с монетой и надписью на подставке

Несколько проходов по свету и деталям.

Nano BananaPhotoshop

Финал

Финальная обложка «Цифровой рубль в Газпромбанке»

Собираю обложку и дорабатываю детали.

FigmaPhotoshop

IT-направление

Вся работа идёт в рамках брендбука и заданного набора референсов: нейросети генерируют внутри этих границ, а доработку и вёрстку я веду по тем же правилам.

Примеры визуалов, созданных с помощью ИИ

Ключевые визуалы и креативы для IT-направления. Инструменты: GPT Image, Nano Banana, Nano Banana Pro, Krea, Runway, Topaz, Magnific, Blender, Photoshop, Figma.

Стеклянные клавиши «<», «!» и «>» среди светящихся проводов Монета цифрового рубля в стеклянном кубе среди конфетти Механический единорог из микросхем и проводов Хромированная надпись GIT внутри четырёхконечной звезды Светящийся куб RPA в стеклянном корпусе на плате Котёнок за ноутбуком внутри стеклянной клавиши Caps Lock Розовые стеклянные цветы с хромированными лепестками Хромированная ракета с космонавтом в иллюминаторе Ряд стеклянных карточек с фрагментами кода на Python Перламутровая буква «e» и пиксельный курсор среди жидкого хрома Монеты с символом рубля в прозрачных бейджах на цепочках Пиксельный жук и курсор с надписью «Баг найден» Портрет девушки с неоновыми локонами Листы календаря

Иллюстрации

Полностью созданы в трёх нейросетях: единый стиль задаёт LoRA, обученная в Krea, доработка — в GPT Image и Nano Banana.

Иллюстрация

Иллюстрация

Генерация в GPT Image, увеличение в Topaz, ретушь в Photoshop.

GPT ImageTopazPhotoshop

Ресайзы

Ресайзы

Кадры под форматы: Figma Agent и вручную.

Figma Agentвручную

Команда с ИИ DevOps Инженеры Цифровой рубль Цикл документации Проверка документации
Другие иллюстрации для того же блога, стиль персонажей эволюционировал со временем.

Применение ИИ в офлайне

Создаю визуальное оформление мероприятий Газпромбанка. Разрабатываю графику для сцены и экранов, адаптирую её под формат события и фирменный стиль банка.

Чтобы заказчик увидел графику в зале до монтажа, ставлю макет экрана в сцену через GPT Image.

Визуализация оформления сцены демо-дня Блока технологий искусственного интеллекта Газпромбанка
Визуализация в зале, GPT Image
Обложка мероприятия: мозг и стеклянные лентыЭкран ожидания трансляции со стеклянными лентами
Макеты экранов, Figma
Программа мероприятия на телефоне в зале с синим освещением
Девушка за кулисами готовит презентацию в Keynote на ноутбуке
Мужчина с сединой смотрит на заставку трансляции на экране в холле

Работа над ключевым визуалом

Десять направлений

Пять вариантов в фирменном голубом и пять в сине-розовой гамме: оболочка, ядра, связи, стекло.

GPT Image

Хромированный мозг с синими и розовыми деталямиСтеклянный мозг с синим и розовым неоном
Концепт

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

GPT Image

Мозг из прозрачных извилин и синих микросхемМеханический мозг с открытыми платами и проводами
Логотип внутри

В центр встраиваю чип с логотипом GPB.AI, детали и свет дорабатываю в Nano Banana, вырезаю в Photoshop.

GPT ImageNano BananaPhotoshop

Стеклянный мозг со светящимся чипом в центреМозг с чипом GPB.AI и экраном с графиком
Фон и первая версия

Волны для фона генерирую в Nano Banana. Первый экран собираю в Figma, ленты пока розовые.

Nano BananaFigma

Первый экран демо-дня с мозгом и розовыми лентами
Перекрас

Ленты перекрашиваю в фирменные голубой и синий в Nano Banana и чищу в Photoshop.

Nano BananaPhotoshop

Изогнутые стеклянные ленты в голубом и синемГоризонтальная связка голубых и синих стеклянных лент
Финальный экран

Экран 3840 × 1080 для зала. Из него собраны обложка и экран ожидания трансляции.

Figma

Финальный экран демо-дня с мозгом и голубыми лентами

Применение ИИ при создании печатной продукции

Графика

Объёмные ленты и сфера в цветах бренда.

GPT Image

Переплетённые синие и розовые ленты на чёрном фонеРельефная сфера из синих, голубых и розовых лентОбъёмный узел из лент в цветах бренда
Три направления

ИИ-агент собирает в InDesign три направления обложки — «Переход», «Разгон», «Масштаб» — и сравнивает их рядом.

Opus 5.5InDesign

Направление A: «Переход», разворотНаправление B: «Разгон», разворотНаправление C: «Масштаб», разворот
Варианты вёрстки

Развороты собираются скриптом по сетке и брендбуку.

Opus 5.5InDesign

Разворот с условиями финансирования и обложкой с узлом из лентВариант З: условия финансирования и обложка со сферой из лент
Аудит

Агент проверяет каждый вариант: переполненные фреймы, шрифты, связи, контраст QR-кодов и интервалы. Критичные ошибки исправляются до показа.

Opus 5.5InDesign

0 критичных · 0 серьёзных · 1 мелкое замечание

150 текстовых фреймов · 12 связей

6 полос A4 · вылеты 3 мм

Правки и финал

Правки заказчика вношу в InDesign, типографику доводит Techograph.

InDesignTechograph

Предфинальный разворот: финансирование, обложка со сферой и QR-кодыПредфинальный разворот: этапы отбора и пилотирования, QR-коды
В печать

PDF A4 с вылетами 3 мм и метками реза.

InDesign

Печатный PDF брошюры A4 с вылетами и метками реза

HR-направление

В HR-бренде композиция собирается по правилам: из пяти слоёв.

  1. Герой

    Человек в центре кадра, с предметом в руках или эмоцией по теме поста.

  2. Локация

    Место действия за героем: стол, офис, кампус, город.

  3. Предметы по теме

    Два–четыре объекта, которые объясняют тему без слов.

  4. Фотоматериалы

    Реальные фото, сток и скриншоты, приведённые к одному свету.

  5. Рукотворная иллюстрация

    Надписи от руки, мазки кистью, рисованные значки и белая обводка.

Обложка подборки книг на осень с девушкой и книгой
Пост об олимпиаде «Я — профессионал» с двумя участниками и ракетой
Обложка «Тест-драйв профессии» со студентом и предметами профессий

Плагины

Чтобы ускорить рутину, иногда делаю собственные плагины для Figma и продуктов Adobe.

Honky Outline

Чтобы не обводить каждого человека вручную, сделал плагин Honky Outline. Он строит векторный контур вокруг PNG без фона: подложку, ровный край, обводку кистью и угловатые сколы. Настройки сохраняются в результате, и контур обновляется в один клик.

Панель плагина Honky Outline в Figma

Techograph: типографика в один клик

Второй плагин, Techograph, сам расставляет типографику в макете: неразрывные пробелы после предлогов, союзов и коротких слов, пробел перед тире, неразрывные дефисы, связку последних слов абзаца и замену ё на е. Шесть правил включаются по отдельности, шрифты и стили текста не меняются. Сначала сделал его для Figma, потом перенёс тот же движок правил в InDesign: там плагин обрабатывает выделение, таблицы, сноски или весь документ, а весь запуск отменяется одним ⌘Z.

Окно плагина Techograph в Figma: шесть правил типографики