В этой заметке хочу рассказать как можно использовать Midjourney и парочку дополнительных приложений для создания векторных логотипов.
![Пример логотипа созданного с использованием Midjourney Пример логотипа созданного с использованием Midjourney](https://habrastorage.org/getpro/habr/upload_files/da0/866/424/da08664242068e78515c4a560ba821e2.png)
Миджорни этой нейросеть, которая работает в Дискорде и генерирует изображения по текстовому описанию. Если вы ранее не работали с этой нейросетью — можете изучать принцип её работы в моём гайде по этой ссылке, а также посмотрев этот ролик.
Если вы уже знаете что такое Дискорд, как в нем зарегаться, что такое «/imagine prompt» — идем дальше.
По большому счету, генерация логотипов ничем не отличается от генерации любого другого изображения. Важно учитывать, что если вы хотите получить шрифтовой логотип — это не к Миджорни, она пока плохо справляется с генерацией текстов в виде картинок. Но отдельные буквы вполне успешно рисует.
Итак, для того чтобы сгенерировать логотип в Midjourney необходимо вызвать команду «/imagine prompt» и далее написать что вы ходите получить, в формате: «cute yellow star logo, vector, flat 2d, company logo, sing style». Перед первой запятой описывается что должен изображать логотип, а далее его стилистику. Примеры стилей можно изучить в этом гайде.
![](https://habrastorage.org/getpro/habr/upload_files/c4c/bf1/5a4/c4cbf15a481ae1c76da3e44f90ca4040.png)
Далее необходимо немного подождать и логотип готов. Причем по одному и тому же запросу будут разные результаты, потрясно.)
![](https://habrastorage.org/getpro/habr/upload_files/7f9/b47/be1/7f9b47be1f377081750353bcdd32b86c.png)
Далее привожу примеры запросов и результаты.
letter “M” logo design, vintage, sans serif, victorian style, vintage, white background
![](https://habrastorage.org/getpro/habr/upload_files/4eb/619/b36/4eb619b361c2cda17116f2dc81a6a7ca.png)
simple logo design of cute husky dog, vector, flat 2d, company logo, sing style
![](https://habrastorage.org/getpro/habr/upload_files/d80/015/4e4/d800154e47320b974a372bff146115ad.png)
vector cherry logo
![](https://habrastorage.org/getpro/habr/upload_files/4f9/5ce/512/4f95ce512f02478e4c2c7d8050db7139.png)
logo design viking face, vector, flat 2d, white background, vintage
![](https://habrastorage.org/getpro/habr/upload_files/4d0/536/229/4d05362299a0aabc7962dd093f53797b.png)
simple hat logo, white background, vector style
![](https://habrastorage.org/getpro/habr/upload_files/9cc/d7a/05a/9ccd7a05a03517ae4154b284db6e1520.png)
black logo design space rocket, vector, flat 2d, white background
![](https://habrastorage.org/getpro/habr/upload_files/e59/f9d/9c7/e59f9d9c7c7de2b9c050f2c8bcbd5515.png)
Логотипы готовы и что желать с этим добром?
Для использования в интернете такие лого вполне сгодятся. Можно удались фон, добавить текст и будет всё замечательно. Но в ситуациях, когда нужен вектор — этих картинок недостаточно.
Давайте сделаем картинки векторными, на примере одного логотипа.
Сначала нужно увеличить качество креатива непосредственно в нейросети. Для этого нужно нажать кнопочку «U» прямо под картинкой. Номер кнопки соответствует номеру картинки. «U1» и «U2» — первый ряд картинок, «U3» и «U4» — второй.
![](https://habrastorage.org/getpro/habr/upload_files/29b/8c9/cc5/29b8c9cc58dd864a87acd8b97e55849f.png)
Картинка улучшена.
![](https://habrastorage.org/getpro/habr/upload_files/476/73b/99a/47673b99a1a67eadcc6b3a1133016a32.png)
В целом, такого результата достаточно, чтобы картинку можно было векторизировать.
Но если у вас есть желание получить ещё более качественное изображение — можете использовать одну из нейронок улучшалок:
https://waifu2x.udp.jp/index.ru.html
С помощью сервиса https://imglarger.com/ мне удалось увеличить разрешение изображения в два раза с 1024х1024px до 2048х2048px.
![](https://habrastorage.org/getpro/habr/upload_files/88f/b4d/8f4/88fb4d8f45ee67712f3bc36337414e31.png)
Исходное изображение и улучшенное доступны по этой ссылке можете сравнить.
![](https://habrastorage.org/getpro/habr/upload_files/9b3/3dc/298/9b33dc2988b50524cc5ffee1e915133e.png)
Картинка улучшена, теперь её необходимо векторизовать.
Есть несколько путей векторизации изображения:
1 «Сложный» — перерисовать картинку вручную
Для этого закидываем изображение в Figma или Illustrator, и с помощью пера обводим его. Если вы уверенный пользователь этих приложений — проблем не возникнет, по сути вы используете уникальную концепцию, которую осталось просто перерисовать.
![](https://habrastorage.org/getpro/habr/upload_files/8cb/a2a/37e/8cba2a37e8d0ec8eb4fdb9fab32229b2.png)
2 «Спорный» — использование плагинов для Figma
Используя плагин Vectorize и Image tracer можно трассировать (векторизовать) простые черно-белые логотипы, но со звездочкой ни первый ни второй не справились.
![](https://habrastorage.org/getpro/habr/upload_files/382/c33/374/382c333740af3364ecf08b55ba3713d0.png)
Зато удалось векторизовать шляпу.
![](https://habrastorage.org/getpro/habr/upload_files/5cd/8e5/aa3/5cd8e5aa35e827476de17d6bd1586641.png)
3 «Надежный» — трассировка в Иллюстраторе
Нужно закинуть картинку в Иллюстратор нажать на правой панели кнопку «Image Trace».
![](https://habrastorage.org/getpro/habr/upload_files/6d9/ee0/72d/6d9ee072d7e9f37da7ed575dbf0791f9.png)
Выбрать количество цветов.
![](https://habrastorage.org/getpro/habr/upload_files/bc9/32d/103/bc932d103c305247dd1d88a43c096061.png)
Дождаться результата и после его доработать, убрать артефакты, лишние элементы.
![](https://habrastorage.org/getpro/habr/upload_files/5e6/fc4/587/5e6fc45871dbd764ac0c68c5c256be21.png)
4 «Самый простой способ» — конвертировать с помощью конвертора.
Для эксперимента я использовал бесплатный конвертер Vectorizer.AI.
Просто закидываешь картинку в сервис и он все делает сам. Результат получился довольно качественным. Картинка конвертируется в SVG. Посмотреть результат можно по этой ссылке.
![](https://habrastorage.org/getpro/habr/upload_files/c4f/6ff/647/c4f6ff6471ae789fdb93cf2bcaf0798e.png)
Важно отметить, что после трассировки или конвертации логотипов в вектор их стоит доработать, убрать артефакты, удалить лишние объекты. Лучше всего для такой работы подходит Иллюстратор.
На скрине обозначены артефакты, которые в последствии были устранены.
![](https://habrastorage.org/getpro/habr/upload_files/575/d37/0a2/575d370a25982411e4e1071ebef0e373.png)
Изучить исходный файл и отредактированный можно по этой ссылке.
Далее с векторным логотипом можно работать в в любом векторном редакторе графики, там можно добавить заголовок, подкрутить цвет. Для проработки цветов и типографики я использую Figma или llustrator.
![](https://habrastorage.org/getpro/habr/upload_files/ddd/cae/5ef/dddcae5ef98353787e2ac841501e4fa6.png)
На этом у меня все, спасибо за внимание, желаю творческих успехов.
Комментарии (14)
anton_reut
00.00.0000 00:00"Векторизация" на нормальном языке называется трассировкой. То что у вас получилось это не логотипы, это иллюстрации, логотип это немного про другое.
Denis_Zelenykh Автор
00.00.0000 00:00+4Вы все верно говорите, «векторизация = трассировка» статья написана для новичков, которым термин трассировки может быть не известен. Логотип может выглядеть как угодно. В том числе и так, как на представленных мной примерах.
SerjV
00.00.0000 00:00А вообще интересно про «векторизация = трассировка» - встречается и то, и то, и вроде как утверждается,что применительно к картинкам - это одно и то же (возможно, есть разница в каких-то других случаях). Можете вообще по "правильной" терминологии просветить?
Denis_Zelenykh Автор
00.00.0000 00:00+1«Векторизация» и «трассировка» — слова практически синонимы. Первое слово имеет более широкое значение. «Векторизация» — преобразование растровой графики в векторную, вручную или путём трассировки. «Трассировка» — технология преобразования растровой графики в векторную, с помощью программ PowerTRACE Corel, Protrace, Adobe Streamline (более не поддерживается), плагины Figma, нейросети.
Определения терминам даны в статье по этой ссылке: https://translated.turbopages.org/proxy_u/en-ru.ru.80b6c061-6404b327-797f9158-74722d776562/https/en.m.wikipedia.org/wiki/Bitmap_tracing
«В компьютерной графике трассировка изображений, преобразование растра в вектор или векторизация растра - это преобразование растровой графики в векторную графику.»
anonymous
00.00.0000 00:00НЛО прилетело и опубликовало эту надпись здесь
Denis_Zelenykh Автор
00.00.0000 00:00Midjourney начал использовать для генерации концепций логотипов и креативов, меньше времени уходит на генерацию идей. Использовал для генерации паттернов, Миджорни отлично с этим справляется.
Использую сетки для увеличения и вырезания изображений, очень выручают.
Для генерации тематического рыбного контента использовал ChatGpt и Notion AI, обе сетки дают вполне адекватный контент.
anonymous
НЛО прилетело и опубликовало эту надпись здесь
Denis_Zelenykh Автор
Спасибо за ваше мнение. Звездочка это пример. Можно сгенерировать в сети что угодно и пойти разными путями. Один из путей, для опытных дизайнеров как вы – перерисовать вручную, опираясь на уникальную идею, все остальные для менее опытных. В этом и смысл туториалов.
Если вы достаточно опытный специалист – очень странно ваше внимание к моей публикации. Вы можете делать что угодно и как угодно, ещё раз спасибо за внимание.
anonymous
НЛО прилетело и опубликовало эту надпись здесь
Denis_Zelenykh Автор
Вы несете сплошной негатив. Я не говорил, что я не специалист. И я в корне не согласен с вашими заблуждениями, но не позволяю себе общаться в токсичном тоне.)
Вы тут написали уже так много букв, что их хватит на статью «Почему нейросети, трассировка и другие блага технологий никуда не годятся». Серьезно, напишите свою статью. С большим удовольствием изучу её.
Не я начал и продолжил бросаться громкими заявлениями. И я не хочу продолжать этот бессмысленный диалог. Будьте проще, всего вам доброго.
anonymous
НЛО прилетело и опубликовало эту надпись здесь
Denis_Zelenykh Автор
«Автоматически векторизовать такие объекты - маразм» – вы начали диалог таким образом. Я намерен его закончить, мне нечего с вами обсуждать. Последний комментарий просто смешен. Хорошего вам дня, всего доброго. Желаю вам успехов во всех ваших начинаниях.
anonymous
НЛО прилетело и опубликовало эту надпись здесь
Denis_Zelenykh Автор
Невнятные здесь только ваши комментарии. XD