by Flo Preynat

Browsing through Google images or the hundreds of stock photography agencies available on the web is something that has become more than a pre-requisite when you carry out (from scratch) any graphic design.

This is why posts presenting the latest and hopefully most innovative series of button, social media icons or other graphic arts are so popular among the designing community.

 

But sometimes, you only need to travel as far as your kids’ rooms to find what you’re looking for. Chance is your toddler(s) has(ve) every vehicle, every shape, and every animal in stock (somewhere in that mess of theirs) but as a stubborn geek, you will remain seated, and determined to find what you’re looking for on some obscure web page full of poker links, flashing ads, or less-inviting invitations to a revolutionary diet formula based on the consumption of nothing but ribs and curry sauce.

 

‘Google’ your kids room instead

Here’s a little habit of mine I find not only recreational, but very rewarding. I tend to use my kid’s toys to personalize my graphic designs. Not only I find it very enjoyable to use the very same items I have queued for in my local toy shop, fighting off a hundred millions screaming equivalents of my own progeniture, but it makes me happy to see my boy’s face when he finds out his favorite toy is on ‘daddy’s website’.

 

The Herbie example

Here’s a quick example I’d like to walk you through. A few weeks back, I intended to use a cartoon-like representation of Herbie (The famous Disney Volskwagen Beetle) on an F1-looking circuit, and decided to use my boy’s favorite toy car instead.

 

Here’s a pic of the car (you can really see I could have been a professional photographer if I had wanted to), and a snapshot of a circuit I found somewhere on Google.

 

Use your kids' toys to personalize your graphic designs
Use your kids' toys to personalize your graphic designs

The Photoshop routine

Right, let’s use the Quick Selection tool to select our motorized subject. Let’s leave the shadow out of our selection, as we will add the shadow ourselves. Copy and Paste the selection on the circuit and use Command+T (CTRL + T for windows users) to resize the car. Give it some realistic size and position on the road and validate your reshaping task.

 

Use your kids' toys to personalize your graphic designs

If you have followed my previous tutorial (Create realistic shadows in Photoshop), then you wont have any issue following the next few steps, as we are going to give our very own Herbie a shadow. Paste once again our car onto a new layer, and give it a flat-looking and realistic position, as shown below.

 

Use your kids' toys to personalize your graphic designs
Send the shadow layer to the back, by re-ordering the layers.

 

Use your kids' toys to personalize your graphic designs
Use the Image/Adjustments menu to change the Hue / Saturation settings to bring the lightness to a minimum.

 

Use your kids' toys to personalize your graphic designs
Give the layer some blurry effect, using Filter/Blur/Gaussian Blur and a radius of around 5 pixels.

 

Use your kids' toys to personalize your graphic designs
I want the viewer to concentrate on the car; therefore the size of this picture is way too big for my liking. This is when I selected only a part of it and cropped it a more appropriate shape.

 

Use your kids' toys to personalize your graphic designs
Ok, now we have a good view of our car, nicely predominant on the tarmac. Let’s add some effects to it.

 

Use your kids' toys to personalize your graphic designs

Create a new layer and merge whatever is visible onto it. So you can work from one flat image (and have the source available in case).

 

Use your kids' toys to personalize your graphic designs
Use the Filter/Artistic/Poster edges followed by a (Filer/Artistic) Cutout effect to give your artwork a more cartoon-ish aspect.

 

Use your kids' toys to personalize your graphic designs
Use your kids' toys to personalize your graphic designs
Some Lens Flare addition will give the impression of reflecting asphalt with a ray of light coming from the back. Not too much brightness here, as we don’t want the car to be drown in the light.

 

Use your kids' toys to personalize your graphic designs
Ok let’s use the Quick Selection tool to select the wheels of the car and use Filter/Stylize/Wind to give your vehicle some speed. Don’t go mad on the wind force as it won’t have the adequate effect. Wind from the right is what I selected here.

 

Use your kids' toys to personalize your graphic designs
Use your kids' toys to personalize your graphic designs
Use your kids' toys to personalize your graphic designs
Create a new layer, and once again copy all the visible layers onto it. Use once again the Quick selection tool to select your car and shadow and use the clear key.

 

Use your kids' toys to personalize your graphic designs
This will allow you to apply one last effect on the whole top layer without interfering with your main object.

 

Command + D to unselect your slected area, and (top layer still selected here), use the Filter/Brush Strokes/ Ink Outlines to finish off your work. This will give the background some more cartoon-ish effect, and also will place a nice outline on your lens flare lighting effect.
Use your kids' toys to personalize your graphic designs
Use your kids' toys to personalize your graphic designs

The Final Result

Use your kids' toys to personalize your graphic designs

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Most Recent Posts

Special Recent Posts

Sip: a color picker refreshingly simple indeed

Sip: a color picker refreshingly simple indeed

July 10th, 2014

I've just discovered Sip, a color picker app for Mac users. "Just discovered" since it's been around[...]

Perch – the CMS that does not pollute your web design workflow

Perch - the CMS that does not pollute your web design workflow

July 7th, 2014

I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]

Responsive video code snippet

Responsive video code snippet

June 29th, 2014

More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I[...]

Project Naphta: a nifty extension to play with text embedded in images

Project Naphta: a nifty extension to play with text embedded in images

June 9th, 2014

We've all been there. You want to select a good chunk of text on a website, only to realise you can'[...]

Free photos for your web design projects

Free photos for your web design projects

June 4th, 2014

Nothing beats using a real professional photographer when working on a cool project. You can be the[...]

Comments

Be the first to drop your two cents here!