Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

Tutorial Details

• Program: Adobe Photoshop CS4
• Difficulty: Intermediate
• Estimated Completion Time: 2-3 hours

I’m a fan of horror, thriller and crime investigation novels, which are quite often linked with dirty and grungy covers. Two of my favorite things combined! This is the beauty we’ll be working towards:

Step 1 – Setting Up Your .PSD file

A book cover, in most cases (unless it’s an eBook) is going to go to press, which means we have to set it up correctly. There are hundreds of different book sizes, but a few that are commonly used for fiction books. One of them is 108×177mm (front cover only). Spines change width obviously depending on the length of the book, but in this case we’re going to use 26mm, giving us a total dimension of 243×180mm including a 3mm bleed.

If you’re setting up your document for a real book cover, whatever you do, do not guess the width of the spine! There’s a simple formula which can determine that width for you: you have to take the number of pages and divide that number by your text papers PPI (Pages Per Inch), which all depends on the weight (GSM) of your paper. You should be able to get that from your quote sheet, or ask your printers for it! You can use this awesome spine width calculator if you can’t be bothered to work it out yourself!

Head over to Photoshop and set up a new document; make sure your width is set to 243mm and your height is set to 180mm. Make the resolution 300 pixels/inch and set the color mode to CMYK. Hit OK!

Make sure your rulers are showing by going to View > Rulers, or press Command + R. A lot of people don’t use rulers very much, but they can come in very handy for dragging out guides later on in the project. Go to View > New Guide… and with Horizontal selected insert 3mm into the Position box. Do the same again, this time inserting 177mm into the position box. Repeat the process using measurements 3mm and 240mm, this time with the Vertical checkbox ticked. That’s our 3mm bleed added to the document – our design will go right up to the edge of the document, but for those that don’t know, when the document goes to print, 3mm from each side of the document will be chopped off.

This means the printers can assure you that there will be no white gaps on any of your documents so long as you set up the file correctly. Also, with any print project, not just this one, always keep your text at least a few millimeters away from the bleed guide, this is just to be on the safe side incase a few of your prints aren’t aligned correctly when being cut down to size. You might find it easier to create another set of guides for this, or you can do what I do and use your eyes as a guide.

It’s time to add some guides for our spine. Go to View > New Guide… and with the Vertical checkbox ticked, insert 108mm and hit OK. Repeat the last step using the measurement 134mm. Remember we’re working in millimeters, not centimeters or pixels. You should now have a nicely aligned .PSD document. Always remember to save your documents regularly!

Step 2 – Choosing a Color Scheme and Adding Some Initial Background Texture

Crime, Horror and Thriller books are often associated with grungy covers, which means this tutorial is going to use a huge handful of textures, blending modes and brushes.

I’m going to go with a blood red color scheme mixed with some warm browns, dark oranges and a pure white which will be used for the majority of the typography in our design – what color scheme you choose is entirely up to you, I suggest you play around with your design for as long as you have and see what you can come up with; after all that is the best way to learn and pick up new techniques.

Select a warm blood red/orange (#db2900) and using the Paint Bucket Tool fill your background layer. We’re going to add some texture to our design straight away. Make a new layer and fill it with white. Go to Filter > Noise > Add Noise… In the new window, insert 100% into the Amount field, and make sure Gaussian and Monochromatic are both selected. Hit OK.

With the new layer still selected, drag it down to the New Layer symbol at the bottom of the palette – this will duplicate the layer. Repeat the step again. Set all three layers to Overlay and using a large, soft Eraser, get rid of some of the areas on each layer. Name each layer sensibly so you can find them later; I named mine “Noise 1″, “Noise 2″ and “Noise 3.”

Already our cover is looking quite grungy, and so far we’ve only used one built in Photoshop Filter! Head over to Textur.es and download this lovely grunge texture. Insert the texture into your document by going to File > Place. Rotate it so the grungier side of the texture is on your front cover, and upscale it to the same size as your document. The easiest way to do this is by going to Edit > Free Transform or by pressing Command + T and then dragging the corners of the texture out whilst holding the Shift Key to keep everything in proportion.

Change the textures layer to Overlay, and change the layer name to “Texture 1.” Drag the layer down to the New Layer icon at the bottom of the palette to duplicate the layer. Rotate it by 90 degrees, and align it next to the spine (this should be easy if you have Snap to Guides selected – if not, go to View > Snap To > Guides). Grab the same soft Eraser we had a minute ago and erase a few areas of our duplicated layer. Rename the layer to “Texture 2.”

The joy of using textures in your work is that you can create a stunning piece of work with a very minimal amount of time, effort and resources. One texture can go a long, long way.

I’ve just realized our whole design is turning a little bit orange – not so much that blood red I was hoping for! The overlays on the Noise layers seem to have lightened our red up so much that it’s turned to orange. To fix this, make a new layer above our original background and fill it with a dark red/brown (#5c0000). Rename the layer to Background 2 and drop the Opacity to 60%.

Step 3 – Making Different Areas Look Different

When it comes to books, there are three different areas. The front covers main purpose is to advertise the book – it needs to stand out. The spine is to make the book easy to find on a shelf full of others. The back cover is to present a blurb – meaning it should be easy to read. So far, our front, spine and back look virtually the same. We need to fix that!

Duplicate your layer “Texture 2″ and select the Paint Bucket Tool. With the same dark red/brown we selected earlier, click somewhere on your duplicated layer to fill some areas. Rename the layer to “Texture Blobs” or something of your own choice. Your image should currently look like something below.

Select a large, soft Eraser, and erase out some of the inner areas of your “Texture Blobs” layer. Change the Blending Mode to Multiply, and lower the opacity to something you think is suitable for your piece; I used 20%. This should give us a dark, grungy front cover that fades into the background as it reaches the center of the page, which is where we will be featuring an object.

Make a New Layer and name it “Front Border.” We’ll be making some more darker areas where, later on, we will be presenting some text with a Spot UV overlay. Select the Rectangular Marquee Tool and select the front of your cover up to the spine.

Select a large, soft brush and change your color to a dark grey or black. In your marquee selection, paint a dark area at the top and bottom of your front cover – you could even paint a very small streak of black up the sides of your cover. Use the Eraser with a soft brush to thin out any areas you felt you applied too thick.

Change the Opacity of the layer to about 25%. Repeat the last two instructions again, this time making the border even thinner – remember to make a new layer! Name it “Front Border 2.” I also used a different color – a dark red/brown (#6f2009).

You should have more subtle grunge area at the top and bottom of your front cover now, which is suitable to present some nice typography later on in the tutorial.

Now we’re going to work on the spine of our book cover. The spine should be very subtle and easy to read, especially as we don’t have too much space to work with. Make a New Layer and name it “Spine Background.” Select the Rectangular Marquee Tool and select the spine – this should be relatively easy because, with Snap to Guides selected, it should automatically connect with our spine guides. Grab a soft brush and using the same color we used in the last instruction, paint the bottom and top of your spine, leaving a small area in the middle. Lower the Opacity to 70% just so a little grunge shows through!

With the front cover and spine virtually complete (we will probably add a little more background texture later on!), it’s time to move on to the back cover. The back cover will have a lot of text and important information on it, so it’s important we don’t show too much texture and keep it pretty plain. We will need to display: a blurb, a couple of one-line reviews, a price, a barcode, an ISBN number and maybe an authors web address and a designers web address.

This step is pretty much the same as the last few: make a new layer and name it “Back Cover Background.” With the Rectangular Marquee Tool, select the back cover. Select the Brush Tool and choose a large, soft brush – again using the same color we used in the previous step. Brush over the back cover, leaving a small, low opacity area in the middle.

Lower the opacity of the layer to 85% and then make another New Layer called “Back Cover Background 2.” Lower the size of your brush a little (I lowered mine to 1000px) and choose pure black as your color. Repeat the same step as before, this time not going as far into the center of the back cover as we did previously. Change the layers Blending Mode to Overlay and drop the Opacity to 50%.

With your marquee selection still active, fill it with pure black on a new layer named “Back Cover Black Overlay.” Lower the opacity to 15%. This just takes a little color out of our back cover which will make it easier to present readable text.

Our back cover, compared to our spine, seems a little dark. To fix this we’re going to make our spine a little darker. Reselect the spine with the Rectangular Marquee Tool. Make a New Layer and name it “Spine Dark Background.” With the same brush as we used in the previous instruction, brush over the left half of the spine using a color from the back cover (use the Eyedropper Tool to select a color). You should have something look similar to the screenshot below:

Lower the Opacity of the new layer to 70% – you’re spine should now merge in a little more between the back and front covers.

Step 4 – Organizing Our Document!

I often take a few minutes throughout a project to tidy up my mess – it doesn’t take long when we’ve been renaming our layers throughout the length of the tutorial, but now we have a total of 16 layers it’s time to put them into some folders.

Make a total of four new folders by clicking on the New Group icon at the bottom of the layers palette. Rename them to: “Main Background,” “Front Cover Background,” “Spine Background” and “Back Cover Background.” Move all the related layers into the appropriate groups.

This was a bit of a short step, but plays a vital part in keep our document organized. If you’re not to sure what you’re doing when it comes to pre-press and you send in a Photoshop document, having a well-named layered and grouped document really helps out and ultimately means the turnaround time for your print job will probably be quicker – we all win!

Step 5 – The Typography

It’s time to add some typography! As this project isn’t actually for a real book cover, I’m going to make some names up. I’m going to use my name, “Callum Chapman” as the author, “BOOK COVER TUTS+” as the book title, “A Tuts+ Print Tutorial” as a mini description of the book, and a section of text from Tuts+ about page as the blurb. On top of all this, I’ll be making up some mini one-line reviews by several made up magazines/newspapers.

Select the Type Tool and drag a text box over your front cover. Type in your authors name, in my case I used “CALLUM CHAPMAN.” I used two separate lines for “CALLUM” and “CHAPMAN.” Select your text and change to a suitable font – I’m going to use Myriad Pro for the majority of text on my cover as it has a lot of styles such as condensed, semibold, oblique, bold, and a combination of them all together. When designing for print, try to stay clear from Faux Bold and Italic as in the end they don’t always come out as great as they could.

Change the size of the authors first name to 45pt and the size of the authors surname to 60pt – this is the time to make sure your text box is lined up with the bleed on the right-hand side of the document and the right side of your spine. Open up the Character Palette by going to Window > Character. From here we can change the leading and tracking, which is always important when it comes to typography – never bypass it! Change the Leading to 55pt – this will bring your authors surname closer to the bottom of your authors first name, but not too close! If you’ve used a different typeface or size to me, you might need to play round with these settings as they differ depending on the font and size used.

With your text layer still selected, open up the Blending Options by going to Layer > Layer Style > Blending Options. Alternatively you could Alt-Click on the Text Layer and select Blending Options from the menu.

We want to add various styles to make our text really pop out from the cover. We’ll be using the following styles: Drop Shadow, Inner Shadow, Bevel and Emboss and Stroke. The screenshots below show the different settings I used for each individual style:

Create a new layer beneath our authors name and call it “Author Shadow.” Grab the Brush Tool, and with a medium-sized soft brush, paint a black shadowed beneath the authors name.

Change the layers Blending Mode to Saturation, this will turn everything below it to greyscale. Lower the layers Opacity to 40%. The point of this step is to just make it that little bit easier to read, and makes the text pop out even more!

Repeat the previous steps to add a book title. I’m using the following text in the same text area on separate lines: “A Tuts+ Print Tutorial” and “BOOK COVER TUTS+.”

With your mini description selected, change the size of the font to 15pt. Select your mini description and book title together and change the Leading in the Character Palette to 30pt. Select your mini description and change the color to an off-white/red – I used #ffdada.

Make a new layer beneath your book title layer, and using the same technique we used earlier, brush in a black shadowed area with a small, soft brush. Remember to rename your layer – I called mine “Title Shadow.”

Go to Filter > Blur > Motion Blur. Change the Angle to 90 and the distance to 250. To preview the different Distances before applying the blur, make sure the preview box is checked. Hit OK to apply the blur to our shadow.

Go to Filter > Noise > Add Noise. Change the Amount to 25, the Distribution to Gaussian and make sure Monochromatic is unchecked. Hit OK.

Change the layers Blending Mode to Overlay and its Opacity to 60%.

Using similar styles and fonts, add a few short reviews beneath the book title. I’m going to use “‘A top-notch book!’ – PSD Times” and “‘Fantastically gripping!’ – Vector Mag.” I’m going to use Bold Condensed Myriad Pro for the review, and Condensed Myriad Pro for the reviewers name.

Step 6: The Back Cover

It’s time for the Blurb on the back page. Head over to the Envato homepage and copy the brief introduction to the Tuts+ Network. Select the Text Tool in your Book Cover document and make a new text box on the back cover; make sure it’s center! Paste the introduction in to the text box. Back over at Envato, copy and paste the information under the ‘About Envato’ heading, head back to your document and paste this in, too. At the top of your text box, insert a line that will be used as an opening sentence. I’m going to use: ‘You’re about to learn how to make your very own book cover!’

It’s time to style up our back page! We want our opening line to stand out from the rest of the blurb. To do this, I’m going to use the same color we used for the mini description above the book title we used on the front cover (#ffdada). Make the selection bold and change the font size to 15pt.

I’m pretty happy with how the blurb is looking already! Change your main two paragraphs font size to 12pt. The only problem we now have is some words are being separated and split in to two using a ‘-’ symbol. To fix this, hit enter to send the word to the next line – repeat this step until there are no more unwanted hyphens.

Make sure the top of your blurb is lined up with the top of the authors name on the front page. To do this, drag a new guide down from the ruler and line it up with the top of the authors name. If they aren’t lined up, use the cursor keys on your keyboard to nudge your blurb up or down until they are aligned correctly.

Add a couple more reviews on our back cover. The easiest and quickest way to do this is to duplicate the two reviews from earlier and rearrange the new layers on the back cover beneath our blurb. With the Text Tool selected, click on the text and change the words to something different. To make sure the two reviews are centered your can drag the text box out to the very edge of our guidelines, like I have done below:

Our book cover is starting to look like a real book cover! It’s time to add some information the shops are going to require, such as a barcode, a ISBN number, a price and some other information. Unfortunately, barcodes can’t be read by scanners on busy backgrounds, so we’re going to have to use a white block. Select the Rectangular Marquee Tool and make a selection beneath our two reviews. With the Paint Bucket Tool, fill the selection with white on a new layer called “ISBN Background.”

Reselect the Rectangular Marquee Tool and highlight a area at the bottom of our white ISBN background. Fill the selection with the off-white color we have been using throughout the tutorial.

Grab the Text Tool and rough out some text. I’m going to use: “USD 9.99,” “GBP 5.99″ and “EU 6.99,” “Cover Design by Callum Chapman,” “Be sure to visit PSDTuts+ website at http://psd.tutsplus.com/,” and “ISBN 000-0-0000-0000-0.” Style your text – you know what to do! Make sure you use pure black, though! Instead of finding an actual barcode, just use the Rectangular Marquee Tool to produce a rectangle to use as a placeholder.

Step 7: Adding Some Interest with a Stock Photo

We’ve got two things left: The spine, and an image on the front cover. We’re going to leave the spine until the last minute – we’ll simply be duplicating, resizing and rearranging some items from the front cover to produce our spines content. Head over to sxc.hu and download this great free stock photo of an old ammo box. Once you’ve downloaded the stock photo, place it into your document twice.

Grab the Magic Wand Tool and click on the white areas of both images – hit the delete key to remove the background. If you find the Magic Wand Tool is selecting areas of the stock photo that you don’t want to remove, try lowering the Tolerance in the Magic Wand Tools options at the top of the screen.

Rename your two layers to “Ammo Box 1″ and “Ammo Box 2.” With “Ammo Box 1″ selected, go to Edit > Free Transform or press Command+T to resize the photo. Whilst holding the shift key, drag the image right out of proportion.

Change the Blending Mode of the layer to Overlay, and using the Eraser remove some of the outer areas of the image – for example the part that is overlapping the spine.

Go to Edit > Free Transform or press Command + T on the “Ammo Box 2″ layer and scale it up a little – don’t worry if it’s a little pixelated – we’re going for a grunge look and pixelation all adds to it! Change the layers Blending Mode to Hard Light. Duplicate the layer twice: Lower the first ones Opacity to 30%, and the second ones Opacity to 20%. With the second duplicated ammo box still selected, hit the Shift + Cursor Down key to move the selection down – move it a little to the right and rotate it by going to Edit > Free Transform or by pressing Command + T and dragging the corners round.

Step 8: The Spine

That’s our front cover complete! We now have to move onto the spine. Locate your authors name layer and your book titles layer – select them both and drag them down to the ‘Create New Layer’ icon at the bottom of the Layers Palette to duplicate them. Rearrange your two layers so that they’re at the top of the Layers Palette. Arrange them so that they’re sitting next to each other, as seen in the screenshot below:

With the authors name layer selected, go to Edit > Free Transform or press Command + T and scale the selection down whilst holding the Shift Key to keep it in proportion. Rotate the selection whilst still in Transform Mode and arrange it neatly into the spine.

Repeat the previous instruction again with your book title layer. Once the text is on it’s side, grab the Text Tool and edit it. Delete the mini description, and spread “Book Cover Tuts+” across two lines by pressing the enter key to send any words after it onto a new line. Line the new text up with the author name.

Hopefully you’ve taken my advice and have already put our stock photo layers into a group. If not, do that now! Once that has been done, duplicate the group, go to Edit > Free Transform or hit Command + T, resize to a suitable size and rotate the selection round. Rearrange the image so it nicely fits in the center of the spine.

That’s it, we’re all done! If you’re following this tutorial for a real project, you will need to replace your barcode placeholder with a real barcode, as well as setting the file up ready for print – all printers require different settings, so it’s always best to speak to them first!

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

Before Getting Started

A couple of things before getting started.

For this tutorial you must have the last version of Photoshop, CS4 Extended. Besides you need to have a good Graphic Card since we’re going to work with several 3D layers at the same time, if you don’t have one you may experience some kind of lag on your computer. This isn’t a basic tutorial, so I’ll skip some basic explanations like how to create a Layer Mask, or how to create a Gradient Fill Layer.

You’ll need to download this picture of a splashing milk bowl. And this awesome twitter icon set from my friend Gopal Raju.

Step 1 – Setting up the Document

First of all create a new Photoshop Document 800 pixels by 1120 pixels, 72dpi, and set to RGB. Then create a new Gradient Fill Layer named "Gradient." I’m using these colors: #F20000 – #8E0000 anyway feel free to change them.

Add the Milk Bowl

Step 2 – Extract the Image from its Background

Paste the splashing milk bowl into a new layer named "Splash." Next we need to get rid of the black background, for this go to Select > Color Range, sample the black background and set the Fuzziness value to around 85, then click OK to commit the selection. Now Expand the resultant selection 1px and create a Quick Mask or a Layer Mask hiding the Black background. Finally flip the image horizontally and place it at the bottom right of the document.

Step 3 – Whitening the Milk

In the picture the milk looks a little bit pink, to make it white just add a Hue/Saturation Adjustment Layer, select Reds on the colors selector and set the Lightness value to +100, ensure the clipping mask option is enabled on the Adjustments Panel in order to apply the adjustment only to one layer. In this case the "Splash" layer. We will leave the bowl as is for awhile, it’s time to create the cereal loops. Finally add both layers, "Splash" and the Adjustment into a folder named "Bowl."

Render the Cereal Loops

Step 4 – Create a 3D Shape from a Layer

Here comes the fun, we’ll start creating the cereal loops using some 3D layers. First, create a new layer named "Loop" and fill it with some color. I’m using the Rectangular Marquee tool and the Paint Bucket to fill it with this color: #FF363E.

Go to Window > 3D to show the 3D Panel. Now go to 3D > New Shape From Layer > Donut to automatically create a 3D Layer named "Loop." Leave it as is and go to the next step.

Step 5 – 3D Panel Overview

Before we move forward you’ll need to feel comfortable with the 3D panel. All the 3D objects are inside a container named Scene, each Scene may have several 3D objects that can be Meshes with its respective Textures or Lights. You can put as many objects as you want into a Scene.

You can Filter the objects by clicking on any of the four buttons on top of the panel. Below there are the Scene options, there you will be able to change the Render Preset, Anti-Aliasing, Global Ambient Color (this one is very important in this tutorial) and select the texture where you will be painting on (we will see that shortly). Finally at the bottom of the panel you can toggle the Plane and Lights view on/off or add a new light, and of course the Delete button. Feel free to play with this panel before going to the next step.

Step 6 – Change Ambient Color and Show the Ground Plane

Our loop looks a little bit dark even though we create it from a pink layer, that’s because the Global Ambient Color is Black by default; click on the color box to change it into a dark red color (#7E0001). Now the loop looks pretty good, but there is so much left to do.

Click on the Toggle Plane button to show the plane as a reference, you’ll notice the plane perspective is almost the same as the bowl perspective, which is very convenient for the composition and lighting so we will leave everything as is.

Step 7 – Transform the Mesh View

Following, click on the Mesh button to work only with the "Donut" object (See image 1 below). In the options panel there are several transform options related to this mesh. First we’ll need to rotate the loop by selecting the Rotate button on the Mesh Tools Panel; just drag the cursor over the 3D object to rotate it, as shown in image 2 below.

Following, Roll the mesh a little bit if you need to. Then drag the mesh a little bit up, using the Drag button in the Mesh Panel (image 4), and finally slide the mesh a little bit inside the space by dragging the Slide cursor as shown in image 5 below, and then hide the Plane View.

At this point you should have something like the last image below. This step is important because we’ll repeat the 3D transform several times shortly. Feel free to practice with the Mesh options before moving forward. Remember, Photoshop isn’t 3D modeling software, so if you want to edit the mesh itself you will need other software.

Step 8 – Paint Over the Texture Layers

Now it is time to edit the textures a little bit. Select Paint On: Diffuse in the 3D options, then Select the Brush Tool and using this color #FFC6CA or something similar, chose a 100px soft brush (Opacity and Flow 50%) and paint directly over the 3D mesh. Rotate the mesh as much as you need in order to cover the entire surface of the object.

Notice that there’s a Layer named "Loop" under Textures – Diffuse in the Layers Panel, Double-Click on it to open a .psb file containing a plain view of the texture. We’ll work on that layer in the next step.

Step 9 – Working on the Diffuse Texture

On the .psb file, select the "Loop" Layer (this layer name may vary depending on your previous editing), and apply a Patter Overlay Effect to it, I chose a Rock Pattern named "Granite" built in Photoshop, but feel free to try with different textures. To keep the layer color, set the Effect’s Blending Mode to Soft Light. Finally save the .psb file, close it, go back to the main document and see how the texture looks now.

Step 10 – Bumping

Now we’ll make the surface a little bit irregular. In the 3D options panel set Paint On: Bump, select an irregular black Brush, and start paining.

Since the Bump texture is not created yet, you will see an alert about it, just hit OK on it. Then just start painting over the 3D object, using black as foreground will emboss the object, otherwise using white as the foreground will bevel the object, play with both colors until you feel happy with the texture. It’s very important to have the entire surface texturized and not only the front view (we will see why shortly).

If is easier for you, Double-click on the "Bump" texture layer in the Layer Panel and paint the bump texture over the .psb file as shows the bottom of the image below, you can use the Clone Tool for that purpose. Once you feel happy with the result, close the .psb file and go back to the main document.

Step 11 – Glossiness

To finish the texturing process we’ll add a Glossiness texture layer. Select Paint On: Glossiness in the 3D panel and using any Brush paint a little invisible white spot somewhere over the 3D layer. The important thing in this step is to switch to the Materials View, and change the Shininess Value from 40% to 80% in order to make the gloss less intense.

You can paint over the texture layer as well just like in the previous steps, but this time use a light color, white will be OK.

The loop is not finished yet, we’ll need further edits on it to make it look more real.

More Flavors

Step 12 – Duplicate the Loop

Now we’ll duplicate the loop in order to create several flavors. Select the Move Tool (V), then while holding the Alt Key select the 3D layer and drag it to duplicate it. Hide the original "Loop" 3D layer and select the copy, by the way I name it "Loop 2." Show the 3D panel, switch to Mesh view and use the Rotate Tool to rotate the new mesh in order to make it look different.

Step 13 – Change the Loop’s Colors

Double-click over the Diffuse Texture of the "Loop 2" layer in the Layers Panel, you will see the texture that we’ve created in Step 9. In order to easily change the color we will use a Hue/Saturation Adjustment Layer as shown below. Save the changes, close the .psb file and see how it looks.

Step 14 – Change the Glossiness Color

Following, double-click over the "Loop 2" layer’s Glossiness texture. You’ll see the color of the texture just as we left it in Step 11. We’ll change its color by adding a new Hue/Saturation Adjustment Layer. The final color is up to you, but try to obtain almost the same color tone as the previous step. Save the texture file and see how it looks in the main document.

Step 15 – Change Ambient Light

Finally, to complete the new flavor, change the Global Ambient light of the new 3D Scene to a more appropriate tone, in this case the following color: #01261E.

Step 16 – Do it All Again

Repeat the Steps from 12 to 15 to create different flavors of cereal loops, the colors are entirely up to you. Remember keep your layers organized, I created a Folder named "3D Loops" and four sub folders each one containing its respective loop.

Step 17 – More and More Loops

Since each loop is inside a folder named with its respective color, we will duplicate and rotate each loop several times in order to create many of them. This time I’m creating four copies for each color.

Rasterize and Liquify

Step 18 – Rasterize the Loops

Create a copy of the entire "3D Loops" folder and hide the original, just in case you need to use any 3D layers later in the process. Now rasterize every single 3D layer in the "3D Loops" copy folder. Do this by Right-clicking a 3D Layer and selecting the Rasterize 3D option.

Step 19 – Liquify

Since we’ve got all our 3D layers rasterized, we will distort them a little bit to make the loop’s borders irregular. Select any of the "Loop" layers and go to Filter > Liquify. In the Liquify window, select the Forward Warp Tool, set 100 as the Brush Size and 25 as the Brush Density and push the loop’s edges inside and outside, as shown below. Repeat this step with every single rasterized loop in your document.

Mix the Cereal Loops with the Milk Bowl

Step 20 – Resize and Distribute the Loops

Now that we have a handful of nice cereal loops we’re going to put them into the milk bowl. First of all, duplicate the folder containing the rasterized loops, hide the original (by the way I named it "3D loops raster big") and name the copy something like "3D loops raster small." Next resize the entire folder in order to make the loops really small. Now use the Move Tool to distribute the loops randomly.

Step 21 – Placing the Loops

Grab any loop and place it somewhere over the bowl, try to cover a milk splash with it. Then select the mentioned loop and add a Layer Mask > Reveal All. Select the mask and using a small black brush, hide some of the loop’s areas with the milk splash. Repeat this step with all the "Loop" layers. This is maybe the most difficult part of the process, since you’ll need to re-order the Loops distribution several times.

Step 22 – Some Shadows

Create a new Layer named "Shadows" above "3d Loops raster small" folder. There paint some shadows using a small black brush (use the brush settings shown below). Besides you can use an irregular brush (like a chalk brush) and add some irregular shadows over the loops.

Step 23 – More Splashes!

As a final touch, merge the "Bowl" folder (look at Step 3) and use the Clone Tool to duplicate some areas of the splashing milk into a new Layer above all the others named "More Milk." This is easy, grab the Clone Tool, select the rasterized "Bowl" layer and hold down the Alt key, then click somewhere over the milk splashes as the clone source. Ensure the Sample value in the Options Panel is Current Layer, then select the "More milk" layer and start painting anywhere. Finally use a small Eraser to delete the extra milk. This is only one way to create more milk splashes.

Another way to do it (my personal favorite) is to grab the Selection Tool, select a portion of the milk splashes, copy, paste and delete the undesired areas. Finally, put the "3D loops raster small" folder, and the “Bowl” folder into a new Folder and name it "Bowl Final."

Add a Mascot

Step 24 – Add it into the Scene

Merge the "Bowl Final" folder (I always duplicate the folder, hide the original and merge the copy in case I need to roll back). Then look over the web for a nice mascot for our brand new cereal box, or draw one yourself. I’m using one of these nice birds of the twitter icon set, since the author has released the .PNG source file (you can open it with Fireworks) I increased its size a lot. Paste it just behind the milk bowl.

Step 25 – Add Some Background Details

Following we will add some background details, in this step I’m adding a White oval above the mascot. Select and copy a part of the bird’s wing and paste it above the oval, then duplicate the wing, turn down its Lightness and Opacity, then place it behind the original in order to create a subtle shadow.

Step 26 – Some Layer Styles

Continue with the background details, select the White Oval and add to it a Gradient Overlay (yellow tones), and a Stroke effect. Repeat this with a smaller oval but this time with red tones. Remember: keep your layers organized.

Step 27 – Brighten the Background

Create a white circle above the red gradient from Step One. Apply a Gaussian Blur to it and change its Blending Mode to Overlay, and its Opacity to 75% or so. Now you have a brighter background.

Step 28 – Add a Shadow to the Milk Bowl

Duplicate the “bowl” layer, name it "Bowl shadow" and turn down its Lighting value to -100 using Hue/Saturation Adjustments. Delete the shadow outside of the background ovals and turn down its Opacity to 40%.

Finally the Product Name

Step 29 – Type the Name

Type a sticky cereal name, use a bold and narrow font with all caps. Using the Text Warp options distort it a little bit.

Step 30 – Convert the Type into a Shape and Distort it

Select the “Type” layer and go to Layer > Type > Convert to Shape in order to convert the text into a vector mask. Then use the Direct Selection Tool (A) to distort the paths a little bit, this way you can add a comic style to any kind of typography.

Step 31 – Delete the O’s

Using the Path Selection Tool (A) delete the “O” letters.

Step 33 – Add New O’s

Remember the "3D loops raster big" folder of the Step 20? It’s time to use it again, make that folder visible, duplicate it and put it above everything else. Then select four loops, delete the rest, and place each one of the four loops as an “O” in the word.

Step 34 – Style the O’s

We’ll add a simple Drop Shadow style to each loop in the title.

Step 35 – Style the Text

A simple Drop Shadow and soft Bevel effects will be enough to increase the visual impact of the name. As always, it’s up to you to create more advanced effects or work with more detailed and complex layer styles. Finally put all the logo related layers into a folder named "Logo."

Final Touches

Step 36 – More Effects on the Logo

Duplicate the "Logo" folder, rasterize it and apply a Gaussian Blur over the Copy, then Command-click over the blurred layer in the Layers Panel to create a selection around the text. Expand the Selection by 25 pixels. Then grab the Marquee Tool, Option-click over the selection and choose Make Work Path…, set the Tolerance value to 5 pixels and hit OK. Finally, go to Layer > Vector Mask > Current Path and fill the masked layer with a reference color like red. Name this layer "LogoBG."

Step 37 – More Layer Styles

I’m using a red Gradient Overlay, a yellow Stroke and a black Drop Shadow for the "LogoBG" layer. Feel free to try something different if you want to. Place the "Logo" folder behind the "Mascot" layer, I added a Drop Shadow to the bird as well.

Conclusion

And we’re finished! I hope you liked this tutorial and found it useful. Feel free to try it with different colors, styles and create your own cereal box!

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.

Final Image Preview

And here it is; the poster we’re about to do! I could have just used a dark forest photo for the background, but where’s the fun in that? This tutorial is not about finding the shortest route to an end, rather striking the balance between how real you want the setting to look, and cinematic/artistic at the same time. You want it be compelling and truthful, but also control the viewers attention and amount of information they’re given. You don’t want to spoil the movie, but entice someone to come see it.

Take a look at the poster we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

Video Tutorial

Our video editor Gavin Steele has created this video tutorial to compliment this text + image tutorial.

Step 1

Let’s start with the background. I used the largest available version of this photo, but just about any foggy forest image will do. Typically, we’d be working on an A4 or A3 canvas, but for the sake of spending less money on resources, we’ll create a scaled down version of an A4 canvas. Not only that, but we’re going to create a large background image that we will ultimately crop into a final movie poster. So for the first part, create a 1680 pixels by 1819 pixels at 300 dpi and paste in the forest image. Make a similar layout.

Step 2

We’ll now add a series of Adjustment Layers to change the appearance of the photo. You can find them under Layer > New Adjustment Layer. The first one is a Hue/Saturation with Saturation set to -54.

Step 3

Next, add a Curves Adjustment Layer. Drag the curve as seen in the screenshot below.

Step 4

Now add a Selective Color Adjustment Layer. From the drop-down menu, select Blacks. Use the settings shown below.

Step 5

In this part, you need to establish a light source somewhere on the canvas. It’s a good idea to add a dot where it will be so that you have a better idea of where the highlights and shadows appear.

From now on you’re going to need a pen tablet. You can also do this with a mouse, but the pressure sensitivity makes all the difference. Use the Burn Tool (O) with Exposure set on 15% to darken the darkened portions of the tree trunks. See this before and after image for reference.

Step 6

Do this for each of the trees. Remember that the trees aren’t perfectly flat, so keep the burn pattern "bumpy."

Step 7

Use the same settings but with a much larger brush size to darken the bottom of the photo.

Step 8

Now add highlights on the trees with the Dodge Tool (O). The larger highlight should be on the side of the light source. Then a second, thinner one consits in light that gets reflected from the surrounding objects and environment.

Step 9

Once you’ve finished all the highlights and shadows, use a soft brush to draw the light source as a faint, cyan glow.

Step 10

Erase portions of the glow that cover the more up-front trees.

Step 11

From the layer menu, click on the Add Layer Mask icon. Press D on your keyboard, then go to Filter > Render > Clouds. Then go to Filter > Render Difference Clouds. This will hide portions of the glow in an irregular, cloud-like manner. You can see this process in more detail at Step 17.

Step 12

On a separate layer, paint a stronger cyan glow.

Step 13

Lastly, paint a smaller white glow on a separate layer. If you make it too intense, lower the Opacity of the layer.

Step 14

The next job is to add some reflected light on nearby trees. Start by painting thin strips of color on a trunk.

Step 15

Use the Smudge Tool (R) to soften up the glow.

Step 16

Smudge it until it looks like in the screenshot below.

Step 17

Just like in Step 11, add a Layer Mask to the layer by clicking on the Add Layer Mask icon. Make sure you have the Layer Mask selected by clicking on its icon, then go to Filter > Render Clouds. To make the clouds have more contrast and better defined edges, go to Filter > Render > Difference Clouds.

Step 18

Repeat the process for all the nearby trees. The closer the light, the stronger the glow.

Step 19

Now create a new blank layer above all the other ones and create a few very faint spots on the canvas with the same cyan.

Step 20

Again, use a Clouds Layer Mask to hide portions of it.

Step 21

Now we’re going to create an anamorphic lens flare. People are really quick to criticise the use of lens flares in digital work, and due to constant overuse, they’re easy to hate. But the fact is that they do exist, and can be a great asset to a design. Rather joining a hate trend and condemming this effect, I suggest you study it and find ways to do it right!

Anamorphic lens flares appear from artifical light sources (such as fog lights) which are obviosuly very appropriate if you’re trying to create the illusion that someone is being chased by people in the night. It also adds contrast and a focal point to the design, thus becoming a key element in telling the story of this poster.

Use a small, soft brush on low Opacity, hold Shift and draw a light streak from side to side that converges with the light source.

Step 22

Use the Pen Tool (P) in Path Mode to draw the new location for a secondary light streak.

Step 23

Choose the appropriate brush settings and with the Pen Tool active, right-click and go to Stroke Path. In the following menu, choose Brush and check the Simulate Pressure box, then press OK.

Step 24

Create three of these with different widths. You determine the width by choosing different brush sizes before stroking the path. You should create these three on the same layer.

Step 25

Command-click on the layer icon to make a selection of it or go to Select > Load Selection > OK.

Step 26

Use a large, soft brush on a light cyan color to give this detail a highlight.

Step 27

Add a few more thin lines at different sections of this beam of light.

Step 28

Next, on a separate layer add a simple dot of about 20 px with a hard edged brush. The go to Filter > Blur > Motion Blur and blur it until it looks like the one below.

Step 29

Now add a darker and larger beam over the other ones.

Step 30

Make a selection of it and give it a highlight too.

Step 31

Finally, add a soft, white glow in the center and to the side of the tree. Give it a low Opacity.

Step 32

Now we’re going to alter the scene again, so that the light appears more realistic. On top of all the layers from the Layer Menu, create a Selective Color Adjustment Layer. Find the Cyans and use these settings, and don’t press OK just yet.

Step 34

Find the Greens too, boost everything to max and press OK.

Step 35

Add a Channel Mixer Adjustment Layer and from the drop-down menu, select “Black & White with Green Filter.” Press OK and set the layer’s Blending Mode to Color Dodge and Opacity to 70%.

Step 36

On top of these, add another Selective Color Adjustment Layer and change the Cyans to the settings shown below.

Step 37

Add one more Channel Mixer on top, as shown below.

Step 38

And a final one (for now) – Levels Adjustment Layer.

Step 39

Your scene should now have a similar appearance to the one shown below.

Step 40

Now we’re going to enhance the appearnce of the trees by giving them very thin reflective areas. See the three trees on the left? Thy all have a 2 px soft line drawn on the right side. Do the same for your trees with a dark cyan color.

Step 41

Repeat this process for all the trees. The farther the tree, the less prominent the line.

Step 42

Now on a separate layer, draw some pure white ones. Keep these shorter though, and fewer.

Step 43

You’ll now need a medium size version of this photo. Position it in the composition.

Step 44

There are multiple ways to cut out this person, but the safest and most flexible way I use is to paint a Mask Layer with a tablet. Below is a black and white view of my Mask. Cut out your character as well, so that he only holds a branch in his hand.

Step 45

Position him underneath the Lens Flare details, and slightly to the right of the tree.

Step 46

We’ll now match the character’s darkest values to the scene by adding a Selective Color Adjustment Layer. Once you’ve dragged the Black value to -3, press OK and make it a Clipping Mask (Alt + Command + G).

Step 47

Next up is making the shadows. Create a new blank layer and draw shadows cast by the bright light with a near black color.

Step 48

It’s finally time to create the actual poster! Like I said before, an A4 poster means a lot of pixels. You can use smaller resources to keep your budget down by creating a new document that keeps the proportion of an A4 format, but at a smaller resolution: 1024 px by 1449 px at 300 ppi. Copy a merged version of the scene (Command + Shift + C) and paste it in the new document. Position it as shown below.

Step 49

A crucial part of any movie poster is the movie title and its typface. I used what I think is a good reflection of the concept. The tall faces of ITC Franklin Gothic Book Extra Compressed complete the idea of being illusive, sharp and cunning. The flat look is there to balance the piece and make sure that the poster does not become overly photoshopped. The simple white appearance provides contrast for an otherwise dark poster.

It’s what I think is appropriate, but what would you use? Speaking of overly used stuff, I give you "Trajan!" I’m really curious to see what typeface you would find fit, let me know in the comments what you think would work better.

Step 50

For a more cinematic look though, I decided to horizontally Motion Blur a duplicated version of the font.

Step 51

After you give it a Motion Blur, you’ll notice that the top edges are pretty harsh. Soften them up a bit by adding a smaller blur on the vertical axis.

Step 52

Then just set the layer’s Blending Mode to Pin Light and play around with the Opacity.

Step 53

A typical appearnce of text on movie posters is very large tracking, or spaces between the letters of each word. You know how poster sometimes have the phrase: from the creator of this-and-that movie? Well I gave this design a humorous slant on that.

Step 54

Another common phrase is based on actual events, or something like that. Below is this true tale.

Step 55

And finally, a few other details like the movie website, release date (in this case the day I finished the poster – wouldn’t it have been cool for me to do this on the date of 09.09.09?) and movie producer logo.

Step 56

On the top layer, add one last (I promise) Adjustment Layer: a Channel Mixer where you slightly change the Blue values.

Step 57

To create the branches, we’ll use a very cool brush set that you can find here. Paint a few branches on a layer that’s underneath the Channel Mixer.

Step 58

Erase portions that you want to appear hidden behind the letters.

Step 59

Now use a 2 px white brush again to add the reflections. I think the branches are a lovely touch of detail, without compromising the message. After all, it would be strange for him to be hold the only thin branch in the forest, right?

Step 60

A final effect is a partial Motion Blur on the edges that is just right for giving a sense of urgency and motion. Press Q and with a large Black & White gradient, drag a radial gradient from the center to just a bit past one of the lower corners of the canvas.

Step 61

Make sure you have the background layer active and go to Filter > Blur > Motion Blur. Once you’ve done this, do the same for the branches, but add a bit more distance.

Step 62

And as a final touch, paint a few shadows for those branches over the letters. You can do that by painting with black in a new blank layer, making it a clipping mask for the letters and changing their Opacity to a low 15%.

Final Result

And the poster is now finished! I’d love to see your own movie posters, so be sure to put it in our Flickr group if you come up with something!

Here is a secondary version I made after the first one, in desktop format.

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below or a larger version here.

Video Tutorial

Our video editor Gavin Steele has created this video tutorial to compliment this text + image tutorial.

Step 1

Open Photoshop and create a new document 1200px width by 1600px height, with an RGB color, and 72dpi. Then go to Create a new fill or adjustment layer in the Layers palette, select the Gradient Option and set the colors from #7D0000 to #480000. Set the angle value to 17 – 20º and hit OK.

Step 2

Now, add a texture over the background, grab this image and paste it into a new layer named "Texture" above the Gradient layer. Then, change its blending mode to Linear Burn.

Step 3

Select the "Texture" layer. Go to Layer > Layer Mask > Hide All. After selecting the layer mask, grab the Gradient Tool (G), set the gradient colors to Black to White (#000000 – #FFFFFF) and set the Reflected Gradient Option on the top panel.

Fill the layer mask with a slightly oblique Gradient (see image below) and use a big Black Brush (Opacity and Flow at 50%) to hide a little bit of the "Texture" layer’s bottom right.

Step 4

Now, increase the contrast of the "Texture" layer by adjusting its Levels (Command + L), as shown below.

Step 5

Let’s add one of the main objects in the design, this guy looking at his watch. Paste the image into a new layer named "man," and extract his shape from the white background.

Step 6

Select the "man" layer and chose the Move Tool (V), and ensure the Show Transform Controls is checked in the Options Panel. Next, Command-click the top-left corner and drag it a little bit to the left, then repeat that but with the right corner this time. This will create a perspective illusion, like if we were looking at the guy from above. Then grab the Burn Tool (O) and darken a little bit of the guy’s right side.

Step 7

I’ll try this experimental way to increase the man’s color and contrast. Duplicate the “man” Layer, and go to Filter > Other > High pass, set the Radius to 10px, and hit OK. Now change "man copy" Blending mode to Overlay. Then, merge both "man" layers and Dodge the left side of the resultant layer a little bit.

Step 8

Now, we’ll add a projected shadow. Duplicate the new "man" layer, put the copy behind the original, and name it "Shadow." Move it a little bit to the right.

Using the Free Transform options, Command-click the middle-top control point of the "Shadow" layer and move it to the right, then play with the transform options to make the shadow look like the image below. Next, go to the Hue/Saturation window (Command + U) and turn down the "Shadow" layer’s Lightness to -100.

Step 9

Select the "Shadow" layer, then go to Filter > Blur > Gaussian Blur and set the radius to 5px. Then duplicate the "Shadow" layer, make the copy bigger than the original and reduce its Opacity to 25%. Finally, change the "Shadow" layer’s Opacity to 75% and merge both.

Step 10

Select the Eraser Tool (E) and delete the extra shadow in front of the man’s feet.

Step 11

Next, we’ll add the main text layer. Using the Type Tool, type the word "TIME" using Arial Black for the typeface. Set it to a Size of 300pt and place it below the "Shadow" layer.

Select the Type Tool and on the Options panel press Create Warped Text. In the Dialog, set the Style as Arc, Bend to 0%, Horizontal Distortion to -60% and vertical Distortion at 0%. I’m using some guides by the way to mark the horizontal middle point.

Step 12

Next we’ll skew the text just a little bit. Using the Move Tool select the "Time" text layer, and activate the Free Transform Options (Command + T), then Command-click the left-middle Transform Point, and move it a little bit down. Now Command-click the middle-right point, but this time move it up a little bit. Try to get something like the image below. Once you’re happy with the result, hit the Return key or Commit the transformation from the Options Panel.

Step 13

Let’s work a bit more on the "Time" text layer. Add the following Layer Styles: a Gradient Overlay (#8D6009 to #522300) with an Angle of 36º. And a full, big Drop Shadow (set the values shown below).

Step 14

Add another text layer, type the words "So Little" and place it above the "Time" layer. Warp it using the Arc Style and set Horizontal Distortion to -50, commit the distortion, and hit Command + T to show the Free Transform Options. Command-click the middle-right control point and move it a little bit down. Try to match the text baseline with the "Time" layer’s top line. Then, Commit the transform.

Step 15

Next, copy the "Time"Layer Styles (Alt-click or Right-click over the layer miniature > Copy Layer Style). Select the "so little" layer and paste the layer style (Alt-click or Right-click over the layer miniature > Paste Layer Style). Then, Double-click over the Gradient Overlay style of the "so little" layer, and adjust the gradient colors to: #3A0303 – #2A0000. Hit OK, and see how it looks.

It’s very important to have a kind of dark color on the gradients because we’ll light them by using a texture forward. To finish this step, grab the two layers and put them in a Group named "text." A quick way of do it is to Click over the "Time" layer, then Shift-click the "so little" layer to select both, and hit Command + G to group them.

Step 16

Now we’ll create the good old text reflection. Convert the "Text" folder into a Smart Object (Right-click over the Folder miniature and select Convert to Smart Object). Then Duplicate the Smart Object, you can use the Move Tool, select the "Text" Smart Object, hold down the Alt key and drag a copy. Select the Copy and go to Edit > Transform > Flip Vertical.

Step 17

Select the "text copy" layer, hit Command + T to enable the free transform tools, click over the right middle handler and move it up. Try to match the baselines. Finally, move the "text copy" Smart Object below the "text" Object in the Layers Palette.

Step 18

Select the "Text copy" layer and go to Layer > Layer Mask > Hide All. Then Fill the layer mask with a diagonal Black to White gradient, as shown below.

Step 19

Here comes the light, grab this picture of a nice piece of grunge paper and paste it into a new layer above everything and name it "Top texture."

Hit Command + U to adjust the Hue / Saturation values and turn down the Saturation amount to -100. Now change the "Top texture" Blending Mode to Overlay. Lock the "Top texture" layer by clicking in the tiny cross arrows of the Layers Palette; if you don’t do that, you’ll be unable to click/select any other layer below it.

Step 20

Duplicate the "man" layer. Since the man isn’t matching the colors of the background, nor the text, we must adjust his colors. Select the original "man" layer and go to Layer > New Adjustment Layer > Photo Filter, select Warming Filter 85 from Filter options, and hit OK. You’ll see that the Adjustment layers are applied to the entire document. You must create a clipping mask to apply the adjustment just for the "man" layer. You can do this easily by Alt-clicking in the line between the Adjustment Layer and "man" layer.

Step 21

Select the "man copy" layer and move it some pixels to the right. Now go to Hue/Saturation options (Command + U) and turn down the lightness to -100.

Step 22

Next, we’ll blur the black silhouette. Select the "man copy" layer and go to Filter > Blur > Motion Blur, set the distance to 800 pixels and the angle to 20º, then hit OK.

Now, duplicate the "man copy" layer two times, you must have something like the bottom of the image below. Then select the three "man copy X" layers (Shift-click the layer miniatures to select) and merge them by pressing Command + E. Name the resultant layer "shadow blurred."

Step 23

Move the "shadow blurred" layer above the Photo Filter layer. Then use a big, soft Eraser (E) with Opacity and Flow set to 50% to delete the shadow over the man´s face and body.

Step 24

Following, we’ll reveal a little bit of the paper texture of Steps 2 and 3. Select the "Texture" layer in the layers palette, and click over the Layer Mask Miniature.

Select the Brush Tool (B), and use a big, soft brush with a Hardness of 0%, Opacity and Flow at 50%, and set the foreground color to White (#FFFFFF). Now paint some spots below the man’s feet.

Step 25

Put both "Texture" and "Gradient fill" layers into a folder named "Background." Duplicate the folder and Merge the copy. Always leave a copy of the first layers in case you’ll need to rollback later.

Step 26

Now we’ll cut a piece of the background. Use the Lasso Tool to make an irregular selection. Then go to Layer > Layer Mask > Reveal All. In the layer mask, use the Paint Bucket Tool (G) to fill the selection with Black (#000000). I’m adding a temporary black fill layer below the "Background" layer to see how it looks.

Step 27

Tired yet?… neither am I. now open this picture, select just the newspaper and paste it into a new Folder below the "Background" layer and name it "Newspaper."

Place one more copy of the newspaper, but rotate it some degrees to make it look different than the first instance. Use the Burn Tool (O) to Burn some parts of the paper sheets, making some areas darker. Now Merge the "Newspaper" folder (Command + E).

Step 28

Since the paper’s colors aren’t matching the scene, go to Layer > New Adjustment Layer > Photo Filter to adjust them. Select a Color Filter (#E4AD04) with a Density of 66%. Apply it just to the "Newspapers" layer by creating a Clipping Mask (Alt-clicking between both layers).

Step 29

Now we’ll create a torn effect on the paper. First, hold the Alt key and Click the Layer mask of "Background" layer, then use the Magic Wand Tool (W) to select only the black area of the mask.

Click over the background layer again to make it visible once more. Then, go to Select > Modify > Expand and expand it by 6 pixels. Click over the "Background" Layer miniature and move to the next step.

Step 30

Press Command + U to show the Hue/Saturation options, turn down the selection’s Saturation to -100 and hit OK. You’ll see that the expanded selection is gray now. Select the Dodge Tool (O) and use an irregular Brush (Chalk is perfect), set the Exposure to 25%, and apply the Dodge to the gray border randomly.

Step 31

To increase the realism of the background papers, we’ll add some shadows over the "Newspapers" layer. Create a new layer above the Newspaper’s Photo Filter and name it "Shadows."

Use a big Black Brush (B) with a size of 200px, Hardness of 0%, and Opacity and Flow set to 50%, and paint some shadows near the torn paper. You can play with the Brush sizes to improve the effect.

Step 32

Open this picture, extract the paper shape and paste it into a new layer named "paper" above the "Top texture" layer. Place the piece of paper at the bottom right of our design.

Step 33

Now, we’ll create the illusion of this paper coming from behind the torn paper. Alt-click the "Background" layer’s Layer Mask. Then use the Magic Wand Tool to select just the Black area, and click the "paper" layer miniature to select it.

Next, grab the Lasso Tool, hold down the Shift Key to add the selection to the existing one, then make a selection covering the entire paper shape. Finally, invert the Selection (Command + Shift + I) and Delete it.

Step 34

Let’s add some shadows. Create a new Layer above the "paper" layer and name it "shadows." Put both into a new Group named "Paper." Then using a big Soft Brush, paint some shadows at the bottom. Repeat the previous Selection steps (Step 33) in order to delete the paper’s extra shadow.

Step 35

Now create a new layer below the "paper" layer, name it "shadows 2," and paint some black shadows behind the paper to create a pop effect.

The shadow of the paper is intended to be flipped if you compare it with the man’s shadow, just because this is a constructivist inspired composite, and I wanted to create the illusion that the man is part of the background paper sheet.

Step 36

We’re close to being finished. Select the "paper" layer and adjust its Saturation by -25. Then, in the Layers Palette, grab the entire "Paper" and Drag it just above the "Background" layer.

Step 37

Using an irregular Brush, Dodge the "paper" borders just a little bit to create a soft torn effect.

Step 38

Create a new layer named "so much to do" and use a small Brush to draft some irregular text on it. I’m using my tablet for this, but you can either use your mouse or any hand written Font.

Conclusion

Here we’ve got the final piece. I hope you liked this one and don’t hesitate asking questions if you encounter some confusing or overwhelming steps. Have fun!

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

Introduction

This is a practical guide on how to design a simple brochure from scratch using only Photoshop. I’m doing it without using InDesign templates, nor Illustrator, since there are many people who don’t have that software, or don’t know how to use it. If you’re a student looking to print a Brochure in your InkJet Printer, this just might be the right tutorial for you.

Part One – Setting Up the Work Document

Step 1 – Chose the Folding Type

There are several things we need to consider before starting to design a brochure: the size, shape, and folding type besides the concept itself. Generally, we should start with pen and paper – literally. It’s a good idea to grab a piece of paper and start looking for the best way to fold it, anyway at the end you’ll have only two printable sides, that means, two Photoshop documents, one for the front side, and another for the back side.

This time I’ll show you how to design a three-fold brochure. Below is a quick draft of the folding guide. From here and forward, we’ll name each print area a "Face," so we have “Face 1,” “Face 2,” “Face 3″… until “Face 6.”

Step 2 – Drafting

It isn’t hard to imagine a design once the folding type is chosen. Once you’ve folded your piece of paper, draw something over it and see how it looks. This is the most creative step, so feel free to do whatever you want.

In the following example, I’ve used my tablet to draw something for you (did the same on paper actually). This forms the basic guidelines of the design and some of the graphic ideas. Drafting will help you to see where you’ll put the content of your brochure and if the layout will help the reader find the info quickly, besides it’s a good way to keep your info ordered. E.g. in my draft you can see how I placed the "Contact us" text in field number 2 (see the previous graphic), so when the brochure stays folded, the reader will still be able to read the title of the brochure and the contact info as a quick reference.

Side I

Step 3 – Setting Up the Work Document

Let the design begin! This time I’ll work with a standard 11 by 8,5 inches document. Open Photoshop and hit Command + N to create a new Document. For print design, the document settings are very important, so take care with the following values. Set the Resolution value to 300 pixels per inch, Color mode to CMYK color. It’s a good idea, before starting to design anything to calibrate your monitor color with the printer color, but that’s another subject, so you can leave the Color Profile as is.

Once you created the document, (you can name it "brochure – front"), show the Rulers by going to View > Rulers or hitting Command + R. Also set the ruler units as Inches, do it by Alt-clicking over the ruler and selecting Inches in the options menu. You must enable the Show Guides options by going to View > Show > Guides or hitting the default shortcut Command + Semi-Colon key.

Step 4 – Main Area Bounds

We must define the bounds of our valid print area or "Main area" it means 8,5 x 11 inches. For this just draw four Guides on each one of the document sides. Those Guides aren’t printable lines, they’re just references for you to keep your design ordered.

You can show them and hide them anytime by going to View > Show > Guides. To draw a guide, just click on the ruler, either Horizontal or Vertical, and drag the Guide, then place it where you want.

Step 5 – Increase the Document Size

Once you have the four guides placed, go to Image > Canvas Size and add an inch to both Width and Height values, that means, 12 by 9,5 inches. Besides, check if the anchor point is right in the middle. Hit OK and you’ll see the white background is 0,5 inches bigger on every side.

Step 6 – Bleed

Now we’ll add a 0,25 inches Bleed. Draw 4 guides over 1/4 inch before the previous guides. This is very important since any background image or color must be draw inside the bleeding bounds.

Step 7 – Security Border

Even if our cutting process is perfect, there’re still a little area we must leave without any important text or image inside the printable space. We’ll add a Security margin, a border without any element, or a space between the margin and the design, you can call it Padding if you’re more familiar with web design.

Drag four guides 1/4 inch after the "Main area" guides on each side of the document, this is just a suggestion. You can make it bigger or smaller, it’s up to you. By the end you must have something like the last of the images below.

Step 8 – Create Column Guides

Now we need to create the column guides, since this brochure has three equals columns creating three content areas. There are several ways to add those guides, one of them is to grab the calculator and divide the width of the paper by three (11 / 3 = 3,6666), kinda hard right? One of my favorite tricks to create several columns with the same width in both web and print design is to use some temporal shapes.

Start drawing a Rectangle (U), use the guides, start on top-left on the corner of the "Main area" guides intersection, and drag the rectangle until you reach the bottom "Main area" guide.

The width of this temporal shape isn’t important, just try to make it a little narrow. Then, change the tool to the Move Tool (V) and select the first rectangle, ensure the Show Transform Controls option in the Options Panel is checked and then duplicate the rectangle; you can do it by Alt-clicking while you drag the selected vector shape.

Place the copy just next to the previous rectangle with first rectangle’s right side touching the second rectangle’s left side. It’s really easy actually. I’m changing the color of the copy for graphic purposes (See the image below).

Duplicate a third rectangle and place it next the second one, as shown. Once you have the three rectangles ready, ensure there’s no space between and there’s no overlapping. Select the three rectangles, then in the Layers Palette (Hold the Shift key and click on every layer miniature) Go to the middle right Transform Control and expand the three rectangles until reach the right "Main area" guide.

This transform process will expand every rectangle in the same proportion. Next, just select the middle rectangle using the Move Tool and use the transform bounds as a limit for two new Guides for the columns. Finally, delete the rectangles.

Step 9 – Folding Security Margin

As a final step on the guides process, add the 1/4 inch Security margin guide next to the Column Guides. This is very important since the folding always uses 2-3 millimeters of the print area, and it’s crucial you do not have any graphic object on that area.

At this point you must have a perfect bunch of guides to work within. It’s a great time to save your work, also you can save it as a template for further projects.

Step 10 – Background

Let’s add a background color. Of course you must use CMYK values to find the perfect color. Double-click over the Foreground color in the Tools Bar and select your background color.

I’m using a subtle combination of Yellow 15% and Plain Black 10%. Now draw a rectangle from the Top-Left corner to the Bottom-Right Corner of the Bleed Guides, by default the fill of that Vector Rectangle is the Foreground color. It’s very important to add the background including the bleeding margin.

Step 11 – Trim Guides

Now we’ll add some custom trim guides to let us know where to cut and where to fold. For this, select the foreground color as a 100% Black color. Select the Line Tool (Click and hold over the rectangle tool until you’ve got more options, there select the Line tool).

Draw some lines just over the "Main area" guides. Until you reach the bleed border (look at the images below), draw a straight line, just hold the Shift key while you’re drawing the line. Draw those trim lines over the four corners and over the Column guides. You can show and hide the guides as many times as you need by clicking Command + Semi-Colon key.

Step 12

Put all the trim lines into a Group named "Trim Guides."

Part Two – Design

Step 13 – Add a texture background

Since we’re designing in Photoshop, why not textures? The cool feature of easily adding textures and blending layers is one of the strengths of Photoshop. We’ll use this image as a background texture, in order to give this design a dirt and old style.

Paste the image into the document in a new layer named "BG Texture" and using the Move Tool (V) and the Free Transform Options, place it exactly inside the Bleed Guides, just like the Rectangle of the previous steps. Once you’ve placed it, use the Clone Tool to fix the imperfections, like the blue ink lines of the stock picture. Finally change the texture Blending Mode to Multiply and its Opacity to 40%.

IMPORTANT: Changing the layer’s Blending Mode is different on CMYK color than RGB color. RGB color uses the Light to mix the layers, CMYK mode uses the Ink percentage to mix them. The popular Blending Modes like Multiply, are based on light mixing using mathematical formulas over the RGB color code. The result will become strongly different depending the color mode.

Below there is an example of a simple Multiply Blending Mode on both RGB and CMYK color modes. Even if there are almost no alteration on Cyan, Magenta and Yellow, the Red, Blue and Green colors shows a huge difference with the RGB ones. Anyway, there are no rich black color resulting from the blending mode on CMYK as it does on RGB.

An easy way to fix this issue is work your complex Blending Mode editing on a RGB document, and once you’ve finish it, convert the color mode to CMYK by going to Image > Mode > CMYK color and flatten all the layers, but that isn’t perfect at all, you will probably still have loss of Saturation and Brightness when you change the mode.

Step 14 – Add a Long Stripe

Now we’ll start the design itself. Based on my sketch, I’ll start drawing a long rectangle all across the page. Use any foreground color because we’ll add several Layer Effects to make it look nice.

• Start adding a Gradient Overlay using the colors described below (dark red to red). You can either use the Color Picker, use a Pantone color or Type the values directly into the CMYK fields. I suggest you the last option.
• Add a lighter Red 10px Stroke.
• And finally a big Drop Shadow. Drop Shadow uses a Plain Black color by default in CMYK mode, that means C=0%, M=0%, Y=0%, and K=100%.

Hit OK and see how it looks.

Step 15 – Texturing the Stripe

Hit Command + A to Select All, on the Layers Palette select the "BG Texture" layer and copy ( Command + C ) the selection. Paste it into a new layer above the previous step "Stripe" layer and transform the texture a little bit by stretching its height. Name the layer "Stripe Texture."

Command-click over the "Stripe" Vector Mask miniature and go to Select > Inverse to inverse the selection. Then delete the extra texture leaving just a piece over the stripe. Next, change the "Stripe Texture" Blending mode to Linear Burn. As you can see, we’ve got a nice texture over the stripe, now Group both "Stripe" and "Stripe Texture" layers into a Folder named just “Stripe.”

Step 16 – Rotate the Stripe

I decided to not use the standard vertical 90º align, instead I’ll create two little variation angles of 15º and 5º and rotate the brochure objects according to those angles.

First, grab the Move Tool (V) and select the "Stripe" folder. Now using the Free Transform controls rotate the design to -15º. You can hold the Shift key to increase/decrease the rotation angle on intervals of 15 degrees.

Once you set up, hit return to commit the transform and place the stripe wherever you want. I’ll use a reference intersection point between the bottom border of the stripe and the "Main Area" right guide. Also I created a guide just in the vertical middle.

Finally, we’ll add a custom detail. Since I’ve rotated the angle of the stripe (if you take a look at the angle of the Gradient Overlay, on the "Stripe" layer styles) it stills on 90º; that’s why the left side looks darker than the right side of the stripe. You can increase or decrease that angle to make the gradient looks good. I’m setting the Gradient Overlay angle to 100º.

Step 17 – Add a Second Stripe

Select the "Stripe Folder" using the Move Tool. With the Alt Key pressed, drag the Folder to duplicate it. Then rotate the new folder to make it horizontal again.

We’ll need to make this Stripe Gradient darker, so, change the colors of the Gradient Overlay Effect as shown below. Also, stretch the height of the new folder a little bit.

Step 18 – Rotate the Second Stripe

Rotate the "Stripe copy" just a little bit, to -5º. You can type the angle value into the angle box in the Transform Tool properties panel. Once you’ve rotated the stripe, place it just a few millimeters below the first one (see the image below). Commit all the transforming and move forward.

Align Center (Optional)

As I want to add a wrap effect with those stripes on the back side, it’s very important to put them aligned at horizontal center. It’s really simple actually, just hit Command + A to select all, select the Move Tool (V) and then click on the "Stripe" folder in the layers palette.

You’ll see the alignment options in the tool options panel. Click on Align Horizontal Center. Hit Command + D to deselect the previous selection. Repeat this operation with the "Stripe copy" folder.

Step 19 – The Ribbon

Now we’ll add a Yellow Ribbon in order to have an impressive graphic detail on the front side of the brochure. Create a new Group between the "Stripe" and "Stripe copy" Folders and name it "Ribbon." Inside it, create a new yellow Vector rectangle not much wider, just as shown below. The color isn’t important right now.

To create the ribbon, draw a temporary vertical guide in the middle of the rectangle. Select the vector mask in the Layer Palette and from the Tools Bar chose the Add Anchor Point Tool. Click and hold the Pent Tool button, using that tool click once at the bottom-center to create a little anchor point on the rectangle.

Now switch the tool to the Convert Point Tool (click and hold the Pen Tool button) and click once over the previous anchor point to delete the curve handles. Next, from the Tool Bar, select the Direct Selection Tool (Click and hold over the Path Selection Tool) and select the new anchor point. Now use the cursor to move the point some millimeters up. Now you’ve got a ribbon. Take care that the ribbon is inside the brochure’s Face 1 bounds, including the folding security margin.

Step 20 – Ribbon Layer Styles

Next, add a Gradient Overlay (dark yellow to yellow) style to the "Ribbon" layer using the values shown below. Also, add a 5 pixels Stroke using the color shown below.

Step 21 – Ribbon Shadow

We’ll add a shadow to the Ribbon; you can lift it with a simple drop shadow if you want to, but this time I’ll add an advanced shadow because I’ll distort the Ribbon to make it pop.

Duplicate the Ribbon layer and Rasterize the layer, you can do it quickly by creating a new blank layer above or below the copy, select both and hit Command + E to merge them and name the resultant layer "Ribbon Shadow."

Move the shadow layer some millimeters to the right. Then Apply a plain black Color Overlay Layer Style to the shadow. Following, go to Filter > Blur > Gaussian Blur and set the Radius to 10 pixels and hit OK. You’ll see the blurred layer doesn’t look good, so, change the "Ribbon Shadow" Blending Mode to Overlay and Opacity to 75%.

Step 22 – Finishing the Ribbon

To add the final details to our ribbon, we’ll need to distort it a little bit. Use the Move Tool to select the Ribbon and activate the Free Transform controls from the Options Menu. Look for Warp button and click it.

Use the cursor to Warp the ribbon just a little bit, as shown below. Hit Return to commit the warping. Finally, use the same technique as Step 15 to texture the Ribbon, the only difference is change the "Ribbon texture" Blending Mode to Multiply and Opacity to 50%.

Step 23 – The Title

Now is a good moment to add the brochure title. Based on my sketch, I’ll type the word "PSD" over the big strip, and "TUTS+" over the little one. Select the Type Tool (T), click anywhere over the big strip and type the words. Now go to Window > Character to see the little Character panel to customize the text properties. You can take a look at my Comprehensive Introduction to the Type Tool for more information on using this tool.

For the first word I’m using Helvetica-Black with a weight of Black, you can use Arial Black, as it looks good as well. Once you’ve created the text layer, switch to the Move Tool (V) to rotate the text layer -15º to make it match the stripe rotation angle.

Finally, to create a letterpress effect, add a dark red Color Overlay Style to the text layer, a soft red Outer Glow, and a 65% Opacity plain black Inner Shadow (see the values on the image below).

Step 24 -The Title

Let’s finish the title. Repeat the previous step, but with a smaller font and place it over the small stripe, apply the same layers style as well. Then rotate the text layer only -5 degrees. As a little adjustment, change the Color Overlay to another one to make it a little bit darker. Finally, Group both text layers into a folder named "Title." Remember, your text layers must be inside the Security Margin bounding guides.

Step 25 – A Little 3D Shadow

Since Drop Shadow style, isn’t the most reliable way to obtain a realistic shadow, I’ll add another shadow, just below the "Stripe" folder to create a nice effect.

Create a new layer named "Shadow" below the "Stripe" folder. On that layer, create and stretch an ellipse (you can either use the Elliptical Marquee Tool or Ellipse Tool). Fill the shape with plain black (100% K) and go to Filter > Blur > Gaussian Blur, then set the Radius to 20 pixels and hit OK. Next, Rotate that the Shadow layer -15º. Finally, change its Blending mode to Multiply and Opacity to 50%.

Step 26 – Content Text

Adding the content text is quite simple, but you must apply all your typographic knowledge to make it look good. In the following example, I’m creating a Paragraph Text Layer with some dummy text for the "Face 2" text.

Arial Black will be my choice this time. I’m also adding a two Point Text layer to create eye catching titles. Another important thing is the rotation. Once you’ve created your text layers, you must rotate them -15 degrees if the text layers are upside the big stripe, or -5 degrees if the text layers are at the bottom of the small stripe. The rotation effect will give our design an extra special touch. Once more, remember to design inside the Security Margin.

Step 27 – Group Content

I’m adding more text layers with some dummy content. Of course, you must add your very own. Notice the "Contact Us" text has a -5º rotation because its below the small stripe. You can Group the layers into folders according the face where it belongs, “Face 1,” “Face 2,” or “Face 3.”

End of Side I

At this point we’ve got the first side of our design ready. Remember save your work with a descriptive title, like "brochure – front." Then Save the Document as "brochure – back" and continue.

Side II

Step 28 – Set Up the Inner Side Layout

We’re working on the back side of the print paper. Obviously, the side, the margin, the guides are exactly the same than front side. But in order to create a wrapping effect with the stripes, we’ll need to flip them.

First of all, delete (or hide) all the content layers (”Face 1,” “Face2,” and “Face 3″) and leave only the stripes and the ribbon. You can create three folders named “Face 4,” “Face 5,” and “Face 6″ to add the content in.

Step 29 – Flip the Stripes

Now we’ll flip the stripes. Select the "Stripe Copy" Folder and go to Edit > Transform > Flip Horizontal. Do the same with the "Stripe" folder. Finally, move the ribbon to the left side of the document as shown.

Step 30 – Add More Text

It isn’t hard to add content to the back, just repeat what we did in Step 26, but this time the rotation angle must be positive. In this case, the rotation angle is 15º. I created the services list icons by using one of Photoshop’s default Custom Shapes. Remember: do not exceed the Security Margin bounds.

Step 31 – Add a custom support image

Extract this picture from its background and paste it into a new layer named "Polaroid" inside the "Face 5" folder. Now paste any picture inside the polaroid dark rectangle (you must play with the marquee selections or adding a Layer Mask). Paste it into a layer on top of the "Polaroid" layer named "Picture." I’m using this picture by the way. Finally, change the "Picture" layer blending mode to Overlay.

Step 32

Merge the "Picture" and "Polaroid" layers into one named "Polaroid," then adjust the Hue/Saturation (Command + U) and set the values shown below.

Step 33 – Picture Shadow

Create a new rectangle (100%K) behind the "Polaroid" layer and name it "Shadow." Hit Command + F to re-apply the last Gaussian Blur Filter. Then change the layer Blending Mode to Multiply and its Opacity to 60%. Next, rotate the "Shadow" layer a few degrees to the right.

Step 34 – Final Touches

Rotate the entire "Face 5" folder a few degrees to the right. And just because we can, Select the Burn Tool and burn some areas of the polaroid picture to make it more grungy.

Step 35 – End of Side II

And that’s the outcome for the back side.

Conclusion

And that’s it, now you can export the document in your preferred format by clicking on File > Save as and select a filetype (Photoshop PDF is a great choice).

Also, you can get rid of the Trim Guides and export a .TIFF file to InDesign or Illustrator. There are many ways to send these files to print service. Besides you can buy a mock-up template from Graphic River or make one from scratch and get a cool preview of your brochure.

.

Graphic Design Week

To celebrate the launch of GraphicRiver’s new Print Design Templates category we’re putting on a whole week of graphic design tutorials on both Psdtuts+ and Vectortuts+. The new category means you can now sell your design work to make extra cash On the flip side if you’re coming up short on inspiration, you can get a kickstart by grabbing a Photoshop, Illustrator or InDesign template via GraphicRiver. So to give the new category the launch it deserves, all this week we’ll be bringing you articles and tutorials just like this one, on graphic design as part of our Tuts+ Graphic Design Week.

The Pre-Design Planning Stage

Before you start any print project you should always do some planning. That’s because the final format, dimensions, and choice of printer will all affect how you go about designing.

The first thing you would normally do is get the project brief. In my case there is no client, so I’m just going to make up a project. Since this week we’re promoting GraphicRiver, I’m going to make a brochure about the site, as if it’s aimed at a designer who doesn’t know what the site offers. So it’ll really be a sort of basic catalog.

Step 1 – Choose a Printer

So the first thing we’ll do is select a printer. It’s not a bad idea to have a few different printers that you are used to working with. I’d suggest that over time you should have:

• A small local printer that you regularly use and know
  This is a good idea because you can literally get to know the person who is putting your jobs into the press. That means you can talk to them about jobs, get their input on how to get things to come out right and get ideas for future jobs.

• Specialty printers for odd jobs
  For some types of job you may need a specialty printer or service. Examples of specialty printers are companies that print onto objects (like stamps, clothing, pens and so on), printers that specialise in signage, printers that do special effects like embossing, printers that specialise in large formats, and so on.

• An online printer for quick turn-arounds, cheap projects and interstate work
  These days there are a lot of large commercial printers offering online services. They are often very fast and provide a lot of options. The drawback is you’re much less likely to get to know someone at the printer – though you may get assigned a rep at some online printers.

For our purposes we’re going to use an online printer called UPrinting. They are a US printer and deliver anywhere in the country. You can do absolutely everything from payment to upload to proofing through their website, and the rates they offer are very competitive.

I’d never used them before this tutorial and overall I was quite impressed with the service.

Step 2 – Choose a Product

So here we are at the UPrinting website. The first step is to select a product. We want to make some Brochures.

Step 3 – Grab Dimensions and Fold Information

The next step is to specify what type of brochure we’re interested in:

1. Size: 8.5" x 11"
   UPrinting offers a few different sizes. Note that the size is for the brochure laid out flat and unfolded. I have chosen 8.5" x 11" which is close to an A4 page when laid out.

2. Stock: 100lb Text Gloss
   The stock is the type of paper you’ll be printing on. This makes a pretty big difference to the look and feel of the final product. Glossy papers tend to have a shiny feel and Matte papers have a duller more papery feel. You will also often need to choose a weight for the paper, the heavier the weight the thicker and closer it gets to card. For some types of project like a business card you will want a very thick weight.

   I’ve chosen a heavyish stock. The weight is a bit foreign to me as here in Australia we use gsm instead of lbs. You can find a conversion chart here.

3. Folding: Trifold
   It is critical that you pay attention to how the paper is going to be folded so you can determine how to layout your work. I’ve chosen a Trifold fold. To be honest I never remember which fold is which, but happily UPrinting gives you a little demo in the corner so you can be sure you’ve chosen the right one.

4. Color: 4 Color Both Sides
   Finally we choose how we want to print. We want full color on both sides, UPrinting calls this 4 color – i.e. CMYK.
   

Step 4 – Quick Paper Mockup

Now that we know what we’re designing for it’s a good idea to do a very quick paper mockup. I find this useful for items which are going to include folding because it helps make sure you put the right things in the right places.

So here I’ve just grabbed a piece of paper from my notebook, folded it like a trifold brochure and then scribbled in roughly what I’m going to place on each page.

Then when you unfold it you can see how to arrange the different panels on the page. So for example the front cover of the brochure actually appears on the right most panel of the outside page. This make sense when you see it in reality, but if you just open up Photoshop and start designing, there is a temptation to think that the front page must be the first one and therefore on the left.

The other benefit to making a paper mockup is you get a feel for how the person will read the brochure and that’ll be useful for the next step.

Step 5 – Information Design

So in my paper mockup I came up with a basic layout of how I want to arrange things in the brochure. The front page will just have a heading – "1000’s of graphic files from just $1" – and the logo. Then the inside pages will have all our various product types – Photoshop, Illustrator and Other. The outside page that you see when you first open the front cover will have a "How it works" step by step instruction on the site, and the back cover will talk about our sister marketplaces.

I’ve laid it out this way to try to present the information in an easily digestable way:

1. Front Cover: Basic sales proposition (1000s of files)
2. First Inside Page: How the site works
3. Inside Spread: What the files actually are
4. Back Cover: Call to Action – Site address and upselling the reader on other sites

Step 6 – Setup the Document

The next step is to setup a document in Photoshop to design in. Some printers will just give you a set of information and specifications and you’ll need to set up your own document.

Warning: If you’re not used to print design there is a temptation to assume that the fold lines for the document will simply be placed at 1/3 intervals of the document – since it’s going to get folded in three. This isn’t the case. So for example for our trifold brochure the size of the panels are 3.625", 3.6875" and 3.6875" – i.e. one of them is .06" smaller than the other two. And moreover when you flip over to the other side the smaller panel is in a different spot. On the outside it’s the left most panel, on the inside it’s the right most panel.

Happily UPrinting provides a templates section where you can get a document complete with guides placed correctly which you can switch on and off while you design.

Step 7 – Templates

You can see the two templates below.

The important things to note are:

1. If you go to Image Size in Photoshop you will discover that the document is 11.25" x 8.75". Of course the brochure itself is only 11" x 8.5".
2. The extra space is the Bleed for the document. You can see it in the template as that darker area which is .125" on each edge.
3. The Safe Zone is a further .125" inside and is just an indicator of where you should avoid placing anything that you don’t want to accidentally get cut off. Sometimes copies of your printed material won’t be cut exactly correctly – that’s why we have bleed, but conversely it can go the other way too.

Photoshop Design Stage

So with our document all set up and our preplanning done, it’s time to actually make some graphics. So we’ll work directly in the template PSD files provided by UPrinting because then we don’t need to go about redrawing the guides.

Step 8 – Background Collage

What we’re going to do is make a simple background out of thumbnails of all the many files available on GraphicRiver. So I’ve gone through and got screenshots of a good 35 or so items and cropped them to 375px x 375px, then laid them out in a grid as you can see below. When I ran out I just started repeating the same thumbnails again (because I was a bit lazy to make more of them!)

Next we’ll fade those out to black by creating a new layer above, filling it with black and setting transparency to 85%.

Step 9 – Adding Some Shading

Next I’ve gone to View > Show > Guides to make the UPrinting guides appear. Then we create a new layer on top and fill a rectangle shaped the size of one of the panels with black as shown below.

Now while the panel is selected, go to Select > Modify > Feather and use a value of 150px.

Then hit Delete and you should be left with a dark fade at the edges.

Now follow the same steps to add the dark fade on all three panels. Once you have all three, it’s probably worth duplicating the layers to double up the effect and make it a bit more pronounced.

And there we have our background! I repeated this same procedure on both the inside and outside PSD files.

Step 10 – Heading Text Style

Now we’re going to create some heading text using the font Agenda-Black which is nice and round and fat. I typed in my main heading ("1000’s of Graphic Files") set in all caps.

Next we’re going to add a layer style to the text, for this to work though we need each line of text seperate as it’s own layer. This will make more sense in a moment. So you should have one layer with the word "1000’s" and another layer with the words "of Graphic Files".

Then right click on either layer and select Blending Options to bring up the layer style dialog box. Now add a Gradient Overlay and set the gradient to be white to a very faint grey (C:0, M:0, Y:0, K:12). Then add a 2px Inner Stroke of white.

The reason we need to have each line of text on its own layer is that otherwise the gradient will stretch over both lines of text, whereas we want a gradient on each line.

This font and style combination is of course the usual way I style text on the Envato Marketplaces for ads and general graphics. This is important as we want to keep a consistent bit of branding going through the brochure.

Step 11 – Laying Out the Outside

Next I’ve simply laid out all the different elements on the page. It’s mostly text and logos so there isn’t a lot of Photoshop technique so to speak.

For the steps I added some numbered buttons. The numbers are the same Agenda-Black font with the same layer style added. The shiny looking circles you can make with an old Psdtuts+ tutorial called the Photoshop Button Maker.

The things to note about how I’ve laid out everything here are that:

1. The fonts I’ve used are all variations of the Agenda font. So while we used Agenda Black for the heading text, for the other bits of text I’ve used Agenda Semibold and Agenda Medium. It’s a good idea to stick to one or two typefaces in a design unless you have good reason not to as it helps you keep consistency. Varying just weights and styles of the same typeface lets you have visual interest while keeping it cohesive.
2. The left most "How it Works" panel is all aligned so that the edges of the buttons and the main title line up on the left, and the subtitles and text blocks also all line up.
3. For the back panel I’ve centered everything up. This worked well as the logos are all odd shapes and there isn’t much text on the page.
4. The aim on each panel is to have a visual heirarchy to guide the reader’s eye. So on the cover the first thing the person sees is "1000’s" which is pretty attention grabbing, then they see "of Graphic Files" and next they see "from just $1".

   On the "How it Works" panel they should see the four numbered buttons first which I’ve made big and bold so it’s immediately clear that although there is a lot of text on this panel, that it’s going to be easy to read and digest. Then we’ve got a big step title so that even if they never read the small text a reader can still digest the main gist of the page.

Step 12 – Laying Out the Inside

Next we’ll lay out the inside. So open up the other template PSD file and run through the same procedure to make our background. Note that you can’t just copy and paste the background in one fell swoop because the panel sizes are different on this side.

Next I placed three titles for the three panels. My aim here was to create a bit of visual interest by making them go in a diagonal across and down the page. I’ve also added Photoshop and Illustrator icons with a heavy drop shadow and tilted at an angle to give the page a bit of a slapped together feel.

Step 13 – Placing Items

Next I went through and thought about all the different types of files we have on GraphicRiver and choose representatives to showcase. For each one I’ve made a small graphic – usually a screenshot with some drop shadow – and placed a two line title next to it in Agenda Semibold.

So here you can see the three pages laid out with items criss-crossing back and forth. This page feels a bit messy, but it’s not actually too bad and once the brochure is folded up it’ll feel like it has a bit more structure. In all cases it’s a good idea to line up the text blocks so they are centred and vertically aligned with other text blocks on their axises.

Here you can see both pages next to each other. And with that we are done with Photoshop!

Step 14 – Saving the Files for InDesign

Now because our file is saved at 300 dpi and is fairly high resolution we could theoretically just save a PDF from Photoshop and upload that for printing.

It used to be that Photoshop would flatten everything and the text wouldn’t be kept as vectors. These days you can save a Photoshop PDF and it will store the text and any other vector objects (such as Smart Objects) as vectors.

However in many situations it’s a good idea to create InDesign documents for printing because InDesign gives you access to some useful page layout tools like stylesheets, the ability to create multipage PDFs, the ability to add printer marks really easily, and so on.

For this tutorial we are going to now take our Photoshop artwork and place it all into InDesign, then from InDesign create the final PDF.

So next go through both PSDs and switch off all the plain text (not the headings with layer styles) so they aren’t visible. Then go to File > Save As… and choose TIFF. Untick the box that asks if you want to keep the layers and then just create a big, flat TIFF files of the brochure sides.

… Continued over at Vectortuts+

To finish this tutorial, head over to Vectortuts+ where we’ll take our Photoshop work into InDesign and from there send it off to print!

Graphic Design Week

To celebrate the launch of GraphicRiver’s new Print Design Templates category we’re putting on a whole week of graphic design tutorials on both Psdtuts+ and Vectortuts+. The new category means you can now sell your design work to make extra cash On the flip side if you’re coming up short on inspiration, you can get a kickstart by grabbing a Photoshop, Illustrator or InDesign template via GraphicRiver. So to give the new category the launch it deserves, all this week we’ll be bringing you articles and tutorials just like this one, on graphic design as part of our Tuts+ Graphic Design Week.

Step 1

So we begin in Illustrator where we create a new document sized to A4 (210mm x 297mm).

Step 2

Now just lay down your various details in a nicely presentable format. It’s important not to run any design that goes into the margins of the page however. The reason being that this needs to be printed on a normal office printer and those things are pretty awful and leave all sorts of weird spacing from the edges.

Additionally you may decide like I have here that this letterhead is going to be printed on a black and white printer in which case we can desaturate any colour and make it all black and white.

Step 3

Now just add a white rectangle behind the text which is exactly as wide as the canvas. We’re going to use this block to place everything in the following steps.

If you need to arrange items to go behind or in front, remember you just right click on the item and choose Arrange > Send to Back.

So select the white block and all the text together and go to Edit > Copy to copy it to the clipboard.

Step 4

Now switch over to Photoshop, and create a new document. Set the width to 21 cm (A4 width) and a height of about 7cm. The height is short because the letterhead I’ve used is only short, if you had a design that went over the whole page (like a faded out watermark) then you’d make it a full A4 size – I’m just taking a shortcut.

Don’t forget to make sure the resolution is 300dpi.

Step 5

Now hit CTRL-V to paste in the letterhead design. You’ll see the utility of having that white box now because you can really quickly align the edges to the edges of the canvas to get it exactly the same size as you had it in Illustrator.

Step 6

Now go to File > Save for Web & Devices and choose PNG-24 and create a .PNG file of your letterhead. We’re going to then import this into MS Word.

Step 7

Did you ever think you’d see the day where MS Word appeared on Psdtuts? Neither did I!

So go on, fire up that bad boy and let’s make awesome Microsoft letterheads!

Step 8

So once you have a document ready, go to View > Header and Footer.

Step 9

The header and footer in Word are a sort of template that once set isn’t editable from the main document (unless you go to View > Header and Footer of course!)

So once you’re in here, go to Insert > Picture > From File and find that PNG file we saved earlier.

Step 10

So there’s our letterhead. If you try to resize it though you’ll discover it won’t go to the edges. So you need to right click on the image and choose Format Picture.

Step 11

Then click on Layout and choose Behind Text and hit OK.

Step 12

Now you can resize it correctly so it sits nicely on the page. Then hit Close.

Step 13

And there you have your letterhead! You can now just adjust the margins on the document so any writing appears correctly lined up, so give it a test print then hit save and hand it over to your client!

Graphic Design Week

To celebrate the launch of GraphicRiver’s new Print Design Templates category we’re putting on a whole week of graphic design tutorials on both Psdtuts+ and Vectortuts+. The new category means you can now sell your design work to make extra cash On the flip side if you’re coming up short on inspiration, you can get a kickstart by grabbing a Photoshop, Illustrator or InDesign template via GraphicRiver. So to give the new category the launch it deserves, all this week we’ll be bringing you articles and tutorials just like this one, on graphic design as part of our Tuts+ Graphic Design Week.

Creating a retrograde look is nothing new, but there are some things to keep an eye out for when mimicking Graphic Design from any decades past. We’ll be drawing inspiration from Poster Design from the 1960s, particularly Boxing Posters from that era. Let’s get started!

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below or view a larger version.

Step 1

As with any design project, you’ll need to decide upon the medium which will carry your message. We’ll keep it simple by creating an A3 canvas, keep in mind that if you are designing for print onto paper or canvas you will more than likely need to set a Bleed and/or Slug Area. This usually ranges from about 3 to 5 mm.

It’s very good practice to sketch out a few ideas before sitting in front of the computer. I know the computer allows for limitless experimentation, but this doesn’t necessarily help find the best solution and can lead to a lot of wasted time without finding a clear outcome.

Step 2

Of course, for this type of project we’ll need old paper stock. Find one that you like or get this one from sxc.hu (cheers to Andrew C for the hook-up on this image). Import the paper into your working document and resize it to fit.

Step 3

As the paper stock is from the 1960’s (not really, but that’s what we’re aiming for), it wouldn’t look quite this ancient so add a couple of Adjustment Layers to sort it out. I used a Levels (Layer > New Adjustment Layer > Levels)…

…and Hue/Saturation (Layer > New Adjustment Layer > Hue/Saturation). It’s worth organizing your Layers palette as you go along, so select all of your Layers and Group them.

Step 4

Now we can start building up the poster design based on the original sketch. This speeds up the process to no-end, but don’t feel locked in to your initial sketch. If you get a better idea once you’re at the computer then go for it.

I got two classic Boxers courtesy of Peltz Boxing Promotions, massive thanks to Russell for that. You’ll need to grab some boxers from iStockphoto, or better still, take your own photos.

For the sake of this tutorial, I will refer to the Boxers by their Layer names: “MONROE” and “KATES.” Back in the 60’s there were no fancy computers loaded up with expensive software so everything was hand-rendered (cut-and-paste). To honor this, do a rough cut out of your two fighters using the Pen Tool, try to emulate how you’d cut them out by hand.

Step 5

Paste them into the working document and resize them to fit the composition. Balance up the fighters tonally by adjusting the Levels, they need to be similarly exposed. Desaturate both “MONROE” and “KATES” (Image > Adjustments > Desaturate) and finally set the Layer Blending Mode of both layers to Multiply.

Step 6

Go to View > Rulers and turn them on. Drag two rulers down from the the top ruler area and two from the side. I’ve pulled the first horizontal to 224 mm and the next to 305 mm. I pulled the two verticals to 146.6 mm and 147 mm.

Select the Rectangle Tool and set it to Shape Layers instead of Paths. Set the foreground color to #e45050 and draw in two rectangles as shown. It is best to use less saturated colors as very vibrant colors would not have been printable. Then set their Layer Blending Modes to Multiply.

Select the rectangle on the left and go to Edit > Free Transform. Press and hold Command + Shift and then drag the middle point of the Free Transform Bounding Box as shown below. Repeat the process for the other rectangle.

Step 7

We’ll now use the rectangles to mask off the areas of “MONROE” and “KATES” that we don’t need. Select “KATES” and add a Layer Mask. Then Command-click on the right-hand rectangle thumbnail to make a selection from it. Working on the “KATES” Layer Mask, simply fill the selection with black. Repeat this process for “MONROE.”

Back before printing made it’s modern advances, printing wasn’t as accurate and the plates used to make up different colors could – and frequently did – misalign to create overlaps or spaces. We’ll mimic this by unlinking “MONROE” and “KATES” Layer Masks (click the chain link icon between the Layer Thumbnail and Layer Mask thumbnail) and shifting the Layer Masks down using the Move Tool.

Step 8

Now it’s time to start building up text. Block capitals were popular of the time and often overused. They kept things neat and were easier to set. They also have more authority than lower case and suit the nature of the medium and the sport it advertises.

Select the Type Tool and click on the canvas. Type in the text shown or make up your own names if it’s more fun. I’ve used BentonSans which is a modern take on the Sans Serif font with some classic touches. The first name should be smaller than the surname, set it up as shown.

Use a Condensed version of the same font to contrast with the first name making it appear grander. Increase the size over that of the first name by around 2.5 times. Open up the Tracking to about 25 and set the Kerning to Metrics.

Rotate the text to match the rectangles you drew, 10.1 degrees should do it. Typesetting in the 1960s wasn’t nearly as accurate as you can do using a computer today. To get an uneven effect we can play about with the Kerning by positioning the Text Tool in between characters. Slightly adjust the Kerning between a couple of letters to make it imprecise.

Do the same process for the opponents name. In the same Condensed font write “Champion” and “Challenger” onto new Layers. They should be smaller than the first names of the Boxers, I’ve made them 32.37 pt compared to 44.31 for the first names and 101.53 for the surname

Step 9

We’ll make a little feature of the “VS” Text by putting it in a circular flash that breaks out of the rectangles. Use the Ellipse Tool (located behind the Rectangle Tool) set to Shape Layers to draw a colored circle. Use the same red as you did for the rectangles in Step 6. Command-click on the “CIRCLE” Layer thumbnail to create a selection and go to Select > Modify > Expand. Expand this by 20 pixels or so.

Select one of your “RECTANGLE” Layer Mask thumbnails and fill your loaded selection with black. Do the same for the other “RECTANGLE” Shape Layer.

Step 10

A hallmark of the 1960s Boxing Poster is the claim that the fight is not available on home theaters or TVs. So draw a black (#0b0c0c, not quite solid black) Circular Shape Layer and stack some text on it. Set the Circular Shaper Layers Blend Mode to Multiply. The text would usually be justified centrally to a definitive width, using character size and width to sure up the sides as opposed to increasing the kerning or tracking.

Step 11

Draw another Rectangular Shape Layer at the top of the poster and set the Layer Blend Mode to Multiply. Use the same black as for the “NO HOME TV” flash.

Draw a red one at the bottom and set it to Multiply. Now add Layer Masks to all of your Rectangular Shape Layers.

Step 12

Select the PAPER Layer and use the Magic Wand Tool to select the white area around the paper.

Then go through all your Rectangular Shape Layers, selecting the Layer Masks and filling with solid black.

As “MONROE” also breaches the paper edge you’ll need to mask off him as well. You’ll be left with a well worn poster shape.

Step 13

It’s now time to start building up the titles. The posters themselves usually serve up some sensationalism, often billing fights as The Greatest the World has ever seen or other such nonsensical claims. We’ll carry on using Benton (or whichever San Serif font you’ve gone with) for all informational text.

To really beef up your text, try adding a Stroke Layer Style (Layer > Layer Style > Stroke) to the text. This does soften the edges and slightly decreases legibility so I wouldn’t recommend doing this for a contemporary poster design.

I’ve added a sponsor to show how to work a title and tagline or standfirst. In this case the tagline is a motto directly linked with the fictional “Grill” of which “Big Al” is the proprietor. The general rule is to use two contrasting types with the title being bigger than the tag, but these rules are constantly being bent.

Try using accent fonts to break up the very square looking block capitals. It’s usually not best practice to use an accent font similar to your body font, so select a Serif or Block-serif to do the job. The whole point of an accent font is to contrast but compliment your body font.

I’ve chosen URW Antiqua which is a good display font. Display fonts are less concerned with legibility and more with using type combined with negative space to form relationships between word and images. Getting a strong grasp of typography is massively important in Graphic Design.

Step 14

When working with display type, don’t be scared to manipulate the fonts characteristics to suit your needs. I’m still using Benton (BentonSansCond Black for “Fracas” and “Caracas,” BentonSansExtraComp Bold for “The,” and “In”), but I’ve increased the vertical scale to allow maximum impact.

I can’t increase the width of the poster, nor do I want to double stack the text. So too maximize the impact of the title working within a tight space, I increased the Vertical Scale to 116%, I scaled down the article words (words that introduce nouns are called articles) and adjusted the Baseline Shift so they sit in between the important words. I also needed to Shift the Boxers down a touch, again don’t be scared to nudge elements around until they work well together.

Step 15

Create a Layer group called “TICKET/VENUE INFO.” Drag in two vertical guides to mark off the boundaries of where we want the info to go. Making it full-width would detract too much away from the title and boxer names.

Add some Footer text to sit on the red rectangle at the foot of the poster. Now we’ve got a clear and definite space to fill with all the Venue and ticket information. In this space the Date also needs to go in. You need to organize the information in terms of importance. I’m going to prioritize the Date and the Venue.

Drag two horizontal guides from the ruler running across the top to mark your text boundaries. Start building up the date text, note that each part of the text is on its own layer to allow for maximum flexibility. This is a fair example of display text working with the negative space and letterforms to create a more visually dynamic date. Use the Line Tool to draw a 14 pixel line next to the date.

This area is in danger of becoming a very square with dense block capitals. To break up this area, use a more graphic font, in this case a script font called Bello.

There are more ways to avoid an impenetrable clump of block text. Use font weights and vertical/horizontal scaling to your advantage. Highlight important bits of info by making them over-large and using a heavy weight. You could spend a lot of time balancing up this section, but it’s good enough for now.

Step 16

Now that the layout elements are complete, zoom out and look at the composition as a whole. We’re going for a 1960s aesthetic so it’s OK if things don’t line up perfectly. Go to Layer > Rasterize > All Layers. Then systematically apply all the Layer Masks by selecting each one in turn and going to Layer > Layer Masks > Apply.

Step 17

With the composition complete, we’ll begin degrading the image and applying a fake 1960s print finish to it. This is where it gets a little fiddly. Select all of the black shape layers and black text layers and merge them. Call it “BLACKTEXT.” Do the same for all layers containing white text and call the resultant layer “WHITETEXT.”

Do the same for the layers containing red text and finally the same for all red Shape Layers.

Your Layers Palette should resemble mine

Step 18

Apply a 4 pixel Gaussian Blur to “REDTEXT,” “WHITETEXT,” and “BLACKTEXT.”

Then apply a Smart Sharpen at 386% with a 44.3 radius. This process softens the text edges and makes the text look like the ink has been absorbed into the paper a little more. You will need to reapply color #e45050 to “REDTEXT” as the Sharpening has destroyed the color.

Step 19

Turn the “WHITETEXT” Layer visibility off. Then Command-click on its Layer thumbnail to make a selection. Select “BLACKTEXT” and delete the selection, do the same on “REDSHAPES.”

Step 20

Select “REDSHAPES” and apply a 4 pixel Gaussian Blur to it. Then run a Smart Sharpen filter as shown.

Run a second Smart Sharpen with a much bigger Pixel Radius. This gives the impression that ink has gathered at the edges of the print.

Step 21

Select all the Layers except for the “BACKGROUND” group or the “Background” layer itself. Merge the Layers and change the Layer Blend Mode to Multiply. Select the “BACKGROUND” group and press Command + E to merge them onto one layer.

You are now ready to grunge it in your favored way. I’ve used Mr Retro Machine Wash Filter 3 on the Dusted setting, but any grunge or dirty brush will do the trick. It’s worth mentioning that I lightened the Paper and desaturated a little more.

Conclusion

The final image is below and I hope you enjoyed this tutorial. You can view the larger version here.

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.

Graphic Design Week

To celebrate the launch of GraphicRiver’s new Print Design Templates category we’re putting on a whole week of graphic design tutorials on both Psdtuts+ and Vectortuts+. The new category means you can now sell your design work to make extra cash On the flip side if you’re coming up short on inspiration, you can get a kickstart by grabbing a Photoshop, Illustrator or InDesign template via GraphicRiver. So to give the new category the launch it deserves, all this week we’ll be bringing you articles and tutorials just like this one, on graphic design as part of our Tuts+ Graphic Design Week.

Introduction

First off, you’ll export an InDesign template into Photoshop, then assemble a multi-channel, complex illustration. Then discover how to incorporate the same spot color information into your Illustrator files. You’ll then assemble all these elements using InDesign and utilize some of its’ advanced output preview features. Finally, I’ll show you how to export a printer-friendly PDF and give it a preflight check with Acrobat Professional.

Feel free to use your own images, but bear in mind the process we’ll be using doesn’t lend itself to every image type – for example the stock image of the girl is an ideal choice because of her silver dress.

Here’s a list of images I used:

• The large version of the girl from iStockphoto
• The vector flourishes from iStockphoto
• The CD from stock.xchng

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

For PSD Plus Members, the Photoshop PSD file in a directory labeled “source” that came in the ZIP file that you downloaded. You may wish to look through it briefly before we begin. You’ll also find other Photoshop files to complete the illustration, along with a low resolution PDF template, the completed InDesign file. A preview of the final image is below and a video to show the metallic effect.

The Print Process Explained

Offset printing is composed of four spot colors: Cyan, Magenta, Yellow and Key (black) commonly referred to as CMYK. Some colors are impossible to reproduce with CMYK alone, such as metallics. Nowadays many commercial printers have five or six color presses, so it’s not uncommon for designers to integrate one, or even two extra spot colors. Take a look at your local newsstand and you’ll see many magazines that have been printed with additional inks or special print finishes to grab your attention.

It’s also vital to liaise with your printer before commencing work – he’ll advise what’s possible, as well as the cost implications. In this case the metallic PANTONE 8228 C ink would be printed first, then the CMYK inks would overprint – CMYK inks are slightly transparent, so for this to work properly, you need to knock-out selective areas to allow the pure metallic to show through. In other areas, such as the models’ dress, we’ll let the CMYK to overprint – for a subtle shimmer effect.

Step 1

Start off by creating a new portrait InDesign document that is 230mm by 297mm. This tutorial only focuses on the cover design, so uncheck Facing Pages, set the Top/Bottom Margins to 7mm and the Left/Right ones to 8mm. Now add 3mm Bleed to the Top, Bottom and Right, leaving the Left at zero.

Step 2

Ensure you’re Guides (Command + Semi-Colon key) and Rulers (Command + R) are visible, then position a guide at 70mm and one at 259mm. For precision, simply highlight the guide and enter the amounts in the Y Location fields. It’s also a good idea to hit Option + Command + Semi-Colon key to Lock Guides after, so you don’t accidentally move them.

Step 3

Go to your Swatches palette and use the fly-out menu to select New Color Swatch, then uncheck the Name with Color Value option and label it “Shiner black.” Ensure the Color Type is set to Process and the Color Mode is CMYK. Now enter 40% Cyan, 1% Magenta, 1% Yellow and 100% Black. Adding 40% Cyan to the color breakdown makes a deeper or rich black. I’ll explain why it’s important to add the 1% Magenta and Yellow in the next step.

Step 4

Ensure that you’ve got Snap to Guides enabled (Shift + Command + Semi-Colon key), then draw a block (Fill set to 100% “Shiner black” and Stroke at zero). Select the Rectangle Tool (R) and draw from the top of the document, snapping to the first guide. Now select the block with the Selection Tool (V) to accurately check its coordinates and dimensions using the Reference Point Locator. Add another black rectangle to the base of the document, checking it’s position also. Note, at this stage I’m not adding any bleed, I prefer this as a final step.

If you look at the final design, you’ll see that the two black solids sit over four-color imagery. The reason 1% in each of the Magenta and Yellow is a fail safe just in case the printers’ RIP is not set correctly and avoids the possibility of the black panels overprinting instead of knocking out any elements that run behind it. The 1% will automatically force a knockout – this is especially beneficial for large black font sizes. Mistakes are often made for black text, as traditionally it overprints, but if the text is above a certain size you may see the image or element behind it.

Step 5

Now to create the masthead – this is the visual branding of the publication, which needs to be instantly recognizable. I prefer using Illustrator for this part.

Create a new CMYK, A4 landscape Illustrator document and label it “Masthead.” Now select the Rectangle Tool and click anywhere on the artboard. In the next dialogue box enter a Width of 214mm and a Height of 40mm. The width was calculated from subtracting InDesigns’ right and left guides from the document width. The depth is not critical, just a rough guess of how much the masthead should occupy. Click OK, then hit Command + 5 to Make Guides.

Now choose a font that’s going to have the desired impact and shelf-presence – I used Helvetica Neue Black. Select the Type Tool (T), click on the artboard and enter your text. Next, adjust the font size to the depth of the guides.

Step 6

It’s vital when using large font sizes to adjust the spaces between individual characters. This is called kerning and should not be confused with tracking which adjusts the spacing between whole words.

First make sure you’ve got the default Auto kerning option selected. Auto kerning uses the font’s built-in kerning pairs. If the font has adequate kern pair tables (as do most fonts from major type foundries), this setting is usually the best choice. The Optical setting overrides the font’s built-in kern tables so that Illustrator determines the spacing and kerning between all character pairs. This can be useful when a font has few or no built-in kern pairs, or when the overall spacing seems uneven.

Click between the characters you wish to adjust with the Type Tool. To kern in or out, hold down Option and tap the left or right arrow keys. Depending on which way you tap, you will see that the space between the letters is increased or decreased by 20 em in the Character Palette (an em is defined as a measure for 12-point type; a pica). In Illustrator’s preferences, you can set the default em spacing to something lower which will increase or decrease the spacing in smaller increments if you wish.

You’ll see that I’ve tightened up the spacing between each character by eye for a pleasing result. When you’re happy, resize the text to your guides by Shift-dragging the top right corner with the Selection Tool V).

Step 7

Now add the smaller header, again Helvetica Neue but using Black Extended. I decided to range this to the r of the large header snapping it to a guide. Pay close attention to your kerning on the smaller header too.

Step 8

I like to think of a masthead as essentially a logo, so once you’re happy, convert it to paths (Shift + Command + O), fill with white, then Save As an EPS file (Shift + Command + S) and name it “Masthead_outlines.eps.”

Switch back to your InDesign file and with nothing selected hit Command + D to navigate and place it. Now snap it to the top margins and press Option + Command + H to enable High Quality Display. Depending on your placed file you may need to press the Fit frame to content option to tidy things up.

Step 9

Place the”Psd_CMYK_logo.eps” from the “source” folder top right as shown and Command + Shift-drag using the Selection Tool to resize (or place your own logo). Now add the strapline – I used Din Bold ranged left at 17pt, there’s no need to adjust any kerning here because of the small font size. Incidentally, InDesign calls its default kerning and tracking Metrics as opposed to Auto – I used a setting of -20.

Next, add the web address in a separate ranged right text box – I used Din Light at the same size and tracking. Be selective when choosing your fonts, I’ve only used two font families for the entire design; both Helvetica and Din have a variety of weights/styles that achieve a polished look. If you use a mass of different font styles, your work will look amateurish.

Step 10

Add a white box, bottom left, then place the “Barcode.eps” from the “source” folder. Now add some further text as shown. You can now range/align these elements as shown and then group them.

Step 11

Drop in some more text along the bottom of the document, then divide using a 5pt lined rule. All these objects can now be selected and distributed equally using the Align palette.

Step 12

Now add the main ranged-left coverline as shown. Depending on your font usage you may notice some characters sit flush against the side of a text frame and others get inset a little, even when the text Inset values (inside Object > Text Frame Options) are set to zero. This is down to the fonts’ left side bearing, also called overhang, or padding. When a font is designed, each character is placed on a grid, with the lower-left corner (the origin) at zero. The designer then has to decide how far from that origin the left edge of the character should sit.

Virtually all characters in all fonts have a little bit of a left side bearing. A few have negative or zero left side bearings and some have a fraction of a right-side bearing instead. If a font has no sidebearings, then the characters would overlap each other.

As a workaround you can trick InDesign by inserting a space before the first character, then placing the cursor between them and tracking backwards – I used a value of -290.

Step 13

Go in and track/kern your heading text as required, then add another text box filled with “Shinner black.” Add some white-out text and select Align Center in the Paragraph palette. Now open the Text Frame Options (Command + B) and select Center under Vertical Justification drop-down menu. You may need to add a fraction of Baseline Shift – I used 0.8pt.

Step 14

Add another block of centered text as shown, then Shift-drag a circle and send to the back by hitting Shift + Command + Right Bracket key. Now align both objects centrally, then group and rotate 10 degrees. Finally, position just under the coverline.

Step 15

With the design almost complete, you can now color up some of the elements and text for greater impact as shown. Ultimately we’ll be using a metallic silver ink, but for now make a CMYK representation by creating a new swatch labelled “Mock-up metallic” using 25% Cyan and 40% Black. Next, add another swatch labelled “PSD red” that matches the logo – I used 20% Cyan, 100% Magenta, 100% Yellow and 12% Black.

Step 16

Draw a rectangle, or any shape filled with the “Mock-up metallic” swatch and then Cut it (Command + X). Now highlight the “Masthead_outlines.eps” within the links palette, then click the Edit Original icon to open it in Illustrator. Now Paste (Command + V) the object, select the word “Creative” and click on the block to recolor the lettering using the Eyedropper Tool (I), delete the block, then Save. This is a quick way to color objects between the two applications. Finally, back in In Design click on the Update Link icon.

Step 17

Let’s add some small red chevrons next to the bottom right text – we’ll be adding a CD graphic later to attract the readers’ attention. Start by creating a rectangle filled with “PSD red” that’s precisely 14mm Wide by 22mm High. With the shape selected press Option + Shift + Command + D to bring up the Transform Each dialogue box and use the following settings: Horizontal = 0, Vertical = 22mm, Distance = 22mm and Angle = -90 degrees, then press the Copy button.

Now select the original object, double-click on the Shear Tool (O), then give it a Shear Angle of -35 degrees and an Axis Angle of zero degrees. Finally, select the duplicated shape and apply an opposite Shear Angle, of 35 degrees.

Step 18

Select both objects, then click on the Add icon in the pathfinder palette to create a compound shape. Now duplicate the shape by Option + Shift + dragging to the right. Group both shapes, resize and align to the text bottom right as shown.

Step 19

We’re now going to generate a PDF which will serve as a template for the Photoshop illustration. Press Command + E and select High Quality Print in the Preset drop down menu. Next, select just the Crop Marks giving them a Weight of 0.50pt, then add 20mm Bleed all round and click Export.

Step 20

Import the PDF into Photoshop selecting Bleed Box in the Crop To drop-down menu and checking Anti-aliased. Ensure the Resolution is set to 300 pixels/inch and in RGB Mode, then click OK to open it in Photoshop and name the layer “Template.” Ultimately, we’ll be converting to CMYK mode for print, so hit Command + Y to enable CMYK preview – this will avoid any unexpected color shifts when it’s changed.

Step 21

At this point you’re probably thinking there’s way too much bleed, but from experience it’s always good practice to add too much rather than too little. It leaves more room for maneuver when placing into InDesign, especially as additional coverlines are sometimes added at the last minute.

Add a group folder below the “Template” and label it “BACKGROUND.” Now open the “Stained_paper.jpg” from the “source” folder and Shift-drag its thumbnail into the folder as a new layer and name it “Paper.”

Add a Color Balance adjustment layer above the “Paper” setting the Midtone Cyan to +41, Green to -12 and the Blue to +5. Next add a Levels adjustment setting the Input Level midpoint to 1.03 and the whitepoint to 246.

Step 22

Drop in “Wash.jpg” from the “source” folder above the adjustment, then set the Blending Mode to Multiply and label it “Watercolor 1.” Duplicate, then go Edit > Transform > Flip horizontal and name it “Watercolor 2.” Now position both layers as shown.

Step 23

Add “Splat_1″ and “Splat_2″ from the “source” folder above the watercolors. Position as shown, then set their Blending Modes to Color Burn and label them “Paint 1″ and “Paint 2.”

Step 24

Set the illustration file to one side, because next we need to isolate the model. Open the girl image, then use the Pen Tool (P) set to Paths to carefully plot around the figure ignoring the hair (1). Now set the Pen Tool to Subtract from path area to draw the two inner paths (2). When you’re done, double-click and name the path “Clipping.”

Remember, when creating paths to zoom in and use the Option, Command and Shift modifier keys as you work. Plus you can always fine-tune your path by pressing Command to access the Direct Selection Tool and adjust individual direction/anchor points as required.

Step 25

Command-click the path thumbnail to generate a selection, then add a new channel by clicking on the Create new channel icon at the foot of the palette. Double-click the new channel thumbnail and ensure the Masked Areas option is checked. Now with black set as your foreground color and hit Delete to fill the active selection with white.

Step 26

Now to mask the hair. Duplicate the Blue channel (which holds the most contrast) by dragging its thumbnail into the Create new channel icon. Increase the contrast of the duplicate channel by pressing Command + L to access Levels and set the Input Level blackpoint to 56, the midpoint to 0.45 and the whitepoint to 143.

Step 27

Command-click the “Alpha 1″ thumbnail to generate a selection, then target the “Blue copy” channel and hit Alt + Delete filling the selection with black – don’t deselect just yet.

Step 28

Inverse the selection (Shift + Command + I), then select the Brush Tool (B) and use a hard-edged, white brush to remove any background areas.

Step 29

Zoom in and use the Burn Tool (O) set to Midtones and an Exposure of 53% to darken the edges of the hair.

Step 30

Generate a selection from the channel, then target the top RGB composite channel. Now switch to your layers palette, then hit Command + J to float the selection as a new layer. Finally, disable the visibility of the underlying layer to ensure the channel mask has done a good job.

Step 31

Drag/drop the layer into your illustration file and label it “Girl normal.” Create a new folder, named “GIRL” below the “Template” and place the layer into it. Now hit Command + T to Transform. Also, lowering the Opacity of the “Template” layer will help you position it as shown.

Step 32

Duplicate the “Girl normal” layer by dragging its thumbnail into the Create new layer icon. Set the Blending Mode to Soft Light, drop the Opacity to 63% and label it “Girl soft light.” Add a Hue Saturation adjustment layer and use the Edit drop-down menu to set the Reds, Yellows and Cyans as shown. Next, set the adjustment layers’ Opacity to 70%, then click between the layer thumbnails to clip the adjustment to the two underlying layers.

Step 33

Command-click the “Girl normal” layer to generate a selection. Switch to your channels palette, add a new channel, fill the selection with white and label it “Girl.”

Step 34

Add the metallic channel by selecting New Spot Channel in the top-right fly-out menu. In the next window click on the color chip, which opens another dialogue box. Select PANTONE metallic coated from the drop-down Book menu, then PANTONE 8220 C (which is a blue/silver metallic), then click OK.

At this point it’s a good idea to save – as it’s important to check the Alpha Channel and Spot Color options are selected. Also refer to a metallic PANTONE swatch book when choosing your spot color, don’t just rely on its on-screen representation. If you don’t have one, ask your printer. Remember there’s a whole spectrum of metallics – you don’t need to limit yourself to just silver or gold.

Step 35

We now need to duplicate selective parts of the figure into the metallic channel. A straight Copy and Paste will not align correctly, because there’s image information extending beyond the canvas. Use the Rectangular Marquee Tool (M), snapping to the canvas edges to add a couple of temporary black blocks on opposing corners on the “Girl normal” layer. Next, Select All and Copy, switch to the channels palette, target the “PANTONE 8220 C“ channel and Paste..

Step 36

We only need the models’ dress and eye information in the metallic channel. Begin plotting paths around the hard-edged area as shown, generate a path-based selection and fill with white.

Step 37

Continue erasing areas with paths until it looks something like this. We’ll be refining areas where the hair meets the dress in the next few steps.

Step 38

Go to Select > Color Range, then click on the image as shown, setting the Fuzziness slider to 43 and clicking OK.

Step 39

Paint within the selection to remove the hair using a white brush. To achieve a soft edge you can also paint directly on the channel after deselecting. As the CMYK inks will sit over these silver areas, it’s best if the midtone areas contain 30% or more and the darkest areas contain no more than 90%. This can be checked using the info palette and hovering over the image with the eyedropper. You can always apply a Levels adjustment if your percentages are higher.

Step 40

The eyes now need a little more work. Use a soft-edged white brush to remove the dark pupil area. Now toggle the visibility of the composite RGB channel to see the effect of the metallic channel. You can now adjust the channels’ appearance by double-clicking its thumbnail and dropping the Solidity setting – I used 10%. Modifying this setting does not alter how the ink will print, it’s purely for previewing – and the percentage used gives a pretty good indication of how the ink will sit.

Step 41

Image A shows the channels’ visibility disabled and image B shows it enabled – see how the metallic slightly darkens the models’ dress and eyes.

Step 42

Open the vector flourishes in Illustrator, then duplicate your chosen shapes. Fill some of the smaller shapes with the CMYK equivalent of the metallic (25% Cyan and 40% Black). Now fill selective areas on some of the larger swirls. Don’t go overboard, these areas will eventually become metallic, so it’s good to have some CMYK areas for contrast.

Step 43

Start to Copy and Paste (as Smart Objects) the smaller objects into a new folder labelled “SHAPES” positioned below the “GIRL” folder. You can drop the Opacity of the “Template” layer to help with positioning.

Step 44

Continue to add the larger flourishes around the model. Feel free to transform them to fit the layout. I’ve avoided placing any metallic areas near to the main coverline to keep it prominent, as later this will print metallic.

Step 45

Add masks to any layers where objects overlap.

Step 46

Allow some small flourishes to overlap the girl by generating a selection from the chosen shape. Target the “GIRL” folder, then go Layer > Layer Mask > Hide Selection.

Step 47

Add a new channel (not Spot Color), then double-click its thumbnail and check Selected Areas and name it “Metallic shapes.” Now generate selections from your smaller shape layers and fill with black on the new channel.

Step 48

Make selections from further shape layers and fill with white to chop away any overlap areas. Also generate selections with the Magic Wand Tool, set to Contiguous to add further black areas.

Step 49

When you’re done adding the black areas, generate a selection from the “Girl” channel and fill with white on the “Metallic shapes” channel, don’t deselect just yet.

Step 50

Ensure your “Metallic shapes” channel is targeted, then Inverse the active selection and Copy. Now target the “PANTONE 8220 C” and Paste. Disable the visibility of the other channels and it should look something like this.

Step 51

Next we’ll knock out some of the “PANTONE 8220 C” channel by generating a selection from the overlap shape layer and filling with white.

Step 52

Delete the smaller shape layers that were completely filled with the CMYK metallic (see Step 43). Now generate a selection from the “Metallic shapes” channel, target each of the remaining shape layers in turn and go Layer Mask > Hide Selection – this has now revealed the “PANTONE 8220 C” channel areas.

Next, make a selection from the “Metallic shapes” channel again. Add a new layer at the top of the stack within the “SHAPES” folder and label it “Knockout,” now fill the active selection with white. If you toggle the visibility of the “PANTONE 8220 C” channel and the “Knockout” layer you’ll see RGB areas have been punched out, allowing the metallic to show through.

Step 53

The illustration is almost finished, but as a final tweak drop the Opacity of the girls’ Hue/Saturation adjustment layer down to 30%.

Step 54

Be sure to Save, then delete the “Template” layer. Now flatten all layers and convert to CMYK (Image > Mode > CMYK). Delete the “Metallic shapes” and “Girl” channels and Save As “Cover_illustration.tif” ensuring Spot Colors are checked.

Step 55

Switch to your InDesign file and add a new layer called “Main image” beneath the default one. Add another layer at the top and label it “Graphics.” Now select all your artwork except the black bars and move them to this layer with the pointer icon (located right of the layer thumbnail). Rename the original default layer (which should now only contain the black bars) “Solid blocks.”

You can now Place the illustration on the “Main image” layer setting both coordinates to -20mm (remember we gave the illustration the same bleed in Step 19). Also get into the habit of locking layers you’re not working on to avoid accidentally moving objects.

Step 56

Drag/snap the corners of picture box to the document bleed using the Selection Tool, then check the coordinates again. Now if you examine the color palette, you’ll see the placed illustration has also imported the “PANTONE 8220 C” swatch.

Step 57

Open the “Masthead_outlines.eps” in Illustrator using the links palette, then load the same PANTONE metallic swatch library. Now recolor using the same “PANTONE 8220 C” swatch and Save.

Step 58

The linked file should now update automatically, if it doesn’t click the Update Link icon. Now drag the “Mock-up metallic” swatch into the trash, in the next window select “PANTONE 8220 C” to replace it. Now all instances of that swatch have been updated.

It’s also a good idea to get rid of any unused swatches by choosing Select All Unused in the palette pop-out menu (located top-right) and trashing them too.

Step 59

Open the to CD image and select the Ellipse Custom Shape Tool (U) set to Paths and Shift-drag a circle. Don’t sweat if you don’t get the size and position right, you can reposition it by selecting with the Path Selection Tool (A) and pressing Command + T to scale it. Next set the path option to Subtract from path area to draw the inner circle.

Step 60

Shift-click both paths with the Path Selection Tool, then click both central align options. We now need to add some central guides. A quick tip to do this is to generate a path-based selection and snap guides to it. Now snap the Crop Tool (C) to the guides, then drag in central guides which again snap to the crop. Finally, you can cancel the crop prompt.

Step 61

The CD looks a little bland, so let’s add some more color. Select the Gradient Tool (G), then load the “Special Effects” library from the fly-out menu. Choose the “Russel’s Rainbow” gradient and using the Angle Gradient preset drag a gradient from the center on a new layer, then set the Blending Mode to Overlay. Add more gradients, again in Overlay mode on separate layers to build up the effect.

Step 62

Disable the visibility of the gradients, then make a selection from the base layer using Color Range. First, set the Fuzziness slider to 56, click on point A, then select the Plus eyedropper icon and click on point B to add to the selection.

Step 63

For some metallic sparkle, add a spot channel using the same “PANTONE 8220 C” as previous. With the selection still active and the new channel targeted, hit Shift + F5 to bring up the fill options and select 50% Gray under the Contents menu.

Step 64

Knock back the strength of the channel by adding a Levels adjustment, setting the midpoint slider to 1.35.

Step 65

Enable the visibility of the gradients and flatten. Now go to Image > Mode > CMYK, then hit Shift + Command + I to check the resolution is set to 300dpi. Finally, save a version as “CD.tif.”

Step 66

Place the “CD.tif” on the “Graphics” layer, then resize and position as shown. Now hit Option + Shift + Command + K to access the Clipping Path dialogue box and select the embedded Photoshop Path.

Step 67

We now require a separate Photoshop file of the girl, so her head and left hand can encroach into the header bar. Open your layered “Cover_illustration.psd” and delete all folders/layers apart from the “GIRL” folder. Now press Shift + Command + E to Merge Visible, then convert to CMYK and delete all the extra channels leaving just the CMYK.

Step 68

Generate a selection from the layer, then use the Clone Tool (S) to carefully fill any transparent gaps around the top of the hair.

Step 69

Select the Eraser Tool (E) and use a small, hard edge to give the top of the hair a definitive edge. Now Save As “just_girl_illustration.psd,” ensuring it’s in the native Photoshop (PSD) format.

Step 70

Back in your InDesign file, select and Copy the “Cover_illustration.tif.” Add a new layer at the top of the stack and label it “Cut out,” then ” Press Option + Shift + Command + V to Paste in Place.

Step 71

Pull the handles of the picture box in as shown, so just the required areas break the header bar.

Step 72

Now make chosen elements of the design pop – such as a shadow on the main coverline. Cut and Paste the black text into a new text box (we only want the shadow on the metallic text). Now press Option + Command + M to access the Drop Shadow dialogue box and use the settings shown.

You can now save the effect by selecting the New Object Style in the fly-out menu in Object Style palette and label accordingly.

Step 73

Select the red circle with the Direct Selection Tool (A) and apply the same drop shadow style. Feel free to use the same settings on other elements. But remember these effects can be problematic if not understood correctly.

Every time you apply such an effect it creates an area of transparency that will rasterize surrounding elements such as text. To avoid such issues, always move these objects to a new layer. You can see all mine have been moved to an uppermost layer named “Drop shadow graphics” – except the top black header bar which is fine where it is.

Step 74

InDesign has a cool feature to check your artwork will print correctly – hit Shift + F6 to open the Separations Preview window. Then select Separations in the drop-down View menu and toggle the visibility of the CMYK and spot inks.

Step 75

Now select the Flattener Preview tab in the same window and select All Rasterized Regions in the Highlight drop-down menu. This will highlight any areas for concern mentioned in step 73. From this information I saw I’d missed a problem with the two lines of text directly beneath the masthead.

Step 76

These lines were moved to a new layer at the top of the stack and labelled “Tag lines.”

Step 77

The often misunderstood concept of trapping is a complex one, and best left to the experts. As a golden rule lithographic printers will ignore any frame settings applied to your job – they’ll apply their own framing on the RIP using specialist trapping software. You’re always best checking with the printer to ensure that they will take care of the framing. After all, this is what you’re paying them for.

If a printer asks you to do your own trapping it should immediately ring alarm bells! They may not have bothered to purchase the framing software, or even worse they’ll pass the blame onto you if the job goes wrong. Either way, it is a sign of a substandard printer or pre-press house.

Step 78

Another precaution is to hit Alt + Shift + Command + F to open the Preflight window. From here you can check fonts; modified or missing links; that there’s no RGB images (a common mistake), as well as your four-color and spot inks. Once you’re happy, hit the Report button to create a TXT file to accompany your artwork PDF to the printer.

Step 79

To cover yourself further, ask your printer to supply you with their preferred PDF preset. These can easily be loaded into InDesign by choosing File > Adobe PDF Presets > Define, clicking Load and navigating.

The example below shows an example supplied to me that’s never thrown up any problems!

With your PDF preset loaded hit Command + E to Export, choose Adobe PDF from the Format drop-down menu, then hit the Save button.

If you’re following this tutorial without using a supplied PDF setting, I suggest using one of the “PDF/X” presets.

Step 80

When the Export process has completed, you can open the PDF with Acrobat Professional for a final check. Select Advanced > Overprint Preview, then Output Preview. You’ll now see a window very similar to InDesign’s Separation palette. Check the Separations box and you’ll see the CMYK, plus the metallic inks.

Step 81

Now toggle the visibility of the Spot Plates to make sure everything has exported as it should.

Step 82

Finally, check Color Warnings, as well as Show Overprinting and Rich Black. As long as all your transparent areas are on separate layers, your fine. Now all that’s left to do is send the PDF off to print, relax and go and make a coffee!

Step 83

If you incorporate a lot of special inks or print finishes and want to give your client the wow factor – it maybe worth investing in a Esko Visualizer which I used to create the video file shown below. Esko Visualizer allows you to quickly create and share ultra-realistic on-screen mock-ups and soft proofs of complex print finishing effects such as metallics, spot varnishes, foil blocking and embossing by simply loading a PDF.

Conclusion

I hope this tutorial has taken some of the mystery of working with spot colors and metallic inks. I’d also like to thank pre-press expert Richard Ainge for his technical support and checking my files were error free!

Graphic Design Week

To celebrate the launch of GraphicRiver’s new Print Design Templates category we’re putting on a whole week of graphic design tutorials on both Psdtuts+ and Vectortuts+. The new category means you can now sell your design work to make extra cash On the flip side if you’re coming up short on inspiration, you can get a kickstart by grabbing a Photoshop, Illustrator or InDesign template via GraphicRiver. So to give the new category the launch it deserves, all this week we’ll be bringing you articles and tutorials just like this one, on graphic design as part of our Tuts+ Graphic Design Week.

The rest of the concepts you create for the poster will just attract more eyes, but if your product does not look great, and if it is not the focal point of the composition then you may fail, the possible customers will just turn around and look at the next poster. Let’s get started!

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below or view a larger version here.

Preparation

Before getting started take a look at the images we’ll be using: Vector Pedestal, Floral Elements, Vector Pattern, Pedestal, Vintage Wall, Shoe.

Step 1

First of all create a new document. If your intention is to print this poster at a large size, you might want to consider creating the document using a large size and 300 dpi. Fill the background with #6a360f.

Step 2

Create a new layer on top of the background and fill it with black, then go to Filter > Render > Clouds (make sure your foreground and background are black and white). Then set the layer to Soft Light and Opacity to 50%.

Step 3

Import one of the vintage textures into your document. As you will see, the image is not big enough. You need to duplicate it and place it below the first one so that you create a bigger texture. Merge the two layers and set it to Multiply and Opacity at 70%.

Step 4

Next, create a new layer. Then use the Gradient Tool (G) set to radial and black to create a gradient.

Step 5

Import the Vector Pattern from deviantART. You will also have to rebuild the pattern to make it bigger (duplicate it a few times then put each piece together). In the end set the layer to Soft Light and Opacity to 10%.

Step 6

Open the Pedestal image and select one from those two images. Use the Pen Tool (P) to select the pedestal and cut it. Move the pedestal to your document and place it in the lower side of the image. Use the Burn Tool to strengthen the shadows.

Step 7

Import the Vector Pedestal into your document and place it exactly on top of your first pedestal. Next, create a mask for this layer and mark the upper part, then set the layer to Multiply.

Step 8

Now we’ll start adding the floral elements. In the link provided there is a folder with five different Floral Elements that you can use parts of to create your composition.

For this step, the Pen Tool (P) will help you cut out what you do not need. Also, the Burn Tool (O) will help you add shadows and a lot of masking.

Step 9

Add another black gradient over all the layers created at this point. Set the layer to Multiply and Opacity to 78%.

Step 10

Import the shoe image to your document. Use the Pen Tool (P) to extract the shoe, then place it above the pedestal. You will also have to remove the logo and place your own logo there using the Clone Stamp Tool (S). Next, go to Image > Adjustments > Selective Color and there you need to select the Blue color and move the sliders until you get a dark grey.

Step 11

Now use the Pen Tool (P) to trace the other shoe. Then set your brush to 2 px and the color black. Create a new layer and stroke the path.

Step 12

Now use the Pen Tool (P) to select the shoe and after you cut it place it over the stroke. Set the layer to Multiply and Opacity to 70%. Duplicate the layer and follow the directions below.

Step 13

It is time to add some more floral elements. Start up by adding one floral over the shoe. Now mask the flower like below.

Step 14

Next add another shadow in the right side of the shoe. Mask it like it would come out of the shoe.

Step 15

Again as you did with the above flower, add some more flower elements below the shoe.

Step 16

Add two more flower elements at the top of the image, then add some blur to them and you are finished with the floral elements.

Conclusion

In the end, you can duplicate everything you have done so far except for the last floral elements and background and place them behind the original pedestal. Give them some blur and darken them using the levels settings. By creating two more pedestals behind the original one, your illustration looks like it is viewed in a shop and that the products are placed on some special shelves of some sort. You can view the final image below or view a larger version here.

Subscribe to the PSDTUTS RSS Feed for the best Photoshop tuts and articles on the web.