Crear “esa web de Git con gatos”
TL;DR: explico mi proceso para crear el estilo gráfico y las ilustraciones de GitByBit. Al final hay un vídeo acelerado.
La gente no deja de preguntarme qué modelo de IA uso para crear las ilustraciones de GitByBit. La pregunta resulta un poco irritante divertida, teniendo en cuenta que creo la mayor parte del arte, si no todo, con mis torpes manos. Así que he decidido escribir un poco sobre mi proceso de ilustración y mis herramientas.
No soy artista profesional. Soy, y siempre he sido, desarrollador de corazón. Y, como la mayoría de desarrolladores, pensaba que no sabía dibujar en absoluto. Sinceramente, cuando miro muchos de mis bocetos en papel, sigo sin entender cómo eso puede convertirse en algo decente si le dedicas suficiente tiempo.
Creo de verdad que tener habilidades básicas de dibujo y diseño es SÚPER útil para alguien que desarrolla software o productos web, sobre todo si piensas crear tus propios proyectos. Te permiten expresar tus ideas visualmente y hacer que tus productos destaquen.
Diría que, para muchas personas que buscan un trabajo de desarrollo en estos tiempos raros, dedicar uno o dos meses a aprender diseño básico es una inversión mucho mejor que hacer problemas interminables de LeetCode (pero no mejor que aprender más Git, ja, ja). Es algo que puede ayudarte a destacar y a llamar la atención. Es algo que puedes usar en tus propios proyectos. Es otro camino que puedes explorar si algún día te cansas de programar. Y quizá, como me pasó a mí, descubres que disfrutas haciéndolo.
¿Por qué ilustraciones?
Cuando tu trabajo consiste en enseñar a una persona, las ilustraciones son tus mejores aliadas.
- Una imagen puede explicar algunas cosas mejor que una página de texto.
- Una buena metáfora visual puede grabarte un concepto abstracto en la memoria como pocas cosas.
- Una tira cómica puede darte un respiro mental cuando te enfrentas a material difícil y aburrido.
El patrón de diseño Adapter.
El patrón de diseño Abstract Factory.
El olor de código Large Class.
El logotipo
Intento pensar en el estilo gráfico general de un proyecto nuevo desde el primer día. Conviene decidir pronto el tono, porque así llegas al final con un estilo y un contenido más coherentes.
Cuando empecé a trabajar en GitByBit, sabía que el proyecto necesitaba una mascota adorable. Me encantan las mascotas una barbaridad. De hecho, a todo el mundo le gustan. Mucha gente me conoce solo como el tipo de la web del mapache, en referencia a Refactoring.Guru.
Pero no tenía ni la menor idea de qué tipo de mascota encajaría con este proyecto en concreto. Una criatura que siempre se asociaba con Git era el pulpo. Y aunque los pulpos son fascinantes, dibujar un pulpo adorable es bastante difícil. Lo intenté durante un tiempo, pero acabé abandonando ese enfoque.
Llevaba solo unas semanas con el proyecto y, en paralelo, estaba trabajando en el primer borrador del contenido. El capítulo de git init tenía una pequeña broma sobre un gato durmiendo sobre teclados mientras tú no estabas.
Mi gato Steve solía fastidiarme el trabajo todo el tiempo cuando era un gatito.
Ahí tuve una revelación: ¡los gatos son perfectos! Son adorables, son graciosos y tienen fama de amar los teclados. Además, existe desde hace mucho el estereotipo de que a los programadores les encantan los gatos, que gestionar un equipo de programadores es como pastorear gatos, y todo eso. Que todo este proyecto se recordara como "Git con gatos" sería perfecto. Todo encajó de maravilla.
Así se creó la primera versión del logotipo del proyecto.
Logotipo de GitByBit v1.0
Para empezar era suficiente, pero todavía no tenía planes claros para el resto de ilustraciones. En ese momento ni siquiera sabía si el proyecto iba a despegar. Así que decidí centrarme primero en el contenido principal y preocuparme por lo demás más tarde.
El estilo visual
Otro momento clave llegó mucho más tarde, casi un año después de empezar el proyecto, en diciembre de 2024. Para entonces, la primera versión del contenido estaba casi lista, así que ya tocaba crear gráficos. Seguía sin tener ni idea del estilo visual general. Peor aún: después de un año trabajando en el contenido, tenía la creatividad quemada y todo lo de los gatos empezaba a parecerme un poco gastado.
Aun así, durante las vacaciones de Navidad probé algunas ideas en bruto, que acabaron llevando a las ilustraciones que ahora se ven al inicio del curso: toda la historia de he roto mi proyecto (que está basada en hechos reales, por cierto).
Bocetos de las ilustraciones del primer capítulo.
Después de pasarlas a vector y añadirles algo de interactividad básica, terminé con el conjunto completo de ilustraciones del primer capítulo, muy parecido a lo que puedes ver ahora en el curso.
Las ilustraciones terminadas del primer capítulo.
Gatos por todas partes
Después de terminar unas cuantas ilustraciones más con el mismo estilo, tuve un momento de "esto es". El estilo era juguetón, adorable y un poco tonto, justo lo que quería. También encajaba perfectamente con el tono general del proyecto. Pero no había gatos, y eso era una pena. En algún momento, por pura frustración, dibujé una cabeza de gato encima de una de las ilustraciones existentes y descubrí que tenía EXACTAMENTE la estética y el tono que buscaba desde el principio.
Da rabia volver atrás y cambiar todas las ilustraciones ya terminadas, pero forma parte de crear un resultado bueno y coherente. Y creo que al final quedó genial. A la gente también parece gustarle.
Es fácil engañarte pensando que has hecho un gran trabajo, pero el feedback de los usuarios no miente.
El proceso
Aquí tienes el vídeo acelerado de cómo hice la ilustración del área de staging: 5 horas reales en 5 minutos.
Paso 1: bocetar
Antes bocetaba todo con lápiz y papel. Dibujar bocetos en un iPad siempre se me hacía raro, hasta que probé por casualidad el protector de pantalla Paperlike. Al ponerlo sobre la pantalla del iPad, la superficie queda algo rugosa, así que cuando dibujas con el lápiz táctil se parece a dibujar en papel gracias a la fricción añadida. Sé que no suena demasiado convincente, pero, madre mía, era como dibujar en un dispositivo completamente distinto. Ahora suelo bocetar casi siempre en el iPad, salvo que sea algo superrápido.
Tuve que hacer una pausa de unos días a mitad del proceso y, durante ese parón, mi metáfora inicial de el desarrollo de software es como construir con LEGO, pero casi todo son cacas 💩 evolucionó un poco para conectar con las otras ilustraciones ya terminadas (Git, git pull, git push).
Paso 2: vectorizar
Cuando el boceto está listo, lo paso al ordenador de sobremesa y empiezo a vectorizarlo en Affinity Designer. Aquí todo empieza a verse más pulido y colorido.
Paso 3: añadir efecto de paralaje
Antes de exportar el archivo vectorial a SVG, selecciono unas cuantas capas y les doy nombres especiales, que se renderizarán como nombres de clases CSS en el archivo SVG exportado. Más tarde podré acceder a esas capas desde el código para añadir un efecto de paralaje cuando se mueva el ratón.
* * *
Espero que este pequeño vistazo a mi proceso de ilustración te haya entretenido. Si tienes alguna pregunta o quieres compartir tus propias experiencias creando ilustraciones, puedes escribirme a alex@gitbybit.com.
Todavía lo anunciaré como es debido en la próxima entrada, pero GitByBit salió del acceso anticipado la semana pasada y (por fin) se convirtió en un producto de verdad. El curso principal sigue siendo gratis, pero las prácticas temáticas ahora forman parte del complemento de pago, GitByBit PRO.
Si quieres apoyar mi trabajo futuro, plantéate comprar una copia para ti o para alguien a quien quieras. La versión PRO es un pago único y tiene un precio justo. Incluso puedes aprovechar un buen descuento navideño durante las próximas semanas.