Creation

8. Thanks again for providing Psdtuts+ with this opportunity to interview you. Any final thoughts for our readers?

Thanks to you and Psdtuts+ for giving me the opportunity to expose my works to a larger audience! I have 4 finished works that I can’t expose because of some limitations and I’m working on a 5th piece, so expect lot of updates to my portfolio. Bye and thanks again!

Where to find Leonardo Dentico on the Web

• Leonardo’s Portfolio
• Leonardo’s DeviantArt

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

How to Create an Imaginative, Magical Painted Scene

In this tutorial, we will be using several basic tools and stock images to create a fantasy artwork where everything seems to come alive from what is being painted on an old piece of paper. Let’s get working!

Editorial Note: this tutorial is influenced by the work Afterlife by Maciej Mizer.

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.

Preparation

Before you start take a look at the images we’ll be using: Paper Texture from Bashcorpo, Sky from Neoikeia, Paint Brushes from Nyssi, Tree from WolfC Stock, Stroke Brush Set from FlightOfGrey, Toucan from sxc, Airplane from sxc, and Hand holding brush from sxc.

Step 1

Create a document with size 827px by 1169px. Download the Paper Texture from Bashcorpo and resize it to fit into the document.

Step 2

Then we will need an image of a cloudy sky. I found a pretty one sky image by Neoikeia. Resize the sky image and place it at the center of the document. Use Lasso Tool to draw an irregular selection as shown.

Go to Select > Modify > Feather. Set the Feather Radius to 30px. Follow by Select > Inverse then press Delete. Duplicate twice for this sky image as we will be using them later. Rename the sky layers (from bottom up) as “Sky 1,” “Sky 2″ and “Sky 3″ respectively. Hide “Sky 2″ and “Sky 3″ for now.

Step 3

Select the “Sky 1″ layer, go to Image > Adjustments > Desaturate. Then follow by Image > Adjustments > Hue/Saturation. Check on Colorize. Set the Hue to 30, Saturation to 20 and Lightness to 30. Go to Filter > Brush Strokes > Crosshatch. Set the Stroke Length to 50, Sharpness to 20 and Strength to 1. Set the Blend Mode of this layer to Linear Burn.

Step 4

Unhide the “Sky 3″ layer. Go to Filter > Stylize > Glowing Edges. Then follow by Image > Adjustments > Desaturate. Set the Blend Mode of this layer to Multiply.

Step 5

Unhide the “Sky 2″ layer. Create a Layer Mask on the “Sky 2″ layer. Fill the mask with black. Download the Paint Brushes from Nyssi. Set the foreground color to white. Using the brushes downloaded, paint the layer mask to reveal part of the sky image. Then go to Filter > Paint Daubs. Set the Brush Size to 5, Sharpness to 7 and Brush Type to Simple.

Step 6

Let’s proceed on to the tree. Download the tree image made by WolfC Stock. Extract the tree away from its background using the Extract Tool (Click here for other methods of extraction). Position it as shown. Go to Filter > Blur > Smart Blur. Set the Radius to 3 and Threshold to 10.

Step 7

Duplicate the tree image three times, and rename the four layers (from bottom up) as “Painted Tree,” “Blurred Tree,” “Inverted Tree,” and “Outline Tree.” We will get on to them one by one now. Select the “Inverted Tree” layer, go to Image > Adjustments > Invert.

Step 8

Set the Blend Mode of the “Inverted Tree” layer to Color Dodge. Using the Brush Tool (set the color to black, size to 200, and Opacity to 40%), paint over the inverted tree and you will add the highlight.

Select the “Outline Tree” layer, go to Filter > Stylize > Glowing Edges, then Image > Adjustments > Desaturate ,and follow by Image > Adjustments > Invert. Set the Blend Mode of the “Outline Tree” layer to Multiply.

Step 9

Now hide the “Blurred Tree,” “Inverted Tree,” and “Outline Tree” layers. Select the “Painted Tree” layer and go to Image > Adjustments > Desaturate. Then Filter > Brush Strokes > Cross Hatch. Set the Stroke Length to 20, Sharpness to 20, and Strength to 1. Follow by Image > Adjustments > Hue/Saturation, and Check on Colorize. Set the Hue to 30, Saturation to 20 and Lightness to 30.

Step 10

Unhide all the tree layers and create a group folder. Place the “Outline Tree,” “Inverted Tree,” and “Blurred Tree” layers into the folder. Select the folder and create a Layer Mask. Fill the layer mask with black. Using the paint brushes downloaded earlier, paint the layer mask to reveal part of the tree image.

Step 11

Create a new layer and name it as “Tree Stroke.” Download the Stroke Brush Set from FlightOfGrey. Select the last brush of the set and paint it with #22130D at the end of the tree trunk.

Step 12

Create a new layer behind the tree layers and name it “Tree Splatter.” Place several splattered green paints around the trunk area.

Step 13

Download several stock images from sxc.hu. For this tutorial, I have hot air balloon 1, hot air balloon 2, plane, crane, and seagulls. Place them around the left side of the document.

Go to Select > Adjustments > Desaturate. Then Filter > Brush Strokes > Cross Hatch. Set the Stroke Length to 20, Sharpness to 20 and Strength to 1. Follow by Image > Adjustments > Hue/Saturation, and Check on Colorize. Set the Hue to 30, Saturation to 20, and Lightness to 30. Set the Blend Mode of these layers to Linear Burn.

Step 14

Extract another hot air balloon and place it above all the other layers. Right-click on the hot air balloon layer and choose Blending Option. Check on Drop Shadow. Set the Blend Mode to Multiply, Color to black, Opacity to 20%, Angle to 90, Distance to 80, Spread to 0, Size to 5 and leave the rest as default.

Step 15

Repeat Step 14 for the crane.

Step 16

Download a Toucan from sxc.hu. Extract the toucan out from its background and position it as shown.

Step 17

Using one of the paint brushes downloaded earlier, place black splattered paint at the bottom of the toucan.

Step 18

Create a Layer Mask on the “Toucan” layer, use the Brush Tool with a black color to reveal some of the leaves behind.

Step 19

Download an airplane from sxc.hu. Extract the plane from its background and position it the way shown below.

Step 20

Duplicate the “Plane” layer. Select the “bottom plane” layer and go to Filter > Blur > Motion Blur. Set the Angle to 90 and Distance to 20. Move the blurred plane slightly to its left.

Step 21

Create a new layer and name it “Line.” Using the Pen Tool, draw a path as shown below.

Step 22

Select the Brush Tool, set the size to 3px and color to #C83926. Right-click on the path you have drawn earlier, and choose Stroke Path. Check on Simulate Pressure and Type to Brush.

Step 23

Repeat Step 22 for a few more lines with different colors.

Step 24

Duplicate the original “Plane” layer. Select the duplicated plane and go to Image > Adjustments > Hue/Saturation. Set the Lightness to 0, then go to Filter > Blur > Gaussian Blur, and set the radius to 10px. Follow by Edit > Free Transform. Resize the plane shadow and move it under the original plane. Set the Opacity of this layer to 40%.

Step 25

Repeat Steps 19 to 24 for a colorful kite at the right side of the tree.

Step 26

Download an image of a hand holding brush from sxc.hu. Extract the hand and brush from their background and position it the way shown in the diagram.

Step 27

Duplicate the “Hand” layer. Select the duplicated hand and go to Image > Adjustments > Hue/Saturation. Set the Lightness to 0, then go to Filter > Blur > Gaussian Blur and set the radius to 10px. Now go to Edit > Free Transform. Rotate the shadow slightly so the two tips of the brushes meet.

Step 28

Create a new layer above the brush. Place a small drop of paint at the tip of the brush with color #251A10. Right-click on this layer and choose Blending Options. Check on Bevel and Emboss. Set the Depth to 1, Size to 5, Angle to 165, Highlight Opacity to 30, and leave the rest as default.

Step 29

Create a new layer above the plane. Using the Lasso Tool, draw an irregular selection around the plane.

Step 30

With the selection, go to Select > Modify > Feather. Set the Feather Radius to 30px. Then go to Filter > Render > Clouds. Set the Blend Mode of this layer to Hard Light.

Step 31

Create one last new layer. Select the Brush Tool, pick the default Star 33 pixels brush and open up the Brush Palette. In the palette, check on Shape Dynamics. Set the Size Jitter to 100 and Minimum Diameter to 0

Conclusion

The final image is below. I hope you enjoyed this tutorial and I look forward to seeing your results!

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

45 Step-by-Step Tutorials on Web Design with Photoshop

While many web designers create mockups in Adobe Fireworks and Dreamweaver, no design program gives you quite so much control as Adobe Photoshop. The lessons collected here will show you how to create gorgeous and functional complete websites, blogs, layouts, nav menus and headers in Photoshop.

1. Design Your Own Personal Portfolio Page In Photoshop

2. Design a High End Webdesign From Scratch

3. Design a cool Photography Portfolio

4. Unique Desktop Layout

5. Design the Perfect Website in Adobe Photoshop

6. Konvicted Art

7. Vibrant Modern Blog Design in Photoshop

8. Clean Business Layout Tutorial

9. Unique Grungy Website Layout

10. Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!

11. Clean Blue Navigation Box

12. Dark Navigation Box

13. Design Watercolor Effect Menu

14. Curled Corner

15. CSS Menu With Icons

16. Nature Theme Header

17. Stunning Vista inspired menu

18. Design a Cartoon Grunge Web site Layout

19. How to Create a Grunge Web Design in Photoshop

20. Green Navigation

21. Create a Magic Night Themed Web Design from Scratch in Photoshop

22. Modern Portfolio Layout

23. High-Detailed Plastic Navigation Bar

24. Black Website Design

25. Creating A Professional Magazine Web Layout

26. Wii Web Header

27. Modern Web 2.0 Web Layout

28. Dark Style Web Template

29. Make an Elegant Blog Layout in Photoshop

30. How to Create a Sleek and Textured Web Layout in Photoshop

31. How to Create a “Worn Paper” Web Layout Using Photoshop

32. Metallic Header Design

33. Content Box With Orange Banner Heading

34. Hero Header Part 1

35. Hero Header Part 2

36. Blue on Black Navigation Bar

37. Clean White Navigation Bar

38. Design a Unique Bookmark Box

39. Volkswagen Inspired Navigation

40. The Ultimate Grunge Design Tutorial

41. Real Estate Web Design

42. Designing a Clean Photo Portfolio Site In Photoshop

43. Simple Design Studio Layout Design

44. Design a Hand Drawn style Website in Photoshop

45. Stylish Design Agency Layout Tutorial

Questions for the Editor of Psdtuts+ and Vectortuts+

Most of you already know who Sean Hodge is, but for those that don’t, he is the editor for Psdtuts+ as well as Vectortuts+. I will soon be conducting an interview with Sean about running these two blogs and I need your help. So read along about all the details and help us make this
a great interview!

Pose Your Questions in the Comments

Ever wondered how these blogs run? What’s it like behind the scenes? How is content chosen? How long does it take to go from concept to publish ready tutorial? Who makes up the team behind these successful design sites? Or any other burning interests you have on how these Tuts+ blogs run? Submit your questions in the comments? A good selection of these questions will then be answered by our editor in an interview format.

Sean runs the day to day operations of these two blogs, posting most of the daily tutorials, interviews, articles, and videos. We have a history of transparency on these Envato sites, and are happy to answer your questions!

About the Coming Interview

In the near future, I will be interviewing Sean about the logistics of running these blogs. We want to make it as informative to our readers as possible, this is why we want you (the reader) to post a question for Sean in the comments below.

In about a week or so I will pick out some of the best questions and present them to Sean along with my own set. So hopefully this will result in a learning experience for all our readers,
and provide you insight into the ins and outs of running a successful design blog.

Feed Hungry

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

New Grungy Leaf Photoshop Brushes - Psd Plus Pack

This is a new pack of Photoshop brushes available exclusively from Psdtuts+ for Psd Plus Members. We have a new set of Grungy Leaf Brushes for you. They are great for adding an artistic touch to your next project. This set of high quality brushes is available for Psd Plus members to download today!

New Exclusive High Resolution Photoshop Brushes

This new Photoshop Brushes Pack is created by Qbrushes and is available for Psd Plus members today. This is a set of 24 Brushes, which are all high resolution at around 2500 pixels by 2500 pixels. Members can Log in and Download! Otherwise, Join Now! A preview of the brushes are below.

See the Brushes in Action Below

Members can Log in and Download! Otherwise, Join Now!

Psd Plus Membership

As you know, we run a premium membership system here called Psdtuts+ Plus that costs $9 a month (or $22 for 3 months!) which gives members access to the PSD files for tutorials as well as periodic extra tutorials, like this one! If you’re a member you can log in and download the tutorial. If you’re not a member, you can of course join today!

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

How to Create a Steampunk Style Illustration in Photoshop

Go simultaneously backward and forward in time with this Steampunk tutorial. The main focus, aside from the style of course, is fusing elements from different sources together to create a cohesive whole. There are many tricks to this end and we shall be looking at light sources, shadows, and image grading.

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 click the images for a larger view.

Introduction

Steampunk is a sub-genre of fantasy and speculative fiction that came into prominence in the 1980s and early 1990s. The term denotes works set in an era or world where steam power is still widely used - usually the 19th century, and often Victorian era England - but with prominent elements of either science fiction or fantasy, such as fictional technological inventions like those found in the works of H. G. Wells and Jules Verne, or real technological developments like the computer occurring at an earlier date. - Courtesy of Wikipedia.

Now that we’ve cleared that up, let’s work through creating a rich Steampunk inspired image.

Assets

The final image is made up of lots of assets, however, feel free to substitute any of the suggested assets out or add anymore to your work. Bear in mind that Steampunk draws from steam driven technology, largely from the Victorian era, and puts a futuristic spin on it. The asset list is as follows:

• Man
• Goggles
• Hat
• Hat Ornament
• Compass
• Tap
• Belt
• Hanging Watch
• Brass Tank
• Building
• Chimney
• Cloud
• Cogs
• Electric Meter (thanks to Phillip Flores for this image)
• Lightbulb
• Moustache (thanks to Constantin Jurcut for this image)
• Paper Texture

Step 1

Create a new document of 260mm by 210mm at 300dpi. Download the Man image from iStockphoto.com and the Goggles from sxc.hu.

Cut the goggles out using the Pen Tool, import them into your blank document and call the layer “GOGGLES.” Import the Man image into the document and call it “MAN.” Position the goggles on the face and resize to fit. Then reduce the “GOGGLE” layer saturation (Image > Adjust > Hue/Saturation) to -37.

Draw around the man using the Pen Tool, don’t worry about perfectly cutting out the hair as there is a quicker method suitable for our needs here. Keep it fairly loose and once you’ve finished the path, turn it into a selection and create a layer mask (Layer > Layer Mask > Reveal Selection).

Select the “MAN” layer, rather than the Layer Mask, and use the Clone Stamp Tool to clone in hair to fill in the gaps. Ensure you clone hair beyond the boundaries of the Layer Mask.

Select the Smudge Tool, set up as in the screen grab and smudge the Layer Mask (not the layer itself) to reveal more hair underneath.

Apply the Layer Mask (Layer > Layer Mask > Apply) and select the Smudge Tool. Change the brush to 2 pixels with 0% Hardness, and set the smudge strength to between 70 and 85. Smudge extra hairs following the direction of the hairs. Mix up the smudge strength to avoid a uniform hair length.

Step 2

Open the Hat image from sxc.hu and draw a Path around it using the Pen Tool. Turn the Path into a selection (Go to the Paths palette, select the Path, and right click on it), then copy and paste the hat into the working document. Call the Layer “HAT” and resize to 56%.

Open the Hat Ornament image from sx.hu, and cut and paste it into the working document. Call the Layer “WATCH” and resize it to 38.5%. Go to Layer > Layer Style > Drop Shadow and set it up as shown.

Select the “HAT” layer and draw a path around the part of the brim that lies beneath the “WATCH.” Copy and paste this into a new layer. Move the layer above the “WATCH” layer and call it “HAT_BRIM.” Select all three layers attributed to the Hat and group them (Layer > Group Layers), as we’ll be building up a lot of layers throughout this tutorial. It’s a good practice to group layers where possible.

Step 3

Create a new layer in between the “MAN” and “GOGGLE” layers. Call this new layer “FACE_SHADOW” and set it’s Blend Mode to Multiply. Use the Eyedropper Tool to sample dark colors from the skin. Select the Paintbrush Tool and select a 40 pixel brush at 0% Hardness. Set the Flow to 25% and begin drawing shadows around the goggles and the hat.

Bear in mind that the contours of the face against the hat and goggles will produce an uneven shadow, and parts of the shadow closest to the source are darker than those that fall furthest away. Use a smaller brush to draw in the stronger parts of the shadow and make a bigger brush to blend out the shadow. You may need to resample the color using the Eyedropper Tool to satisfy the necessary shade of shadow required.

Step 4

Open the Moustache (thanks to Constantin Jurcut for this image) image from sxc.hu. Use the Rectangular Marquee Tool to select the moustache area. Cut and paste in into the working document above the “MAN” layer, call the new layer “MOUSTACHE.” Set the Blend Mode to Multiply so you can see the “MAN” underneath, and resize and rotate until it fits.

Adjust the Hue/Saturation so it better matches the “MAN” skin tones.

Use a soft-edged Eraser with a 25% Flow to erase the hard edges of the “MOUSTACHE” layer. Drag the Eraser round at this point. You can see where the two layers meet creating a harsh blend, which looks unnatural.

To create a natural blend between the two, single click on the darker areas of the “MOUSTACHE” layer until it blends well.

Finally, add a Curves Adjustment Layer (check the box marked Use Previous Layer To Create Clipping Mask) and tweak until you’re happy that the “MOUSTACHE” layer matches the “MAN” layer. Select the “MAN,” “FACE_SHADOW,” and “MOUSTACHE” layers, then group them, and name the group “MAN.”

Step 5

At this stage, the “MAN” seems a little lighter than the rest so add a Curves Adjustment Layer just above the “MAN” layer, checking the box marked Use Previous Layer…

Step 6

Create a new Group above the “MAN” group and call it “CHEST_PLATE.” Select “MAN” and it’s linked Curves Adjustment Layer and duplicate it. Move the duplicates into the “CHEST_PLATE” group. Draw a path that selects the jacket area but not the shirt or head area. Turn the finished path into a Layer Mask for “MAN copy.”

Open the Compass image from sxc.hu and draw a Path around the section as shown.

Position it within the “CHEST_PLATE” layer group below “MAN copy.” Call this new layer “CHEST_PLATE.” Press Command + T to bring up the Freeform Transform Tool and manipulate as show. Press and hold Command to manipulate points individually.

Use the Clone Stamp Tool to fill in the areas in which the chest plate doesn’t reach.

Add a new layer between “MAN copy” and “CHEST_PLATE,” and call it “CHEST_SHADOW.” Set the Blend Mode to Multiply and create a shadow as you did in Step 3. Try and mimic the shadow left on the shirt by the jacket. This will make it seem more natural.

Step 7

Open the Tap image from sxc.hu and cut and paste it into the working document. Position it above the “CHEST_PLATE” in the Layers palette and call it “TAP.” Resize it to position over the chest plate.

Create a new layer for the taps shadow. Draw in shadows as before.

The shadow shows up how light the bottom of the tap is. Select the “TAP” layer and use the Burn Tool to darken the taps base. Set the Range to Midtones and the Exposure to around 25% before applying.

Create a Curves Adjustment Layer for the “TAP” layer and set it up as shown. Your Layers palette (CHEST_PLATE group) should now resemble the image below…

… and your Steampunk should look like this so far.

Step 8

Either scan in a belt, strap or something, or open the Belt image I scanned. Cut, copy and paste it into the working document and call it “BELT_LEFT.” Duplicate this layer and call the copy “BELT_RIGHT.”

Taking one belt at a time, use Freeform Transform (Command + T) to resize and rotate it to fit as shoulder straps. Before applying the transformation (so the bounding box is still visible) go to Edit > Transform > Warp and manipulate the grid handles and points.

Now to make the belts appear 3D. Select “BELT_LEFT” and select the Move Tool (V). Hold down the Alt key and press the down arrow key once. This will create a duplicate layer and nudge it down once. Release the Alt key and press the left arrow. Repeat the same procedure using “BELT_LEFT” copy as the source layer.

Stack 4 or so layers in this fashion and then reorganize them so the furthest from the original “BELT_LEFT” layer is lowest in the layers palette. (Top: “BELT_LEFT,” “BELT_LEFT copy,” “BELT_LEFT copy 2,” and “BELT_LEFT copy 3″). Select all the “BELT_LEFT” layers and merge them, then adjust the Levels as shown. Repeat this process for “BELT_RIGHT.”

Add a shadow layer (”BELT_SHADOW”) beneath the merged “BELT_LEFT” and “BELT_RIGHT” layers and set the Blend Mode to Multiply. Add a shadow in the same manner as before. Take note of the uneven jacket surface, the rule of thumb is the closer to the surface the casting object is, the thinner and sharper the resultant shadow. The circled parts are where the shadow is at its biggest and softest, use an appropriate brush to reflect this.

Create another shadow layer (”TOP_BELT_SHAD”) above the “BELT” layers and create the shadows as shown. Group all the “BELT” and associated “SHADOW” layers in a group called “BELTS” and situate this in the “CHEST_PLATE” layer group.

Step 9

Select the MAN layer and use the Pen Tool to draw a Path around a portion of the clasped hand. You’ll need to get enough hand to obscure where “BELT_LEFT” overlaps. Turn this Path into a selection and copy and paste it onto a new layer called “HAND.” Move this layer above the “BELTS” layer group within the “CHEST_PLATE” layer group.

Select the “MAN” Curves adjustment layer and duplicate it. Move it directly above “HAND” and go to Layer > Create Clipping Mask.

Open the Hanging Watch image from sxc.hu, cut, copy and paste it into the working document, and place it over the “HAND” layer. Call this layer “HANGING_WATCH,” resize it to fit the perspective and proportions of the hand. Select any overlap between “HANGING_WATCH” and “HAND” with the Polygonal Lasso Tool and go to Layer > Layer Mask > Hide Selection.

Select the layer mask and apply a 0.8 pixel Gaussian Blur. Group all these layers into a group called “HAND” and place it directly above the “BELT” layer group within the “CHEST_PLATE” layer group.

Step 10

Open up the Brass Tank image from sxc.hu, cut it out and copy and paste it into the working document. Call this “TANK.” Create a new Layer Group called “TANKS” and place “TANK” into it. Press Command + T to bring up the Freeform Transform Tool and rotate and resize as shown.

Go to Image > Adjustments > Shadow/Highlight and set up shown.

Duplicate the “TANK” layer and freeform transform as shown.

Create a new layer above the two “TANK” layers and call it “TANK_SHADOW.” Set the Blend mode to Multiply and add a shadow as before. See the image below for reference. The shadow pattern is based on the “MAN layers light and shadow pattern, try and visualize the light source in relation to the “MAN” layer and therefore, in relation to the “TANK” layers as well.

Step 11

Open the Building image from sxc.hu and paste the whole image into the working document. Call the layer “BUILDING”” and move it to the bottom of the Layers palette. Press Command + T to get the Freeform Transform bounding box and manipulate the points as shown. The goal is to fix the lens distortion and the perspective.

I resized the “BUILDING” layer at this point to get a better composition.

Then go to Filter > Blur > Lens Blur and apply the settings shown below. You can use Gaussian Blur instead if your system chokes on the Lens Blur, but it is less effective.

Go to Layer > New Adjustment Layer > Hue/Saturation and slide the Saturation handle to -48.

Then add a Curves Adjustment Layer directly above the Hue/Saturation one.

Step 12

Open up the Chimney image from sxc.hu, cut it out, copy and paste it into the working document. Call it “CHIMNEY,” resize, rotate and duplicate until you have three exhausts. Create a Layer Group with the three “CHIMNEY” layers in and call it “CHIMNEYS.”

Create a new layer called “CHIMNEY_SHADOW” and set the Blend mode to Multiply. We’re going to draw shadows on this layer as we have been, but this time we’ll use the “CHIMNEY” layers to mask off the areas we want to draw on. Command-click on the “CHIMNEY” layer that you want to create a shadow for. If the selection made traps some of the other chimneys, then Command + Alt-click on the appropriate layer. Then draw shadow on the “CHIMNEY_SHADOW” layer. Check the image below for an example.

Open the Cloud image from sxc.hu and go to Image > Adjust > Desaturate. Then adjust the Levels as shown.

Select the Burn Tool, set it to Shadows at around 25% and burn all areas of the sky which aren’t yet black.

Paste the adjusted cloud image into the working document and move it into the “CHIMNEYS” group. Set the Blend Mode to Screen and call the layer “SMOKE.” If any of the sky behind the cloud is visible, then burn it out. Create duplicates of “SMOKE” and position them to appear as though they are being emitted from the chimneys. Delete areas of the smoke and play around until you have something similar to the image below. You should be able to create the same effect using just the one cloud image.

Step 13

Start building up your composition using appropriate elements. I’ve added some Cogs (from sxc.hu) and another element to the backpack area. It’s good practice to name all your layers and group them where possible. Each new element also has its own shadow layer. It’s worth mentioning that I adjusted the Cogs Hue/Saturation to give more of a brass feel.

Step 14

Create a new layer and call it “PIPE.” Use the Pen Tool to draw a straight line (Set to Paths not Shape Layers) and then select the Paintbrush Tool and set it up as shown.

Set your foreground color to #52422b. Finally, go to the Paths palette, select the Path you’ve just drawn, and chose Stroke Path from the sub menu. Make sure the brush is set to 100% Opacity and 100% Flow.

Once your Path has been stroked, go to Layer > Layer Style > Inner shadow and apply the settings as shown.

Set up Bevel and Emboss as shown.

Create a blank layer under “PIPE,” select both layers and press Command + E to merge them. This will rasterize the Layer Styles.

Add a Noise Filter (Filter > Noise > Add Noise)…

…use a 1.0 pixel Gaussian Blur (Filter > Blur > Gaussian Blur)…

…and finally a Smart Sharpen (Filter > Sharpen > Smart Sharpen).

Step 15

Open the Electric Meter (thanks to Phillip Flores for this image) image from sxc.hu and cut, copy and paste it into the working document. Place it directly above “PIPE” and call it “DIAL.” I’ve also changed “PIPE” to “PIPE_DIAL,” as we’ll making lots more pipes in a bit. Resize and rotate the “DIAL” to fit, rotate the “PIPE” layer to mirror the dial’s angle.

Step 16

Open the the Lightbulb image from sxc.hu and cut, copy and paste it into the working document. Separate the actual bulb from the metal bit and put them on their own layers called “BULB” and “LIGHTBULB_BASE.”

Resize and rotate the “BULB” and “LIGHTBULB_BASE” layers as shown. Duplicate the “PIPE_DIAL” layer, call it “PIPE_LIGHTBULB” and rotate to align with the actual bulb.

Command-click the “BULB” layer thumbnail to create a selection. Create a new layer called “BULB_BRIGHTNESS” and fill with color #fff48a. Change the layer Blend Mode to Screen and the layer Opacity to 87%. Then add a 6.0 pixel Gaussian Blur.

Duplicate the “BULB” layer and call it “BULB_OVERLAY.” Position it just above “BULB” in the Layers palette and adjust it’s Hue/Saturation as shown. Change the Layer Blend mode to Multiply.

Select the “BULB” and go to Layer > Layer Styles > Drop Shadow. You can use this to create a soft glow, see below.

Add an Outer Glow to give a deeper glow to the “BULB.”

Step 17

Now it’s time to add a few more pipes in the same manner we did before. Give each pipe its own layer and run it through the same process as outlined in Step 14. Try different thicknesses as well.

Step 18

Now that the composition side of it is largely complete, I can see that some of the background is distracting. Use the Clone Stamp Tool to remove the areas of the background (”BUILDING” layer) which interfere with the foreground.

Step 19

Duplicate the largest of your “SMOKE” layers and move it to the top of the Layers palette. Call this layer “FOG” and resize, rotate, and reposition so it fogs up the bottom without obscuring too much detail. Drop the layer Opacity to about 85%.

Duplicate the “FOG” and resize, rotate, and reposition it to the other side of the canvas.

Finally, create a new layer above the “FOG” layers called “FOG_FILLER.” Use a large, soft-edged Paintbrush to stamp in bits of steam behind the “FOG” clouds. Mix up the size of the brush from between 400 pixels up to 1000 pixels. Vary the amount of times you stamp in one place to achieve different densities within the fog cloud.

Step 20

Select all your layers so far and duplicate them. Merge all the duplicated layers and call it “FLATTENED.” Duplicate “FLATTENED” and select the duplicate, then go to Filter > Other > High Pass and apply at 2.0 pixels. Change the Blend mode to Overlay.

Add a curves Adjustment Layer to boost the contrast and improve the overall tones.

Add a Hue/Saturation Adjustment Layer to reduce saturation.

Add a Gradient Map Adjustment Layer to apply a blue color cast.

Step 21

Create a new layer and call it “HIGHS/LOWS,” then fill it with 50% gray. Use the Burn Tool to burn the canvas edges, particularly in the sky area. This will add a vignette and some much needed depth to the sky. This is much easier if you have a graphics tablet.

Greatly reduce the brush size to burn in facial details. Use a brush size appropriate to the space you’re affecting. Pick out any areas in which the shadows could use a boost.

Use a very fine brush to treat the finer details such as wrinkles, lip edging, and anything else of a similar nature. Use the technique on the whole image, not just the face.

Select the Dodge Tool and using the same settings as the burning, begin to dodge areas in which you want to boost the highlights. The best approach is to just strengthen what’s already in the photo, rather than getting too creative.

This is how it looks without “HIGH/LOWS” visible…

… and here’s the layer set to Normal rather than Overlay. Look at the areas treated and the variety in brush size.

Step 22

Duplicate “FLATTENED” and desaturate it and invert it. Apply a 40 pixel Gaussian blur, adjust the levels, set the layer Blend mode to Overlay and reduce the Opacity to around 25%. This will equalize the tonal balance, drawing in the ultra darks and lights across the board.

Step 23

If you want to go down the ultra-stylized route, then open the Paper Texture image from sxc.hu (or any paper texture image that you like) and import it into your document. Place it at the top of the Layers palette and duplicate it twice (three layers total). Set the top layer to Color Burn at 25% Opacity.

Set the second paper layer to Color at 30%.

Finally, set the bottom paper layer to Hard Light at 30%. This will ensure a rich texture overlay that doesn’t kill your images contrast too much, whilst retaining the texture and image clarity.

Conclusion

Phew! OK that was an introduction to Steampunk. Once you’ve got to grips with the style and techniques there is a world of machines, characters, and places to create. Enjoy!

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

Score $1000 With UPrinting Just By Commenting!

As you’ve probably noticed, Graphic Design Week has had a strong focus on getting designs ready for print, prepress and print terminology and the real life process of sending work to the printers. So we were thrilled when the team over at UPrinting.com approached us about giving away a massive $1,000 to spend on printing! To enter into the running to win this fantastic giveaway you simply need to leave a comment and blog about, link to or Tweet this post! Read on to grab all the details

About UPrinting.com

Based in LA, UPrinting are an online printing outfit that have been changing things up with how commercial printing is done online. With their super easy to use website, free file review and complimentary proofing (even before payment!) they’ve really taken a lot of the trouble out of printing. UPrinting has a great reputation in the design community and known to active support for design blogs which is another good reason we’ve used their services in a few of our Graphic Design Week tutorials. They offer everything from brochures to business cards, pocket folders to posters, hang tags and tons more!

How to Score $1000 Worth of Printing Just By Commenting

To go into the running to win a thousand dollars worth of printing with UPrinting, simply leave a comment telling us why you love being a graphic designer or why you want to be a graphic designer. On the 1st of June David Sarabia from UPrinting will pick the best entry and award them the prize! If you help spread the word by blogging, linking to or tweeting this post, add a link to the source in your comment and it’ll increase your chances of winning.

Terms & Conditions

• Entry is open to anyone except employees or their families of Envato and UPrinting
• Entries must be made by 11:59pm May 31st (PST) to be eligible
• You must fill in the comment form with your name and email address so we can contact you if you win!

Good luck everyone!

Graphic Design Week Wrap-up

After 7 days of hectic posting we’ve come to the end of our special Graphic Design Week event! During the week we featured 12 Tutorials, 9 Articles, 5 GraphicRiver Roundups, and 2 Competitions. So there’s a pretty good chance that some of you might have missed a couple of posts. Before we resume our regular Tuts schedules tomorrow, we thought we’d take a breather for a day and just roundup all the posts from our big week and say thank you to the authors who helped make it possible and our two sponsors - GraphicRiver and UPrinting!

Graphic Design Week Articles

• 

  Printing and Prepress Basics

  While art and design schools do an impressive job of teaching the importance of form, function, and how to use flashy Photoshop techniques, it’s rare that designers have been taught the skills necessary to pass off their projects to printers so that they may not only successfully, but smoothly, produce a designed work.

  Continue Reading

• 

  16 Great Graphic Design Blogs and Sites

  What are your favorite design blogs and sites? There are so many design blogs now, that your top list is sure to be a bit different. Here we’ve collected 16 great design sites that consistently bring high-quality material to their audience. They are filled with great resources, original material, thought provoking articles, or well constructed design tutorials that keep you growing as a designer. Add these sites to your feed reader, if they aren’t already in there!

  Continue Reading

• 

  Logos for Print Versus Online – Identify Your Audience and Design Accordingly

  As the effectiveness and streamlined approach of an online presence continues to become the primary means of business communication, a businesses brand relies heavily on how a logo interfaces with its website.

  Continue Reading

• 

  Teach Yourself Graphic Design: A Self-Study Course Outline

  Fortunately, it isn’t required to go to design school in order to be a graphic designer. A good foundation in graphic design history, theory, and practical application will help you hit the ground running. There are plenty of resources available in which you can learn graphic design on your own. Don’t set your expectations to high at first, as it will take enthusiastic study for years to become great. You can do it though!

  Continue Reading

• 

  Preparing and Talking About Your Graphic Design Portfolio

  As a graphic designer a portfolio is essential. While it’s great to have an online one, it’s also a good idea to have a physical one too to take along to meetings and interviews.

  Continue Reading

• 

  Spot UVs, Proofs, Roll Folds and Other Printing Terminology Explained

  Designing a strong, coherent graphic brand identity is one of the most rewarding tasks in graphic design. It is a unique opportunity to create something that will go on to be used in many different places, applications and designs. In this multi-part tutorial series I’ll take you through the processes and design I used to create the Rockable Press brand and its many different applications both offline and on. We’ll begin by looking at the creation of the Rockable logo, look and feel and brand.

  Continue Reading

• 

  Communicating with Typography

  Type is always communicative, even if it wasn’t designed with that goal in mind, but there are some great ways to really make it shout. In this tutorial, we’ll explore some basic as well as some more clever ways to use type to communicate a feeling, message or idea.

  Continue Reading

• 

  60 Gorgeous Vector Business Cards

  The mini-canvas of the business card doesn’t leave much space to play with, but designers are constantly pushing the creative boundaries in their business card designs. Check out this collection of 60 gorgeous examples of great business card designs, all constructed with vibrant and crisp vector artwork.

  Continue Reading

• 

  A 20 Minute Intro to Typography Basics

  Typography plays a big role in graphic design and can be one of the hardest things to get right. My aim here is to introduce some of the basics and the most common areas of typography that will be important in your design work.

  Continue Reading

Graphic Design Week Tutorials

• 

  Create a Five-color Magazine Cover using a Spot Metallic

  This is an advanced tutorial commissioned especially for Graphic Design Week. I’ll demonstrate how to integrate a spot-color metallic ink into your workflow using InDesign, Illustrator, Photoshop and Acrobat Professional. Let’s get to it!

  Continue Reading

• 

  How to Create a Retro Boxing Poster in Photoshop

  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!

  Continue Reading

• 

  How to Create an Identity Package in Illustrator

  In this Illustrator CS4 tutorial I’ll show you how to create an Identity Package including: business cards, letterhead, and envelopes, all in Illustrator. In the tutorial you will set up your document, design the identity package, and learn best practices for proofing and sending to the printer. This tutorial will focus more on setting up your document to create this package, rather than focusing on the creative aspects of the design.

  Continue Reading

• Continue Reading

• 

  Design and Print Bold Promo Cards in 60 Minutes

  I still remember the days when you had to go to a post office to pay your bills, a travel agent to book flights and a video store to get movies. Pretty much everything seems to have moved online these days, including print services. In this tutorial I’m going to show you how incredibly easy it is to put together some promo cards using MOO.com’s minicards and a couple of vectors from GraphicRiver, in fact the whole thing from idea to execution to print only took me just 60 minutes, now that’s a fast print job!

  Continue Reading

• 

  Creating a Rockstar Brand, Logo and Styleguide in Illustrator

  Designing a strong, coherent graphic brand identity is one of the most rewarding tasks in graphic design. It is a unique opportunity to create something that will go on to be used in many different places, applications and designs. In this multi-part tutorial series I’ll take you through the processes and design I used to create the Rockable Press brand and its many different applications both offline and on. We’ll begin by looking at the creation of the Rockable logo, look and feel and brand.

  Continue Reading

• 

  Create a Business Card in Illustrator and Print it with UPrinting

  Business cards are one of the staples of any working graphic designer. In this tutorial we’ll take the Rockable Press brand we worked through in Part 1 of this set of tutorials and apply it to create and print business cards with UPrinting.

  Continue Reading

• 

  Make a Quick’n’Dirty Letterhead in … MS Word!

  Yes you read that title correctly! In this tutorial we are going to take the brand we created in Part 1 and make a letterhead for Microsoft Word to accompany the business cards we put together and printed in Part 2. While traditional letterheads are made by getting them printed at a printers and then running the letterhead paper through the printer, in my experience there are a great many clients who are either too cheap or too lazy to take that option. For all those types of clients (including me!) this is a really easy way of providing a letterhead at very little expense that still looks professional.

  Continue Reading

• 

  Create and Print a Brochure with Photoshop, Indesign and UPrinting.com - Part 1

  Years ago when I first decided that I’d like to try out print design (my background is in web and screen work), I had this impression that there was some magically difficult things you had to know to get stuff printed. The reality is that for simple projects it’s actually very easy. In this tutorial I will walk you through the complete process of designing a simple brochure, getting it ready for print and then actually uploading it to a commercial online printer, checking the proof and seeing the finished product.

  Continue Reading

• 

  Create and Print a Brochure with Photoshop, Indesign and UPrinting.com - Part 2

  The great thing about the Adobe product range is how easy it is to combine your work from one program to another. In this tutorial we’ll take the Photoshop work from Part 1 over on Psdtuts+, and place it into InDesign, create a stylesheet and then export a PDF. This workflow can be really useful particularly for larger documents where InDesign’s page layout features really kick in.

  Continue Reading

• 

  Design a Ready to Print Brochure in Photoshop

  This time I’ll help you to create a ready to print three-fold brochure from scratch using only Photoshop. This tutorial is ideal for beginners and for people who want to know more about print design. Let’s get it started!

  Continue Reading

• 

  Blend and Mask Yourself a Great Poster

  In this tutorial, we’ll be creating a poster with a strong geometric central design, which utilizes flowing blends, masks shapes, and subtle gradients, to create a sophisticated final work. Learn each detailed step in creating this poster. Let’s get started!

  Continue Reading

GraphicRiver Roundups

• 

  30 Vector Elements to Add to Your Next Design Project

  You don’t always have the time, energy or skill to reinvent the wheel every time. That’s why on GraphicRiver we offer a popular category of Vector Design Elements that sell for just a few dollars each. To showcase the types of things you can grab for your next design project we’ve compiled a selection of 30 great items…

  Continue Reading

• 

  Make Your Design Work Look Awesome with a Product Mockup

  When you have to present your concept design work to a client it really helps if you can give it a bit of added realism to help them imagine the final result. And that’s where Product Mockups come in. These very cool files on GraphicRiver will let you very quickly place your design work into a mockup of their final spot. Not only will you love them for presenting concept work, but next time you’re making a web portfolio these gems will help your work really shine.

  Continue Reading

• 

  Icons, Icons, Icons!

  To me, Icons are up there with Fonts as some sort of design crack. I’m not sure when I got hooked, but it’s been a while now and my hard drive is crammed with icon sets of all shapes and varieties. So when we launched GraphicRiver a couple months ago there was no question as to whether we’d have an icon section. Even though it’s still early days there are already a ton of great icon sets, and in this post I thought I’d showcase a few of the best, starting with WeFunction’s massive 275 icon set!

  Continue Reading

• 

  33 Brilliant Business Card Templates

  When GraphicRiver started I was kinda surprised to see business card templates start appearing in the uploads since there was no specific category or instructions for them. A week later I was even more surprised to see them taking over our popular files page. Today GraphicRiver hosts almost 300 business card templates and they are a staple of the site. In this post we’ve rounded up 33 of the best to showcase some of the designs you can grab for just three or four dollars.

  Continue Reading

• 

  The Best Backgrounds on GraphicRiver

  Easily one of the biggest categories on GraphicRiver, backgrounds are handy not only in graphic design but in web and screen design too. From abstract to detailed, Twitter to nature, there are already some 250 backgrounds to choose from. Collected here today are some of the best backgrounds you can buy!

  Continue Reading

Competitions and Giveaways

• 

  Win $3500 to Spend on the ULTIMATE Graphic Design Setup!

  After a week of Graphic Design posts, Tuts+ and GraphicRiver are excited to bring you this awesome chance to win $3500 in cold, hard cash to spend on the ultimate creative set-up. You’ll also win up to 30 of your favourite Envato Marketplace files and a year of Tuts+ membership. And best of all it’s dead easy to enter, read on to find out how.

  Continue Reading

• 

  Score $1000 With UPrinting Just By Commenting!

  As you’ve probably noticed, Graphic Design Week has had a strong focus on getting designs ready for print, prepress and print terminology and the real life process of sending work to the printers. So we were thrilled when the extremely easy to use UPrinting.com guys approached us about giving away a massive $1000 to spend on printing! To enter into the running to win this fantastic giveaway you simply need to leave a comment! Read on to grab all the details

  Continue Reading

Design a Ready to Print Brochure in Photoshop

This time I’ll help you to create a ready to print three-fold brochure from scratch using only Photoshop. This tutorial is ideal for beginners and for people who want to know more about print design. Let’s get it 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.

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.

Next Page →