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