Як створювався «той сайт про Git з котами»
TL;DR: розповідаю, як створювався графічний стиль та ілюстрації для GitByBit. Наприкінці є таймлапс-відео.
Мене постійно запитують, якою AI-моделлю я генерую ілюстрації для GitByBit. Ці запитання трохи бісять веселять, адже більшість ілюстрацій, якщо не всі, я малюю власними кривими руками. Тож я вирішив трохи розповісти про свій процес та інструменти.
Я не професійний художник. У душі я був і залишаюся розробником. І, як більшість розробників, довго вважав, що зовсім не вмію малювати. Чесно кажучи, дивлячись на чимало своїх паперових начерків, я досі не розумію, як оце може перетворитися на щось пристойне, якщо посидіти над ним досить довго.
Я глибоко переконаний: базові навички малювання й дизайну СУПЕР корисні для розробника, особливо якщо в планах — власні проєкти. Вони дають змогу висловлювати ідеї візуально й виділяти свої продукти з-поміж інших.
Наважуся стверджувати: багатьом, хто в ці дивні часи шукає роботу розробника, місяць-два на базові навички дизайну дадуть значно більше, ніж нескінченне перемелювання задач із LeetCode (але не більше, ніж вивчення Git, ха-ха). Це те, що вирізняє тебе з натовпу й привертає увагу. Це те, що знадобиться у власних проєктах. Це те, куди можна звернути, якщо код колись набридне. І, можливо, як сталося зі мною, виявиться, що це заняття приносить справжнє задоволення.
Навіщо ілюстрації?
Коли навчаєш людину, ілюстрації — твої найкращі друзі.
- Картинка часом пояснює краще, ніж сторінка тексту.
- Влучна візуальна метафора вбиває абстрактне поняття в пам'ять, як ніщо інше.
- Комікс дає перепочинок, коли продираєшся крізь складний і нудний матеріал.
Патерн проєктування Адаптер.
Патерн проєктування Абстрактна фабрика.
Запах коду Великий клас.
Логотип
Про загальний графічний стиль нового проєкту я намагаюся думати з першого дня. Тон важливо визначити рано: тоді на фініші стиль і матеріали будуть значно ціліснішими.
Починаючи роботу над GitByBit, я знав, що проєкту потрібен чарівний маскот. Я страшенно люблю маскотів. Та що там — їх люблять усі. Багато хто знає мене винятково як того типа з єнотовим сайтом (ідеться про Refactoring.Guru).
Але я гадки не мав, який маскот пасував би саме цьому проєкту. З Git традиційно асоціюють восьминога. І хоч восьминоги — створіння дивовижні, намалювати чарівного восьминога доволі складно. Якийсь час я намагався, але зрештою закинув цю ідею.
Від старту проєкту минуло лише кілька тижнів, і паралельно я працював над першою чернеткою матеріалів. У розділі про git init був жартик про кота, який спить на клавіатурі, поки нікого немає поруч.
Коли мій кіт Стів був кошеням, він постійно ліз мені під руку.
І тут мене осяяло: коти — ідеальні! Вони милі, кумедні й відомі своєю любов'ю до клавіатур. До того ж є давній стереотип: програмісти люблять котів, а команда програмістів — це зграя котів, яку годі пасти, і так далі. Якщо проєкт запам'ятається як «git з котами», буде просто ідеально. Усе стало на свої місця.
Ось так з'явилася перша версія логотипа проєкту.
Логотип GitByBit v1.0
Для початку цього вистачало, але чіткого плану щодо решти ілюстрацій ще не було. На той момент я навіть не був певен, що проєкт узагалі злетить. Тож вирішив спершу зосередитися на основних матеріалах, а про решту подумати потім.
Візуальний стиль
Наступний прорив стався значно пізніше, майже через рік після старту, у грудні 2024-го. На той час перша версія матеріалів була майже готова, і відчувалося, що з графікою вже давно пора щось робити. Про загальний візуальний стиль я все ще не мав ані найменшого уявлення. Ба гірше: після року роботи над матеріалами я творчо вигорів, і вся ця тема з котами вже здавалася трохи заїждженою.
Проте на різдвяних канікулах я накидав кілька чорнових ідей, які зрештою виросли в ілюстрації, що тепер зустрічають тебе на початку курсу. Так з'явилася вся ця історія я зіпсував свій проєкт (заснована, до речі, на реальних подіях).
Начерки ілюстрацій до першого розділу.
Після переведення у вектор і додавання базової інтерактивності вийшов повний набір ілюстрацій до першого розділу — дуже схожий на той, що зараз у курсі.
Готові ілюстрації до першого розділу.
Коти всюди
Домалювавши ще кілька ілюстрацій у тому ж стилі, я впіймав відчуття «оце воно». Стиль грайливий, милий і трохи дурнуватий — саме те, чого я хотів. І він ідеально пасує загальному тону проєкту. От тільки котів у ньому не було, і це засмучувало. Якоїсь миті я з розпачу накидав котячу голову поверх однієї з готових ілюстрацій і зрозумів, що це ТОЧНО той вигляд, якого я шукав від самого початку.
Повертатися й переробляти всі готові ілюстрації прикро, але це частина шляху до якісного й цілісного результату — і, як на мене, вийшло чудово. Схоже, людям результат теж подобається.
Легко переконати себе, що робота вдалася, але відгуки користувачів не брешуть.
Процес
Ось таймлапс, як я малюю ілюстрацію для статті Область підготовки: 5 годин реального часу за 5 хвилин.
Крок 1: начерк
Раніше я все малював ручкою на папері. Начерки на iPad завжди здавалися мені чимось дивним, доки я випадково не спробував захисну плівку Paperlike. Наклеїш її на екран iPad — і поверхня стає трохи шорсткою, а стилус завдяки додатковому тертю відчувається як олівець на папері. Знаю, звучить не надто переконливо, але, чорт забирай, це наче малювати на зовсім іншому пристрої. Тепер я здебільшого роблю начерки на iPad — хіба що треба щось зовсім нашвидкуруч.
Посеред роботи довелося зробити перерву на кілька днів, і за цей час моя початкова метафора розробка — це як будувати з LEGO, але здебільшого з какашок 💩 трохи еволюціонувала й пов'язалася з іншими готовими ілюстраціями (Git, git pull, git push).
Крок 2: векторизація
Коли начерк готовий, я переношу його на комп'ютер і починаю обводити у векторі в Affinity Designer. Тут усе поступово стає охайнішим і барвистішим.
Крок 3: ефект паралаксу
Перед експортом векторного файла в SVG я вибираю кілька шарів і даю їм спеціальні імена, які у фінальному SVG стануть іменами CSS-класів. Потім через ці класи я дістануся до шарів у коді й додам ефект паралаксу, щоб картинка реагувала на рух миші.
* * *
Сподіваюся, було цікаво трохи зазирнути за лаштунки мого процесу. Якщо є запитання або хочеться поділитися власним досвідом створення ілюстрацій — сміливо пиши мені на alex@gitbybit.com.
Великий анонс буде в наступному пості, але минулого тижня GitByBit вийшов з раннього доступу і (нарешті) став повноцінним продуктом. Основний курс залишається безкоштовним, а от практики тепер входять до платного доповнення — GitByBit PRO.
Якщо хочеться підтримати мою подальшу роботу, придбай копію собі або комусь із близьких. Версія PRO оплачується один раз і коштує по-чесному. А найближчими тижнями діє ще й приємна різдвяна знижка.