Zelenykh

Помните это чувство, когда после долгого синего экрана загрузки наконец появлялся травянисто-зелёный холм, плыли облака, играл тот самый стартовый звук — и мир был добр? Я дизайнер с более чем десятью годами стажа, и в какой-то момент поймал себя на мысли, что хочу, чтобы мой сайт вызывал ровно это чувство. Не «откройте PDF с резюме», а «загрузите операционную систему, в которой живёт моя визитка».

Так появился мой сайт zelenykh.ru — интерактивная визитка в эстетике Windows XP, по которой ходишь как по настоящему рабочему столу: открываешь окна, таскаешь их мышкой, сворачиваешь в таскбар, лазаешь в «Корзину», запускаешь игру из меню «Пуск» и натыкаешься на приколюхи.

Эта статья — не столько про «смотрите, какой я молодец», сколько про маршрут, которым я шёл: ChatGPT → Cursor → Codex (+ Figma по MCP) → Claude Code. Я не фронтендер и параллельно с сайтом погружался в мир ИИ: узнавал о новых инструментах, пробовал их на своём проекте, сравнивал ощущения. Заранее распределять роли между ними я не собирался — это была серия экспериментов. В итоге пришёл к тому, что такие проекты мне удобнее всего реализовывать в Claude Code. А по дороге набил технических шишек: даже «несерьёзный» сайт-приколюха оказался проектом со своим оконным менеджером, звуковой подсистемой, жестами и CI/CD.

Поехали. Только сначала — о том, кто меня в это втянул.

С чего всё началось: два сайта, которые не давали мне покоя

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

• pauljaguin.com/office — портфолио веб-разработчика Поля Жагена в стиле Windows: иконки, окна, всё кликается и открывается, будто ты и правда сел за чужой компьютер.

• mitchivin.com — портфолио Митча Айвина, тоже в стиле Windows: рабочий стол и окна — отполировано до состояния «не верю, что это сайт».

Я залип на них непозволительно долго. И вместо того чтобы по-взрослому подумать «это же куча работы», подумал «хочу так же, только XP, только своё». Знакомое чувство, да?

Дальше — самое интересное. Я дизайнер. Я умею рисовать интерфейсы, чувствовать отступы, композицию и всё такое, но писать руками оконный менеджер на чистом JS — это не моя профессия. Сайт стал поводом проверить, как далеко меня вывезут ИИ-ассистенты. Я пробовал, ошибался и постепенно разбирался, как с ними работать.

Почему именно Windows XP, а не что-то посвежее

Меня часто спрашивают: почему XP? Ведь были и более новые, и более «модные» системы. Ответ простой — для меня (и, судя по всему, для огромного числа людей) Windows XP остаётся лучшей операционной системой своего времени. И это не только ностальгия — под этим есть вполне измеримые основания.

Это был момент, когда ОС наконец-то перестала падать. XP вышла 25 октября 2001 года и стала первой массовой потребительской Windows на ядре NT. До этого домашние версии (95/98/ME) и стабильные рабочие (NT/2000) жили в параллельных мирах. XP их объединила: домашний пользователь впервые получил систему, которая могла работать днями без перезагрузки и не валилась в синий экран от каждого чиха. Стабильность из «корпоративной привилегии» стала нормой для всех.

Она была красивой — осознанно, а не случайно. Тема Luna с её фирменными сине-зелёными переливами, объёмными кнопками и тем самым обоем Bliss (зелёный холм и облака) пришла на смену унылому серому интерфейсу Windows 2000. Да, кто-то поначалу ворчал, что это «слишком игрушечно», но именно Luna задала визуальный язык, который мы до сих пор узнаём с одного взгляда. Для дизайнера это эталонный кейс: интерфейс, ставший культурным символом.

Удобной и понятной. Переработанное меню «Пуск» на две колонки, группировка кнопок в таскбаре, мастера настройки, которые вели за руку, — XP всерьёз думала о том, как человек реально пользуется компьютером. Многое из этого мы воспринимаем как данность сегодня, но придумано и отполировано это было именно тогда.

И очень нетребовательной. XP бодро бегала на железе, которое по нынешним меркам смешное. Это сделало её доступной буквально везде — от офисов до школ и интернет-кафе по всему миру.

А теперь цифры. Точные доли гуляют по источникам, но порядок такой:

• на пике под XP работало, по разным оценкам, около трёх четвертей всех персональных компьютеров в мире — доминирование, которое мало кому удавалось повторить;

• у неё самый долгий срок поддержки среди всех Windows: официально Microsoft сопровождала её до 8 апреля 2014 года — почти 12,5 лет;

• и даже в день «похорон», когда поддержку отключали, под XP всё ещё работала заметная доля компьютеров — по разным замерам, около четверти. Люди буквально не хотели с ней расставаться.

Вот это сочетание — стабильность, продуманность, узнаваемая красота, скромные требования и феноменальное долголетие — и есть причина, почему свой сайт я захотел сделать именно в XP. Это не просто «ретро ради ретро». Это оммаж системе, на которой выросло целое поколение и которая до сих пор остаётся ориентиром того, как операционка может быть одновременно мощной и человечной.

Шаг 1. ChatGPT — архитектор на салфетке

Первым делом я пошёл к ChatGPT с максимально наивным вопросом: «Слушай, а такое вообще реально сделать одному и без серьёзного бэкенда?»

ChatGPT не только сказал «да», но и спокойно разложил, как к этому подступиться:

• Чистый HTML + CSS + JS, без фреймворков. Для статичного сайта это не компромисс, а осознанный выбор: ничего не нужно собирать, нет ноды, нет вебпака, сайт — это набор файлов, который кладёшь на любой хостинг, и он работает.

• Модель «рабочий стол → окна». Каждое окно — это блок, который показывается и прячется. Внизу таскбар, слева-снизу «Пуск». Состояние окон (открыто / свёрнуто / закрыто / какое сверху) живёт в JS.

• Никакой базы данных. Всё состояние — на клиенте. Контент не меняется в рантайме, значит и хранить нечего.

По сути, этот разговор и стал моим первым техническим заданием. В моём случае ChatGPT оказался «архитектором на салфетке»: помог собрать каркас мысли и дал словарь — те самые слова («оконный менеджер», «z-index стек», «таскбар»), на которых я потом разговаривал с код-ассистентами. А дальше захотелось попробовать работу прямо в редакторе, где ассистент видит файлы проекта. Так я добрался до Cursor.

Шаг 2. Cursor — первый «оживший» прототип

С этим ТЗ я пошёл в Cursor. На момент старта он казался мне самым толковым инструментом для написания кода — сидит прямо в редакторе и видит проект целиком.

В Cursor мы собрали первую версию прототипа, и это была чистая логика без капли красоты:

• загрузочный экран → экран логина → рабочий стол;

• окна открываются, сворачиваются, закрываются и таскаются мышкой;

• таскбар, который заполняется кнопками открытых окон;

• меню «Пуск».

Выглядело это, честно, как страшный сон дизайнера: серые прямоугольники, системный шрифт, нулевые отступы. Но это нормально и даже правильно. Задача прототипа — доказать, что концепция держится: окна открываются и не разваливают вёрстку, не дерутся за то, кто сверху, меню «Пуск» не уезжает за край экрана.

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

• какое окно сейчас «сверху» и что происходит при клике по фоновому?

• что делает кнопка в таскбаре — сворачивает активное окно или разворачивает свёрнутое?

• куда открывается новое окно, чтобы оно не легло пиксель в пиксель на предыдущее?

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

Прототип жил, окна открывались. Я продолжал разбираться в ИИ-инструментах и пробовать новое — следующим экспериментом стал Codex.

Шаг 3. Codex + Figma по MCP — момент, когда дизайн перестал «теряться при переводе»

Дальше я открыл для себя Codex и сделал то, что изменило весь процесс: подключил к нему Figma по MCP (Model Context Protocol — протокол, через который ассистент получает доступ к внешним инструментам, в моём случае — прямо к моим макетам).

До этого мой диалог с ассистентом про дизайн выглядел как испорченный телефон:

— Сделай кнопку чуть меньше. — (делает в полтора раза меньше) — Нет, чуть-чуть. И отступ сверху побольше. — (делает отступ 40px) — 😩

Знакомо? Любой, кто диктовал вёрстку словами, узнает эту боль. Дизайн — это про точные значения, а слова «чуть» и «побольше» точных значений не несут.

С Figma по MCP схема стала принципиально другой:

1. Я рисую макет в Figma — там, где мне удобно и где я точно знаю каждый пиксель.

2. Codex через MCP «забирает» этот макет прямо из Figma и верстает по нему.

3. Оставшиеся неточности я добивал, вставляя готовый код из Dev Mode Figma — точные значения отступов, цветов, размеров, радиусов.

Разрыв «дизайн ↔ код», самый болезненный во всём процессе, практически закрылся. Я больше не пересказывал картинку словами — я отдавал саму картинку.

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

• градиенты в заголовках окон (не плоский синий, а именно перелив);

• объёмные кнопки с псевдо-3D-границами — те самые, со светлой гранью сверху-слева и тёмной снизу-справа;

• характерный «луч» таскбара;

• скруглённые только сверху углы окон;

• иконки, шрифты, тени.

Всё это невозможно попасть «на глаз» — попадёшь в «что-то похожее на XP», а это хуже, чем непохоже, потому что вызывает эффект зловещей долины. Именно точные значения из Dev Mode позволили попасть в XP, а не рядом с ним.

Шаг 4. Codex снова — наводим порядок: UI-kit и вторая версия

Чем больше элементов появлялось, тем отчётливее вылезала классическая болезнь растущего проекта — расхождение стилей. Один и тот же по смыслу элемент в разных местах жил немного по-разному: тут отступ 8px, там 10px; синий в одном окне чуть холоднее, чем в другом; шрифтовые размеры пляшут на пару пунктов. По отдельности — ерунда. В сумме — ощущение неряшливости, которое дизайнер чувствует затылком.

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

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

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

Шаг 5. Claude Code — инструмент, на котором я остановился

Следующим я попробовал Claude Code. Не потому, что заранее отвёл ему роль «финального полировщика», — я всё ещё экспериментировал. И именно в нём мне оказалось удобнее всего реализовывать такие проекты: продолжать разработку, разбираться в существующем коде и доводить детали. Это мой вывод из работы над сайтом, а не универсальный рейтинг инструментов.

«Большой контекст» — это не фигура речи. К финалу проект превратился в:

• один index.html почти на 5750 строк — вся разметка плюс весь JavaScript, упакованный в один IIFE;

• styles.css на ~5650 строк.

Да, я знаю, что «правильно» бить это на модули и компоненты. Но для статичного сайта, который я выкладываю как набор файлов, монолит оказался прагматичным выбором — нет сборки, нет зависимостей, открыл файл и работаешь. Цена — навигация по такому полотну. И вот здесь способность ассистента быстро находить нужное место и вносить точечные правки, не задевая соседние 5700 строк, решала вообще всё. Именно в Claude Code мы отполировали детали, дочинили крайние случаи и довели сайт до состояния, которое мне не стыдно показывать.

И ещё одна деталь, которой я горжусь: финальную работу над сайтом я делал уже не голым Claude Code, а через свой собственный плагин — ZDP (Zelenykh Design Plugin). Это набор навыков поверх Claude, в которые зашита моя дизайн-методология: «Атомарная матрёшка», правила сборки макетов, чистка текста под мой голос. По сути тот же ИИ, но на моих рельсах — он не импровизирует «как обычно делают», а делает так, как привык я. Если хотите потрогать сами — плагин живёт вот тут: zdp.lorrrem.ru.

Технические грабли, на которые я наступил (самое интересное)

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

1. Оконный менеджер на vanilla JS, или война за z-index

Нарисовать окно — легко. Заставить несколько окон уживаться — вот где начинается настоящая работа. Скелет держится на функциях openWindow, minimizeWindow, closeWindow, bringToFront, ensureTaskButton, updateTaskButtonsState.

Главная головная боль — порядок окон по z-index. Есть окно-файловый менеджер «Проекты», а поверх него открываются окна конкретных проектов. И есть жёсткое правило: окно projects всегда должно лежать под окнами отдельных проектов. Звучит просто, но это правило пришлось зашивать прямо в логику bringToFront. Без него при кликах окна начинали «нырять» друг под друга в порядке, который ломал ожидания пользователя: кликаешь на проект, а наверх всплывает файловый менеджер. Мелочь, которая сразу выдаёт, что «это просто сайт».

Отдельная история — куда открывать новое окно. На десктопе окно центрируется и получает небольшой случайный сдвиг (±28×20px), чтобы свежие окна не ложились идеально друг на друга в стопку. Проектные окна открываются каскадом со сдвигом +16px от предыдущего, а позиции последнего открытого и закрытого проекта запоминаются отдельно — чтобы поведение ощущалось «осмысленным», а не случайным.

2. Адаптив: оконный интерфейс на телефоне — это оксюморон

«Рабочий стол с перетаскиваемыми окнами» и «экран шириной 375px» — концепции, которые не дружат by design. Пришлось не просто навешивать брейкпоинты, а менять саму модель поведения:

• на мобильных (≤1024px) отключается случайный сдвиг окон — на маленьком экране каждый лишний пиксель смещения критичен;

• на ≤640px окна перестают ограничиваться вьюпортом (логика constrainWindowToViewport пропускается) — иначе на узких экранах они начинали вести себя дёргано и неестественно;

• у игры на мобильном своя стартовая картинка (start screen mb.png) и тач-управление вместо стрелок на клавиатуре.

Брейкпоинтов в итоге получилась целая лесенка — от 1024px до 490px плюс отдельные стили для печати. Адаптив тут — это не «ужать в колонку», а буквально переосмыслить взаимодействие.

3. Единая система звука через WeakMap и master volume

Звуков на сайте прилично: запуск Windows, клики по интерфейсу, семь (!) игровых звуков, видео шоурила. И всем этим зоопарком нужно было управлять из одной точки — одной кнопки громкости в трее. Задача разложилась на три:

• помнить базовую громкость каждого элемента audio/video по отдельности. Я сделал это через WeakMap (mediaBaseVolume) — чтобы не хранить состояние в самих DOM-узлах и не ловить утечки памяти, когда элементы пересоздаются;

• накладывать общий множитель masterVolume поверх базовой громкости каждого источника;

• корректно делать mute/unmute с восстановлением последней ненулевой громкости (lastNonZeroMasterVolume) — чтобы после «вкл звук» он возвращался туда, где был, а не на 100%.

И вишенка: на одной кнопке звука уживаются одиночный и двойной клик — одиночный делает mute, двойной открывает панель громкости. Браузер сам эти два жеста не различает (двойной клик — это всегда сначала два одиночных), поэтому различение пришлось городить руками через таймер и счётчик кликов. Плюс у плеера шоурила своя локальная громкость, которая тоже обязана проходить через master volume — и при этом не ломаться, когда пользователь крутит общий уровень. Состыковать «локальное» и «глобальное» управление громкостью так, чтобы они не дрались, заняло заметно больше времени, чем кажется по описанию.

4. Лайтбокс с настоящими жестами

Галерея картинок умеет не только стрелки и Escape с клавиатуры. На тач-устройствах работает полный набор жестов:

• pinch-to-zoom двумя пальцами (считаю дистанцию между касаниями и пересчитываю масштаб);

• свайп для перехода между картинками;

• пан — перетаскивание увеличенного изображения, когда зум > 1.

Тут штатного API не хватает: всё это — ручная работа с touchstart/touchmove/touchend, отслеживанием стартовых координат, дистанций и постоянным пересчётом масштаба и смещения. Жесты — та область, где «работает на айфоне» и «работает на андроиде» — два разных приключения.

5. Отдельные страницы проектов через fetch — и грабли с file://

Я хочу, чтобы у каждого будущего кейса была своя «расшариваемая» страница со ссылкой. Для этого есть project.html: он берёт ?id=projectN из URL, через fetch подгружает основной index.html, парсит его DOM, достаёт оттуда контент нужного окна проекта и вставляет на отдельную страницу. То есть один источник контента — окно проекта — переиспользуется и внутри «ОС», и как самостоятельная страница. Никакого дублирования.

Грабли, на которые я честно наступил: это работает только по HTTP. Откроешь через file:// двойным кликом — и fetch упрётся в CORS, страница останется пустой, а ты будешь полчаса гадать, почему «локально не пашет». Вывод: проект нужно поднимать на любом простом статическом сервере (хоть python -m http.server), а не открывать файл из проводника.

6. Showreel: переезд с локального mp4 на Vimeo

Изначально шоурил был локальным Assets/show.mp4. Потом я переехал на встраивание Vimeo — и тут же собрал пакет приключений, который хорошо читается прямо по истории коммитов:

• iframe Vimeo ломал соотношение сторон внутри корпуса Windows Media Player — пришлось отдельно чинить aspect ratio, чтобы видео не растягивалось и не оставляло чёрных полей;

• при первом открытии окна плеер заметно «думал» — поэтому я стал предзагружать Vimeo-плеер в фоне ещё на старте страницы, чтобы к моменту клика он был уже готов.

Маленький, но показательный кейс: «просто вставить видео» почти никогда не бывает «просто».

7. Кэш CSS — мелочь, на которой обжигаются все

Стили подключаются как styles.css?v=20261030. Версия в query-параметре — это дешёвый, но рабочий приём против вечной беды: после деплоя браузер с радостью показывает закэшированный старый CSS, и ты смотришь на «непочинившуюся» вёрстку, хотя на сервере уже всё новое. Меняешь версию — браузер вынужден подтянуть свежий файл. Однажды обожжёшься — будешь делать всегда.

8. Деплой: GitHub Actions + FTP

В финале прикрутил GitHub Actions с деплоем по FTP: пуш в репозиторий автоматически выкладывает статику на хостинг. Для проекта из статических файлов это почти бесплатный и практически идеальный CI/CD — никаких контейнеров и оркестраторов, просто «запушил → оно на проде».

Что я понял по дороге

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

После этих экспериментов я остановился на Claude Code: для реализации таких проектов он оказался самым удобным для меня. Это не значит, что каждому следующему сайту нужен тот же маршрут через ChatGPT, Cursor и Codex. Такой путь получился у меня — вместе с ошибками, открытиями и собственным плагином ZDP.

Отдельный практический вывод — про UI-kit. Его было полезно собрать, когда в проекте накопились реальные повторяющиеся элементы: стало понятно, что именно нужно привести к общим правилам.

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

Спасибо, что дочитали. Подписывайтесь на мой канал о дизайне привычных вещей «Lorrrem». Там про дизайн, технологии и окружающий нас мир.

P.S. Будет здорово услышать ваш фидбек в комментариях. Какие ИИ-инструменты вы пробовали на своих проектах и на каком в итоге остановились?

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

По словам представителей Pantone, коричневый оттенок напоминает о «восхитительных качествах какао, шоколада и кофе», вызывая чувство комфорта. Исполнительный директор «Института цвета Pantone» Леатрис Эйсман пояснила, что этот цвет отражает «продуманное потакание» желаниям.

Что такое «Институт цвета Pantone» и по какому принципу происходит выбор трендового цвета года?

Институт Pantone — это исследовательское подразделение американской компании Pantone Inc., которая занимается изучением тенденций цвета, его влияния на различные сферы жизни и популяризации стандартов цветовой классификации. Pantone известен своей знаменитой системой цветового Pantone Matching System (PMS), являющейся мировым стандартом для печати, дизайна, моды, интерьера и других отраслей.

Институт Pantone ежегодно, в декабре, объявляет будущий «Цвет года» (Pantone Color of the Year), который становится ориентиром для дизайнеров, маркетологов и представителей креативных индустрий.

Принцип выбора трендового цвета

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

Основные этапы анализа:

1. Изучение глобальных трендов

— Выставки моды и искусства

— Культуры и общественных движений

— Выход новых фильмов, сериалов или других массовых культурных продуктов

— Эволюция технологий и материалов

— Экономическая и социальная ситуации в мире

2. Определение символизма цвета

Эксперты выбирают цвет, который отражает дух времени (zeitgeist) и отвечает на текущие запросы общества:

— В сложные времена выбираются успокаивающие, устойчивые оттенки (как Classic Blue в 2020 году)

— В периоды восстановления цветом года могут становиться яркие или вдохновляющие тона (как Viva Magenta в 2023)

3. Определение влияния цвета на эмоции

Цвет также выбирается с учетом его психологического воздействия — какие идеи и чувства он должен привнести в общество.

Например, цвет года 2023 Viva Magenta 18-1750 был задуман как символ энергии, оптимизма и баланса между природой и технологией.

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

Интересуешься дизайном привычных вещей — подписывайся на мой канал в Телеграме: lorrrem | Дизайн привычных вещей

Материалы по теме:

«Институт Pantone объявил оттенок Mocha Mousse главным цветом 2025 года», Ольга Мамиконян, Редакция Forbes

«Pantone: что это и для чего нужно», Skillbox

«Вице-президент Pantone — о том, зачем и как выбирать цвет года», Елена Кривицкая, РБК

«Цветовая модель Пантон, система PMS (Pantone Matching System)», Википедия

«Институт цвета Pantone объявил цвет 2023 года — Viva Magenta», Руслан @travis_Macrif, Хабр

«Дух времени», Википедия

«PANTONE® 17-1230 Mocha Mousse (Мусс Мокка или Мокка-Мусс)», pantone.ru

Пример логотипа созданного с использованием Midjourney

Миджорни этой нейросеть, которая работает в Дискорде и генерирует изображения по текстовому описанию. Если вы ранее не работали с этой нейросетью — можете изучать принцип её работы в моём гайде по этой ссылке, а также посмотрев этот ролик.

Если вы уже знаете что такое Дискорд, как в нем зарегаться, что такое «/imagine prompt» — идем дальше.

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

Итак, для того чтобы сгенерировать логотип в Midjourney необходимо вызвать команду «/imagine prompt» и далее написать что вы ходите получить, в формате: «cute yellow star logo, vector, flat 2d, company logo, sing style». Перед первой запятой описывается что должен изображать логотип, а далее его стилистику. Примеры стилей можно изучить в этом гайде.

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

Далее привожу примеры запросов и результаты.

letter “M” logo design, vintage, sans serif, victorian style, vintage, white background

simple logo design of cute husky dog, vector, flat 2d, company logo, sing style

vector cherry logo

logo design viking face, vector, flat 2d, white background, vintage

simple hat logo, white background, vector style

black logo design space rocket, vector, flat 2d, white background

Логотипы готовы и что желать с этим добром?

Для использования в интернете такие лого вполне сгодятся. Можно удались фон, добавить текст и будет всё замечательно. Но в ситуациях, когда нужен вектор — этих картинок недостаточно.

Давайте сделаем картинки векторными, на примере одного логотипа.

Сначала нужно увеличить качество креатива непосредственно в нейросети. Для этого нужно нажать кнопочку «U» прямо под картинкой. Номер кнопки соответствует номеру картинки. «U1» и «U2» — первый ряд картинок, «U3» и «U4» — второй.

Картинка улучшена.

В целом, такого результата достаточно, чтобы картинку можно было векторизировать.

Но если у вас есть желание получить ещё более качественное изображение — можете использовать одну из нейронок улучшалок:

https://waifu2x.udp.jp/index.ru.html

https://imglarger.com/

https://icons8.com/upscaler

https://t.me/DeepPaintBot

С помощью сервиса https://imglarger.com/ мне удалось увеличить разрешение изображения в два раза с 1024х1024px до 2048х2048px.

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

Картинка улучшена, теперь её необходимо векторизовать.

Есть несколько путей векторизации изображения:

1 «Сложный» — перерисовать картинку вручную

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

2 «Спорный» — использование плагинов для Figma

Используя плагин Vectorize и Image tracer можно трассировать (векторизовать) простые черно-белые логотипы, но со звездочкой ни первый ни второй не справились.

Зато удалось векторизовать шляпу.

3 «Надежный способ» — трассировка в Иллюстраторе

Нужно закинуть картинку в Иллюстратор нажать на правой панели кнопку «Image Trace».

Выбрать количество цветов.

Дождаться результата и после его доработать, убрать артефакты, лишние элементы.

4 «Самый простой способ» — конвертировать с помощью конвертора.

Для эксперимента я использовал бесплатный конвертер Vectorizer.AI.

Просто закидываешь картинку в сервис и он все делает сам. Результат получился довольно качественным. Картинка конвертируется в SVG. Посмотреть результат можно по этой ссылке.

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

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

Изучить исходный файл и отредактированный можно по этой ссылке.

Далее с векторным логотипом можно работать в в любом векторном редакторе графики, там можно добавить заголовок, подкрутить цвет. Для проработки цветов и типографики я использую Figma или Adobe llustrator.

На этом у меня все, спасибо за внимание, желаю творческих успехов.