I just finished up this illustration for @mike.sherov’s upcoming course on Web Security.
Wanted to drop some insights on how I make these, since people often ask about my process and apps.
Although I’m on the verge of getting a face tattoo that says “it’s not about the apps” - apps are 20% of the puzzle, but most of the “tools” that make the illustrations work are fundamental drawing techniques / classic illustration & painting know-how.
So technically the tools for this included Procreate on an iPad, Adobe Illustrator, and Adobe Photoshop. But the more legit list of tools is:
- Drawing realistic shapes in 3D using classical perspective techniques
- Using Gestalt principals of symmetry, visual weight, and continuation to create a clear composition
- Rendering light on 3D surfaces
- Balancing the ratios of big, medium, and small shapes
- Balancing light vs. dark values, warm vs. cool colours, detailed vs. simple elements
(For anyone looking for more in-depth resources on learning illustration skills I have a whole page up on https://illustrated.dev/resources/ with listings of courses I’ve been through and favourite books on the topic)
Anyway, here’s a quick rundown on the stages an illustration goes through:
1. Research & Word Lists
Whenever I start on an egghead course illustration I do a good amount of research on the material. I watch the course videos to get a sense of content. I google all the words I’ve never heard before like “cross-site request forgery” and “honeypot” and “nonce”. I read a bunch of 101 articles around the web to get a feel for the major themes and topics. I use language search engines to see what kind of words frequently appear alongside the major themes.
It’s a way of loading up my brain with the “conceptual map” of the topic. Once I have some idea of the territory I start making long, associative word lists:
Hacking, the dark web, protection, DDOS, click attacks, man in the middle attacks, honeypot wifi, firewalls, breaching systems, botnets, zero day vulnerabilities, exploits, phishing, malware, ransomware, bitcoin ransoms, spoofing, trojan horses, VPNs, white-grey-black hats, password dumps, password cracking, cryptography, algorithms, cookies
Picking locks, skeleton keys, lock picking kits, padlocks, bike locks, security shutters, Fingerprints, scanners, secure buildings, swipe cards, lanyards
Breaking in, breaking glass, smashing windows, disabling, turning off systems, glitches, slipping underneath, blowing it all up, shelter, cover, umbrella, raining attacks
Castles, bricks, thick walls, moats, scanning the landscape, watch towers, fire, torches, great wall of china, signals, catapults, medieval armoury, forts,
Shields, barriers, bullet-proof vests, Knights, swords, horses, jousting, Bow & Arrows, arrows in a shield, robin hood, target practice, nail on the head, arrow in the apple, firing click-arrows, guards, Buckingham palace, the panopticon, gates, wrought iron, monitoring, watching, eyes, police, TSA, metal detectors, CCTV cameras, surveillance, warning signs, lasers, MI5, recording devices
Immunity – immune system, inflammation, disease, cancer, T cells, viruses, microscope images of bacteria, infections, antibiotics, vaccinations
It gives me some initial ideas of themes and metaphors to riff on.
2. Lateral Thinking and Sketching
This is perhaps the most difficult bit – its the stage that takes the most amount of time and effort.
After my brain has been immersed in web security buzzwords, research articles, 101 guides, and bad stock photos of hoodied hackers… it’s time to start fleshing out a page of initial sketches.
This is similar to free flow writing where you just type without thinking about it. I’ll look at the long list of association words and starting giving them visual form. A big visual map of cultural associations to ‘web security’.
I do this by setting up a 5000px wide canvas on Procreate on my iPad pro and start throwing in the keywords with tiny icons, and small visual ideas.
This stage can also the most anxiety provoking when you go through a few founds of brainstorming ideas without landing on one that feels like it effectively communicates the concept. Somehow always works out though.
When I can tell I’m close to making one of these sketches work, I’ll start iterating on different versions on it and mixing in visual symbols from the rest of the brainstorming sheet:
Once I have a good enough sketch I plan out the value structure (eg. balancing the lights and darks – figuring out what bits should be black, grey, and white to make the image easily readable).
Usually I do a few colour sketches making sure the palette is a balance of warm and cool tones. With this one I got lucky that the first blue/orange colour pass worked well enough so I just went with it.
4. Making It
By this stage the illustration is essentially done.
I’ve laboured through all the research and uncertainty and composition work, and now have a clear goal of what I need to make.
Now I get to turn most of my brain off and just render shiny things - it would almost be boring, but I listen to a lot of podcasts so it’s still a good time. (Favourites right now are Dark Net Diaries and Flash Forward)
Here’s a couple snapshots of the different stages:
Also recorded my screen while making this one
There’s three general stages to the rendering:
- Build the basic vector shapes in Adobe Illustrator
- Add shading and lighting to the vectors
- Export the artwork to Photoshop and paint more refined light and colour over the top
Hopefully that was mildly interesting for anyone curious about how these come into the world. Feel free to ask any questions or point out bits that you don’t understand / want more explanation about.
Also keep an eye out for Mike’s course dropping soon!