Home » Artwork, Colour separations, design, pre press, Vector Graphics

T- shirt design:Creating simplified artwork from a photograph

Submitted by on Wednesday, 14 January 20092 Comments

So you’ve got this idea about taking a favourite snap and converting it to something that can be printed in a minimum of  colours, eh?
Plus you’d like to give the subject of your photo a different background just to jazz it up.

Sounds interesting, but just how are you going to do it?

OK, come on, back into the studio.

butterfly

Butterflies, they’re beautiful. On anything.
T shirts included, so here’s my subject for the present little demonstration.

Actually, this is a really good image to use because it will reduce to monochrome exceptionally well. It’s practically black and white already and this is the first thing to consider – how your original image will convert to print.
A photo with little contrast, especially one that’s a little murky, may prove unsuccessful. You don’t want an indistinct blob, do you?
You won’t get the right kind of looks. Believe me, I used to wear one and I became shunned socially.

Anyway, the first step is to cut out the butterfly from the background.
You got photoshop? OK, open the photo, zoom in and grab the lasso tool. I’m setting the feather to 1 px (top, left of screen) – this gives a small fade to the edge of the lasso selection which reduces the sharp angularity of the cut out and I’m using the polygonal lasso tool. With this, you click anywhere on the edge of the butterfly and simply move along that edge, clicking as you go. The selection line will pay out behind your cursor in straight lines between each click. When you get to curly bits of the butterfly, space your clicks closer together to go accurately around the bends.

butterfly-being-lassoed

You can see here the lasso line being taken around the edge of the butterfly. Note that I’ve come away from the wee beast a little in the region of its antennae. With something as fine as these, it’s often better to go in later with the eraser tool and clean up.

When you arrive at your starting point, your selection will be complete and will be shown with a moving dotted line.

Copy the selection – Ctrl+C, or Edit/Copy.

Hit Ctrl+N to open a new document, A3 should be big enough, and paste the selection into it. It should  now be on its own layer, above the background layer.

butterfly-cut-out-pasted

The first thing to do with it is to clean up the edges where necessary. I’m using the eraser.

butterfly-being-erased

Choose a brush size for the eraser which is appropriate to the area that you’re working on.
If you click and hold, then hold down shift, then move along the edge of the antenna then click again, you will see that area is erased in a straight line between the click points. Moving on and clicking with the shift still held down like this will result in nice, clean- edged erasure instead of the wobbly line you get when you’ve drunk a whole bottle of Wild Turkey the night before and you’ve got the shakes bad.

Your butterfly is clean.

Now it must have all the colour sucked away from it like jelly tots up a Dyson.

butterfly-being-shad-highed

Various ways, various ways; but what works well here is to first go image/adjustments/shadow & highlight and take the shadows amount down and the mid tone contrast up. This effectively makes the image starker. Follow this by going image/adjustments/brightness & contrast and slide the contrast up to max.
That’ll do – it’s almost completely B&W.

Now, just because we can, let’s sit this stunner on a red background and make it a jaw dropper.

butterfly-cleaned-up-on-red

Ow!

Here’s how it’s done:

Create a new layer – Ctrl+Shift+N.
Open up the layers palette and look for the new layer. This should be called Layer 2. Grab it anywhere in the grey area and drag it downwards so that it lies between Layer 1 and the Background layer. When we fill it with red, it will now be behind the butterfly.
Go to the colour selection box at the bottom of the toolbar and double click inside of it. A large colour picker will appear. Pick out your red colour and click OK. The selection box will now show red. Ensuring that your new layer is still selected, go Edit/Fill/Foreground colour and your new layer will be filled with vibrancy.

butterfly-on-red-with-layers-colour-box

Here are  shown the layers palette and the colour selection box (circled in green).

The design is good as it is. Alternatively, in order to give it perfectly sharp edges and to clean it up still further,  it could be be given the vector treatment.  I would take it into Illustrator and trace it.

butterfly-being-traced

Settings for a good, clear trace.

There you go.

2 Comments »

  • Roy Nottage said:

    This is great info to know, but the software you are using is very expensive, what open source (free) software would you recommend for someone who wants to try this at home? Particularly as an alternative to Illustrator?

    Roy Nottage´s last blog post..What is the Uncanny Valley?

  • Steve said:

    We can suggest inkscape which can be found and downloaded freely at http://www.inkscape.org we are unfamiliar with the software ourselves and would be interested in any feedback.

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.