Make a Turn of the Century Vaudeville PosterAdapted from: http://design.tutsplus.com/tutorials/make-a-turn-of-the-century-vaudeville-poster--psd-300

In this tutorial, we'll learn how create a turn-of-the-century Vaudeville poster. This uniquely appealing style of advertisement was popular in the late 1800s and early 1900s. You sir! You madam! Step right up and prepare to be amazed as we transport an image of two friends back in time to create a poster advertisement without compare!

Final Image PreviewBefore we get started, let's take a look at the image we'll be creating.

Step 1: Select Your ImageTo achieve an authentic effect for this poster, we need a portrait-style photograph. The subjects will frequently have a subtle smile, or even a blank stare. It can look a little strange, but there is definitely something quirky and appealing about it!

Step 2: Extract Subjects from the BackgroundJust like you’ve done before using the magic wand tool, lasso, or brush tool. Don’t forget to create a layer mask!!

Step 3: Convert the Image to Black & WhiteWith your subjects safely extracted from the background, we need to remove the color. We're going to paint our own colors by hand later. There are a number of ways to accomplish this step. If you have Photoshop CS3, the new Black & White command under Image > Adjustments > Black & White can do a nice job. Image > Adjustments > Desaturate can do the trick too, or you could even just use one of the image channels depending on what kind of contrast you desire.

Step 4: Separate the SubjectsWe're about to get started on the more involved part of the tutorial, and in order to keep things neat and orderly, we'll want to separate our subjects and work with them on different layers. In my case, I actually want to swap the positions of our portraits, too.

To accomplish this, you can just use the Lasso or Rectangular marquee to select one of the subjects, then cut and paste into a new layer.

Step 5: Create Groups for Each SubjectI'm a big fan of folders and groups in Photoshop. They allow you to keep everything together and make for easy re-arranging of your composition even when you have lots of layers and effects. Let's make a folder for each of our subjects now. Our character names are Carl and Carlyle, so I'll name them accordingly.

Step 6: Begin Hand-Tinting the ImageThis is the most time-consuming part of the project. If you have a pen tablet, this step will become much easier, but it's still going to take a while. If you only have a mouse, prepare for lots of zooming in and careful pixel-painting!

If you are very skilled with the select color range or color replacement tools, that may be a faster way to accomplish this. You could also fill a blank layer with color and use layer masks to hide or reveal the color for blending. But for our purposes, we'll have fun by just coloring right over the original.

You should start by noticing regions of similar color in your subject - in this case we have the Hat, Hat Band, Hair, Face, Lips, Eye Whites, Iris, Glasses, and Shirt. Create a separate layer for each of these color regions within the group you've created for this subject.

For most of these layers, we are going to want to use a blending mode of Color. (The Blending Mode dropdown is located at the top of the layers palette.) Now, we simply choose the color we want to use to tint our subject, and paint over the corresponding

area. The desaturated image underneath will determine the amount of blending, so we retain all of our highlights and shadows from the original image.

Step 7: Continue Hand-Tinting the ImageRepeat this procedure for each color zone. This step is highly subjective, so experiment with opacity, color shade, and blending mode until you achieve an effect you like for each color region. For example, on this particular image I used a Blend Mode of Multiply with Opacity set to 100% for the hat, but I used a Blend Mode of Normal and an Opacity of 46% on the hat-band.

I also changed the eye color to make them pop - eyes are great attention grabbers, especially on posters. For this I used a blend mode of Color on the Iris of the eye, and I used Lighten on the whites.

The colors you choose will depend on your initial image and the effect you want to achieve. In general, we are looking for faded colors that make the image feel aged, but because these old-style posters were illustrations, taking some creative liberty is

encouraged. The aim here is simply to produce something that appeals to you - there is no right or wrong!

Below is an image showing the hand-painted elements without the photograph layer for blending. Turning off the photograph can be a good way to check to make sure that you've covered all the ideas that you need to cover.

Step 8: Convert the Portrait to a Smart ObjectOk! Now we've got a nice, hand-tinted portrait shot. We're starting to accumulate a lot of layers - time to make some smart objects! Right-click on the group holding the layers for your hand-tinted subject, and choose Convert to Smart Object. You can edit the smart object at any time by double-clicking its thumbnail in the layers preview palette.

Step 9: Add Portrait BackgroundsIt was rare to see floating head on these old posters - the subjects were usually enclosed in an elliptical portrait frame that lent an air of distinction as well as further visual weight. For our portrait backdrops we will use the Ellipse tool and clip the character images inside.

To clip one image to another, we place our portrait smart object above the ellipse, then press down the Alt key and click between the smart object and the shape we want to clip to. You'll see the cursor change to indicate that the two layers can clip.

Step 10: Add Some Texture and Depth to the PortraitTo add texture to the image, we clip an old paper texture in below our subject, but inside the ellipse frame. There are tons of free old paper textures out there - grab your favorite!

To give more depth to the image, we add a stroke and inner shadow to the ellipse framing our subject, as well as some radial gradients behind the character. I've added a small drop shadow to the character smart object to make it pop out even more, and a Gaussian Blur Smart filter to obscure any fine details that were visible from the original high-resolution image.

The reason we blur the image here is that the style we are re-creating is a hand-drawn illustrated style. Our source photograph was high-resolution, and too many subtle details were visible. A Gaussian Blur of about one pixel takes care of those nicely, as we begin to achieve the soft look we are after.

Another nice thing about using smart objects is that we can use smart filters. Smart filters apply effects to the image non-destructively, so you can tweak them later if you desire.

Step 11: Add NameplatesThere were no blogs or websites in the Vaudeville era, so the only form of branding for performers was to make sure their names appeared prominently beside their images on the posters. Often the acts would be brothers or sisters, twins, or an entire family. Showing the names, especially last names, helped enforce the connection between the individuals and the show.

The nameplates here are simply rounded rectangles with a subtle stroke. For the nameplate font, we are using Copperplate Gothic Bold. You could probably get even more ornate with the nameplates than I am getting here, but this tutorial already has enough steps!

Step 12: Hand-Tint Our Other CharacterThese old Vaudeville posters often featured multiple performers. Follow the same process as above to create another character portrait.

One way to save time on this step is to use the same color palette, shapes, and nameplates as used for the first character. Just duplicate them, replace the image, color, and change the name as necessary. Convert to a Smart Object when you are done.

Step 13: Convert an Entire Portrait into a Smart ObjectThings are starting to stack up again, and we want to keep everything simple at the top level. So now that we have our full portrait with effects, right-click on the top of this group and convert it to a Smart Object, just like before. Now we have nested smart objects!

Step 14: Begin Composing the PosterNow the hard work is done, and we are ready to start composing the actual poster itself.

Open up a new document with File > New. Select the Preset of U.S. Paper and set the Size to Tabloid. If you want to print your poster, make sure your resolution is 300dpi and your color mode is CMYK. If you're just going to display it online, choose resolution 72dpi and color mode RGB. Drag your portrait Smart Objects into the new document.

Step 15: Add a Colored BackdropIn order to ground our portraits more successfully, we should create a background. Here are two rounded rectangles with large strokes in lighter or darker tints than the main background color. The green rectangle is within the tan one here to create a double-matting effect. I chose colors that went well with the colors in the character's portraits.

Step 16: Add Some TextureIt's starting to look better, but it doesn't feel old enough. We can help that by adding some more old paper textures (everyone should have a collection of these!).

In this case, I'm actually using a combination of three different paper textures - a fibrous one, a wrinkled one, and one with a bit of a strange floral wallpaper print on it. The paper layers are placed on the very top of our layer stack, set with a Blending Mode of Multiply, and is opacity-adjusted to taste. Most textures of this type will require a low opacity, for example 10-30%.

To avoid redistribution conflicts, I have left the high-resolution paper textures out of the final PSD file. You can add your own, or download any number of great paper textures from places like SXC or DeviantArt.

Depending on the color of your paper texture and the desired tint of your final image, you may want to desaturate your paper textures before proceeding. Two of the textures I used actually added a welcome subtle brown tint to the poster, so I did not desaturate

them. The third paper, the wrinkly one, I had to desaturate because it was red and had a negative impact on the image quality.

Step 17: Add Presenter InformationIn the days of Vaudeville, there was almost always a promoter behind the scenes of every big act; a sort of talent agent who built his or her reputation upon the quality of the acts they presented (and they would often travel far and wide to discover increasingly impressive and unusual acts). Information about the promoter or presenter was usually included prominently near the top of the posters as a form of branding.

Here we're using the font Rockwell Extra Bold for the "FUSEBOX THEATRE presents" text. Both text layers have a subtle stroke which helps them stand out.

Step 18: Add an Eye-Catching Show TitleThe title of our show is "Mouth Odyssey" - a bizarre name that speaks to the curiosity-driven marketing of the time. We've also added some text warp to the individual elements to emphasize the sense of strangeness and that things are out of place. That is appropriate here, because our characters are out of place in the current time period.

We're using a font called VonFont for the "Mouth Odyssey" text. This text also has a subtle stroke to help it stand out, as well as a combination of Text Warp effects: Bend is set to +52%, Horizontal Distortion at -37%, and Vertical Distortion of -18%. Of course, these are just the settings I used to achieve the effect I desired. Text warp may or may not be necessary for you - play around with it and see what you come up with!

Step 19: Add a Verbose Show DescriptionThese old posters often had long, wordy descriptions of the show. A far cry from today's oversimplified three word taglines set in Helvetica Bold. This old-style marketing language is designed to draw the reader in with description. Have fun with this part, and don't be afraid to be wordy and go totally over the top with hype! As above, here we are using VonFont with a subtle stroke.

Step 20: Add Show InformationThis is an actual poster for an actual show that Barry and I performed a little while ago. In order to get people to come see the show, we had to add clear information about the show date and time, venue information, and website. Note the visual weight applied to each element here - we first want the viewer to notice when the show is occurring. If the time works for them, then they will continue reading to the Venue, address, and website for more information.

So, the most important information is largest and comes first, then the fonts get smaller as the information gets more specific.

Advertisement

ConclusionAnd now, the moment you've all been waiting for. Their incomparable contortions will warm your mind. Their father-son issues will boggle your heart. Sucked into a time-warp in the year 1900 and now they're here to perform live for you tonight. Behold, those most magnificent purveyors of hilarity and emotion. The world's only fully improvised time traveling Vaudevillian serial drama, Mouth Odyssey!

If you are interested in the story behind Mouth Odyssey - or if you would like to keep track on the storyline of the show as it evolves through December, read more about Mouth Odyssey here, and check out The Mouth Odyssey Time-Travel Log atfuseboxtheatre.com.