Developers often ignore their profile picture by keeping default geometric placeholders or blank banners because design tools can be intimidating. Up until recently, my GitHub profile was simply a green, Pacman-like geometric pattern, which doesn't show anything about me, or a spec of my creativity. I didn't know how to use any design software, except basic Photopea. With almost no design knowledge, I wanted to make myself an awesome profile picture, without spending money on proprietary software subscriptions, so I turned to Inkscape, (a free, open-source vector editor).

Standard raster images (like PNGs and JPGs) are just grids of colored pixels that blur when scaled. Vector files (like SVG) are built on mathematical coordinates and nodes. In fact, SVG vector files are really just XML data. Because I chose to design my profile picture with vector graphics, it is able to stay completely crisp, no matter how I resize it. The pixelation issues that occur when you enlarge standard images simply does not exist in vector graphics.

The way I got a basic understanding of Inkscape without watching long videos or signing up for paid courses was by applying a different philosophy of learning that I find is also highly effective when learning programming languages or concepts.This philosophy of learning emphasizes applying concepts as you learn them, rather than learning concepts and only applying them once you completely understand them. This approach is even more powerful in Inkscape because you see visual results directly on your canvas. Unlike coding, where your code must be correct before you can run it (generally), design lets you learn simply by doing.

The way I applied this philosophy of learning to Inkscape was by following along with a simple and short (~15 minutes) tutorial, and using tools the second the instructor explained them. I frequently paused to experiment more with the tools, which worked very well, except for the Bézier tool and it's paths, which I still sadly can not use well (I tried to make a smiley face with it, and I made an upside down ^ symbol, which is why I made it with the calligraphy tool). When there was something I truly did not know how to do (like wrapping text around an ellipse), I simply searched for it online and applied it immediately.

To design the profile picture, I centered a large ellipse onto a 500 by 500 pixel canvas with a smooth blue to pink linear gradient, leaving the corners transparent. From there, I built the features: 3D boxes for eyes, ovals for ears, the hair, and my initials for the nose. I even layered a duplicated calligraphy path to make depth for the smile. Finally, I exported the finished asset as a PNG file to preserve transparency.

I then updated my GitHub and DEV.to profile picture to be my newly designed profile picture. My custom Hugo blog even updated its main page automatically once I reran my GitHub actions workflow, since it pulls my profile picture dynamically from GitHub.

I also use Inkscape to make cover images for my DEV.to articles, like this one with a canvas size of 1000 by 420 pixels, for a clean, professional look. Because the original asset is a vector, I can shrink it into the corner to be a small logo or blow it up to be the center of attention of an article cover, and it always stays crisp.

Learning how to use an open-source creative tool is just like learning how to use a CLI utility. You don't need to master the entire tool; you only need to learn the parts you are actually going to use.

What do your profile pictures look like? Did you make them yourself, or are they still placeholders? If you are still using a placeholder, are you planning on making one now? If you are confused by Inkscape, I'm sure someone in the comments could help you.

Also, if anyone has any experience using Inkscape or other graphic design software, I would love to hear your thoughts!