As you may or may not know, we launched a new design for Inspiredology. Our biggest change around here is our massive beautiful design lab illustration. When I started thinking of what I wanted to do, I sat on the Design Inspiration Lab idea and – I thought what about a science lab out of control with design. I soon found Mathieu Beaulieu through PSDTUTS. I had the opportunity to interview him as he is a fellow canuck and we love sticking together. I approached him to create an illustration for us, his style is so much fun and has a laid back emotion. That being said – I would like you to welcome Mathieu, so he can explain his process of creating the lab.
Chad offered me to design the new header of Inspiredology’s website, which I gladly accepted.
Here’s a brief description of my creative process : I was asked to draw a laboratory including Chad and Andrew (founders of Inspiredology) and the scene should be focused on “science and design”.
The Sketches
I started making quick sketches, to throw some ideas around quickly. Just simple concepts, added some details, but just enough to relay the message to the client.
After exchanging some ideas, we established the final setup and I was able to sketch a more detailed draft.
Digital Sketch
When the final sketch was approved, I cleaned up the lines in Adobe Flash . This way, the lines are vectorized (more control over the curves) and still gives the look of a natural pen stroke.
I use Flash specifically instead of Illustrator because their functions allow for more natural workflow as well as it allows me to create unique strokes.
Colouring Process
For the coloring process, I imported the vector drawing into Adobe Photoshop. I then used the various colouring tools to create shadows, highlights and add more depth to the illustration. Lastly, the final colouring process is to bring the illustration together. Above you see all the elements coloured, but the illustration doesn’t feel together, adding colour overlays to bring the entire illustration closer to one colour scheme creates a more attractive illustration. It also feels like more of an environment then just a few elements put together.
Join the discussion
Fantastic post! Love to see the design process and interestingly enough I do all my illustrations through Flash. Just seems easier (and quicker) for me to start drawing in!
Love it. This has been my favorite post yet…and by favorite I mean most INSPIRING. So fun to see the process…makes me want to instantly whip out the sketch pad and get to designing. Well done. Love the new site/design.
Thanks for sharing this process, i have never heard of a designer using flash to sketch over the lines of a drawing instead of illustrator, could you please do a tutorial on this?
Fun illustration! Love all the light bulbs
And it’s always fun to see the process. Very curious about the Flash process as well…
I’m a big fan of illustrative web design, and this one quickly tops my list of favorites. Well done, all!
I adore the header
You just got yourself another fan Mathieu! I recently hired an artist to do up a couple of mascots for a blog project I just launched and I think it just adds so much more character.
I’ve been to Insiredology before through links from Jad Limcaco and others, but it’s now drawing me in even more. (I’m a sucker for awesome visuals. I happily judge design-related sites by their “cover” and this site just moved way up the list of my “must reads” because of aesthetics!)
i like the design too much
really great
I really like the final result, I was in fact trying to work out a way to do vectorised-yet-drawn lines yesterday, I might check out flash!
Thanks!
Wow this is so cool, i love the design very much !
I appreciate this type of artistic process so much. I have a tendency to jump into photoshop so quickly sometimes that I forget to do some of the preliminary stuff and just put a pencil to paper! Never the less, amazing process leading to an amazing design! Kudos, Mathieu!
Jason, Garrett – Glad we could help inspire you to pick up the sketch pad…
Victoria, RaShell – We will see if we can get Mathieu to do a post on using flash over illustrator
Laneth – Thanks so very much for being a reader – we are humbled by the recent feedback on the new site
Oh, how cool! I’m in awe! I really like the little details, like the rats and the light bulb over the brain. LOL That is great. You guys really found a wonderful artist for it. Kudos to all of you!
I was glad to read how Mathieu placed a solid color over the final image. I have done this a time or two and liked the results. I, too, would like to read a tut with more detail.
Su
Excellent, I love the new design, is too much better than before. and the illustrated header is just awesome.
Keep working that hard guys, you have a great blog.
When I got to the site, I was stunned by the header. It’s the most beautiful thing I’ve seen browsing the web lately. I really appreciate this article, because I love to know the “How to” process. Thanx!
Loved this
Do you guys know where i can find more illustrations like these? i just love this style.
Please e-mail me, if you know.
Thanks