Конструктор иллюстраций с персонажами

Обновлено: 26.04.2024

Конструктор иллюстраций для Figma, Ai и Sketch. Получите возможность создавать своих иллюстрированных персонажей с помощью Stubborn Generator.

Бесплатные иллюстрации ко всему. Запоминающиеся продукты, бренды и презентации начинаются с кураторской библиотеки Glaze

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

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

Высококачественные иллюстрации для веб- и мобильных проектов. Сделайте свой проект привлекательным с помощью потрясающей иллюстрации.

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

Перекрашивание svg стало проще простого! Загрузите свою иллюстрацию в svg и измените цвет по своему вкусу автоматически по генерируемым палитрам

Потрясающие бесплатные настраиваемые иллюстрации для вашего проекта. Настраивайте, анимируйте и загружайте иллюстрации, чтобы создавать невероятные целевые страницы, приложения или презентации!

Бесплатное вектор, стоковые фотографии и видео. Профессиональные качественные творческие ресурсы для ускорения выполнения ваших проектов.

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

Сервис Elements открывает мир творческих возможностей для всех ваших дизайн-проектов. С помощью сообщества талантливых дизайнеров вы сможете сделать великолепный дизайн. Доступно более 57 миллионов элементов

Найдите идеальный ресурс Stock для своего следующего творческого проекта. Смотрите разнообразные коллекции самых невероятных, бесплатных ресурсов в высоком разрешении

Бесплатно откройте для себя Pond5 с коллекцией стоковых видеоклипов в 4K и HD-качестве, фото и музыкальных треков для вдохновения вашей публики. Вы режиссер, музыкант, маркетолог или учащийся? Так или иначе, у вас есть, что рассказать, и мы поможем вам это сделать.

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

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

Авторский проект веб-дизайнера, UX/UI Рогоза Дмитрия.

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

Расскажу на примере одного из персонажей для конструктора иллюстраций «Атвинты», как сделать его автоматизированным в Figma. То есть пользователь в несколько кликов сможет выбрать персонажа и настроить его внешний вид, начиная одеждой и заканчивая положением бровей.

В конце статьи приведу практический кейс, как конструктор иллюстраций решает задачи серьезной IT-платформы.

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

Конструктор иллюстраций актуален в таких ситуациях:

Точное количество иллюстраций не известно или исчисляется сотнями.
Иллюстрации должны иметь много одинаковых или схожих элементов, которые могут повторяться.
Иллюстрации будут постоянно пополняться.
Проект будет передан другому дизайнеру или вести его будет не дизайнер. И нужно избежать потерь в стилистике.
Нужно создавать иллюстрации быстро.

Самый простой и дешевый способ сделать набор иллюстраций — приобрести готовый пак или воспользоваться сайтом-конструктором.

Вот несколько хороших сайтов.

— сайт-конструктор иллюстраций — конструктор персонажей — конструктор персонажей — конструктор иллюстраций

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

Если нужно по-настоящему уникальное решение, лучше сделать пак иллюстраций самостоятельно.

Рассказываю на примере одного из персонажей конструктора для Атвинты.

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

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

Задаем имя компонента на русском, английском или так, как будет понятно пользователям. Я назвала компонент с глазами «Светлые».

Компоненты нужно разместить и назвать определенным образом, чтобы все правильно работало.

Для этого создаем рядом с персонажем фрейм и называем по имени компонента: «Глаза».

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

Отрисуем еще парочку вариантов глаз. Самый простой вариант — скопировать наши светлые глаза и добавить заливку зрачкам.

Для этого создаем копию компонента на фрейме «Глаза». Это удобно сделать, выделив нужный нам компонент и перетащив его мышью выше или ниже с зажатым при этом Shift и Alt. После этого делаем копию некомпонентом, кликнув по нему правой кнопкой мыши и выбрав «Detach Instance» из меню.

Добавляем зрачкам цвет и преобразуем группу обратно в компонент с названием «Темные». Новая разновидность элемента готова!

Давайте не будем останавливаться на этом и создадим еще и закрытые глаза. Повторяем алгоритм: копируем любой компонент, делаем его некомпонентом, редактируем. Для закрытых глаз удаляем все содержимое и рисуем пару дугообразных линий. Снова делаем группу компонентом и называем «Закрытые».

Проследите, чтобы размер компонента не изменился и совпадал с теми первыми глазами, что мы оставили на своей иллюстрации.

Обратите внимание на два момента:

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

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

Делать это можно в панели справа. Любой новый компонент, который вы в будущем добавите подобным образом, появится в вариантах элементов при настройке компонента глаз.

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

Но бывают исключения. Например, компонент «Волосы» в моем примере находится на верхнем слое и перекрывает остальные элементы на лице персонажа.

Выход «в лоб» — создать более компактную прическу. Но тогда придется жертвовать разнообразием: например, уже не получится создать варианты с длинными волосами.

Эту проблему можно обойти снятием галочки «Сlip content» в панели справа.

Теперь можно делать новые варианты причесок.

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

Насколько детальной будет иллюстрация, зависит только от текущей задачи и вашей фантазии.

Для каждого нового изменяемого элемента создаем отдельный фрейм, отрисовываем и настраиваем варианты. После чего пользователь сможет самостоятельно создать персонажа. если бы каждого персонажа отрисовывал вручную дизайнер, это занимало бы от получаса до нескольких часов. А так пользователь создаст нужный образ за 5 минут. Если не залипнет в подборе причесок, нарядов, выражений лица.

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

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

Теперь вы можете самостоятельно создать конструктор иллюстраций в Figma.

Представьте, что у вас веб-сервис на несколько миллионов пользователей из коммерческих организаций и госструктур. Сервис нужен для автоматизации ряда процедур, прописанных в законодательстве.

Для такого сервиса мы разрабатывали интерфейсы всех разделов.

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

И в процессе проектирования интерфейсов столкнулись с задачами:

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

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

Вот несколько персонажей из конструктора в различных позах:

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

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

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

Класс! Большое спасибо, отправила своим дизайнерам!

Спасибо взаимное, рады, что полезно :)

Хотел прочитать, но споткнулся на фразе «чтобы без дизайнера генерировать несчетное количество персонажей и готовых иллюстраций в едином стиле». Заход неудачный
Почему народ всегда думает, что можно классно отработать профильную вещь без профильного спеца? Точнее не так: отработать-то можно, но единично, а если настраиваемся на то, что должно быть качественно и работать на долгий срок, то будьте добры, привлекайте к этому нормальных специалистов, головняка будет меньше. Врачом стать самому себе, следуя советам Геннадия Малахова, тоже можно, но надо ли?

Зря вы дальше первого предложения не прочитали :) Наш дизайнер рассказала, в каких ситуациях конструктор уместен и классно решает задачу. Если совсем упрощать до вашего примера с врачом, то эта ситуация уровня "Ставить самому себе горчичники, прописанные врачом". :)

серьезно? для простой презентации, которую надо разбавить графикой на конференции надо нанимать профессионального дизайнера? Вам походу обидно, что ваш хлеб едят :)

Возможно однообразные статичные иллюстрации могут иметь смысл и быть экономически оправданы, как и бессмысленные пустые тексты для СЕО или однотипные бюрократические речевые обороты.

Ага, если не читать статью и сразу начинать отвечать на комментарии.

Впервые вижу такой подход к созданию конструкторов, но это крайне интересно и креативно. С помощью нативных инструментов создать что-то абсолютно новое — это много стоит.
🔥

Перешел на ваш сайт и просто вау! У вас очень крутое агенство

Серьезно, ваши кейсы просто огонь. Читал про IoT мед инкубатор и это просто нереально. И сайт родов ну просто крутецкий. Денег своих 100% стоит

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

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

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

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

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

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

Очень простой и удобный инструмент для создания коллажей. Можно добавить текст, выбрать фон и задать необходимый размер.

Крутой редактор фотографий с огромным количеством функций и эффектов. Есть мобильная версия. Можно выбрать вариант использования:

Инструмент для быстрого добавления забавных фильтров на фото.
Express — простейшее редактирование изображений.
Полноценный редактор имеет те же функции, что и профессиональные программы для редактирования изображений, например Photoshop.

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

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

Также обратите внимание на сервисы:

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

Красивые диаграммы, карты, графика и информационные панели. В бесплатной версии вы получаете доступ к 37 типам интерактивной инфографики, 10 проектам и 13 видам карт. Также вы можете опубликовать контент, импортировать данные и анимировать объекты.

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

Позволяет легко создавать инфографику в три этапа. Сначала выберите шаблон, затем добавьте элементы и, наконец, настройте свой дизайн, изменив шрифты и цвета. Примените собственный стиль. Некоторые функции в бесплатном тарифе ограничены.

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

Make a Meme: загрузите изображение, добавьте текст в поля ввода на экране, а затем нажмите кнопку «Создать мем». Если вы довольны предварительным просмотром мема, им можно сразу поделиться со страницы предварительного просмотра.

Meme Buddy — онлайн-генератор мемов, который отличается от других: он позволяет вам создавать голосовые мемы через интеграцию с Google Assistant .

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

Используя эти инструменты, вы без труда привлечете и удержите внимание подписчиков. Но это далеко не все полезные сервисы. В следующей статье мы разместим подборки бесплатных инструментов для работы с видео и GIF-файлами.

Если на иллюстратора бюджета нет, а картинки на слайде, сайте или в приложении все же нужны, не спешите идти на платные стоки. И на Pixabay, Unsplash, Pexels не идите, туда ходят все. Интернет полон бесплатных и очень даже неплохих иллюстраций.

7 наборов в разных стилях. Бесплатно отдают в PNG. При использовании обязательна ссылка на сайт. Полный текст лицензии.

Несколько сотен трендовых иллюстраций от дизайнеров с Dribbble. Бесплатно отдают PNG. При использовании обязательна ссылка на сайт. Полный текст лицензии.

60 персонажей с уклоном в индийскую тему: сари, велосипеды, мопеды. Но есть и вполне нейтральные ребята. Форматы PNG, SVG, EPS. Можно использовать только для цифровых проектов. Полный текст лицензии.

Около 20 (не включая варианты) низкополигональных иллюстраций от Николая Соболева. Open-source, лицензия MIT. Есть даже исходники для Blender.

Еще один open-source набор из 52 иллюстраций по лицензии MIT. Автор: Сергей Тихонов.

Библиотека из 100+ персонажей: 105 по пояс, 36 на тему COVID-19, 18 сидящих и 30 стоящих. Лицензия CC0: свободное использование в личных и коммерческих целях без указания авторства. Бесплатно отдают в форматах Sketch, Figma, PNG, SVG. Автор: Pablo Stanley.

Набор из человечков и офисных предметов интерьера в формате Ai, Xd или Figma. 4 персонажа, 25 предметов. Свободное использование в личных и коммерческих целях без указания авторства. Автор: Алина Ибрагимова

Массивный пак с трехмерными геометрическими фигурами. 10 000+ кубиков, шариков, пирамидок, торов и прочей геометрии в 11 цветах и 32 ракурсах. Формат PNG, архив весит 4Гб. Свободное использование в личных и коммерческих целях без указания авторства. Полный текст лицензии. Автор: Joseph Angelo Todaro.

Онлайн-конструктор дружелюбных иллюстраций в стиле Google. Экспорт в PNG и SVG. Свободное использование в коммерческих и личных целях. Полный текст лицензии.

Много-много картинок в разных стилях. Иногда попадаются прямо шедевры. Свободное использование в личных и коммерческих целях. Указание источника не обязательно, а желательно. Полный текст лицензии.

Однажды вкусным перестали называть что-то помимо еды, и у всех отвалилась жопа.

Однажды вы откроете словарь и узнаете, что слово вкус применимо не только к еде.

Признаю, был неправ. Но смотрите как забавно: безвкусной иллюстрация быть может, а вот вкусной уже нет 🤷‍♂️

Может конечно. Это просто такой ебунутый стиль комментов на VC. Тут модно доёбываться до других изображая из себя хуй знает кого.

Да тебя разводят, "вкусный" - норм слово, юзай на здоровье. За подборку спасибо 👍

Вы между существительными и прилагательными разницу НА ВКУС чувствуете?

Чувствую. Это была игра слов, но видимо недостаточно хорошая, раз вам не зашла.

Ой, да не обращайте внимание, Вы сделали хорошую подборку, а к Вам из-за какой-то ерунды прицепились :)

Классная штука, спасибо!

И вот тут неплохие и бесплатные иллюстрации.
И ещё можно менять цвет.

Пользовались. Пользуемся. Будем пользоваться!

Спасибо! Очень полезно!

Очень актуально и полезно. Спасибо!
Даже имея очень большой список похожих сайтов здесь я нашел новые. Теперь можно будет выбирать из ещё большего количества.

а какой смысл использовать иллюстрации с этих сайтов?
они заезжанные совсем.

Ну, например, для фишинговых сайтов, подойдет?)

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

Спасибо. Отличная подборка!

Моя жизнь никогда не будет прежней

Автор подскажи, пожалуйста, где можно найти свежие и в хорошем качестве emoji?

Можно принтскрин в айфоне сделать

Спасибо, пригодится)
Тоже полезный сайт

Интересно. Нужно будет сохранить себе для презентаций

Как же надоели эти картинки, которые из каждого утюга. "В джинсы облачились самые отсталые слои населения"(с).

Easily create and customize stunning illustrations with collections made by artists across the globe. Try it, it’s kind of fun.

How does Blush make designing your projects simple and fun?

1. Choose a style

Choose a collection from multiple styles and themes made by artists around the world.

2. Customize the art

Play around with the variations until you create the art that tells your story.

3. Use on your design

Download a PNG or SVG of your creation and use it on your web app, presentation, or any project you want to bring to life.

Try the new collections

Why people are raving about Blush

Blush is as amazing and creative as the artists they’ve chosen to represent. Dynamic, powerful, customizable illustrations all in the tool you do your design work in. Don’t forget fun as hell!

Rogie, Designer Advocate at Figma

I absolutely love the high-quality, quirky, and seemingly endless combinations offered on the Blush app. It’s so refreshing to see this blend of technology and traditional illustration that just makes sense on the web.

Una Kravets, Web Developer Advocate at Google

Every time I use Blush I smile. It has made designing downstates and onboarding screens so much fun. Not only are the illustrations amazing, but its simplicity allows me to customize illustrations with ease—it has literally been a lifesaver for me. As a designer on a small team Blush is a must-have!

Edgar Chaparro, UX Designer at Zenput

Blush is now my favourite Sketch Plugin, and saves me so much time when looking for beautiful illustrations to use in my projects.

Marc Andrew, Designer at UI-UX Cheatsheet

Blush instantly improves my designs. Hard to believe something so easy and so fast can add so much style but it’s a real game changer.

Lex Roman, Growth Designer at Growth Designers

After working through a lot of SVG-to-web issues with other design tools, I have a whole new appreciation for how seamless, effortless, and beautiful Blush itself is as a product and the illustrations within it.

Caitlin Sowers, UX Designer at EDVO

The level of detail and thought that has gone into these illustration systems is incredible. I love that Blush is as much about discovering great illustrations as it is about meeting the amazing artists who created them!

Devin Mancuso, Design Strategist at Google

We’re using Blush to find illustrations for digital products, to add some colour and personality. Experience is great so far. Site is lovely. Lush illustrations. Super-easy to add to Figma and play with.

Читайте также: