Circus Poster with the Photoshop Puppet Warp Tool

The following tutorial was created by Graphic Designer Nathan Brown at wegraphics.net
Note:  when he says to use the Control key, you should use the Command key.

How to Create a Vintage Circus Poster with the Photoshop Puppet Warp Tool

I’ve marveled at the Puppet Warp Tool in Photoshop for quite some time, but I’ve never actually used it. Not that I didn’t understand how, it was just that I never had the need. So I decided to sit down and create a concept that would utilize this tool in a cool way, that would be fun and interesting. The result is this tutorial on creating a vintage style circus poster design.

Inspiration

 

I knew I wanted to create something with sort of a vintage circus feel to it, but with more of a strange curiosities or oddities theme. Something a little more sideshow strange. I did a little research and found some old posters, but I knew I wanted to push the envelope a little more… Enter the Puppet Warp Tool. Just the name of this PS feature sounds like something from a sideshow.

Getting Started

With some inspiration found and a concept in mind I started looking for images. I stumbled onto this one which fit the bill for what I had in mind. Right click the image below to copy it and open it in Photoshop.

Step 1

To use the Puppet Warp Tool on the giraffe we’ll need to remove him from the background. I did a very quick selection using the Quick Selection Tool (W) and the Quick Mask Mode.
 






I then copied (Ctrl+C) the giraffe. Next, I expanded the selection by going to (Select | Modify | Expand). I chose 20 pixels.

 

Then to remove the giraffe we need to click (Edit | Fill) and from the windows “Use” drop down choose “Content-Aware”, and click Okay.

The background fills in the missing space from removing the giraffe.

Step 2

Now paste (Ctrl+V) the giraffe from the clipboard onto a new layer. Go ahead and paste a second giraffe as well onto another new layer. Select the second giraffe and choose (Edit | Transform | Flip Horizontal). Now we have two giraffes facing each other.
Lets move them close enough so that their necks cross like the example below. Lets also merge them into one layer (Cmd + E).

Step 3

Now lets apply the puppet warp. With the giraffes layer selected go to (Edit | Puppet Warp). The top tool bar changes with some options.
For Density set the drop down to More Points.

Next begin clicking the giraffes to add points similar to what I have done below.

You’ll be able to edit the giraffes by clicking and dragging these points. Our goal is to get their necks to wind together. Similar to what I’ve done below.

Press enter to render the effect.

Step 4

Now we have our central focus for the poster. At this stage I want to begin establishing the style and look of a vintage circus poster.
First, I want to desaturate the entire image. We’ll do this by adding a new black and white adjustment layer.

Note:  there is not an image showing you the black and white adjustment layer.  Just click that button he's showing you in the above image (looks like a chocolate and vanilla cookie) and choose "black and white."

Now let’s give the image a slight brown tone with a solid fill layer. I used #ab9d8d for the color.

Note:  again, he doesn't show you how to do this.  So, click the cookie thing again, and choose "solid color."  There will be a place to paste the number he gives you.  Click OK, then choose a blending mode (like overlay or something) to get a look close to his.


I also added a Levels adjustment layer with the following settitngs.

And here’s where we are…

Step 5

Now I’m going to drop in a texture for good measure. I grabbed image 1 from the the Subtle Grunge Textures Vol 2 set here at WeGraphics. I placed the texture below my adjustment layers and set the blend mode to Overlay for the following result.

Note:  Here is a link to another texture you can use.  It is a very large texture, so after you paste it, hit Command 0 to see the handles for the entire image and change the size to fit your canvas.

Step 6

Now lets add some background elements. I chose a few vectors from the Ornate Scroll and Frames and Baroque Ornaments vector sets here at WeGraphics.
(Note:  I couldn't get his graphics, so you can choose from the brushes found on the Resources page.)

Step 7

Now we’ll add some typography to complete the layout. I grabbed two fonts, Carnevalee Freakshow for the title and Showguide for the subtitle. I arranged them as follows using a black gradient at the bottom behind the title and a banner from the Vector Ribbons set behind the subtitle.

Note:  You can find a link to a free banner on the Resources page.
Also, also make these changes:
Instead of "Design Resources" just "Design"
Instead of "Wegraphics" use "Photoshop"

Flow Chart Poster Assignment

Basic assignment:
Create a flow chart to represent a song.
Examples:  Hey Jude, Total Eclipse of the Heart

Requirements:

• Approved sketch
• Image size:  13 x 19 inches, 250 dpi
• CMYK

Variation of Basic assignment
(in other words, if you want to make this a REAL Photoshop 2 assignment):
Go Big and use additional graphics
Examples:  How to Lead a Creative Life,  Surviving the Zombie Apocalypse, Are You a Super Hero?

Requirements:

• Approved sketch
• Image size:  13 x 19 inches, 300 dpi
• CMYK
• Any artwork has to be your own or a variation of something you found on the web.  (If the original artist can look at your finished poster and say "Hey, he used my artwork in this," then it isn't a variation, it is copyright infringement.)

Helpful hints:

• There are such things as flow chart brushes and custom shapes.
• Look for fonts that will reflect the theme of your poster.
• When searching song lyrics, don't use the word "lyric."  Search for "words to..."

Song Flow Chart Poster

car coloring pages

content aware fill photos

Skin 2

How to tag your posts

From now on, you need to start tagging your blog posts with tags (words) that describe what they are.
Here's how:
1.

While you're viewing your blog, click "Design" in the top right corner (you have to be logged in to your Google account to see it)


2.

Over on the left, click "Posts"


3.

Click on the little box next to one of your posts.



4.

Then click the dropdown above your posts that looks like a little price tag.



5.

Click "New Label" and make a label called "Classwork."

• Digital Graphics should make a label called "Reviews"

Each time you make a new post, give it a label.  You will have several for "Classwork," but you will have others.  Examples might be "Extra Credit," "Project," "Just for Fun," etc.

• Digital Graphics will have several called "Reviews," but you will have others.  Examples might be "Review the Reviews" "Photos," "Videos," etc.

 6.

Next, over on the left again, click "layout"


 7.

 On your layout, click "Add a Gadget"


8.

Under "Basics" scroll down until you see "Labels"
Click the Plus Sign then click "Save."

9.

Click "Save arrangement" at the top right

10.

Click "View blog" at the top.


Now, when someone goes to your blog and they want to see your latest project, they can just click the project label and it will list all the blog entries you gave that label to.

Feel free to add more gadgets, however, make sure you always keep the Label gadget at the top of the list of gadgets.

Halloween Coloring Pages