Ten steps to creating a poster illustration
with Adobe Photoshop CS6
Dan Carr
set up the final design for both print and web.
Figure 1. The sample project is composed of photographs, typography, and effects.
Step 1: Create a new file at print resolution
Create a new file and get familiar with the Photoshop workspace:
Step 2: Import artwork
You can import photographs, artwork, typographic elements, and 3D objects in Photoshop to use
as building blocks for the design. This is common practice when creating illustrations from
composite images, and it's a great way to quickly create special effects and color themes.
In this step, you'll import two photographs.
Open both of your images (one space objects and one with a space background) and create your
text using the filters so it is original.
Import artwork for your design:
Figure 3. Scale the sunflower (your space image) image to be two-thirds the size of the canvas.
3. Import the sunflower_text.ai file. This file contains text set along a path in Adobe
Illustrator. Position the text above the sunflower.
4. Save the file.
At this point, you've imported the primary graphics for the composition.
Step 3: Work with layers to organize your artwork
Layers are an important component of the Photoshop workspace. They enable you to keep your
content separate so you can edit each element individually. Layers are used to define the stacking
order of the graphics in the image and to lock and hide graphics while working with overlapping
elements. Layers can also be used to apply editable color corrections, filter effects, and masks to
graphics. Photoshop CS6 introduces an improved Layers panel, enabling you to filter large
stacks of layers by type and manipulate multiple layers at once. These improvements enhance
support for drawing vector shapes by adding a new type of layer called a shape layer.
Keeping your content organized with named layers is an important best practice. Notice that the
layers containing the imported images inherit the filenames of the images. In this step, you'll hide
the imported images and add two new layers.
Prepare the layers for drawing:
1. Click the eyeball icon next to each of the image layers in the Layers panel to hide the
graphics.
2. Click the Create A New Layer button at the bottom of the Layers panel (or choose Layer
> New > Layer) to add a new layer. You'll use the buttons at the bottom of the Layers
panel routinely throughout this tutorial. Notice that the panel includes controls for adding
effects, masks, and adjustments as well as adding and removing layers and layer folders.
3. Double-click the new layer's name and rename it Border.
4. Add another new layer and name it Sky. Select the Sky layer and drag it to the bottom of
the layer stack. Layers on the bottom of the stack appear behind other layers.
5. Save the file.
At this point, you've created two empty layers that are ready for artwork (see Figure 4). Take a
moment to get familiar with the controls at the bottom of the Layers panel.
Figure 4. The Layers panel shows the imported graphics plus two new layers.
Step 4: Work with tools to create content and navigate the
design
The tools in Photoshop can be used for a wide range of tasks. For example, you can use the
Pencil and Brush tools along with new erodible brush tips to simulate sketching or painting. Use
the shape tools to create rectangles and ovals, and use the Text tool to create text. Use the
selection tools to select areas by shape or color. Use the Clone, Blur, and Sharpen tools to correct
damaged areas in an image. Use the Eyedropper and Pain Bucket tools to sample and apply
color. And use the Zoom and Hand tools to navigate through your work at high resolution. You
typically use these tools together to control the workspace and see the details of your images.
In this step, you'll add some simple compositional shapes to the illustration.
Draw a background rectangle and outline:
1. Select the Sky layer (your background layer) in the Layers panel.
2. Select the Rectangle tool (press U) located near the bottom of the tool bar. (Be sure to
select the Rectangle Shape tool and not the Rectangular Marquee tool at the top of the
tool bar.) Notice that the Rectangle tool properties appear in the Properties panel. In
Photoshop CS6, you can choose whether the rectangle shape has a fill color, a stroke
(outline) color, or both. Click and drag from the top left of the canvas to the lower right to
draw a rectangle. Notice as you're dragging that the new rich cursor feature shows you
the width and height of the shape. The rectangle should have about a half-inch margin
from the edge of the canvas.
3. Select the Border layer. Draw another rectangle the same size as the first. Set the fill
color to no fill, and set the stroke color to black with a width of 5 (see Figure 5). Notice
that the rectangle shapes look crisp and clean due to the new Snap To Pixel Grid option.
The Snap To Pixel Grid and Align Edges features snap the edge of the shape to pixel
boundaries when you draw or move shapes.
4. Save the file.
Figure 5. The rectangles are the foundation of the design.
Step 5: Work with selections, channels, and masks
Selections are another important concept in Photoshop. Selections enable you to isolate specific
colors or areas within an image so they can be manipulated independently of other parts of the
image. Selections appear as a series of moving dashed lines called marching ants. You'll most
commonly create a selection using the Marquee, Lasso, or Magic Wand tool. When you create a
selection that will be used repeatedly, you can save it in a channel. Channels by default appear as
a black and white representation of the selection shape in the Channels panel.
Masks are another important concept. A mask is a selection applied to an image so that it appears
to crop the image. For example, you can create a selection that isolates a person from the
background and apply the selection as a mask. The result makes the background disappear as if it
were deleted. The best part is that you can turn the mask off to see the entire image again or edit
the mask as needed.
In this step, you'll create a selection, save it in a channel, and load the channel to create a mask.
Remove the background from the photographs using selections and masks:
1. Select the Sunflower layer and click the eyeball icon to show the image.
2. Select the Magic Wand tool (grouped with the Quick Selection tool). Hold down the Shift
key and start clicking the blue areas of the sky to create a selection. Be sure to select as
much of the blue as possible.
3. Choose Select > Inverse to invert the selection so that it defines the area of the flower
instead of the sky. Select the Rectangle Marquee tool, hold down the Alt key, and click
and drag near any areas that you do not want to appear in the selection (see Figure 6).
Figure 6. Isolate the sunflower to create a mask.
4. Choose Select > Refine Edge. In the dialog box, you can use several tools to refine the
edge of the selection, including Contrast, Feather, and Smooth. You can also output the
selection directly to a layer mask.
5. Take a moment to experiment with the Edge Detection and Adjust Edge settings.
6. Change the Output To field to Layer Mask and click OK. Notice that the background of
the sunflower image is masked from view (see Figure 7). Also notice that the
Sunflower_text layer now includes a linked mask. You can click the mask icon on the
layer and open the new Properties panel to modify the mask or show or hide it.
7. Save the file.
Figure 7. The sunflower photograph now has the background masked out.
Step 6: Work with color and color corrections
Working with color and color corrections is a common task in Photoshop. You can sample colors
using the Eyedropper tool, add editable color adjustments to apply corrections and create special
effects, and blend colors across images using blend modes.
In this step, you'll add a gradient color effect to the rectangle on the Sky layer and blend the
cloud image with it using a blend mode.
Create special effects using gradients and blend modes:
1. Select the Sky layer.
2. Select the Rectangle tool. In the Properties panel, click the Fill button and select the
Gradient option at the top of the fly-out panel. This changes the fill from solid blue to a
gradient.
3. Double-click the color box below the left side of the gradient to launch the color picker.
Enter the following RGB values:
o R: 102
o G: 175
o B: 210
4. Click OK to change the left side of the gradient to light blue (see Figure 8).
Figure 8. The new gradient defines the rectangle's fill color.
5. Change the color on right side of the gradient to:
o R: 1
o G: 44
o B: 95
6. Select the Cloud layer and click the eyeball icon to show the image.
7. From the Blend Mode menu at the top of the Layers panel, choose the Overlay layer.
Notice that the cloud image blends with the gradient.
8. Save the file.
At this point, your graphics blend together nicely (see Figure 9).
Figure 9. The photographs appear to have the same monochromatic color adjustment.
Step 7: Modify images with filters
Photoshop is all about special effects. Perhaps the most fun way to create effects is to use filters.
Filters are used to distort a graphic or change how it looks. For example, you can use the Twirl
filter to give an image a twirled look, or you can use the Oil Paint filter to make a photograph
look like a painting.
Tip: Photoshop CS6 introduces the new Mercury Graphics Engine, which provides faster
performance for the new Crop tool, Puppet Warp, Liquify, Adaptive Wide Angle, Lighting
Effects Gallery features, and the new Oil Paint filter.
In this step, you'll experiment with filters to add more special effects to the images.
Add filters to create effects:
1. Select the Sunflower layer (select the image, not the mask).
2. Choose Filters > Oil Paint. You can experiment with the settings or click OK to apply the
effect. Note that the effect applies to the whole layer. You can toggle the effect on and off
as needed.
3. Repeat the process for the cloud image.
4. Save the file.
At this point, the image is complete (see Figure 10).
Figure 10. The completed image uses the Oil Paint filter.
Step 8: Work with typographic elements
You can create simple horizontal and vertical text elements directly in Photoshop using the Text
tools. For more elaborate effects such as text along a path, you would typically create the text
shapes in Adobe Illustrator and then import them to Photoshop for further embellishment.
In this step, you'll stylize the imported typographic element and add supporting text.
Paint the typography using strokes and gradients:
1. Select the Sunflower_text layer to show the text.
2. Click the Add A Layer Style button at the bottom of the Layers panel and choose Drop
Shadow.
3. Update the following settings:
o Distance: 10
o Spread: 15
o Size: 15
o Noise: 25
4. Click OK. Notice that the effect appears on the layer so you can turn it on and off.
5. In the Layer Style dialog box, select the Gradient Overlay option on the left. Click the
gradient color from the Gradient Overlay options to launch the Gradient Editor. Choose
the Orange, Yellow, Orange option from the presets or make your own gradient.
6. Select the Stroke option in the Layer Style pop-up menu. Set the width to 8 and choose
red or brown for the color. Click OK.
7. Select the Text tool again and choose the following attributes:
o Font: Book Antiqua
o Weight: Bold
o Size: 60
o Color: Black
8. Type the text CAFE and place it below the flower image.
9. Right-click the Sunflower_text layer and choose Copy Layer Styles from the context
menu.
10. Right-click the CAFE layer and choose Paste Layer Styles. Notice that all the effects now
appear on that layer.
11. Complete the design with the last bit of text. Select the Text tool and choose the
following attributes:
o Font: Harlow Solid Italic
o Size: 21
o Color: Red or Brown
12. Type the text Open Friday – Tuesday from 9am – 10pm and place it below the CAFE
text. Notice that the text includes en dashes, rather than ordinary hyphens. You can add
en dashes and other ASCII characters on Windows by using Alt-key codes. For en
dashes, press Alt+0150 (Windows) or Shift+Option+hyphen (Mac OS). Save the file.
Tip: You can use the new Character Style and Paragraph Style panels in Photoshop CS6 to save
styles for use between projects.
At this point, you've completed the poster design (see Figure 11).
Figure 11. The typographic elements are painted with strokes and gradients.
Step 9: Add 3D elements for depth
Photoshop CS6 Extended enables you to extrude shapes in 3D. New updates completely
overhaul the 3D workspace, making 3D features more intuitive, fun, and easy to use. This can be
particularly useful when creating text elements that need to pop off the page.
In this step, you'll enhance the typographic element by extruding it.
Use the 3D extrusion feature:
1. Select the Sunflower_text layer and choose 3D > New 3D Extrusion From Selected
Layer. This step switches you to the 3D workspace where you can rotate the text, change
the light direction and shadows, and so on. Click and drag the text to experiment with
placing the text in 3D space.
2. When you're happy with the preview, right-click the Sunflower_text layer and choose
Render to render the object into high quality.
3. Save the file.
At this point, the illustration is complete (see Figure 12).
Figure 12. The extruded text in the 3D workspace.
Tip: Check out Photoshop Dimensions magazine to learn more about working in 3D in
Photoshop CS6 Extended.
Step 10: Publish for print and web
The last step in any Photoshop project is to publish the PSD file to a flattened image format.
You'll keep the PSD file so you can edit as needed, but the original file is not intended for
distribution.
In this step, you'll publish for both print and web.
Publish the PSD file:
1. To publish for print at high resolution, choose File > Save As and choose a non-lossy
format such as TIFF. Name the file and click Save.
2. To publish for the web at low resolution, choose File > Save For Web. Choose an image
format and change the width and height settings. The JPEG format is a good option for
the web. Click Save to publish the image.
That's all there is to it! From here, you should archive the PSD file for future editing and publish
as many variations as needed at 300dpi or less.
Where to go from here
Adobe Photoshop is a powerful tool for simple and complex image editing tasks. New 3D and
video editing features open up new possibilities for just about anyone working in the creative
field. Take some time to explore the 3D workspace features and the video timeline features, and
think about how you can enhance your creative projects using the expressive tools in Photoshop
CS6.