Позаду години навчання та практики, а похвалитися можна лише... солідним приростом навичок.
Е ні! Людям потрібне відчуття завершеності. Тому радий повідомити: GitByBit тепер видає сертифікати про проходження всім, хто завершить основний курс і всі практики.
Перед тим як відійти у кращий світ, йому теж було потрібне відчуття завершеності.
Блискучий сертифікат з'явиться в меню Focused Practice, щойно буде пройдено останню практику.
Звідти ти потрапиш на сторінку, де сертифікат можна завантажити у форматі PDF. На ньому — твоє ім'я, дата й постійне посилання, за яким будь-хто зможе перевірити його справжність.
1.0.Станом на лютий 2026 року GitByBit підтримує всі основні операційні системи й доступний у чотирьох варіантах:
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 оплачується один раз і коштує по-чесному. А найближчими тижнями діє ще й приємна різдвяна знижка.