Як я робив логотип для блогу з ChatGPT

Логотипом цього блогу довго була стандартна іконка </> на градієнті - така є в половини розробницьких сайтів. Вона нічого не казала ні про мене, ні про блог. Я вирішив її замінити, але дизайнером я не є, тож пішов таким шляхом: ідеї генерував у ChatGPT, а до робочого стану доводив сам разом з AI-асистентом для коду.

Спершу - де логотип живе

Перш ніж щось генерувати, варто зрозуміти, де знак показуватиметься. У мене це:

• іконка 28-48 px у шапці, футері й адмінці поруч із назвою сайту;
• favicon 16-32 px у вкладці браузера;
• іконка на домашньому екрані iOS і Android.

Тобто знак має читатися на 16 пікселях. Це одразу відсікає все складне: дрібні деталі, тонкі лінії, текст. Цю вимогу я прописував у кожному промпті разом із кольорами сайту (індиго і помаранчевий акцент), форматом (квадрат, фон від краю до краю) і забороною на текст та мокапи.

Перша спроба

Першим ChatGPT запропонував Z, у якої діагональ переходить у стрілку росту, з помаранчевою точкою. Виглядало охайно, і я навіть поставив його на сайт. Але знак сприймався як черговий «growth»-логотип стартапу, тож хотілося порівняти його з чимось іншим.

Чотири концепції

Тому я попросив кілька принципово різних ідей в одній розмові - так ChatGPT тримає спільні вимоги, і не треба щоразу повторювати контекст:

1. «Термінал» - Z і помаранчевий курсор, як Z_ у консолі;
2. «Шлях» - Z однією лінією від старту до цілі;
3. «Складена стрічка» - орігамі-Z з помаранчевою діагоналлю;
4. «Негативний простір» - Z прорізами в індиго-формі на помаранчевому фоні.

Головний висновок цього етапу: порівнювати логотипи у великому розмірі майже марно. Я зібрав просту HTML-сторінку, де кожен варіант показано великим, у шапці на світлій і темній темі та як favicon 32 і 16 px. Саме там стало видно, що «Шлях» з тонкою лінією на 16 px просто розчиняється, а «Негативний простір» вибивається з кольорів сайту.

«Просто й нудно»

Найбільше мені сподобався «Термінал»: він найчіткіший на будь-якому розмірі і прямо про розробку. Але відгук, який я отримав, коли показував його, був чесний: занадто просто і нудно. Тож я пішов на другий раунд - ті самі Z і курсор, але з характером:

• A - курсор вбудований у літеру: нижня планка Z і є помаранчевим курсором;
• B - Z_ у вікні терміналу з трьома крапками;
• C - градієнтна Z зі світним акцентом (тут ChatGPT проігнорував запит і замість курсора намалював зірочку - буває);
• D - класичний Z_, у якого курсор блимає.

Вікно терміналу на 28 px перетворилося на кашу, а варіант A виявився водночас простим і дотепним. Його я і взяв, а від D забрав ідею анімації.

Чому не можна просто взяти PNG з ChatGPT

Згенерована картинка - це растр 1254×1254 з дрібними артефактами: трохи нерівні краї, скоси, які мали бути однаковими, але не зовсім збігаються. На 28 px цього не видно, але для логотипа хотілося точності. Тому знак я перемалював у SVG: дві фігури, паралельні скоси, однакова висота планок. Файл важить менше кілобайта і різкий на будь-якому розмірі.

З цього SVG я згенерував усі іконки: favicon.svg, favicon.ico (16/32/48), apple-touch-icon і іконки для Android. Для рендеру вистачило headless Chrome - без жодних графічних редакторів.

Курсор, який не перетворює Z на 7

Анімацію я зробив прямо всередині SVG через CSS - вона працює, навіть коли файл підключений як звичайний <img>. Спершу курсор просто блимав, як у терміналі. І тут вилізла кумедна проблема: коли нижня планка зникає, Z на мить читається як 7.

Я перебрав кілька варіантів - дихання, світіння, відблиск, мерехтіння між двома відтінками помаранчевого - і зупинився на найпростішому: планка не зникає, а плавно стає білою. На мить уся Z біла, а потім курсор знову «загоряється» помаранчевим.

.c { animation: c 2.4s ease-in-out infinite }
@keyframes c {
  0%, 35% { fill: #f97316 }
  50%, 85% { fill: #fff }
  100% { fill: #f97316 }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important }
}

Останнє правило важливе: якщо в людини в системі ввімкнене зменшення руху, логотип просто стоїть.

Несподіванка після деплою

Коміт задеплоївся, а на сайті - старий логотип. Railway показував успішний деплой, сервер віддавав новий файл, але між ним і браузером стоїть Cloudflare, який закешував статичні файли на чотири години.

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

const BRAND_ASSETS_VERSION = '3'
// ...
siteLogoUrl: `/logo.svg?v=${BRAND_ASSETS_VERSION}`

Для кешу це нова адреса, тож свіжий файл підтягується одразу. Змінив логотип - підняв версію.

Що я виніс

• ChatGPT добре генерує концепції, але фінальний логотип краще довести до вектора самому.
• Порівнювати варіанти треба на реальних розмірах і в реальному контексті, а не на великих картинках.
• Кілька концепцій краще просити в одній розмові: спільні вимоги не губляться.
• Погляд збоку корисний: одне чесне «нудно» дало більше, ніж ще кілька генерацій.
• Анімація логотипа має бути ненав’язливою і вимикатися для тих, кому рух заважає.
• Не забувайте про кеш: CDN легко сховає від вас власний деплой.