Quick Illustration Tutorial - 'about Briefbox' illustration

In the big rush to launch the new and improved Briefbox website, I was given an “easy” task: make a cool illustration for the Briefbox about page. Now, there are good and bad sides of receiving a brief from another designer, especially a highly experienced designer who is the director of two design companies: the brief is certainly a lot looser and you have that creative freedom which can be enjoyable, but at the same time you have to try to guess what exactly is going on in the designer’s mind, because they sure have an exact idea of how the piece should be!

The key here is to work out a plan of action that combines both the designers ideas and thought processes into one! So, me and Joel had a quick chat about what were our thoughts on the illustration, mainly about style and what elements we wanted in the artwork and we refined this down to around 7 or 8 key elements which was a great starting point.

In the early stages of the process, don’t be afraid to share your ideas, thoughts, questions – even if they are not the best ones, it can always lead to something, especially when you’re not alone in the creative process.

Step one

Inspiration is always the starting point. Even though we both agreed it was going to be vector (more inline with the Briefbox branding), there are so many styles you can do within this one, that you need to narrow it down further. In this case we headed over to dribble which is always awesome for ‘vectory stuff’ and stumbled on the awesome work of Justin Mezzel which we thought sat in line with the kinda vibe we we’re going for. Importantly you’ll notice my finished piece is completely different from his work as I understand the importance of being original when using inspiration!

Step two

Style and elements decided, it was time to get creative with some sketches. This stage is really where your own personal illustration process and style comes out, as I have a few techniques I always stick to. For example, I like to sketch inside a frame, proportional to the dimensions the final illustration is going to be. There are people that find this very restrictive, so it’s up to you really. However, in this case, I would say you don’t have to worry so much about making a clean, nice sketch – since the style we went with is more geometrical, our sketch is more an idea to how we’ll use the elements, than a set base to pen tool or livetrace (in other cases it would be completely opposite, but that’s for another tutorial). This is just an initial “putting our ideas on paper” stage, and it will evolve a lot once we start using the software. This is my messy sketch:

Step three

Sketch done, photographed or scanned, is time to go to Illustrator (or your prefered vector software). I always put the sketch in one layer, with a low transparency, and lock it, so it won’t be in the way of whatever I’m doing. Create another layer above, and it’s time to start pentooling. I’ll be honest: this is the most boring part of this process. Luckly, I had a lot of geometrical shapes, which made it faster for this project. The trick is not to give up when you look at all those lines and think “it will take me ages to get this as beautiful as that piece of inspiration I chose”. Pick a bright colour for your line (so you can visualize it better) and start with the elements that are behind, in a mechanical process. I promise you will get there eventually!!

Step four

After you have vectorized most elements, you can start having some fun with colours. It’s easier if you limit your colour pallete (in this case I had Briefbox colours to work with), but don’t be restricted by it – a lot of times it changes as you start “feeling” your illustration. Play with shadows, tones, try out textures, patterns. This is where you sketch comes to life, and it doesn’t matter if you change a few things here and there. You can see the difference between my first sketch, the inspiration, and the final piece here:

These tips and steps will sure help you to make a cool illustration in a short time – but do always follow your heart and your own process!

[…] when you want a cleaner and more accurate translation from your sketch to the software. On this other tutorial, we talked about using the pen tool to create a flat vector illustration. Let’s keep using […]