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: Photoshop CS or Newer
• Difficulty: Beginner
• Estimated Completion Time: 30 to 50 mins

Step 1

Create a 450 px by 450 px document with a white or transparent background. Drag out two guides at the center of the document (for your own convenience). Now use the Pen Tool to make a shape like the one shown below.

Name this layer as “body.” Make sure you place this layer and all layers constituting the hat in a single layer-set (call it “Hat”).

While creating an irregular shape like the one above, it’s hard to keep symmetry on both sides. The easier way is to create half of the shape first.

Now grab the Path Selection Tool (A) and click on the shape. Press Command + C to copy the path and then press Command + V to paste it on the same shape layer. The copied path will be selected spontaneously.

With the Path Selection Tool (A) still selected, go to Edit > Transform > Flip Horizontal and move the path rightward until you get the required shape. Click and drag a selection to select the two paths simultaneously then click the Combine button located in the Options bar.

Step 2

You can now add some reflections to the “body” layer. To do so, duplicate the “body” layer (Command + J) and reduce it’s fill to 0%. Go to it’s Layer Style and give it a Gradient Overlay.

When you’re done with the settings, don’t click OK. Before doing so, move the gradient leftward so that you have something like that shown below.

Step 3

With the duplicate “body” layer selected, go to Layer > Add Layer Mask > Reveal All. Grab the Gradient Tool (G) and drag a black to white gradient as directed.

Step 4

Duplicate the “reflection” layer and go to its Layer Style. Move the Gradient leftwards while applying the following changes.

Step 5

It’s time to add a shiny band on the hat. Create a shape of any color using the Pen Tool.

The band should not be flowing outside the hat’s body. Command-click on the “body” layer and go to Select > Modify > Expand, type 1px and click OK. With the “band” layer selected, click the Add Layer Mask button.

Step 6

Give the “band” layer the layer styles shown below. Move the gradient rightward before closing the Layer Style window.

Step 7

Duplicate the “band” layer and remove all its layer styles except the Gradient Overlay. Reduce its fill to 0% and make the following changes to the Layer Style. Note that this gradient is placed leftward.

Step 8

It’s time to make the top part of the hat. Use the Ellipse Tool (U) to make an ellipse like the one shown below and name it “top.”

Give it these Layer Styles.

Step 9

Duplicate the “top” layer and place the duplicate layer below the “top” layer in the layers palette. Move the duplicate layer 7px down then give it these Layer Styles.

Step 10

Make another copy of the layer and reduce its fill to 0%. Just make these changes in its Gradient Overlay settings.

Step 11

With the Ellipse Tool (U), make a black ellipse over the “top” layer.

Give the layer these Layer Styles.

Step 12

Now you need to add shadows at the required places. Create a new layer below the “top” and it’s duplicate layers. Command-click on the “top” layer and move the selection a few pixels down, then fill it with black. Go to Filter > Blur > Gaussian Blur, enter 5px and click OK. You’ll clearly notice that the shadow is flowing outside the hat’s body.

To fix it, Command-click on the “body” layer and with the “shadow” layer selected, click on the Add Layer Mask button in the Layers Palette (as you did in Step 4). Set the Opacity of the layer between 30% to 50%.

Step 13

A shadow can also be placed beneath the base. To do so, fill an elliptical selection with black on a new layer, reduce the Opacity of the layer to 30%. This layer must be placed below the “body” layer. Go to Filter > Blur > Radial Blur, make the settings as shown in the image below before clicking OK.

Step 14

On a new layer, fill an elliptical selection with black and set the Opacity of layer to 50%. Go to Filter > Blur > Gaussian Blur, enter 2.5 px and click OK.

Step 15

The hat is done. You can now add a wand to the hat. Create a new layer set (name it “Wand”) and hide the “Hat” layer-set by clicking on the eye to the side of it’s name in the layers palette. Use Rectangle Tool (U) to draw a rectangle and give it a Gradient Overlay.

Step 16

Add two strips at the end of the wand while giving them a Gradient Overlay of purple shades.

Step 17

To reduce the flatness of wand, add anchor points to the strips using the Add Anchor Point Tool. Move them some pixels up. Along with that, add an ellipse at the end of the lower strip as shown.

Step 18

Duplicate the “Wand” layer-set and press Command + E to merge the duplicate set into a single layer. You can now hide the original “Wand” layer-set.
With the merged “wand” layer selected, go to Edit > Transform > Rotate and rotate the wand 75 degrees CCW. Place it in a suitable location.

Conclusion

A shadow of the wand, falling inside hat’s body, can also be added to complete our image.

If the final image appears too bright or dark on your monitor then you can add a Brightness/Contrast adjustment layer to the final image. To do so, open the final image in Photoshop then go to Layer > New Adjustment Layer > Brightness/Contrast, use settings that please you.

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.

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.

I’ll take you through the necessary steps to get you on your way to creating artworks of your own. The aim of this tutorial though, is not to teach you how to rip off the style, but to show you how to create illustrations without needing to outdraw Da Vinvi. The hope is that you’ll follow and use these techniques to work within your own style!

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 CS2
• Difficulty: Intermediate
• Estimated Completion Time: 1-2 hours

Video Tutorial

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

Assets

Here are the assets you’ll need for this tutorial:

• Dinosaur
• Fish
• Red Car
• Paper Texture

Step 1

Create a new canvas. For all the settings outlined in the tutorial to be accurate you should create a canvas at 300dpi and at roughly the same size.

Step 2

Open the Dinosaur image and drag it into your working document. Use the Free Transform Tool to resize (holding the Shift key will constrain the aspect ratio) the Dinosaur image to about 150% of its original size. Then go to Edit > Transform > Flip Horizontal. Then desaturate the image by going to Image > Adjustments > Desaturate.

Step 3

Select the Polygonal Lasso Tool and roughly draw around the Dinosaurs head. Copy the head and then press delete with the selection still active so it removes the head from the Dinosaur layer. Paste the head and use the Free Transform Tool to rotate the head -22 degrees and resize to 135%. Use the Eraser Tool to remove any areas where the background overlaps the Dinosaur layer.

Select both layers in the Layers Palette and merge them (Layer > Merge Layers). Rename the layer “DINOSAUR.” At this point it’s worth mentioning that I deleted most of the background on “DINOSAUR” using the Polygonal Lasso Tool, but you don’t have to do a particularly good job.

Step 4

Drop the “DINOSAUR” layer Opacity down to 50%. Then select the Pen Tool and set it to Shape Layers in the Options bar (Window > Options will bring it up if it’s not already visible). Select any color at this stage and start to draw a smooth shape around the head. Once you’ve plotted your first couple of points, go to the Layers Palette and drop the Fill value to 0% so that you can see the underlying layer.

Some of the Anchor Points require splitting, which enables moving the Point Handles independently of each other. To do this, draw the point and then hold the Alt key whilst clicking the point with the Pen Tool and drawing out from it.
Once you’ve closed the Path, put the Fill back up to 100% and rename the layer “DINO_HEAD.”

Step 5

Use the Pen Tool (set to Shape Layers) to draw in the rest of the limbs minus the tail. Simplify the shapes of things and be creative while doing this. I elongated the fingers for example.

Step 6

Draw in a big fat body, The overall shape of the Dinosaur should be cartoon-like. Change the Layer order in the Layers palette as shown. You should be renaming Layers as you go along, this is good practice and will cut down the wasted minutes trawling through umpteen unnamed Layers looking for something specific.

Step 7

Change the color of the Shape Layers to #7e9221 by double-clicking the color thumbnail next to the corresponding Shape Layer. Draw in the tail, it’s best to draw in a basic tail shape, then add the spikes to the same Shape Layer. Do this by selecting your Shape Layer and clicking Add To Shape Area in the Options Bar.

Step 8

Move “DINOSAUR” to the top of Layers Palette, change it’s Layer Blend mode to Multiply and it’s Opacity to 100% if it’s not already. Run a Smart Sharpen filter (Filter > Sharpen > Smart Sharpen)as in screen grab and then adjust the Levels (Image > Adjustments > Levels).

Unlink the “DINOSAUR” Layer Mask by clicking the chain-link icon in between the Layer thumbnail and the Layer Mask thumbnail, then select the image thumbnail to edit and or transform. I used the Free Transform Tool to resize and rotate the Dinosaur image to fit it better within its Mask. I then used the Brush Tool loaded with black to fill in any parts of the texture I wasn’t happy with. The Red arrows on the 3rd screen grab indicates where those points were,

Step 9

Open the Fish image and desaturate it. Use the same Smart Sharpen settings as in Step 8 to sharpen and use the same Levels as well. Copy and paste (I used the Elliptical Marquee Tool) the Fish’s eye into the working document. Use the Free Transform Tool to resize the eye to fit the face.

Step 10

Make a selection from the eye by Command-clicking its Layer Thumbnail, then delete the selection from “DINO_HEAD” texture mask by selecting the Mask and pressing delete. Turn the “EYE” Blend mode to Multiply. Create a selection from the “EYE” layer, create a new layer and fill it with yellow. You may need to adjust the levels of the “EYE” to match with the dino texture. Rename “DINOSAUR” to “TEXTURE_HEAD.”

Step 11

Go back to the edited fish image (the original that you sharpened and tweaked the levels, etc.) and use the Magic Wand Tool to select the white background, inverse the selection (Select > Inverse) and copy and paste it into the working document. Put it into the layer hierarchy as shown.

Set the Blend mode to Multiply. Use the Free Transform Tool to rotate it -112.3 degrees, then (without applying the transform) go to Edit > Transform Warp and manipulate the grid to fit the body shape. Rename this “TEXTURE_BODY,” create a selection from “BODY” by Command-clicking its Layer Thumbnail, and use the selection to create a Layer Mask for “TEXTURE_BODY.”

Again, unlink the Mask, resize, rotate and/or warp if you need to, or use the Brush Tool to draw any missing bits in. It should now look like the last image below.

Step 12

Duplicate “TEXTURE_HEAD” and delete the Mask. Then use the Polygonal Lasso Tool to systematically select, cut and paste each limb. You can be fairly rough with this. Rename the new layers accordingly.

Starting with “TEXTURE_RLEG” turn all new layers to Multiply and position them both over their relative Shape Layers on the canvas and in the Layers Palette. Create Layer masks for each as you did for the head and body, then use the Warp Grid to manipulate so they fill the space. You’ll need to Smart Sharpen the “TEXTURE” layers as the Warp Grid softens the pixels. You may also need to draw in some bits using the Brush Tool.

Step 13

Copy “TEXTURE_BODY” and delete its Layer Mask. Rotate, resize, and Warp as before, then paint in any details with the Brush. This obviously works best with a Graphics Tablet. Rename this layer “TEXTURE_TAIL.”

Step 14

Select color #f4f2ad as your Foreground color and use the Pen Tool set to Shape Layers to draw in some teeth. Group all the teeth layers and call the group “TEETH.” Drawing in the “TEETH” has thrown up some minor changes I want to make to the mouth. Select the “TEXTURE_HEAD” layer (not it’s Mask) and use the Brush Tool to draw a black (#1f1f1f) line around the teeth so they don’t border any green.

Step 15

Open the Red Car image and cut it out by drawing a path around it or using the Magic Wand Tool. Copy and paste it into the working document. Desaturate the car and then adjust the Levels as shown below. Run a Smart Sharpen filter (with the same settings as in Step and then use the Free Transform Tool to rotate and resize it to fit in the Dinosaurs hand.

Create a selection from the car by Command-clicking its layer thumbnail, then create a new layer directly below it and fill with #d23e3e. Set the “RED_CAR” layer to Multiply. Create another layer between the “RED” and the “RED_CAR” layers and use the Brush Tool to draw in some lighter parts with the color #d9d9d9.

Finally, select all three car layers and go to Layer > Group Layers. Call the Group “CAR” and give it a final tweak with the Free Transform Tool. To get the car to fit in with the Dinosaur you’ll need to do some creative reshuffling of the Layers in the Layers palette. Check out the final screen grab to see how the top of your Layers Palette should look.

Step 16

The following step might be pretty tricky to follow. Remember these selection shortcuts and you should do alright though. To make a selection from any layer containing pixels you simply Command-click the layer thumbnail. In order to create a selection from one of your Shape Layers you must Command-click the Path thumbnail next to the color thumbnail.

You don’t need to have this layer selected to create a selection from it. In order to create multiple selections you must hold SHIFT + Command-click. This will add to the current selection, to then subtract you must hold Alt + Command-click. Look at the image below to see what happens when I make a selection from “BODY” and then subtract the “RIGHT_ARM,” “DINO_HEAD,” “RIGHT_LEG,” and “CAR.”

Step 17

Create a new layer called “SHADOWS” and set it to Multiply. Set the foreground color to #4d5622 and select the Brush Tool. Set the Brush options to 100% Opacity, 25% Flow, 0% Hardness and between 25-200 pixels depending on which area you’re working on.

Now paint onto “SHADOWS” with the selection loaded. Think about the areas which would realistically have shadows if it were a genuine 3-dimensional beastie. We’ll do the left-hand-side limbs next so create a selection from “LEFT_ARM” and “LEFT_LEG.” Then subtract “BODY” and draw on “SHADOWS” as before. Once you’ve done this, take each body part in turn. It shouldn’t take that long once you’ve figured out which selections to add and subtract from.

Step 18

Create another layer directly above the “TEETH” layers this time. Call it “TEETH_SHADOWS.” Select the color #4a4936 as your foreground color and do the shadows in the same way, but creating selections from the teeth. Turn the “TEETH_SHADOWS” Layer Blend Mode to Multiply.

Step 19

Select color #c82323 as your foreground color. Then select the Pen Tool and set it to Shape Layers. Draw in a basic, cartoony flame-shape. You’ll need to split the points as you draw the outward curves to a point. Once you’ve drawn the main shape, click Add To Shape Area within the Options bar and draw in the secondary flames.

Once the red flames are done, select color #d67722 and click Create New Shape Layer (next to Add o Shape Area) and draw an inner flame. The flames look a little clean so create a layer directly above the “FLAME” layers and use your favorite grunge brushes to dirty it up a bit. I headed over to Misprintedtype.com and downloaded some of his brushes. The Dino is now finished. Phew!

Step 20

Fill the Background layer with color #f0e0c4. Then create a new layer and call it “SKY.” Select the Brush Tool and from the Option bar, load Photoshop’s standard Wet Media brushes. Scroll down to “Watercolor Fat Tip” (third from the bottom) and resize it to 675 pixels. Set the Opacity to 70% and the Flow to 30%. Set the color to #52baaf, as your foreground color, and start to paint in the background, if you have a Graphics Tablet then now’s the time to use it.

Select a darker color, #317a72 should do it, and draw over the uppermost parts of the sky. Don’t just drag the Brush around though, try short drags to keep building up the transparent paint. You want an uneven effect.

Finally, use the Polygonal Lasso Tool to select the top part of the canvas making a diagonal line straight across the lower middle. Revert back to color #52baaf and draw in some bottom bits. You might want to blend the top section a bit as well by using the lighter color to paint over where the darker color meets the lighter color.

Step 21

Create a new layer and call it “FLOOR.” Invert the selection (Select > Inverse) and then fill it with color #8b9c95. Select the Brush you had been using and the color #626f6a to draw in a gradient.

Step 22

Open up the Paper Texture from Bittbox (”paper_2.jpg” is good). Desaturate it, apply a Smart Sharpen and then boost the levels as shown. Copy and paste the paper into your working document and position it at the top of the Layers Palette. Use the Free Transform Tool to resize it as shown.

Step 23

Load up the Channels palette and Command-click on the RGB channel thumbnail to make a selection from it. Click back on the Layer palette and select “SKY.” Then create a Layer Mask from the selection. Hold the Alt key and drag the Layer Mask over to the “FLOOR.” This will duplicate the Layer Mask. Finally, select the “PAPER” layer and rotate it 90 degrees. Set the Layer Blending Mode to Color Burn and reduce the Layer Opacity to around 50-60%.

Conclusion

We’re done with this tutorial. There is more you could add to this image though following similar techniques. Adding a group of fleeing people would fit the theme well. Have fun creating your own illustrations and developing your unique style.

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.

Tutorial Preparation

In order to complete this tutorial you’ll need the following software:

• Photoshop CS4
• Karbaras’s IES Generator 3 (Download)
• Richard Rosenman’s Grid Generator 1.7 Plug-in
• Cybia AlphaWorks Plug-in (Download)
• 1589835-nice.IES Profile (Download)

Prior to beginning the tutorial, make sure you have installed the Grid Generator and the AlphaWorks Photoshop plug-ins, and that you’ve downloaded Karbaras’s IES Generator (a standalone app) and the 1589835-nice.IES profile.

Step 1: Setting Up the Texture PSD

This PSD will serve as a place to create certain textures used in the final layout. I find it helpful to create textures in a separate document. It’s like a sandbox for experimentation.

Make a new document in Photoshop that is 1024px wide by 1024px high at 72dpi.

Set the foreground color to #34240f by clicking the topmost color swatch in the Tools palette and entering this number at the bottom of the Color Picker dialog box. Set the background color by the same method to #825826. Fill the “Background” layer with this color by pressing Command + Backspace.

Step 2: Making the Corkboard Texture

Now go to Filter > Distort > Glass. In the Glass filter dialog box, set Distortion to 15, Smoothness to 1, Texture to Frosted and Scaling to 100%. Click OK.

Go to Filter > Render > Fibers. In the Fibers filter dialog box set Variance to 8.0 and Strength to 47.0. You will probably need to click the Randomize button several times to get a texture that has an even distribution of Step 1’s foreground and background colors. The best way to get a feel for the overall effect is to reduce the magnification of the preview image by clicking the minus sign below it until the minimum is reached, in this case 16%.

When done, click OK. The result will be similar to this:

Now go to Filter > Distort > Glass. In the Glass filter dialog box, set Distortion to 15, Smoothness to 1, Texture to Frosted and Scaling to 100%. Click OK.

Name this layer “corkboard.” The result will be similar to this:

The corkboard texture is complete. Save the PSD as “textures.psd” but don’t close it.

Step 3: Setting up the Main Layout

Create a new document that is 500px wide by 300px high at 72dpi. These dimensions are arbitrary and meant for the tutorial only. Save this document as “main_layout.psd.”

Rename the “Background” layer to “floor_color” and fill it with #1a211c. This can be accomplished by setting the foreground color in the Tools palette to #1a211c and pressing Alt + Backspace.

Step 4: Bringing in the Corkboard Texture

Go back to the “textures.psd” document. Right-click the “corkboard” layer and select “Duplicate Layer…” from the contextual menu.

In the resulting dialog, name the copied layer “corkboard” and select “main_layout.psd” as the destination document.

Go back to the “main_layout.psd” document. The new “corkboard” texture layer should appear above the “floor_color” layer.

Step 5: Resizing and Repositioning the Corkboard Texture

With the “corkboard” layer selected in the Layers palette, press Command + T, the keyboard shortcut for the Edit > Transform > Scale command. In the Transform Tool Options palette click the Maintain Aspect Ratio icon (noted with a red arrow in the image below) between the width and height fields, and enter 75.00% for the width. Press Enter twice and the transform will be complete.

Clicking the “Maintain aspect ratio” icon ensures that the layer will be scaled equally in both directions. Alternatively, 75.00% can be entered in both fields without clicking the icon; the result would be the same.

The scaling operation will cause the texture layer to shift out of position so that it’s located awkwardly in the lower right of the layout. With the “corkboard” layer selected, use the Move tool (V) and drag the texture around until it’s in a position that looks pleasing, without great variations in tone across the layout:

Step 6: Revealing the Floor Layer and Adjusting the Corkboard Color

With the “corkboard” layer selected use the Rectangular Marquee tool (M) to select a region that is 500px wide by about 230px high, starting at the upper left of the layout.

Click the Add Layer Mask button at the bottom of the Layers palette. This will add a mask to the texture layer, hiding the layer’s pixels outside of the selection.

With the floor color revealed, the corkboard texture looks a bit oversaturated. This can be corrected using Adjustment Layers.

Select the “corkboard” layer. At the bottom of the Layers palette, click the “Create new fill or adjustment layer” icon, and select Hue/Saturation.

In the Adjustments palette, set Hue to -6, Saturation to -7 and Lightness to -8.

Also, so that the Adjustment layer only affects the “corkboard” texture layer, click the Clip To Layer icon at the bottom of the Adjustments palette (it looks like two intersecting circles stacked one on top of the other). This causes the Adjustment layer to affect only the layer directly below it in the Layers palette, which is indicated in the Layers palette by a downward-pointing arrow on the “Hue Saturation” layer; the name of the layer below it will be underlined.

Step 7: Adding a Shadow Beneath the Corkboard

Make a new layer above the “floor_color” layer by clicking the Create New Layer icon at the bottom of the Layers palette (indicated by a red arrow in the image below). Once the new layer is created, move it directly above the “floor_color” layer and rename it to “cork_shadow.” Layers are rearranged in the Layers palette by clicking and dragging them into position above or below other layers.

With the “cork_shadow” layer selected, use the Rectangular Marquee tool (M) to make a selection region 500px wide by 10px high starting at the bottom of the cork texture.

Change the foreground color to black by pressing D on the keyboard (this resets the color swatches in the Tools palette to the default black foreground and white background). Next, select the Gradient tool (G). In the Gradient Tool Options palette, select the gradient preset Foreground to Transparent and the type Linear Gradient.

To be accurate, zoom in on the selection. Starting at the top of the selection, click and Shift-drag (hold the Shift key while dragging) to the bottom. In this case, Shift-dragging will constrain the Gradient Tool to the X-axis, so that the gradient is at a perfect 90-degree angle. When done, press Command +D to deselect the region.

Change the opacity for this layer to 60%. Do this either by pressing 6 on the keyboard or entering the value directly in the Master Opacity box for the layer in the Layers palette.

Step 8: Adding a Lip on the Corkboard

With the “cork_shadow” layer selected, press Command +J to duplicate it. In the Layers palette, drag the copied layer (automatically named “cork_shadow copy”) to the top of all other layers. Rename this layer “lip.”

Make sure the “lip” layer is selected and invert the color of the layer pixels by pressing Command +I. Now it will be a white-to-transparent gradient.

Flip the layer vertically by going to Edit > Transform > Flip Vertical.

Nudge the layer up 9px by pressing Command + Up Arrow nine times. Now change the layer blending mode to Overlay and change the layer opacity to 50%.

Step 9: Adding a Shadow to the Floor

Make a new layer above the “floor_color” layer and name it “floor_shadow.” Make sure the foreground color in the Tools palette is black.

Using the Gradient tool (G) with the “floor_shadow” layer selected, click at the bottom of the layout and Shift-drag to about three-quarters of the way up to the bottom of the corkboard. Finally, change the layer opacity to 50%.

Step 10: Adding Floorboards

Next, we’ll add some lines to suggest floorboards. Make a new layer above the “floor_color” layer, fill it with black and name it “floorboards.”

This step uses the free Grid Generator plug-in by Richard Rosenman. With the “floorboards” layer selected, go to Filter > Richard Rosenman > Grid Generator. Adjust the settings in the Grid Generator dialog box to match those shown below:

This is the result:

Step 11: Adding Perspective and Highlights to the Floorboards

Go to Edit > Transform > Perspective. Adjust the perspective of the “floorboards” layer by dragging the handles in the upper and lower corners of the transformation box left and right (indicated by red arrows) until it looks something like the image below. Note that the handles will need to be dragged beyond the edges of the document. When done, press Enter to apply the transformation.

Change the “floorboards” layer’s blending mode to Multiply and its opacity to 30%.

Duplicate the “floorboards” layer and rename the new layer to “floorboards_highlight.” Move this layer directly below the “floorboards” layer.

Invert it by pressing Command +I, change its blending mode to Overlay and its opacity to 10%.

Finally, nudge it 1px to the right by pressing the Right Arrow once. This will give a subtle highlight to the floorboards.

Step 12: Adding an Overall Highlight to the Floor

Make a new layer and name it “floor_highlight.” Move this new layer to the top of the Layers palette, above all other layers.

Change the foreground color to white by pressing D, then X, on the keyboard (this resets the Tools palette color swatches to default and then reverses them). Select the Gradient tool (G), and change its preset to Foreground to Transparent and its type to Radial Gradient.

Starting at the center of the layout, click and Shift-drag to nearly the top edge of the layout.

Press Command +T to transform the layer. Use the top center handle of the transform region to adjust the layer’s height. Adjust its width outward from the center by Shift-Alt-dragging the left or right center handle. Press Enter to apply the transformation.

Move the “floor_highlight” layer to the spot directly above the “floor_shadow” layer in the Layers palette. Change its blending mode to Overlay and its opacity to 50%.

Step 12: Creating the Light Housing

Make a new layer and move it to the top spot in the Layers palette. Name this layer “light_housing.”

At the very top of this layer, use the Rectangular Marquee tool (M) to make a selection that’s 500px wide by 10px high. Change the foreground color in the Tools palette to #17150e and fill the selection with this color by pressing Alt+Backspace.

Duplicate the “lip” layer by selecting it in the Layers palette and pressing Command +J. Move this new layer above the “light_housing” layer in the Layers palette and rename it “housing_highlight.”

Use the Move tool (V) to move the layer up so that its bottom is in the same position as the bottom of the “light_housing.”

Press Command + T to transform the layer. Adjust it from the top so that it’s roughly half its current height.

Step 13: Adding a Shadow Beneath the Light Housing

Select the “housing_highlight” layer in the Layers palette and press Command + J to duplicate it. Rename the layer “housing_shadow” and invert it by pressing Command +I.

Flip the layer vertically by going to Edit > Transform > Flip Vertical. Then, nudge it down 1px by pressing the Down Arrow once.

Finally, change its opacity to 80%.

Step 14: Creating a Light

Launch IES Generator. At the bottom left of the application window, click the Load button and locate the “1589835-nice.IES” profile that you downloaded in the Tutorial Preparation.

Using the sliders at the lower left of the window, adjust Brightness to 1.11 and Away From Wall to 3.00 so that the image on the right side of the window looks something like this:

Step 15: Bringing the Light into Photoshop

IES Generator doesn’t have an export or save function, so a screen capture is needed to paste it into the Photoshop layout. You can use a screen capture utility if you have one. Otherwise, press Alt + Print Screen (this is a Windows key-combination which captures the active window to the clipboard). After making the capture, return to Photoshop.

Open the “textures.psd” document created in Step 1, if it isn’t already open. Press Command +V to paste the screen capture into the document. It will appear in a new layer above the “corkboard” layer. If for some reason it ends up below the “corkboard” layer, just move it up in the Layers palette.

With the new layer selected, use the Rectangular Marquee tool (M) to make a selection around the IES image as shown:

Go to Select > Inverse to invert the selection. Fill this region with black.

Step 15: Extracting the White Pixels from the Light Layer and Positioning It

Now we’ll use the free AlphaWorks plug-in by Cybia to remove all the black from this layer, so that we end up with just the white pixels that make up the light pattern.

Go to Filter > Cybia > AlphaWorks. From the drop down menu at the upper right of the filter’s dialog box, select “LINEAR BlackOut – remove from BW lineart.” Click OK.

This will be the result:

With this layer still selected, press Command +A (Select > All), copy it, then switch to the “main_layout.psd”.

Select the “Hue/Saturation 1″ layer in the Layers palette and press Command +V to paste. The new layer will appear between the “lip” layer and the “Hue/Saturation 1″ layer. Rename it to “ies_light.”

Nudge the “ies_light” layer up 6px by pressing the Up Arrow six times. Now change this layer’s blending mode to Overlay.

Step 16: Intensifying the Light

Duplicate the “ies_light” layer twice by selecting it in the Layers palette and pressing Command +J twice. Change the opacity of the topmost copy (”ies_light copy 2″) to 50%.

The three layers, “ies_light,” “ies_light copy” and “ies_light copy 2″ make up a single effect. Collect them into one layer group by clicking the “ies_light” layer, holding down the Shift key and selecting “ies_light copy 2.” Click the icon at the top right of the Layer palette and select New Group from Layers. In the dialog box that pops up, name the group “light.” Click OK.

Now the three layers will be in a single group.

Step 17: Controlling the Extent of the Light

Select all the layers within the “light” group, and group them again by the same method described in Step 16. It’s not necessary to rename this new layer group.

Select “Group 1″ in the Layers palette and create a layer mask for this group by clicking on the “Add a layer mask” icon at the bottom of the palette. The mask will appear ahead of the group name – it looks like a white box.

In the Layers palette, click the layer mask thumbnail (the white box) to select it. Select the Gradient tool (G).

As described in Step 6, make sure the gradient preset is Foreground to Transparent and the type is Linear Gradient. Starting at the middle of the floor, click and Shift-drag to a spot approximately as shown in the image below. A preview of the mask just created will appear in the layer mask thumbnail.

Step 18: Adding a Highlight Spot on the Floor

Collapse “Group 1″ within the “light” layer group by clicking the gray arrow to the left of its name.

Select the “floor_highlight” layer in the Layers palette and duplicate it by pressing Command +J. The new layer will be named “floor_highlight copy.”

Move this new layer into the “light” group by dragging and dropping it directly on the “light” group’s name.

Press Command +T to transform the “floor_highlight copy” layer until it’s approximately 50% of its current width. Press Enter to apply the transformation. Rename the layer to “spot” and change its opacity to 70%.

Step 19: Duplicating the Light

Two more copies of the “light” group are needed. Select and collapse the “light” layer group in the Layers palette. Drag and drop it on the “Create a new layer” icon at the bottom of the palette. A copy of the group, named “light copy” will appear above the original in the Layers palette.

Copy this new group by the same method. There will now be three groups in the Layers palette named “light,” “light copy” and “light copy 2.”

Step 20: Moving the Lights into Position

With the “light copy 2″ layer group selected in the Layers palette, nudge it left 140px by pressing Shift+Left Arrow 14 times (holding the Shift key down while using the arrow keys nudges 10px at a time). Next, select the “light copy” group and nudge it right 140px by the same method.

Rename “light copy 2″ to “light_left,” “light copy” to “light_right” and “light” to “light_center,” to coordinate with their positions in the layout.

Step 21: Spilling the Lights onto the Housing

Select the layer groups “light_center,” “light_right” and “light_left.” Drag and drop them onto the “Create a new layer” icon at the bottom of the Layers palette. Three new copies of these groups will appear above the originals in the Layers palette.

Press Command +E to merge the groups into one layer.

Rename the layer “spill.”

Move it to the top of the Layers palette above the “housing_shadow” layer and change the layer’s blending mode to Overlay.

Flip it vertically by going to Edit > Transform > Flip Vertical.

Nudge the “spill” layer up 230px by pressing Shift+Up Arrow 23 times.

Using the Rectangular Marquee tool (M), make a selection that’s 500px wide by 10px high, starting at the upper left of the layout.

Click the “Add layer mask” icon at the bottom of the Layers palette to add a mask to the “spill” layer. This will restrict its effect to the light housing area.

Step 22: Adding a Shadow Behind the Lights (optional)

Next, we’ll darken the area around the top of the lights against the corkboard to give them a little more emphasis. This step is optional.

In the Layers palette, select the “lip” layer and click the “Create a new layer” icon at the bottom of the Layers palette. The new layer will appear above the “lip” layer. Rename it to “top_shadow.”

Using the Gradient tool (G), with the preset Foreground to Transparent, type Linear Gradient and a foreground color of black, Shift-drag in the “top_shadow” layer as shown:

The “top_shadow” layer needs to be masked so that it excludes the lights.

Select the layer groups “light_center,” “light_right” and “light_left.” Duplicate and merge them into a single layer.

Command-click the layer thumbnail in the Layers palette to load the layer’s transparency as a selection.

Go to Select > Inverse to invert the selection. Now select the “top_shadow” layer in the Layers palette and click the “Add layer mask” icon at the bottom of the palette.

Change the “top_shadow” layer’s opacity to 60%, and its blending mode to Overlay.

Finally, delete the “light_left copy” layer.

Step 23: Adding Text, The Final Step

As the final step, inlaid text will be added to the corkboard. Any font(s) can be used, but this example uses Arista 2.0 Light and DIN Mittelschrift. (How to use Photoshop’s Text Tool will not be covered in this part of the tutorial.)

The text layers should be placed above all other layers in the Layers palette.

In the Layers palette, double-click in the area to the right of the text layer’s name. This will open up the Layer Style dialog box.

In the Layer Style window, adjust the settings as shown.

Drop Shadow:

Inner Shadow:

Color Overlay:

Final Result

This is the final result:

Further Suggestions

I recommend that this effect be used sparingly. For example, use it only to highlight a logo in the header of a website, or to emphasize a few elements on a page.

Angling the light(s) can further enhance the effect; flipping the effect vertically gives the impression of footlights.

You can also colorize the lighting by use of a Color Overlay or Gradient Overlay layer style.

For this tutorial, I selected an IES profile that has been very popular in 3D art, as it has such a distinct appearance. For this reason it has become overused and clichéd. However, there are hundreds of other IES/photometric profiles freely available:

• ERCO Light Scout
• GE Photometric Files

Karbaras’s IES Generator also allows you to create your own profiles.

I hope you enjoyed this tutorial!

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.

Tutorial Details

• Program : Photoshop CS and Higher
• Difficulty: Intermediate
• Estimated Completion Time: Around 3 hours

Step 1 – Preparation for Taking the Photos

Usually tutorials start with a list of stock photos you should download. But today we’ll make it differently. The only one thing you have to do is to take your camera outside and shoot your own images! Don’t worry, it doesn’t take much of your time and you don’t have to be an awesome photographer.

If you want to take stock photos it’s good to do it when it is cloudy outside because in this case you will have no strong directional light from the sun but nice diffuse light, which will be easy to change in your graphic program to fit with the global light of your photo manipulation.

When you’re taking stock photos it’s always a good to take it from different angles and directions because you never know what you will find useful for your photo. And it would be bad if you would have a perfect photo, but you would need it just rotated a little different.

Step 2 – Taking Photos for the Background

As I said before, take your camera outside and take the picture which will suit for the background. For this manipulation we need an easy background with not so much details on it. This absence of details helps the mood which we’ll try be creating of a hopeless situation or feeling of loneliness or emptiness.

As you can see in the picture below, I used a simple photo of the concrete behind my house. A photo of some empty parking place,field or road would be great too. You can see the angle from which I took the photo.

Step 3 – Taking Photos of The Sky

This is very easy. Just wait for some cloudy weather (there will be a lot of cloudy days during autumn), open a window and shoot a few pictures of sky. Shaped clouds are the best because the sky will not be boring. It should be dramatical and this type of clouds is best for it.

On the picture below you can see what kind of sky I mean.

And below is an example of the sky which doesn’t look as good.

Step 4 – Taking the Photo Texture for the Monument

It’s very easy again. For the monument we’ll use texture of some beaten wall – so just stand in front of some wall and shoot it It’s good to stand directly in front of the wall because this way there will be no perspective distortion in the photo.

If you want to use exactly this texture (shown above) you can download the texture pack from my deviantArt page, but I recommend you shoot your own.

Step 5 – Taking Photos of People

This is the last step before we start to do the photo manipulation. Take your camera to a train station or another similar place where there is a big concentration of people. Be a little like a paparazzi, and shoot some of them. Don’t worry if you’re shy, you can shoot them from a distance (depends on the zoom of your camera).

It would be enough to have five or six types of people for what we’ll be creating.

Step 6 – Preparing the Background

After you downloaded all necessary photos from your camera to the computer open Photoshop and drag the picture of the ground and of the sky into one document. Name the layer’s appropriately as: “GROUND” and “SKY.” Make sure that “SKY” is above the “GROUND.” It’s always good to name all the layers. This way you can orientate everything better in your PSD file.

Add a vector mask to the “SKY.” You can find the button Add Vector Mask at the bottom part of the Layers palette. If you don’t see the Layers just press F7 and it will appear.

It is better to use a vector mask instead of the Eraser Tool because this way all the steps you do are non destructive, and you can change them anytime. If you paint with a black color over the vector mask, then the picture disappears. If you want to have it visible again, the only thing you have to do is paint white over it.

After you have vector mask added to the “SKY,” grab the Brush Tool (B), select a soft round brush, pick black for the color, and paint over the areas which should be hidden. Change to a smaller size of brush for more precise blending. You can also change the opacity of the brush to get a better result.

After this step, my manipulation looks like the image below. Yours should be similar, but it depends on your stock pictures used.

If your background doesn’t look realistic you can try one of two tricks. At first you can use the Spherize Filter, which will help you to add more space into the manipulation. To use it go to Filter > Distort > Spherize… and set the Amount to a negative value.

The next thing you can do is transform the perspective. To do it go to Edit > Transform > Perspective and transform your “GROUND” layer as you need.

What I did in my manipulation is that I added texture to the ground to add more details. If you want to try it too, you can use the texture you took for the monument. Open the picture with texture, drag it into the manipulation, place it above the “GROUND” (you can also create a Clipping Mask from it), and name it “TEXTURE FOR GROUND.” Now change the Opacity of the layer and also the Blending Mode. I just changed Blending Mode to Overlay.

As you can see the ground should have more cyan tones than it has now. To fix that add a new adjustment layer of Color Balance above the “GROUND” layer. If you don’t know how to add an adjustment layer, then look at the image below.

Click on the button which is circled and select Color Balance. The button is on the same palette (Layers) as the Add Vector Mask button which we used a few steps back.

Set the Color Levels to: -6, 0, and +12 in Midtones and press OK.

I think it would be better if the whole background would be a little darker. To do that add an adjustment layer of Levels above the “GROUND” and “SKY.” Set Input Levels to: 31; 0,85; 255 and press OK.

Step 7 – Creating the Monument

In this step we will create the monument. Open the picture of texture you took and drag it into your photo manipulation. Name the layer “MONUMENT.” Resize it to proper proportions. To do that press Command + T, and hold Shift to make the picture smaller. If you hold Shift, then the width and height will have the same proportion as they had before.

Press Command + T again and make the picture a little slimmer. Then go to Edit > Transform > Perspective and change the perspective so the monument will be slimmer on the top and wider on the bottom.

Add a Vector Mask to the monument. Now use a soft, round brush to make the bottom part of the monument softer.

At this point, my photo manipulation looks like the one below. You should have something similar, but again – it depends on your stock photos used.

Step 8 – Color Adjustment of the Monument

Now change the colors and contrast of the monument so it fits in with the rest of the picture. This step depends on what stock photos you took. For inspiration I will show you what I did.

The monument should be a bit darker and have more contrast for this look. Add a new adjustment layer of Levels above the “MONUMENT” and set Input Levels on 31; 0,79;255. Just for your information, the first value makes dark tones (shadows, etc.) darker. The second changes midtones. If you increase this value, then the midtones are darker. If you decrease it, then the midtones are lighter. The third value changes highlights.

Step 9 – Creating the Light Ray

In this step we will create a light ray on the top of the monument. Create a new layer above the “MONUMENT” and name it “LIGHT RAY.” Now grab the Brush Tool (B), select a soft, round brush and choose a proper size (depends on size of your photo manipulation). Pick a very light color. It can be pure white or something a little more yellowish.

Paint one dot on the top of the monument and then one dot on the place where you want the ray to end. During the painting of the second dot hold Shift. It will paint you a nice line. Instead of this method you can also use the Line Tool.

Once you have the line you can press the button Add a Layer Style, which can be found in the bottom part of the Layers palette, and add an Outer Glow to the ray to make it look more realistic. In my case, it wasn’t necessary.

Add a Vector Mask to the “LIGHT RAY.” Now with a black, soft, round brush and low opacity, paint over the top of the light ray. It will look more realistic, as if the light is less intensive and it is far from the monument.

In the picture below you can see the manipulation with the light ray.

There should be some diffuse light around the top of the monument. To add it go ahead and create a new layer above the “MONUMENT” and name it “DIFUSE LIGHT.” Grab the Brush Tool (B), select the same color as for the light ray, lower the opacity of the brush and make it bigger. Now paint a little over the top of the monument. In the picture below you can see what I mean.

Step 10 – Adding People

In this step we will add the people you shot with your camera. But before we do that let me say a few words about perspective. To add depth to the manipulation it’s important to keep the rules of the perspective in mind. It’s very simple – objects which are closer are bigger than those which are farther away.

The next important thing you should know when you’re creating a photo manipulation is that objects which are closer are darker and more saturated. If you want to make this rule even stronger you can make closer object also sharper and with more details.

Open your stock photos of people, cut them out and drag them into the manipulation. Change the size of them, duplicate them a few times and start arranging them. You can flip (Edit > Transform > Flip Horizontal) them to have more variation. Arrange them as you below.

As you can see I added no people in the distance. It’s because we will use a special brush which we’ll create in the next step.

Step 11 – Creating the Brush

Creating your own brushes is very simple and can also be very useful. Open a new document and drag one layer with a man into it. Command-click on the thumbnail of this layer. It activates the mask of the layer.

Grab the Gradient Tool (G), pick a solid black color and fill the mask with black. Now use the Crop Tool (C) to crop the picture. You should have something like that shown below.

Now go to Edit > Define Brush Preset… Press OK in the window which will open and you’re done. You have your own brush!

Go to your photo manipulation, Grab the Brush Tool (B) and select the brush you’ve just created. Pick a dark gray and paint people in the distance. Don’t forget to make people smaller and lighter when they are further away.

You can create more types of brushes to have more variation.

Step 12 – Adding Shadows

There should be shadows under the monument and from people. To fix that add a new layer above all the layers and name it “SHADOWS.” Grab the Gradient Tool (G), pick the color #808080, and fill the layer with it. Now change the Blending Mode of the layer to Overlay.

You have two options on how to make shadows. At first you can paint them with a black brush or use the Burn Tool. In the picture below you can see how the “SHADOWS” layer should look.

Step 13 – Adding Mist

Download some mist brushes (I used these) and install them into Photoshop. If you don’t know how to install brushes, then look at this tutorial. Add a new layer under the “MONUMENT,” name it “MIST,” and paint a nice fog with a white color.

Step 14 – Applying Texture

If you want your manipulation to have a grungy look you can add some grunge texture, which you will download or (like me) you can use the same texture which you used for creating the monument.

Open the document with the texture and drag it into the photo manipulation on the top of your layers. Name it “TEXTURE.” Then change the Blending Mode of the layer and also the opacity. I used an Overlay blending mode and Opacity of 30%, but you can experiment with different modes and opacities to get some interesting results.

Step 15 – Final Adjustment

This step depends on the photos you used again. For inspiration I will show you what I did.

I want the picture to be a little darker. To fix it, add a new adjustment layer of Levels on the top of the layers and set the Input Levels on: 0; 0,84; 255.

You can also add a vignette. Add one more Levels adjustment layer and now set the Input Levels on: 0; 0,55; 255. Grab the Gradient Tool (G), pick a solid black color, and fill the Layer Mask with it.

Now pick a white color, Grab the Brush Tool (B), and paint over the edges of the layer mask. It makes them darker.

Conclusion

Congrats! You’re finished. I hope that you’ve learned something new in this tutorial. Experiment with taking your own stock photos, which you can use in your photo manipulations!

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 view a larger version here.

Tutorial Details

• Program: Adobe Photoshop CS3
• Difficulty: Advanced
• Estimated Completion Time: 45 minutes

Preparation

This is an advanced piece, I mean there are no hard to do techniques, but this kind of work requires a lot of good taste, some color experience and casting shadows knowledge. So I do not recommend this tutorial for beginners. I’ll skip basic pointers and go straight to the main point. Basically, I want you to get the idea of how to create an illustration like this and follow your own way with these effects.

Before we start, I wanted to show you how the concept changed during the whole session:

1. This first image below is the main concept, that I planned. It’s the first idea that came to my head: an energy ball with lots of shine lines around it.
2. While searching images I accidently found an image of a man in a very cool position, so I thought this must be used here. So I put him there and wanted to make an illusion that this man is creating all the energy.
3. The first plans were done and I started to work on this project. During the process this concept somehow lacked dynamics, so I decided to rotate the whole piece.
4. Finally, when I had no idea how this energy ball could look like, and this took me some time before I came up with the final idea, I rejected the ball and went into energy touch only for this man.

So you see each project changes when you work on it, so before you get into this tutorial remember to work flexible, not everything needs to look the same way as you planned. Take your time and use your imagination.

Step 1

Before we start, you need to know that the shining effects work best on a black background. The darker the background is, the more visible and contrasted shine you will achieve. So I started with a black background of the canvas around 900px by 1100px (this should work for you fine).

Step 2

Now is the first hard part, searching for the right image. I know many people are unhappy with buying pictures, but well, the truth is: if you want good quality, you need to pay for it. I’ve nothing against free stock photos, if you have the time to search for a good image among mixed quality free pictures it’s OK.

Anyway, if you have the right image, then extract the person (or object) from the image of your choice. The biggest problem of all cut-outs is always the hair. But, as you can see in the image below, I had a short haired man. In this case I simply used the Pen Tool to deal with short hair. And because we have a black background in our main project document, we can easily blend this black hair with the background. To do this I used the Burn Tool with Range set to Midtones and burned the hair edges a little.

Step 3

Now, in the Layers Palette I added two adjustment layers: Levels and Gradient Map to make a better blending between this person and the black background. I used a gradient from black to white and set the Gradient Map layer’s Blending Mode to Soft Light, then lowered the Opacity just a touch.

Step 4

OK, next we’ll create ground. I used a Gradient Tool and on a new layer created a radial gradient from white to transparent (as you see in the first picture below). Then this big white dot needed some perspective, so here I hit Command + T to Distort (second image below).

The dot was blurred using Gaussian Blur at around 40 pixel Radius. Then I duplicated this blurred dot, stretched it a little bit (Command + T) and made two more copies to enhance the ground effect. If necessary, the opacities of these ground layers can be lowered just a touch. It means that this surface shouldn’t be too bright, as this will kinda destroy the concept of having the whole background black.

Step 5

Now, as you can see in the first image below, I started adding shadows under the shoes. It’s not suppose to be great and totally pimped shadow. I just needed to make an accent that this man is standing on something. This always works pretty well, as you start to see how your illustration is shaping up, even thought the shade will change, it’s good to have it sketched.

To do the shadow I used a black brush with Flow set to 2% and Hardness to 0%, then I slowly started creating it click by click (don’t hold the left mouse button while doing this, as you may make a very ugly kind of shadow that way). Individual brush clicks did the job just fine.

Now let’s focus on the second image below. Something didn’t work for me in this piece, so I decided to add the first dynamic touch to this illustration, so I selected all the layers and used Command + T to rotate them at a small angle (for now it looked kinda like a slip).

Step 6

I zoomed out and positioned this man and ground to the right. I kinda wanted to avoid the center focus of illustration. Sometimes it’s good to move the main object/person to the side, looks more dynamic and original to me.

OK, then I decided that this position works perfectly for this piece and started touching up shadows. Looking at this man it’s visible that few sources of light hit him (for example his left hand shows that light reaches it from left and right). So in this case I decided to give this man a soft shadow, only underneath him by using the same technique as previously.

I only want you to pay attention to his shoes which are the closest objects to the ground. Shoes stick to the surface, this means they need more shadow around them. The farther the objects are from the ground, the more they start to disappear (and the shadow starts to soften, then slowly vanish).

Step 7

As I was watching my illustration now, I felt like there are some spots that are too bright, so I used the Burn Tool to enhance the shade effect of the shoes. I also did some blending with the hand, as It seemed too bright on the left side.

Step 8

Finally this man is ready. Now this illustration needs to look more like one piece. So I did some overall color adjusting. I added a Curves adjustment layer and then a Gradient Map with a Violet to Orange gradient (picked from standard presets). Then I lowered the Opacity of the Gradient Map to around 25-30% and changed its Blending Mode to Soft Light. Both adjustment layers were set up to give this illustration a yellowish touch (as I experimented and liked it).

Step 9

Now it looks like this man really belongs to this place, and that’s the thing we want. Next, I started all the light tricks.

Here is something abstract that I prepared for this piece. So I opened these lights and dragged them into the project while changing its Blending Mode to Linear Dodge. It was put above all layers just not to get colorized by two previous adjustment layers.

Now look at the process. As I already had these abstract lights, I took the Burn Tool (Midtones) and burned parts of this piece that I wanted to get rid of (2nd image below). Then many less of these lines lasted, so I used a hard Eraser Tool to erase the rest of the disturbing lines, which I didn’t want to see here (3rd image below). Finally I added Image > Adjustments > Color Balance and adjusted this color exactly for these three main lines (blue, green and yellow). I worked to achieve cool, bright coloring for these lines.

This can be done for each line separately, but before that they need to be cut out into new layers.

Step 10

As I said, if you don’t have some color experience, this tutorial will be difficult for you to follow. Now is the further part when I repeated the same process as in the previous step. I created, erased, separated new lines and added various colors.

Step 11

I was still into adding color light lines, and I want to show you another example of flexible work. During this process I had many ideas of how to connect and set these lines.

First I thought maybe a good idea would be to cross them and make them in different positions (1st image below). This didn’t work out and I decided to make all the lines almost parallel (2nd image below). So I made it, and for some variation I added one green line that kinda crossed the space, but it gave some depth to the illustration so I left it be.

Step 12

Now I added some more brightness in places indicated below using soft white brush. The new layer was created below the lines layers, as these lines are half transparent (cause of the linear dodge mode), so everything put below these lines is visible.

Step 13

I played around with these lines and achieved some cool results (first image below). All done the same way as I showed previously.

Next I felt like this piece needs some more details going all around it and filling in some blanks. You can find some similar brushes to the ones I used for this. Experiment with various brushes in this step.

I picked one my grungy splatter brushes. Then found a nice dark color (coming from the color that I used in light lines – in my case it happened to be blue) and made a brush mark (second image below). Then I brought up the selection of this brush mark and contracted it by 2 pixels by going to Select > Modify > Contract (third image below). Next I hit Delete to get rid of the center brush part (forth image below). Then I positioned it near a light blue line.

Step 14

Now as I had this brush mark placed correctly, I used a soft eraser and erased disturbing parts. Then switching between the Burn Tool (Midtones) and Dodge Tool (Highlights) I pimped out selected dark spots of this brush mark.

When using the Burn Tool you actually darken the spot. When using the Dodge Tool, you brighten it up. So I was very careful in this step, a small overdo can destroy the idea.

So this process is just to show you how it works, the brush mark in the first three images below are just an example. In the forth image below you can see the brushes that I used originally.

Step 15

By the way we’re still with these brushes, pay attention to the little pieces above the man’s head (first image below) and the ones near his leg (second image below). Yes, they were made the same way as previously. To do this you can even use some splatter brushes and follow the same process.

Also pay attention to the second image below. I indicated a spot that points to shadow. This shadow made an illusion that these little pieces are in the air. So if you get more small pieces around the ground, you can cast some shadows underneath them (but on the ground) and this will give your effects more depth.

Step 16

Next to to add some sparkle to this illustration I decided to use a picture of sky and cut the sun out of it. Then I desaturated this piece (second image below) and set its Blending Mode to Linear Dodge and I erased all the unnecessary parts around this sun (with the Eraser Tool). I also brought up the Levels (Command + L) and enhanced the contrast. Then I used Burn Tool (Midtones) to enhance the light effect and darken the rays (fourth image below). Finally, I colored this sun using Hue/Saturation and Color Balance, I made it green and then gave it a touch of yellow.

Step 17

The sun was resized down to a very small size, and at this size it completely stops being recognizable as a shining sun. Now it’s just a shining spot. I duplicated it many times and placed it in various spots. By the way, I changed the color when it was necessary to make these lights fit. To change colors I followed similar steps as before (basically Hue/Saturation and when the tone was not fully satisfying I pimped it with Color Balance).

Step 18

Moving forward I thought I’d use these nice clouds of this sky to make some dust. So I opened the image and desaturated it. Then (as previously) I used Levels (Command + L) to make the clouds stand out. Next, I used a soft Eraser and got rid of unwanted parts (fifth image below). Finally, I grabbed Burn Tool (Midtones) and made some touch-ups to these clouds. I kinda separated them and brought them up more.

Step 19

I named these clouds "Dust" and changed the layer’s Blending Mode to Linear Dodge. Then rotated them and placed them towards the lines direction (as you can see in the image below).

I made a small comparison below, the whole illustration got a little bit smoother when I added this dust.

Step 20

So the illustration was almost finished, but the light lines were still not blended enough with the model. I hit Command + A to select the whole canvas, and then Command + Shift + C (copy merged) and Command + V (paste). This way I made a duplicate of the whole image and put it on top of all the layers.

Then while having this image selected, I went to Filter > Liquify and as you can see in the first image below, I did some stretching using the Forward Warp Tool (in Liquify filter). In the second image below you can see how smooth and nice these lines were blended.

Step 21

As the final touch I wanted to give this piece a little more realism, so I casted light reflections on this man’s clothes and skin. Each arrow below has the color of the nearest line. For example, the first orange arrow point of the shirt spot which should be affected by the orange light line. So I gave an orange color to this spot, and so on with the others.

To do that I made a new layer with the Blending Mode set to Color (Soft Light in some cases works fine also), then I used a very soft brush with proper color, and Voilà!

Conclusion

In the end you can give it a nice overall sharpen using highpass filter, this will bring even more quality to your work. So I hope you liked this piece, thanks for reading. The main purpose of this tutorial was to show you a good direction in how to use these effects. So be creative and try to discover your way of using them.

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.

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: Photoshop CS4
• Difficulty: Intermediate
• Estimated Completion Time: 1-2 hours

Step 1

For this tutorial I will be rendering the side of a vehicle. This is just a random sketch of mine that I chose. Notice the wheels are vastly exaggerated perhaps a little too much, but for the purpose of this tutorial it works fine.

There are countless different ways to render a vehicle and the purpose of the rendering should determine the style of the rendering. If you are in the initial stages of a project, you can be very loose with your rendering and only spend about ten minutes on it. If you are further along in the project the rendering will be tighter to demonstrate a truer illustration of what the real vehicle might look like. This tutorial demonstrates how I would tackle the latter. The style is my style and should be used as a guide and catalyst to developing your own style.

Scan your image and open it up in Photoshop. The quality of the sketch is not important in this case because the whole thing will be redrawn in Photoshop and any mistakes will be corrected (for example, one of the wheels might be smaller than the other).

Select Alt + Command + I and change the document size width to 210mm and the DPI to 300. This means that if the resulting image is printed at full size on an A4 sheet of paper the quality will be good, even if it were to be printed at A3 it would still look good.

By default the sketch will be on a layer called “Background” and the layer will be locked. To unlock it, right-click on it and select Layer from Background … a New Layer dialog box will appear, click OK and the layer will change to “Layer 0.” Now click “Layer 0″ once so that it is selected, then double-click it and change its name to "sketch." Next click the little padlock above it to lock the layer.

Go to Layer > New > Layer to create a new layer, then rename it "bg." You can now drag and drop layers to reorder them. Place the "bg" layer below the "sketch" layer. These two layers will remain at the bottom of the layers tab.

Step 2

This is the most laborious of the process. Using the Pen Tool (P) trace over your sketched lines. Use as few points as possible to keep the sketch flowing, light and clean. As an example, the top curve uses only two points, the first one and the end.

Step 3

Go to the Brush Tool, select a Hard Round 1px brush and make sure the color is set to black. The Opacity and Flow should be set to 100%, which is the default.

Create a new layer (Shift + Command + N) and call it "outline." Click on the Pen Tool, right-click anywhere on the image and select Stroke Path, the dialog box should come up with the brush tool selected (this should be the brush that was defined earlier). Make sure simulated pressure is not selected and click OK.

In the path panel (Windows > Paths) the "work path" will be highlighted in blue. Click outside of the blue area to deselect it. The paths will now be invisible. To make them visible again click on the work path (notice that the background is a light blue color, this is just a personal preference of mine and is not necessary).

Step 4

Select a medium color, (I have chosen a light blue, but it can be anything in the midrange), make sure that this is the foreground color.

Make sure that the "outline" layer is selected, then use the Magic Want Tool (W) to select all the areas of the car that will be made into metal. Between each piece selected there will be a gap where the line is, so you need to expand the selection by 1 pixel. To do this go to Select > Modify > Expand, and enter 1 in the box, then apply.

Make sure that the selection is still active. Now create a new layer and Edit > Fill the foreground color. Rename this layer "base" and make sure that it’s below the "outline" layer.

Step 5

Reduce the opacity of the "outline" layer.

Step 6

Using the Magic Wand Tool (W) select the wheels and ground area and any area which will be black. Now fill it with black. Put this layer underneath the "base" layer.

Step 7

For this next stage I have modeled some wheels using Alias (I am in the process of writing a tutorial on how to do this, visit Designer Mart for more news on this in the future), though you can find a stock image of wheels to use.

Step 8

Create a new layer and name it "outer lines." Go to the Brush Tool (B) and select a slightly thicker brush that is Hard and Round with 3 Pixels for size. Turn the paths on. Grab the Direct Selection Tool (A) and click on an outer path to select it, then right-click and select Stroke Path. Turn the paths off to get a clearer view of the new stroke.

Step 9

Create a new layer and name it “glue.” Using the same method as Step 7, create the strokes to highlight the glasshouse and lights.

Step 10

Create a new layer and name it "shutlines." Use the same method as in step 7 to create some shutlines. Select the Eraser Tool (E), right-click anywhere on the image and select a large, soft, round shape. Use this eraser to rub out bits of the ends of the shutlines to make them look lighter towards the ends.

Step 11

It’s important to decide which parts of the vehicle face upwards and which face downwards. Any part that faces up will reflect light and any part facing down will be darker.

Create a new layer and name it "ground darkness." Command + Right-click the base layer to select the area. Make sure that the "ground darkness" layer is selected.

Select the Gradient Tool (G) and make sure that the black to transparent setting is active and apply it from the bottom of the selection upwards.

Step 12

Make the "outline" layer active and use the Wand Tool (W) to select the shapes above the wheel arches. Create a new layer and name it highlights. Fill this layer with white, then use the Eraser (E) tool to soften the top edges of the arches. Using the techniques described above work your way down the car.

Step 13

The area underneath the glass is facing upwards so it will reflect light.

Step 14

The area at the top of the side of the car, known as the waistline, is a large area facing upwards so it will be lighter. I’ve added a little darker bit to the bottom right of it. Sometimes when something large reflects the sky it’s nice to add a little break in it. Some houses or trees might create such a shadow.

Step 15

The sill area will reflect light.

Step 16

Add a little light coming in from the front to give it more depth.

Step 17

Select the area just below the waistline and add a slight gradient to that area, this will give the impression that the area below it is reflecting the atmosphere.

Step 18

Add a little shade to the front grille area.

Step 19

Add a little shadow just below the shoulder-line near the front to make it look like its slightly pinched.

Step 20

Then add a solid block to that to accentuate it further.

Step 21

Select the “base” and add a large gradient from the right. Play with the Opacity of it to make it subtle. This it to make it look like there is light coming from the right.

Step 22

Select the glasshouse area and fill it with a light blue color.

Step 23

Select the bottom half of the glasshouse and fill it with black and turn down the opacity until you get a nice gray color. Then select the upper section of the glasshouse and add a light gradient and again adjust the opacity until you get a realistic look.

Step 24

Often cars reflect road markings or the environment and creates nice flowing shapes on the side.

Step 25

Then add an outline to the reflection.

Step 26

Add a large shape to the left of the car and add a gradient to it. This will make the vehicle stand out.

Step 27

This step is to make the vehicle stand out. If there was a theme to the design, then the image might be more relevant. In this case, I just painted some random shapes using stock Photoshop brushes. Put this image in the bottom of the layer tab just in front of the "bg" layer and name it "atm."

Step 28

Make a copy of the "atm" layer and name it "atm reflect." Go to Edit > Transform > Scale to scale the "atm reflect" layer down a little bit. Command + Right-click the “base” layer to select the area. Command + Shift + I to select the inverse of what is selected. Make sure the "atm reflect" layer is selected then delete it.

Step 29

Now turn all your layers on apart from the "outline" layer.

Step 30

For the back light draw a random squiggle.

Step 31

Then apply an "outer glow" layer style to that layer to give it a glow.

Step 32

The front lights were created using a scatter brush painted in a straight line and erased towards the front. Then I added a glow on the back lights.

Step 33

It’s nice to flip the outcome to see how it looks from the other side. Edit > Transform > Flip Horizontal

Step 34

Using this method you can easily change the color of the car without having to worry about the highlights, lowlights, etc… simply change the "base" color.

Step 35

Experiment with different wheels. (this is another of the designs) …

Conclusion

Experiment with different background colors. The final design is below. There are lots of different styles of rendering, this is just one, have fun making your own!

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 view a larger version here.

Tutorial details:

• Programs: Adobe Photoshop CS4 and Modo
• Difficulty: Advanced
• Estimated Completion Time: 5-7 h

Step 1 – Preparing the canvas

Before we begin there are a few things worth mentioning. All the photos in this tutorial belong to the author, Pirosca Marcel. They were not gathered from stock sites around the net. The main character was shot in my photo studio.

First off I opened the original image resulted from the shooting with the main purpose being isolating the character and the shadows on the floor. First thing I noticed was that his face was not expressive enough for what I had in mind.

Before we begin cutting out the character I needed to replace his head with one from another picture where he looked more optimistic. I always shoot a lot of pictures every session, so when situations like this arise I have plenty of other images to choose from. The most important thing is that the light sources must be in the same place so it integrates seamlessly and believably. The light needs to come from the same directions. I have found the image below to be a good match for what I needed.

Using the Polygonal Lasso Tool create a selection around his head. The background contains only a flat color, so the selection should be very easy to make. I selected his head just as in the image below, then copy/pasted it into the original image, on a new layer.

I scaled and rotated it so that it matched the old head.

As you can see some integration is needed to be done for the head to blend perfectly. First off, cut out the background head so we can work on our new one. Use the Polygonal Lasso Tool to select and delete it. We should now have something similar to what we see below.

Notice that the most important region to work on is his neck. In order to obtain a nice transition from one to the other we need a transparency mask on the new head, then with a relatively soft (50%) Eraser Brush start deleting some of the harsh edges on the neck until you reach a good result. This part is open to a lot of trial and error, so using a mask will help us recover some of the parts we may have accidentally deleted. Finally, you should obtain something similar to the next image.

As we can see we need to work on some of the details. We need to fix the shirt and neck lighting in order for him to be believable. For the neck I used a combination of Dodge/Sponge tool as illustrated below.

In order to fix the shirt I copy/pasted a part of his shirt and then I blended it (using curves and transparency mask).

We are now ready to isolate our guy and the shadows on the floor. As he is a hard edged surface against a flat background it should be fairly easy to select him using the Polygonal Lasso Tool. I personally prefer this tool over the paths approach to selection because I don’t have to adjust any control points and tangents, even though it means a lot more clicks. Copy/paste him into a new layer.

Next thing we want is having the shadow on a different layer. As you can see the background of the photo studio was kind of dirty, so in order to remove the stains I applied some Surface Blur. I found that this type of blur is best for this operation as it removes noise while preserving some detail.

Once we got to this stage we can select the shadow using Color Range and the following settings.

Of course there will be some unwanted regions in the selection. Hit OK, and after the selection was made enter Quick Mask mode. Proceed to erase the unnecessary parts, as depicted in the image below.

Now in order to have the exact shadow we need to subtract the contour of our guy from the remaining selection. While in Quick Mask mode Control-click the thumbnail of the main character layer in the layers palette. This will load the selection for that layer. Press Delete to erase the quick mask inside the selection.

Exit Quick Mask mode and we have the selection of the shadow. Just copy/paste it onto a new layer.

We now have the character and his shadow isolated and on separate layers. We are ready to begin the final image.

Step 2 – Composition

This was a HUGE piece of work, size related. In order to achieve the final image we need to create an image 3613 by 5000 pixels. To get an idea of what I actually wanted, first I took the main character and moved it around the canvas; finally deciding to place him on the lower half of the image following the flow of his body. Being on a separate layer meant I could add all sorts of details behind him. The first thing that needed to be done was to further differentiate him from the gray background.

Use a white, soft brush with 20% Opacity to create a glow behind the guy.

Next it’s time to determine how the lines in the image would flow. For this I used my tablet with the size controlled by the pen pressure and Opacity set to about 30%. I proceeded in drawing the lines on which our man was surfing by holding Shift (so that the brush draws a straight line) and pressing harder on the tablet (for the line to be thicker) at his feet and then pressing less as the lines faded away.

This gave the lines the feeling of perspective and also helped me to give a sense of depth. I have to add that this is a process prone to a lot of trial and error, so it might take a while until you are satisfied with the results.

Now it gets interesting. In order to be able to replicate all of the planes fading away and also maintain proper perspective I used the Vanishing Point Filter to eyeball the plane our man is surfing on. There is an entire discussion here, because you can’t define that plane exactly how it is in reality since you have no reference. After several attempts I settled for the one below, thinking it works. To do this go to Filter > Vanishing Point.

The deal with Vanishing Point is that these planes can be extended at 90 degrees or arbitrarily. Using this method I further constructed additional planes to help me keep track of perspective, while trying to match my sketch lines as close as I could.

With this setup in position I was now able to add elements that will be flowing along these planes. But first I had a point to settle.

Somewhere along the line I experimented with color variations since the gray seemed a little dull. I love color and decided to use its power to give it a little punch.

Step 3 – Color Scheme

In order to obtain the proper colors for this piece I used three adjustment layers and placed them on top of the image. Two of them affecting only the skin (using masks), and a third one to set the general mood. For the skin, a Levels and a Color Balance to add subtle color enhancement.

And then a Color Balance affecting the whole image to give an overall greenish mood. The settings are shown below.

We are now ready to add in the details.

Step 4 – Digital Volume

Open Illustrator and by copy/pasting and then scaling vertical rectangles you can obtain something similar to the first digital volume in the image below. Make a copy and move it below.

By adding horizontal rectangles and subtracting them, it’s easy to obtain the second one. Just create one rectangle, move it vertically (by holding down the Alt key to create a copy) and press Command + D repeatedly to multiply it.

Copy the second volume graphic and go to Photoshop.

Now paste it into the Vanishing Point filter. For some reason Photoshop doesn’t allow directly pasting paths from Illustrator there. So we must paste it on a new layer as pixels first. Rotate it and scale it vertically just as in the image below in order to have as much resolution as we can.

Then Command-click the layer thumbnail in the layers palette. This will bring up the selection of that layer. Press Command + C to copy it into the cache, then delete the layer. We can now move to the Vanishing Point filter.

Go to Filter > Vanishing Point and paste. You should have something like that shown below.

Now if you drag that selection onto the floor plane, Photoshop will automatically calculate the right perspective for you.

Do it again to extend the volume further back.

Go to blending options and add the styles shown below.

You should now have something looking like this.

In order to to have some of the squares transparent, like in the final image, create a Transparency Mask for this layer, and then use a 50% gray (#7a7a7a) to paint over the squares that you want transparent. This can be a tedious process and it is up to you to decide which ones you leave opaque and which not. I will illustrate.

Now to give it a little punch, duplicate that layer, set its Opacity to 68%, and apply the following Curves (Command + M) to its transparency mask and you get this. The gray in the mask should have turned to black so this layer affects only the opaque squares.

It should look something like this.

We have reached a delicate part which takes a lot of tweaking to get right, but the main idea is to use a copy of the volume, move it into place and then use the Warp Tool to simulate the curvature. The tricky part is that some of the lines may get curved the wrong way and I had to personally correct them. Fairly time consuming I must say, but no other idea to create that corner came to mind.

Using the same technique as before, create a transparency mask and block out some transparent squares using a 50% gray.

Again, use the Vanishing Point Filter, Warp and a Transparency Mask to create the next section. It will take some work, but I already illustrated the necessary techniques.

We proceed to add the rest of the sections until they vanish.

Back to Illustrator. Using the Pen Tool to create a path along the sketch lines. Then round the corners. The easiest way for rounding vertices is to use a script called Round Any Corner found in this archive. Read more here.

Fill the final path with white, remove the stroke, and copy/paste it into Photoshop underneath the “volume” layer.

In order to enhance the look I decided to add another volume, this time white, underneath the one we created. Use the Vanishing Point filter once again, copy the first volume created in Illustrator, and extend it into perspective, as shown below.

As we can see, the trail is overlapping the white volume, so we need a mask to hide part of it. Leave only the top-left section visible.

We just need to add the shadow underneath our guy and we’re done with this section. We isolated it earlier in another document so just copy/paste in a new layer and align it. Set it to Color Burn with 50% Opacity. Now he looks like he’s actually there.

Step 5 – Background and Foreground Images

There are multiple ways to create the flying images, but I found that the quickest and easiest was the 3D approach. Basically, I took the planes generated by Vanishing Point and tried to recreate them in 3D. Considering that they were flying on a vertical plane on the surfer’s sides meant I had to create only one plane. I could extend everything else from there. Hang on, you’ll see what I mean.

The application of choice was Modo, but this can be done just as easily in others too. Again, I did this in 3D because it was much faster, I could move the planes into perspective much easier, which means more experimenting hence better results. Arguably I could have done this with Vanishing Point too, but it would have been time consuming.

Besides on my computer, Photoshop kept crashing if I worked more than 30 seconds with Vanishing Point, which happened about 100 times when doing work on the music volume. After that, I knew 3D was the only choice. Besides you’ll learn a new technique.

First and foremost we need to prepare a backplate for the 3D environment with the plane we need to match. I used the following image. Save it as a separate JPG.

In Modo create a new scene.

Go to Item > Create Backdrop. This creates a plane which we can add the image above as reference.

On the right you will see the following menu. From the Items list choose the backdrop item you just created, then in Properties, go to Image > Load Image.

Choose the “backplate” we saved earlier.

As you can see, the backdrop rotates as we rotate the view. We don’t want that, we want it to remain still and only move the geometry. In order to do that go to Projection Type > Camera. This will make the “backdrop” invisible for the current perspective view, but it will act as a background for the camera.

Press Command + Space. This will bring up a pop-up menu where you can choose what your viewport will display. Select Camera of course.

Now if we rotate the viewport the background image will remain still. To make sure the rendering will have the same dimensions as our piece, on the right side go to Shader Tree > Render and set the width/height of the scene to 3613/5000.

We are ready now to match some geometry.

Make sure that Trackball Rotation is active in your camera Advanced OpenGL menu. This will ensure that the camera will be able to rotate on all axis not only on XZ.

Now the tricky part. By rotating the camera slowly try to match our 3D plane with the one in the reference. Also scale the plane and make it longer.

One thing is obvious, the camera perspective is not dramatic enough to match the two planes. When I say dramatic I mean that the parallel lines do not converge fast enough. So we need to increase it.

The perspective of a camera depends on how wide the entering cone of light is. The wider the cone, the greater the perspective. The narrower the cone, the lower. That’s why wide camera lenses tend to distort images and emphasize perspective. That cone angle is directly controlled by the focal length. Fortunately Modo’s camera model is very similar to the real world one, so we can edit that parameter.

I have found by trial and error that 10mm focal length is close to what we need.

Of course the objects are now smaller, because the wide angle covers more space. No worries there. We just have to close in with the camera, and rotate it. Suddenly, the plane fits much better.

Not the perfect match but with a little bit of tweaking the camera we are there.

This can be a tedious process because the first time you create the plane, you have to rotate the camera and change the focal length at the same time to get a good match. Which can be tricky and time consuming. But once you have the focal length determined, everything else is a piece of cake. Below are the camera settings to get the exact match.

Once we have that plane into place, we can duplicate, scale and move it to create different copies. You can move them parallel to each other to give the feeling of depth.

Observe the wide angle of the camera and the final geometry.

Press F9 to render the Camera view. It shouldn’t take long because it is a simple scene. This is what you get. Switch to Alpha Output and save a JPEG.

Back to Photoshop. Let’s see what we got so far.

Open the Alpha Image we saved from Modo in Photoshop. Copy it, then switch to our surfer, in the Channels tab create a new one and paste the alpha inside.

Now if you Command-click the channel thumbnail you get a selection.

Create a new layer and fill it with orange (#ff8f00).

Cut and paste the images that are supposed to be behind him on a new layer and move it underneath the “digital surfer” layer in the Layers Palette. This way they will seem to be behind him in space.

There are too many of them flying right now, they overcrowd the scene so proceed to erase some of them in order to maintain balance. Most are from the lower-left corner.

Now we will round off the corners of the images, so they look a little less pointy. To do that load the layer selection by Command-clicking on its thumbnail in the Layers Palette. We will first round off the small rectangles, as they need a smaller radius, and then progressively do the others. Subtract parts of the selection to obtain the one below.

Go to Select > Modify > Smooth and set the radius to 10 pixels. Then press Command + Shift + I to inverse the selection and delete. There you go. You now have rounded corners.

We need to apply the same technique to the larger images. This time with a radius of 20 pixels since they are closer to the camera. Do this for the next selection.

You will get this result.

And now the final step of this process is to round the corners of the foreground images. Repeat the above steps with using the radius in the image.

Proceed to apply the following style to the image layers. We need to give it a little depth.

The difference is very subtle around the edges but its still there.

Now we will assign different opacities to various images depending on how far they are from the camera. I need you to copy and paste the following onto a new layer and assign it 25% Opacity.

Copy and paste into a new layer the following selection and assign it a 65% Opacity.

Copy and paste the following selection into a new layer and assign it a 44% Opacity.

Copy and paste the following selection into a new layer and assign it a 75% Opacity.

After all these steps you should be looking at something like this.

The next thing to add are some highlights over the flying rectangles. Select all of them, then with a 20% Opacity, soft brush, paint some highlights on them. Take a look at the second picture below to get an idea.

The only thing left to do now is add some textures on top of them. I will demonstrate the technique used for one of the images, then by repeating it a lot all the other rectangles can be filled too. We’ll use one of my photos to do this. You can find the rest of the images used images here: xn3ctz.deviantart.com/gallery/. This is my portfolio of stock photography. Feel free to use them.

Anyway, copy and paste this image into a new layer in Photoshop.

Using the Transform tool Command-drag the corners to fit one of the rectangles we want to texture.

Then set the layer to Overlay blending mode and use a mask to round off the corners. The opacity can depend on the distance to the camera, meaning that the images in the background can be a little transparent to give the feeling of depth.

After you do this with all the other images you should end up with something pretty nice. Anyway, it is time consuming so I’ll jump straight to the end result.

Step 6 – Translucent Interface

I started by creating these fairly simple shapes in Illustrator. They will act as textures for the interface pieces.

Copy the bottom left shape into Photoshop and place it into position.

Set it to Multiply with 35% Opacity and apply the following layer styles.

Use the same settings and the Illustrator paths we first created to add the next shapes.

Add some texture using the other shapes. They should be white set to Soft Light blending mode at 100% Opacity. Place them using the Transform Tool (Command + T) and fit them to the interface pieces.

And now FINALLY the last step. Create a new layer, load the interface selection, and with a 20% Opacity, soft, white brush paint some highlights just as we did with the rectangles.

THAT’S IT! Just zoom-out turn on the visibility of all layers and enjoy!

Conclusion

With this tutorial we have explored various ways to create the feeling of depth and space while maintaining perspective. All starting from a simple photo, adding layers and layers of details all working together in a seamless piece.

I hope you liked it and learned some new techniques from this tutorial. See you online. Cheers!

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.

Tutorial Details

• Program: Adobe Photoshop CS4
• Difficulty: Advanced
• Estimated Completion Time: 2 hours

Video Tutorial

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

Step 1

Let’s start by creating a new RGB blank document, choosing a 512 px square canvas. Activate Snap from the View Menu (Shift + Command + Semicolon key). Set up two guides to mark the center of the canvas.

Select the Rounded Rectangle Tool (U), choose Shape Layer and set the Radius to 10 px in the Options bar (1a). Draw a brown rectangle by Alt-clicking and dragging from the center of the canvas (1b). This is the briefcase’s main body, so name it “main.”

Step 2

Let’s achieve a higher realism by introducing some color variation. Set up the foreground (2a) and background (2b) colors to brown hues, then go to Filter > Render > Clouds. This will create an irregular stain pattern with the two colors that simulates leather’s natural color variation (2c).

Step 3

Let’s add a real leather texture. Download this image and place it in the document, naming its layer “texture.” Scale it down proportionally until it’s slightly bigger than the briefcase (3a). Command-click the “main” layer to select its pixels then add the selection as a mask to the texture (3b).

Set its blending mode to Soft Light and reduce the Opacity to 50% (3c). It looks a bit dull, doesn’t it? Let’s add some life to it. First bring up Levels by entering Command + L and move the right-hand slider closer to the center (3d). This raises the white levels, making the texture look brighter.

Step 4

Now select the “main” layer and double-click on it to bring up the Layer Style window. First add a dark brown Stroke to mark the perimeter (4a), then Inner Glow to simulate concavity around the edges (4b). It looks better already (4c).

Step 5

Now duplicate the layer and scale it down, clearing all styles (5a). Add an Inner Glow style to simulate a full pocket (5b). The hard edge is wrong, though, so go to Filter > Blur > Gaussian Blur and choose 3 px. Now there’s a smooth color transition (5c). Now back to the “main” layer, add a Gradient Overlay to darken the top part as it is shadowed by the flap that we’ll draw later (5d).

Step 6

Now we’ll use a clever technique to create the stitches. Draw a small rounded rectangle (6a), then from the Edit menu choose Define Brush Preset and name the brush “stitch” (6b). You can erase the rectangle now.

In the Brushes palette set the brush’s properties. Set its Diameter to 8 px and the Spacing to 550% (6c). These values were found by trial and error using the preview at the bottom of the palette. The brush is ready to be put to good use.

Step 7

Choose a pale yellow color for the stitches (7a). Now create a rounded rectangle (choose the Path option for the Rounded Rectangle Tool) sized between the “main” and “main copy”. The stitches will run along this path (7b). In the Paths palette you’ll see the path you just created, double-click on its generic name and enter “main-stitches” (7c).

Now create a new layer and make sure it’s selected. Back to the Paths palette, right-click on the “main-stitches” path and select Stroke Path. A dialog will pop-up. Choose the Brush Tool and uncheck the Simulate Pressure option if it’s not already. Here’s the result (7d).

As you can see, the brush doesn’t conform to the path so the little dashes are always horizontal. We need to erase the vertical sides. Then marquee-select the dashes at the corners and rotate them 45 degrees (7e, 7f). It’s OK if they don’t look symmetrical, as that looks more natural.

Step 8

We need to create a new layer now and stroke the path again to create the missing sides. Hit B to select the Brush Tool, then F5 to open the Brush palette, and rotate the “stitch” brush 90 degrees. See in the preview window that the dashes are now vertical, that is perpendicular to the path (8a). Just like we did before, stroke the “main-stitches” path on the new layer (8b). Erase the horizontal sides and you should be finished (8c). You can merge the two layers into one named “stitches” (8d).

Step 9

The stitches look flat. Let’s add some thickness. First a Bevel and Emboss style (9a) to give the stitches some thickness, then a Drop Shadow (9b). Now they look more realistic (9c).

Step 10

Leather reflects the environment so we need to add ambient reflections. Draw a rounded rectangle near the bottom of the briefcase, choosing a light pink color (10a). Name this layer “ambient reflection,” set it to Screen mode, and 40% Opacity (10b).

We need to soften its edges so apply a 3 px Gaussian Blur (10c). Now type Q to enter Quick Mask mode. The colors will change to black and white. Type G to select the Gradient Tool and click-drag vertically to create a black-to-white gradient (10d).

Hit Q again to exit Quick Mask mode and see the gradient turned into a selection: use it to mask the layer and fade out the top of the reflection (10e). At this point you might need to adjust the opacity to 60% and blur again to get a satisfying result (10f).

Step 11

Now let’s draw a divider to suggest two pockets. Draw a thin vertical ellipse with the Ellipse Tool (U) smack in the middle (11a). Name it “pockets.” We need to make the endpoints darker, imply lighting coming let’s say from the right and also add some soft reflections around this slit. Once again layer styles will make the job easy. First add a Gradient Overlay (11b), then Bevel and Emboss (11c) and finally Outer Glow (11d). Very nice, the bottom of the briefcase is complete (11e).

Step 12

Let’s draw the flap. Snap to the center guide and draw the right half of the flap (12a). Duplicate this layer, flip it horizontally and snap it to the left side of the guide (12b). You can adjust the paths until you’re satisfied with the shape. Rasterize the layers when you’re done. Name this layer “flap.”

Step 13

Add a Gradient Overlay style to the flap, making the top part bright, as it is lit (13a). The flap needs a texture too, so duplicate the “texture” layer and move it above the flap. To avoid repetition of the pattern, flip it vertically and squash it to match the flap’s proportions (13b). Also use the flap to mask it (13c).

Step 14

The flap needs some thickness. Copy the “flap” layer and move the copy below it, naming it “flap thickness.” Move it down a bit (14a). Adjust its Gradient Overlay so it’s a bit lighter (14b). The thickness is not textured. Since the flap casts a shadow on the main body, we need to add a Drop Shadow style too (14c).

We only want the shadow to be cast onto the briefcase so we need to mask out the parts that stick out. Right-click on the “flap thickness” and choose Create Layers. This turns the styles into separate layers, masked by their parent (14d). Now Command-click the “main” layer (14e) and use this selection to mask the drop shadow (14f).

Step 15

Let’s add stitches to the flap. Command-click the “flap” then go to Select > Modify > Contract and choose 6 pixels (15a). How do you know how much to contract the selection? Trial and error, no magic knowledge required (15b).

Create a path from this smaller selection and name it “flap stitches” (15c). With the Direct Selection Tool (A), modify the path so it sticks out from the top. We want to imply that the stitches curve around to the back (15d).

Step 16

Stroke the path using our custom “stitch” brush with its rotation reverted to 0 degrees (16a). Erase the vertical sides, then manually rotate the dashes around the curved corners so they conform to the flap (16b). On a new layer stroke the path again, this time rotating the brush 90 degrees. Erase the superfluous dashes. Copy and paste the layer styles from the previous stitches (16c).

Step 17

Next up are the locks. Choose a yellow color and draw a rounded rectangle, moving it below the “flap thickness” and naming it “lower plate” (17a). Apply a gold Gradient Overlay (17b), a Drop Shadow (17c) and a Stroke to simulate highlights on the edges (17d).

Step 18

Copy this shape and move it above all layers. Name it “upper plate.” Marquee-select the parts in excess and erase them (18a). Open the layer styles and uncheck Reverse from the Gradient Overlay (18b). Reduce the Drop Shadow’s Opacity to 30% (18c) and the Stroke’s Opacity to 50% (18d). It looks good (18e). Finally make a smaller copy of the “lower plate,” name it “lock” and reduce the Stroke’s Opacity to 50% (18f).

Step 19

The lock is attached to the flap by means of a short leather strap. Behind the “upper plate” draw a brown ellipse and name it “strap” (19a). Copy and paste the layer styles from the “main” layer (19b). Modify them: reduce the Inner Glow (19c), change the Gradient Overlay color (19d), and change the Stroke (19e). The changes were needed to accommodate the smaller dimensions of the strap (19f).

Step 20

Let’s add small, point-like stitches to the flap. The procedure was explained twice already. Make a smaller copy, select it and turn it into a path. Modify the “stitch” brush’s properties (20a) and stroke the path on a new layer called “strap stitches.” This time we don’t need to rotate the dashes as they are round. Apply the same layer styles as the other stitches (20b).

Select and link the “lower plate,” “lock,” “upper plate,” “strap,” and strap stitches.” Now move them to the center of the left pocket. Copy them over to the right pocket (20c). When you copy them, the layers will all be above the originals. You need to move the “lower plate copy” and “lock copy” below the “flap thickness” so they’ll receive the drop shadow properly.

Step 21

The last element to draw is the handle. Create two small metal buckles using the Rectangle Tool (U) (21a). Apply a light gold Gradient Overlay style (21b). Create a light brown rectangle behind the buckles, skewing it to conform to the flap’s upper edge (21c). Copy it and flip it horizontally under the right buckle.

Step 22

The handle is created with a rounded rectangle (Radius = 5 px) placed below the buckles (22a). Type Command + T to invoke the Free Transformation Tool, then right-click on the handle and choose Warp. In the Options bar select Arc and set Bend to 20 (22b). The resulting shape (22c) needs to be scaled down and be made lighter (22d).

Step 23

Let’s add a couple of finishing touches to make the handle look better. Add a Satin layer style to darken the middle part (23a). Subsequently add an Inner Glow style to create the top highlight (23b). The briefcase is now finished (23c).

Conclusion

Complete the icon with a shadow or a reflection to suit your needs. In this tutorial you learned how layer styles can be used to simulate thickness and lighting with a minimum effort and how custom brushes can be employed to create patterned strokes. I hope you had fun creating the briefcase. Hey, you can use it to show off your impressive portfolio now!

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.

Tutorial Details

• Program: Photoshop CS and newer
• Difficulty: Beginner
• Estimated Completion Time: 30-45 mins

Step 1

First of all, create a new 500px by 500px document with white background. Drag out some guides at the center of the document for convenience. Select the Pen Tool (P) and make a shape like the one shown below.

Step 2

You need to add some colors and a thin-white strip to the shape. To do so, double-click on the layer and apply the following Layer Styles.

Step 3

Duplicate the shape (Command + J) and go to Edit > Transform > Flip Horizontal, move the duplicate shape rightward so that the sides join each other as shown.

Step 4

Due to similar colors, the two shapes give a flat look to the roof. There’s a need to fix that. Open the Layer Styles of the duplicate layer, and apply the following changes.

Step 5

Set foreground color to “830F00.” Draw a shape like that shown below with Pen Tool (P). Name the resulting shape “roof left”.

Step 6

Duplicate the shape and name it “roof-right”. Go to Edit > Transform > Flip Horizontal and move the duplicate shape rightward so that you get something like this.

Step 7

With Pen Tool (P), draw another shape like the one shown below, name it “body.”

Step 8

Double-click on the layer and give it these Layer Styles.

Step 9

You need to put the roof’s shadow on the body of the house. To do so, Command-click on the “roof left” layer, then Command + Shift-click on the “roof right” layer to sum up the selections of the two layers. Move the selection down and on a new layer fill the selection with the color “5F5343.”

Step 10

Go to Filter > Blur > Gaussian Blur, enter 10px and click OK.

Step 11

You might notice that after the filter has been applied, the shadow is flowing outside the house’s body, which doesn’t look right. To fix it, Ctrl-click on the “body” layer, and press Command + Shift + I to invert the selection. With the “shadow” layer selected, press Delete.

Step 12

You now need to add a prominent part of the house – that is the door. Select the Rectangular Marquee Tool (M), and on a new layer fill a selection with black.

Step 13

Give the door the following Layer Styles.

Step 14

Now we need to add some details to the door. Select the Rounded Rectangle Tool (Shift + U) and draw a black rectangle with a 3px radius.

Step 15

Go to its Blending Options and apply these settings.

Step 16

Duplicate the shape and move it down so that you have something like this.

Step 17

A handle can now be added to the door. Use the Ellipse Tool (U) to make a small circle on the door.

Step 18

Give the circle a Drop Shadow and a Radial Gradient.

Step 19

You can add a slab above the door. Use the Pen Tool (P) to make a shape like the one shown below.

Step 20

Go to its Blending Options and give it a Gradient Overlay of a similar tone as that of the roof.

Step 21

With the Pen Tool (P), make another shape like the one below.

Step 22

Give the shape the following Layer Styles.

Step 23

Create a new layer and fill a selection with black on it. Make sure that this layer is placed below the “door” layer in the Layers Palette.

Step 24

Give the black strip a Gradient Overlay of the following colors.

Step 25

As a further detail, you can add a door-step to the house. Make a shape like the one below with Pen Tool (P).

Step 26

Give the door-step a Gradient Overlay.

Step 27

To give the door-step a 3D look, add some thickness to it. Set the foreground color to “A26431″ and draw a shape like the one shown below.

Step 28

It’s time to add windows to the house. Start doing so by filling a selection with black on a new layer.

Step 29

Using the Rectangular Marquee Tool (M), fill a selection with white on a new layer as shown.

Step 30

Go to the Blending Options of the windows cross section, and give it these styles.

Step 31

Now, you need to make shutters. Just like you made the door, make a shutter and put it on one side of the window. Make a copy of it and move it to the other side, give a Drop Shadow to the shutters if you want.

Step 32

Just for increasing details, add a slab to the window like you did for the door. The only difference is that you need to apply the Layer Styles of the door-step to the slab you are making for the window.

Step 33

Create a layer set and put in it all layers that constitute the window. Duplicate the layer set twice and transform it to 60% of its original size. Put the smaller windows on the right side of the door.

Step 34

You can now add a chimney to the house. Create a new layer and on it, fill a selection with black.

Step 35

Give it a Gradient Overlay with these colors.

Step 36

Make a shape like the one below to give the chimney a 3D look.

Step 37

Make another shape of any color for the chimney.

Step 38

Give the shape a Gradient Overlay with these colors.

Step 39

Set the foreground color to “D6C08D” and make a shape like this.

Step 40

It’s time to give shadows to the base of the house icon. Create a new layer, then use the Rectangular Marquee Tool (M) to fill a selection with black.

Step 41

Apply Filter > Blur > Gaussian Blur and then Filter > Blur > Motion Blur with these settings.

Step 42

Make a similar shadow for the door-step. You can set the Opacity of the shadows from 80-90% or from 20-30%. I added some grass and ended up with this.

Conclusion

The final image is shown below! I hope you enjoyed creating this icon design!

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