This week’s tutorial comes by way of request from Bostjan in Slovenia who asked for a lesson on creating the peeled back sticker effect from the OnWired website (they’re great designers by the way so check ‘em out). Although I don’t usually favor the "how’d they do it" type lessons, quite frankly my creativity well is running a little low this week so what the heck.

Lets jump right in and open a new document by selecting File>New from the main menu or by pressing the keyboard shortcut Command-N (PC: Ctrl-N). The size of my working document for this lesson is 540×300 at 72ppi.

Create a new layer by choosing Layer>New Layer from the main menu or by using the keyboard shortcut Shift-Command-N (PC: Shift-Ctrl-N) and call the layer Sticker. Click on the foreground swatch in the Tools palette and set the color to #e0dac7. Now lets grab the Elliptical Marquee tool (which is in the Rectangular Marquee tool fly out menu) and while holding down the Shift key to constrain, click and drag a circular selection onto the stage. If you’re following along at home and want yours to be exactly like mine, my selection is 95×95px.

(*note: To create a new layer without the Layer Properties pop-up message use the keyboard shortcut Shift-Option-Command-N (PC: Shift-Alt-Command-N))

Fill the selection with your newly set foreground color by pressing Option-Delete (PC: Alt-Backspace), then deselect by pressing Command-D (PC: Ctrl-D)

Now lets go back to that Rectangular Marquee tool fly-out menu and re-select the Rectangular Marquee, or do it the easy way and use the keyboard Shift-M to switch back and forth between the two.

Drag a nice sized square selection onto the stage (don’t forget to hold Shift to constrain the proportions). Next lets rotate the selection by choosing Select>Transform Selection from the main menu. This will give you the Free Transform controls that you’re used to, but the transformation will only be applied to the selection (not the stuff on the layer). Using the Options bar at the top of Photoshop enter 48° into the rotation field and hit Enter to commit the transformation.

With the Marquee tool still selected, click and drag inside the selection to position it over the corner of the sticker that you want to be folded back.

Now lets use a tricky keyboard shortcut to cut the selected area out of the current layer and place it on it’s own layer above. Press Shift-Command-J (PC: Shift-Ctrl-J) and watch the magic happen. Rename this new layer Residue by double clicking directly on the layer’s name in the Layers palette. Now duplicate the Residue layer by making sure it’s selected as the active layer in the Layers palette and then pressing Command-J (PC: Ctrl-J). Name this new layer Peel. Note that at this point nothing on the stage looks any different.

For the moment, lets turn off the Residue layer by clicking on the little eye icon at the left of it’s thumbnail in the Layers palette.

Lets lighten the corner of our circle that lives on the Peel layer. With the Peel layer selected, click on the Lock Transparent Pixels checkbox. Change your foreground color to a lighter shade of the same color, something like #efe4d0 should due nicely. Since the pixels are locked, all we have to do is fill the layer with color by pressing Option-Delete (PC: Alt-Backspace).

While we’re at it, lets go ahead and rotate the Peel layer so things are oriented correctly before we continue. We can do this easily by choosing Edit>Free Transform>Rotate 180° from the main menu (if for some reason this places the Peel somewhere other than where it ought to, simply press V to switch to the Move tool and move the little sucker into place.)

Before we get onto the body of the sticker, lets add a few layer styles to the Peel layer to complete it’s effect. Control-Click (PC: Right-Click) on the Peel layer in the Layers palette and choose Blending Options from the menu to bring up the Layer Style dialog box. We’ll be adding a Drop Shadow followed by a Gradient Overlay as shown below. Be sure to check each setting to make sure you’ve made all the necessary adjustments for the effect.

Notice in the Gradient Overlay dialog that we can get the Linear Gradient to lay perfectly onto the Peel because we know the exact angle we rotated it.

If you go it right, your Peel should now look like mine… if not, do not pass go, do not collect $200, just get yourself back to Step 7 and figure out where you went wrong!

Now that we’ve got the Peel layer out of the way, lets click back down to the Residue layer, turn it back on by clicking the empty box at the left of the layer (which brings back the little eye icon) and then lower the layer’s Fill to 40%.

Click on the Sticker layer in the Layers palette and add the following Layer Styles (just like we did in Step 7), remember to pay close attention to each setting.

And if you did it right, things should be lookin’ like this.

With the Sticker layer still selected, add a new layer above it called Orange (unless you want to use some other color, then name it that. Anything but purple is ok… you know how I feel about purple). Set the foreground to a nice orange color like #eb8206 then press the M key to switch back to the Marquee tool (if you’re not still there). Make sure that you’ve got the Elliptical Marquee tool selected and drag a nice round selection into the middle of the sticker… and don’t make me remind you about the Shift key again.

If at any point while you’re dragging out your selection you feel like you need to move it, just reach over and press down the Shift key with your thumb. It’ll allow you to move the selection before you actually let go of the mouse and commit it. Now just press Option-Delete (PC: Alt-Backspace) to fill the selection with color followed by Command-D (PC: Ctrl-D) to deselect.

Now obviously we don’t want the orange sticking out past the edge we peeled back, so lets clip the Orange layer to the Sticker layer. To do this, hold down the Option (PC: Alt) key and place your mouse exactly between the two layers in the Layers palette. The cursor will change to what looks like two circles overlapping, when that happens, simply click your mouse to set the clipping mask. You’ll know the layer has been clipped because it will now be indented with a little arrow pointing down to the layer it’s clipped to.

(*note: You can also create a clipping mask by Command-Clicking (PC: Right-Clicking) on the Orange layer and choosing Create Clipping Mask from the menu.)

Now lets add some dimension to the Orange layer by adding a few simple Layer Styles. We’ll be adding an Inner Glow (which we’ll actually use to shadow the edges of the object), a Gradient Overlay to add some color variation and a Stroke to lightly define it’s edge. Follow along carefully.

If your sticker doesn’t look like mine I’m going to have to send you to detention.

The OnWired sticker has been antiqued a little, so why don’t we go ahead and beat ours up a little as well.

Start by adding a Layer Mask to the Orange layer (which should still be selected in the Layers palette) by clicking on the little icon at the bottom of the Layers palette that looks like a white circle in a gray box. You’ll notice in the Layers palette that a new thumbnail has been added next to the original one. This is the layer mask. By default when you add a Layer Mask, Photoshop selects the mask and you can tell it’s selected because it’s got little black brackets around it.

Using a layer mask will allow us to mess with the layer without actually damaging any of it’s pixels. It’s a great alternative to using the Eraser tool because you can always alter it later.

Reset the foreground color to black by pressing the D key, then press the B key to switch to the Brush tool. I’m going to use a grunge brush that looks like splatters to help me distress the layer. I’ve bundled every grunge brush in my collection into a single brush set which is included in the lesson download at the end of the tutorial. This brush is called Sampled Brush 4 and I’m using it at it’s default 551 pixel size.

With the brush selected and my foreground color set to black, I’m going to place the brush over my orange circle and click once or twice until I get the effect I want. By painting with black on the Layer Mask I am telling Photoshop to ignore any part of this layer that is masked by black on the Layer Mask.

Now lets decorate the sticker a little. Create a new layer above the Orange layer called Circle and clip it to the layers below (just like we did in Step 13) by holding down the Option (PC: Alt) key and clicking the line between the Circle and Orange layers in the Layers palette.

With the Elliptical Marquee tool create a selection just slightly smaller than the orange circle, press Command-Delete (PC: Ctrl-Backspace) to fill the circle with the background color (which should still be set to white). From the main menu choose Select>Modify>Contract, set the size to 3 and click OK. Press Delete (PC: Backspace) to remove the color within the contracted circle and then press Command-D (PC: Ctrl-D) to deselect.

Lower the Circle layer’s Fill opacity to 80%.

You’ll notice that although we’ve clipped the Circle layer to the Orange layer at the bottom of the clipping stack, the entire circle is still visible even where the Orange layer has been masked by it’s Layer mask. Obviously we can’t have that, so let me show you a little trick. Hold down the Option (PC: Alt) key and click and drag the Layer Mask that’s on the Orange layer onto the Circle layer in the Layers palette. This will copy the layer mask we’ve already created onto the other layer.

How ’bout we add some text to our sticker now? Press the T key to switch to the Text tool, press the X key to switch the white color swatch to the foreground color and type in your text. I’m using a font called Chicago House which will also be included in the lesson download. Click onto the stage to set your text field and type your message… mine’s LOVE, because, as you know… I love you.

Clip this text layer to the layers below just like we did in Step 18, then copy the layer mask from the Circle layer onto the text layer as well.

Lets use an Outer Glow Layer Style to make our text pop a little more. You know the drill…

Your sticker is now complete! Add some background elements, some more text… go nuts!

And yes, for those of you who are wondering how I did the background, it’s all in the .PSD file download at the end of the lesson. Enjoy!

Being election season in the US, I’ve had quite a few requests for a tutorial on creating political style buttons in Photoshop. I thought maybe I’d skip this one because there are a few very good tutorials on the subject already out there (I personally prefer the version by Collis over at psdtuts). One loyal reader however, requested a tutorial based strictly on creating the effect through a single set of Layer Styles, which is what we’ll be doing in this lesson.

(*note: This lesson is written for the noobs, so you advanced users might want to skip most of the hand-holding.)

Lets begin by opening a new document in Photoshop by selecting File>New from the main menu. My file size for this lesson will be 540px x 350px at 72ppi.

The first order of business will be to create the circular background where our layer styles will live, so lets create a new layer by clicking on the New Layer icon at the bottom of the Layers palette. Double click on the layer name and rename it Button.

(*note: If your Layers palette isn’t visible, choose Window>Layers from the main menu at the top of Photoshop.)

Because the Layer Styles we will be applying later in the lesson will be relative to the size of the button we create, it’s important that your working on a button that’s the same size as mine. To ensure all our buttons are the same size, we’ll be setting a fixed size for our selection.

Press the M key to switch to the Rectangular Marquee tool in the Tools palette, then either click and hold your mouse on the Rectangular Marquee tool to access the flyout menu where you can choose the Elliptical Marquee tool, or simply hold the Shift key and press M again (this keyboard shortcut will switch you back and forth between Rectangular and Elliptical marquee tools on the fly).

With the Elliptical Marquee tool now selected lets direct your attention to the tool options bar at the top of Photoshop. From the Style drop-down menu choose Fixed Size, then click in the Width and Height fields and type "300px" for each. You have now set your Marquee tool to create a fixed 300×300px circle, so go ahead and click on the stage to create the selection. Once the selection is made, you may have to click and drag it to a nice central location on the canvas.

We now need to fill the selection with color, but since we’re going to be adding highlights and shadows via Layer Styles in the preceding steps, lets fill the selection with 50% Gray. From the main menu choose Edit>Fill to bring up the Fill dialog box. From the Use dropdown choose 50% Gray and make sure that the Blending Mode is set to Normal and that the Opacity is at 100% then click OK.

We’re now done with the selection, so simply press Command-D (PC: Ctrl-D) to deselect.

Here comes the fun part where we add the effects that will make this flat gray circle pop! Be sure that you pay special attention to each and every setting in the following dialogs as many of the default settings have been changed.

In the layers palette Control-Click (PC: Right-Click) on the Button layer and choose Blending Options from the menu. This will bring up the Layer Styles dialog box. We’ll be adding styles progressively over the next set of steps, so don’t click OK until we’re finished.

Lets begin by adding a drop shadow. Click on the Drop Shadow link in the left side of the Layer Styles dialog to bring up it’s options (*note: In the Layer Styles dialog you always want to click on the text links in the sidebar and not the checkbox because checking the checkbox will turn on the default settings for the style but won’t take you to the options window.) Set your Drop Shadow to these settings and continue to Step 5.

(*note: Make sure the Preview box is checked on the right side of the dialog (under the OK/Cancel buttons) so you can see the styles as they are applied.)

The next effect we’ll add is shading to the entire inner edge of our button using the Inner Glow style. Click on Inner Glow in the effects list on the left and use these settings.

Next we’ll add the rounded edges of the button with the Bevel and Emboss setting, so go ahead and click on Bevel and Emboss in the list at the left. This effect will be added in two stages, first the basic Bevel and Emboss and then the Contour sub-setting in Step 7.

Add the following Bevel and Emboss settings then proceed to the next step. Notice that both the Highlight and Shadow settings are colored white and both have a blend mode of Screen. This creates the upper highlight as well as the muted highlight at the bottom of the button. In the next step we will refine the shape of the Bevel using the Contour sub-setting.

Now lets click on the Contour sub-setting below Bevel and Emboss in the list on the left. The default contour is a Linear contour which looks like a straight line from the lower left to upper right corner. Click directly on the little picture of the contour to open the Contour Editor. Grab the bottom left point with your mouse and drag it half way to the right, then grab the upper left hand point and bring it down about 4/10ths of the way as shown in the image below. Once those two points are set, click along the line to add a new point, then drag that point up and left to create the curve as shown. Click OK when you’re done to return to the Contour options.

The final effect we’ll be using for our button is the Satin style, so go ahead and click Satin in the list on the left to bring up it’s options. Using the settings below we’ll use the color white to add the slightest bit of light reflection through the middle of the button. If you want to see the difference between the effect with and without the Satin effect, simply set the style settings below, then click the Satin checkbox on the left on and off to see the effect in action.

When you’ve set the options below, go ahead and click OK in the upper right hand corner of the Layer Styles dialog box to commit the styles to your layer and return to the file.

If you were a good student and followed along with each step correctly your button should now look like this.

Now that the Button layer has all the required Layer Styles applied, it’s time to get busy decorating the button. For the time being lets leave the Button background color gray. Create a new layer by clicking the Create New Layer icon at the bottom of the Layers palette (just like we did in Step 1). Rename this layer Red.

Since this is a political button, lets add some red, white and blue action to it. Click on the foreground color swatch in the Tools palette to bring up the Color Picker. Pick a nice red color like #b11515 and click OK.

Press the M key to switch back to the Marquee tool (if you’re not already there). If the Elliptical Marquee is still set as the active Marquee tool, switch back to the Rectangular Marquee with the keyboard shortcut Shift-M. With the Rectangular Marquee tool now active, drag out a nice sized rectangle around the top of the button and press Option-Delete (PC: Alt-Backspace) to fill the selection with red.

Obviously this Red rectangle layer needs to be modified to interact correctly with the Button layer, so lets press Command-D (PC: Ctrl-D) to deselect and then simply Control-Click (PC: Right-Click) on the Red layer and choose Create Clipping Mask from the menu. This will cause the Red layer to be masked to the Button layer and it will inherit all the layer styles we applied to the Button layer as well. You’ll know the layer is being clipped to the Button layer because it will be indented in the Layers palette with a little arrow pointing to the layer it’s clipped to.

Repeat Step 11 a second time to create a new layer called Blue, draw a rectangle around the bottom of the button, fill it with a nice blue color like #152bb1 and clip it to the Button layer by choosing Create Clipping Mask.

(*note: Creating a Clipping Mask on a layer above a layer that’s already clipped to a preceding layer will clip that layer with the previously clipped layer as well. See below.)

It’s time to get rid of that 50% gray we’re seeing in the middle of the button, don’t you think? Click on the Button layer in the Layers palette and then click the Create New Layer icon at the bottom of the Layers palette to add a new layer above it. Notice that the new layer is automatically added inside the clipping mask because the layers above it are already clipped to the Button layer. Name this new layer White, press the D key to reset the foreground and background colors to black and white, then simply press Command-Delete (PC: Ctrl-Backspace) to fill the entire layer with white.

Now it’s just a matter of adding some text and other graphics to the mix to get the desired look. Remember to clip every subsequent layer so that the layer styles from the Button layer will be applied to them as well.

Thanks for playing along, I hope you learned something about the flexibility of Layer Styles!

In this Photoshop tutorial I’m going to show you how to create a cool photo effect while you learn a thing or two about gradient masks, and a few stock Photoshop filters.

Let me remind you before we begin that I’m working on a 540×540 pixel file that’s at 72ppi, so if you’re applying this process to a higher resolution image you’ll want to increase the strength of the filters accordingly to get the desired effect. Let me also state the obvious and say that photo effects work better on some photos than others. As any good photographer will tell you, this sort of effect is very much determined by personal taste, and you should experiment with each of the settings to decide what looks best to you. Some of my coolest photos and photo effects have been created while experimenting with different filter and layer combinations.

(*note: You should have at least Photoshop CS2 for this tutorial as some of the filters used were not present in earlier versions.)

Here’s a lovely photo of a striking young man that I think will be perfect for this effect (although this particular photo effect can also work well on still life and landscape photos as well). A few factors that make this photo ideal are the nice lighting conditions and the lack of distraction in the background.

The first few steps will serve to soften the details and smooth out the tones, but lets first duplicate the background layer by pressing Command-J (PC: Ctrl-J) so if we screw up we can just delete the copy and start over without effecting or original image. This also creates an easy way for us to compare the original to the final product.

We’re going to use the Reduce Noise filter to do a preliminary smoothing of the working surface. Select Filter>Noise>Reduce Noise. All we’re asking this filter to do is to take out tiny variations in tone so use the settings below.

(*note: The Reduce Noise filter is relatively new to Photoshop, so if you’re using an older version and don’t have this in your Filters menu, don’t worry, you can skip this step and still end up with a nice effect.)

Now that we’ve reduced the small variations it’s time to do some real smoothing. Choose Filter>Blur>Surface Blur from the main menu and set both the radius and threshold to 5. This will add an almost painted look to the photo because the large areas of similar tone have been blended so well.

Now lets bring back a little bit of crispness by using a powerful addition to the Sharpen menu called Smart Sharpen. Choose Filter>Sharpen>Smart Sharpen and adjust the sliders until the areas of your photograph with the largest amount of contrast have crisp edges again (like the eyes and hair in my photograph).

If you want to see the difference these filters has made, simply turn the working layer on and off in the Layers palette by clicking on the little eye icon to the left of the layer’s thumbnail.

Here’s what my photo looks like so far. Notice that the skin has been smoothed extensively but there is still a significant level of sharpness in the image overall.

Here comes the fun part where we create the color-shift that defines the look of this effect. First press the D key to reset the foreground and background colors to black and white respectively.

We’ll be using an Adjustment Layer, so click on the Create New Fill or Adjustment Layer icon at the bottom of the Layers palette (it’s the one that looks like a circle with one half black and the other white) and choose Gradient Map from the menu. When the dialog appears, click ON the gradient to open the Gradient Editor where we’ll create a custom gradient in the next step.

(*note: The Gradient Map adjustment layer does exactly what it says, it maps a gradient to the tonal range of the image.)

We’ll begin by selecting one of the Photoshop default gradients, in this case the one that goes from black to white (this is the first of the default gradients in the gradient picker).

Now that we’ve got the basics in place it’s time to look down to the bottom of the Gradient Editor. The black and white endpoints of the gradient have already been set so now we need to add a few custom markers in the middle to give us the desired effect.

Click anywhere just beneath the gradient to add a new point at that location (the color will be set by default to the exact color at that point in the existing gradient). With the new point added, click directly on the point to access it’s color and location options. Set the first point to #412C08 and change it’s location to 20% then add a second point to the right of the first and set the color to #ACA79A and it’s location to 60%. When you’re done click OK to set the gradient and then click OK on the original Gradient Map dialog to commit the adjustment layer to the document.

Things should now look like my example below. Notice that a new layer has been created above our working photo layer called Gradient Map 1. If at any time you wish to adjust the Gradient Map adjustment layer, simply double click on the layer’s icon to re-open the dialog exactly as you left it.

Next we’re going to add some punch to the tones with another Adjustment Layer, so just like in Step 6, click on the Create New Fill or Adjustment Layer icon at the bottom of the layers palette and this time choose Channel Mixer.

Normally the Channel Mixer is used to adjust color mixture on a per-channel basis (ie Red,Green & Blue). It’s quite useful, but we won’t be using it that way today. What I want you to do is go into EACH of the respective colors in the Output Channel drop down and give that color 100% and the other two channels in that color 0%… So in the Red output channel red would be set to 100% and Green and Blue both at 0%… do the same for the Green and Blue output channels and then click OK. If you do this correctly absolutely nothing in your image will have changed when you’re done.

Lastly lets add one final Adjustment Layer to add a touch more contrast to the image. From the Adjustment Layer menu we’ve been using at the bottom of the Layers palette choose Curves this time. When the Curves dialog box appears choose Linear Contrast (RGB) from the Preset drop down menu at the top and click OK.

(*note: You should feel free to play with different presets as well as custom curves to create different effects.)

Remember, each photo is different and what works perfectly with one set of instructions can look like crap on another, so don’t let yourself get tied to exact formulas and prescribed steps. Experiment with each setting and learn what each filter and adjustment layer does, that way you’re only limit is your own creativity. Something as small as rearranging the order of the adjustment layers in this exercise can make a substantial difference in your end result.

Oh, and if you really want to have some fun, play with the colors in the Gradient Map! The sky is the limit!

In my final image I lowered the opacity of the Gradient Map adjustment layer to around 80% to let a little of the original skin tone show through which added a bit of warmth to the composition.

It seems like the big thing to do these days is play handmade objects and ideas from the physical world into graphic and web designs, so in this tutorial you’ll learn how to add pencil drawn elements into your designs.

But what if you’re person who can’t draw a stick figure to save your life? Do you always loose at Pictionary? No problem! I’ll show you how to cheat your way through to awesome results even if you’re crap with a pencil!

(*note: If you’re going to play along at home, you’ll need a printer and scanner.)

So how about I stop pointing out your stick figure shortcomings, and lets get started.

First things first… you’ll need to decide what sort of hand drawn element you want to add to your design. Whether it’s a simple bit of handwritten text or a complex drawing, knowing what you want is the first step. I’ve decided to draw an old banner style element, but like you I’ve spent too much time with a mouse and too little time with a pencil lately, so here’s what we’re going to do:

Open up a new Photoshop document by pressing Command-N (PC: Ctrl-N). When the New Document dialog appears choose US Paper from the Preset drop-down menu, change the ppi setting to 150 and click OK.

With this new document we’re going to create a graphical version of what we want to be drawn into our design. We’re doing this because we’re going to take a step back to high school art class and do some tracing in the next step.

I’m going to use one of the custom shapes from my popular Heraldic Shapes custom shape set, but you can use anything you’d like. Feel free to add text, shapes, even photos if you’re feeling ambitious. My only pointer here would be that this is easiest if your design is in black and white. Make your design nice and big so it’ll be easy to trace (you can always shrink it to fit your design).

I also rotated my canvas so that I could work horizontally by choosing Image>Rotate Canvas>90° CW from the main menu. If you do this, don’t forget to rotate it back before moving on to the next step.

When you’ve got your design all done, choose File>Print from the main menu to print out a hard copy.

With the printed out design in your hot little hands, grab a blank piece of paper and some tape and go find yourself a window that has light coming through it (unless of course you’re one of the cool kids that has a light table at home). Tape the paper with your printed design onto the window at a level that will be easy for you to draw then tape the blank paper over the top and SHAZAM! you’ve got a light table of your very own!

Sharpen up that #2 pencil and get to tracing! When you’re done, pull your mess down from the window, remove the tape from the edges and move on to Step 4.

Ok, now take that beautifully traced page over to the scanner (I told you you’d need one, remember?). Scan the page using the scanner’s "Photo" setting, this will ensure that you capture all the levels of gray that your pencil put down and will give the depth to the final result to be convincing. Save the scan as a .jpg or .tiff at at least 150ppi.

Now back to Photoshop where you’ll need to open the design you want to place your pencil drawing into as well as the pencil drawing we just scanned. Since I want to be able to show you a full scale version, I’ve created a small file with an aged paper background. If you’re interested in how to create one of your own, check out my Creating Old Paper With Custom Brushes tutorial.

Arrange your two photoshop windows so that you can see them both, press the V key to switch to the Move tool, then click and drag your scanned pencil drawing into your design document.

It’s quite possible that your drawing is way too big when you get it into your design document so press Command-T (PC: Ctrl-T) to activate the Free Transform tool. Holding down the Shift key to constrain the dimensions of your pencil drawing, click and drag from the corners until you’ve got it sized correctly then commit the transformation by hitting the Return (PC: Enter) key on your keyboard.

Obviously all that white background needs to be dealt with now, and this is the easy part. Make sure that the layer with your pencil drawing is active in the Layers palette and change the Blend Mode of the layer to Multiply. Depending on your background you may want to lower the layer opacity a little as well.

(*note: The Color Burn and Linear Burn blend modes can also produce good results depending on your background.)

And there you have it! You’ve just added a pencil sketch into your design AND you’ve made people think you actually know how to draw!

It’s always fun to get an email from a reader with a very specific request. In this case the request was for a tutorial based on the the car stereo style navigation bar used in Volkswagen’s website. Rather than reinventing the wheel, we’re going to work straight from an example file of the original.

This tutorial assumes that you know your way around Photoshop enough not to need too much hand-holding. You should know your way around the Layers palette and know how to add Layer Styles, use Custom Shapes and Clipping Masks without much explanation.

(*note: This is a tutorial about creating the navigation of this piece and not about creating the Volkswagen logo. I have however included the layers used to create my final product in the .PSD download at the end of the lesson if you’re curious about how I did it.)

Lets begin by taking a look at the original navigation bar on Volkswagen’s website. At this point I’ll take a screenshot (screen capture) of the navigation and past it into my new working document so that we’ve got a constant reference to work from as we go. My working file is 540×250 pixels at 72ppi, as always if you decide to work at a different resolution you’ll need to adjust your layer styles accordingly.

(*note: As luck would have it, Volkswagen’s website was built in Flash and it loads the navigation before the rest of the page, so with a little lucky timing you can capture the navigation bar before the background image has loaded.)

Obviously our first layer will be the one created when we paste the original Volkswagen nav into our document, so lets create a new layer called Base and with the Custom Shape tool set to Rounded Rectangle with a corner radius of 12px and set to Fill Pixels draw a rectangle over the original object ending at the curve on the left side. Use any color you’d like because we’ll be covering it with a layer style a few steps from now.

With the Custom Shape tool still selected switch to the Ellipse and draw in the circle on the left side. I’ve used a darker color so you can see the overlap, but again, color makes no difference.

Switch to the Move tool by pressing the V key and drag the new shape upward until both the original and the new Base are visible.

Now lets add some Layer Styles to the Base layer to get it looking like the example. We’ll be using a Gradient Overlay to get the black to gray effect, an Inner Glow to create the outline and a Drop Shadow. Use the colors #000000 and #A8A8A8 in the Gradient Overlay and be sure to pull in the sliders like in my example below.

With the Base complete lets move on to the cutout where the buttons live. Create a new layer called Button Background. In the example the corners of the area are slightly rounded so lets grab the Custom Shape tool set to Rounded Rectangle but this time with an edge radius of just 3. If it helps you to get things sized correctly feel free to drag your shape onto the stage directly over the top of the example just like we did before, then move it up into position when you’ve got it right. Again, color here doesn’t matter because we’ll apply another set of Layer Styles in Step 7.

As promised, here are the layer styles for your Button Background layer. Pay special attention as we work through the layer styles in this tutorial because often I’ve unchecked the Global Light setting to achieve a certain effect. The colors for the Gradient Overlay are #484848 and #000000 with the sliders left in their default positions.

Your Button Background layer should now look inset into the Base layer as shown below.

Now lets get started creating the buttons that will sit inside the Button Background. We will first create one button completely, then we’ll group the layers and duplicate the group to create the other buttons. But first things first, create a new layer called Button and again using the Custom Shape tool drag a Rounded Rectangle with an corner radius of 2px. Again feel free to draw over the original example to get your button just the right size, then drag it into place when you’ve got it right. At the risk of sounding like a broken record… color doesn’t matter this time either.

Here are the layer styles for your Button layer. Your Gradient Overlay colors from left to right are #000000, #74767a and #535558. Be sure to pay attention to slider placement. You may also want to work with the midpoint sliders between the color sliders to adjust the transitions to your liking.

The Button should now look something like this (I’ve zoomed in so it’s easier to see).

Next we’re going to make a selection of the Button by holding the Command (PC: Ctrl) key and clicking on the Button layer’s thumbnail in the Layers palette. With the selection made, create a new layer called Button Sides and click the Add Layer Mask icon at the bottom of the Layers palette to create a Layer Mask on the new layer using the selection.

We’re going to draw in the right and left sides of the button now. Switch to the Brush tool by pressing the B key and choose a round soft edged brush that’s around 8 pixels in diameter, make sure that the hardness is set to 0%. Set the foreground color to #4A4B4B and then starting at the top left corner click once then holding down the Shift key click a second time at an angle into the button where the black gradient meets the gray, then while shill holding Shift click on the lower left corner. This should create a nice angled edge as shown below. Do the same to the right hand side and fill in any areas that you may have missed at the edges.

Create a new layer called Shadow Highlight directly below the Button Sides layer we just worked on. We’re now going to create an area where we can paint in a highlight and shadow without effecting the other areas.

Grab the Custom Shape tool once again by pressing the U key, select the Rounded Rectangle with a corner radius of 4 pixels but this time make sure the Paths option is selected. Click and drag a path onto the stage in the center of the button from one edge of our newly created Button Sides to the other. Press Command-T (PC: Ctrl-T) to Free Transform the path then Command-Click (PC: Right-Click) on the path and choose Perspective from the menu. Grab one of the top corners and drag it outward to expand the top of the shape until the sides line up with the Button Sides as shown below then press Return (PC: Enter) to commit the transformation.

Convert the path to a selection by pressing Command-Return (PC: Ctrl-Enter) and then press the Create Layer Mask icon at the bottom of the Layers palette to create a mask on the Shadow Highlight layer using the selection.

Switch back to the Brush tool by pressing the B key and using a foreground color of white paint a small highlight into the lower right corner of the button. Once the highlight looks right to you, switch the foreground color to black and paint a little shadow into the left hand corner. Adjust the layer’s Fill opacity down to about 30% or as looks best to you.

(*note: I used a round soft edged brush with the Eraser tool to soften the edges a little further once I got the basic highlight and shadow in place.)

Create a new layer at the top of the layer stack called Light Off. Set your foreground color to #98999A and using the Custom Shape tool set to Fill Pixels, Rounded Rectangle and 2px create the little light indicator onto the button as shown below.

Add a slight Inner Shadow to the Light Off layer to add a little depth.

Add your text to the button by switching to the Type tool by pressing the T key and setting up your font and color in the Character palette. I’m using the font Apple Symbols though Arial and Helvetica are pretty decent substitutes. I’ve adjusted the Tracking to -10 to more closely mimic the original.

Now that we’ve got the button completed select all the layers that make up the button in the Layers palette and press Command-G (PC: Ctrl-G) to group the layers into their own folder. Then duplicate the folder by Control-Clicking (PC: Right-Clicking) on the group and selecting Duplicate Group from the menu. Slide the duplicate to the left until it sits comfortably in the next button spot and repeat until all 5 buttons are complete. Be sure to name each group and feel free to go change all the button labels.

Next lets add the search field above the buttons. Create a new layer at the top of the layers stack called Search Field. Here comes the broken record again… Press U to switch to the Custom Shape tool, choose Rounded Rectangle set to Fill Pixels with a corner radius of 5px, with your foreground color set to white drag the field onto the stage. Oh yeah, and it’s still easier to get the size perfect if you draw over the original example and then move it into place… as if you didn’t already know.

A simple little Inner Shadow will give the Search Field the depth it needs. Notice that I’m using a 90° angle for the shadow rather than selecting the Global Light checkbox.

Grab the Text tool by pressing T, set the color to #005d86 and put your type inside the search box. I found that Arial Narrow works nicely at 15pt Bold with the Tracking set to 35.

Although it’s not needed, I added a Drop Shadow layer style with the settings in the second image below to add that final touch of depth that makes it look just like the original. I also lowered the layer’s Fill opacity to 90%.

Now lets add the little button that’s inset in the Search Field. Add a new layer just above the Search Field layer called Search Field Inset. Are you ready for the broken record again? … Custom Shape tool … Rounded Rectangle set to Fill Pixels with a corner radius of 2px, foreground color set to #f4f4f4… and don’t forget to hold the Shift key while you drag to constrain it to a perfect square.

Now add this simple Inner Glow layer style to put the shadow around the edges like the original.

Press the T key to switch back to the Type tool and using a pixel style font like Kroeger 0855 - which is the exact font Volkswagen used and can be downloaded for free at DaFont.com - at a size of 8pt place your text in the box.

Lastly lets create the search button itself. Create a new layer at the top of the layer stack called Search Button and… you guessed it DJ, play that record one more time! (Rounded Rectangle, 5px, Fill Pixels, Foreground Color #1988AF)

Now lets add the text onto the Search Button by switching to the Text tool and using the same font that we used for the text on the buttons (in my case it’s Apple Symbols again) set to 20pt. I also reduced the tracking to -10 to make it match up exactly with the Volkswagen example.

Now lets add the slightest hint of a Drop Shadow to the text to add depth and make it look just like the original.

The finishing touch to our Search Button will be to add a Web 2.0 style highlight to it. Create a new layer at the top of the layer stack called Search Button Highlight. Load the Search Button layer as a selection by holding down the Command (PC: Ctrl) key and clicking on the Search Button layer’s thumbnail in the Layers palette (*note: you should still have the Search Button Highlight layer selected as the working layer).

Press D and then X to reset the foreground and background colors to black and white and then to switch white to the foreground. Press G to switch to the Gradient tool and select Foreground to Transparent and Linear from the Gradient Options bar at the top of Photoshop. Then simply click and drag a gradient from the top to the bottom of the selection.

Finally switch to the Rectangular Marquee tool by pressing the M key. Drag a selection around the lower half of the gradient and hit Delete (PC: Backspace) to remove the bottom half of the gradient and complete the Web 2.0 highlight.

And that my dear friends completes this tutorial. As I said in the introduction, I’m not going to cover the creation of the Volkswagen logo, but if you’d like to see how I built mine check out the .PSD download at the end of the lesson.

I hope you were able to learn something new and useful!

I’ve had quite a few emails since posting the Copper Rivet tutorial asking how I created the stitched text in my final image. So in this Photoshop tutorial I’ll show you how to convert text to a path and how to stitch that path using a custom brush set.

Over the years as a graphic designer I’ve accumulated a wealth of custom brushes, shapes and actions that I keep carefully organized and labeled for future use. The brush set I’ll be sharing with you today has been in my collection for probably five of six years and every once in a while I’ll find a good reason to load it into my brushes palette. If you’ve never done that before, don’t worry, I’ll walk you through it as we go.

If you’re playing along at home you should download the brush set before we get started.

Lets go ahead and begin by opening a new document in Photoshop. Mine is 540×300 pixels at 72ppi.

Since stitching on a plain white canvas is a little silly, lets go ahead and spice up the Background layer with a little texture. By default the Background layer in any new Photoshop document is locked, so lets go ahead and double-click on the Background layer in the Layers palette to bring up the Layer Properties dialog box. Simply rename the layer or name it Background once again and hit OK to unlock the layer.

Now that our Background layer is unlocked we’re going to add a Pattern Overlay Layer Style to it which will give us a quick and easy denim background to work with.

Control-Click (PC: Right-Click) on the Background layer in the Layers palette and choose Blending Options from the menu. This will bring up the Layer Styles dialog box. Click on the Pattern Overlay text in the left column. (You must click on the text and not on the checkbox. Clicking the checkbox will turn the style ON but it won’t give you the options for the style, so it is important to click on the text so we can modify the Pattern Overlay style options.)

Next we need to load a new set of Patterns into the Pattern Picker. Click on the Pattern swatch to reveal the Pattern Picker, then click the little circle with the arrow in it at the top right corner of the picker. Choose "Patterns 2" from the list and click OK to load the new pattern set into the Pattern Picker. Now simply click on the Denim swatch which is the 4th pattern in the set and click OK to close the Layer Styles dialog box and commit the style to the layer.

Yes, I know, this graphic is a mess… but hopefully it gets the point across.

You should now have a background full of denim and a layer style icon in the Background layer of the Layers palette.

It’s now time to add some text to our document. Press the D key to reset the foreground color to black, then press the T key to invoke the Type tool. Click on the stage to place the cursor and type some text onto it. Notice that when you added the text that Photoshop automatically added a new layer for it.

(*note: To commit the text you can either press the Enter key on the 10-key corner of your standard keyboard or click the Check-Mark in the Text Tool options bar at the top of Photoshop.)

Now that our text is created and while we still have the Type tool chosen we need to create an outline path of the letters. Control-Click (PC: Right-Click) on the text on the stage and choose Create Work Path from the menu. This will create a white outline around each letter indicating that you’ve created a work path (obviously) which we will use later in the lesson to stitch around.

Add a new layer above your text by clicking the Add New Layer icon at the bottom of the layers palette or by using the keyboard shortcut Command-Option-Shift-N (PC: Ctrl-Alt-Shift-N). Rename the layer by Double-Clicking on the layers name in the Layers palette. I called this new layer Stitches.

Now it’s time to setup everything in preparation for the stitching, and the first thing we need to do is load the stitching brush set into our Brushes palette. If you haven’t downloaded them yet you’ll want to do it now by clicking HERE. Save the brush set to your desktop or someplace you’ll remember when we go looking for them.

Press the B key to invoke the Brush tool, then bring up the Brushes palette by choosing Window>Brushes from Photoshop’s main menu. In the upper right hand corner of the Brushes palette, click on the options icon and choose Load Brushes from the menu. Navigate to the brush stitches brush set that you just downloaded to your hard drive and click Load. You will then be asked if you want to Append the brushes to the end of your current brushes or if you want to replace the existing brushes by clicking OK. For my example I’m going to replace my existing brushes, but either option works fine.

Now that the brush set has been loaded into the Brush Picker lets go ahead and select the V-shaped brush. We’ll need to make a few adjustments to the settings in the Brushes palette for this brush to make it work the way we want.

First off lets reduce the size of the brush to around 8 pixels in the Diameter setting then make sure the Spacing checkbox is checked and that the spacing is set to around 80%. The spacing change makes the V’s overlap enough to look like interlocking stitches.

While still in the Brushes palette click down to the Shape Dynamics link on in the menu on the left and make sure that the Angle Jitter control is set to Direction. This will make the brush rotate as it goes around the corners to the different sides of our letters.

At last it’s time to make the magic happen. Put on your wizard hat and swap the foreground and background colors by pressing the X key (white should now be showing as the foreground color at the bottom of the Tools palette). Press the P key to switch to the Pen tool and then Command-Click (PC: Right-Click) anywhere on that little white outline that is the Path around the text. Choose "Stroke Path" from the menu, make sure that "Brush" is selected from the drop-down menu and that the Simulate Pressure checkbox is un-checked then click OK.

You’ll now see that the brush we chose has been used to stroke the entire path of the text. Since we’re done with the path now you can either click over to the Paths tab in the Layers palette and delete it, or simply press Command-H (PC: Ctrl-H) to hid it.

To make the stitches a little more realistic lets go ahead and add a few layer styles to the Stitches layer. Just like we did in Step #1 lets Command-Click (PC: Right-Click) on the Stitches layer and choose Blending Options. Now add a Drop Shadow and a Bevel and Emboss as shown below, be sure to check each setting to make sure you haven’t missed anything then click OK.

The slight Bevel and Emboss will add a little more dimension to the thread while the Drop Shadow will add a touch of shading around the edges.

Before we move on let me show you a cool little trick to change the background color. Since the background is a preset color pattern and not an overlay we can’t just change an underlying layer color so we have to resort to other methods. Click on the Background layer in the Layers palette to make it the active working layer. Now lets add an adjustment layer by clicking on the Create A New Fill or Adjustment Layer icon at the bottom of the Layers palette (it’s the circle with half black and half white), choose Hue/Saturation and use these settings (or any that look pretty to you).

The last little bit of adjustment I did was to click over to the Text layer in the Layers palette and change it’s Blend Mode to Multiply and it’s Fill opacity to 70%. By doing this we allow a little of the denim texture to come through onto our black letters adding a little depth and realism.

(*note: You could also paste some real fabric into a layer above the Text layer and use a clipping mask to add even more coolness.)

Anytime you’re using a text to create this effect you will always have an outline of the lettering, but what if you just want to stitch letters? Well, if you’ve got a little experience with the Pen tool you can apply this same technique to any number of paths you’ve drawn yourself.

Below I’ve used the pen tool to draw some text.

Then I switched to the Brush tool, lowered the diameter of the brush to 6 pixels, switched back to the Pen tool and Stroked the path just like we did back in Step 10.

I then added the same Bevel & Emboss and Drop shadow to this new layer of stitches as we did to the original text.

In my final image I simply embellished on the techniques we’ve learned. Check out the .PSD download to view all my final adjustments!

In this Photoshop tutorial I’ll show you how to create an old world style wax seal using just a few layers, layer styles and the pen tool.

As usual, this tutorial assumes you have at least a cursory knowledge of the Pen tool.

We’ll begin where all good Photoshop exercises do by opening a new document. Mine is 540×320px at 72ppi but as always you can adjust this to your hearts desire. Just remember that if you’re creating an image at a higher ppi or even larger on the canvas, you’ll need to adjust your layer styles to look right along the way.

Lets jump right in and create the outer ring of wax. Grab the Pen tool by pressing the P key, click a starting point and then click and bend the segments to create the exterior perimeter of the wax seal. Typically these seals have a smooth wavy outline like the completed path below.

Before we go any further lets click over to the Paths palette and name this new path Wax Outline.

Now lets draw the inner boundary for this area of our wax. With the Pen tool still selected make sure that the Exclude Overlapping Path Areas option is selected and then create a new lightly wavy inner circle as shown in the example below. Notice that both paths are contained in the Wax Outline path layer and the path layer thumbnail indeed shows the new path has subtracted the center area from our object.

With the outer area of the wax drawn as paths lets switch over to the Layers palette and create a new layer called Wax Edge. Press the A key to invoke the Path Selection Tool and click and drag a selection around the entire path on the stage to select the entire thing. Every point on your path should now show up as a solid black square.

Now that the entire path is selected Control-Click (PC: Right-Click) on the path and choose Create Vector Mask from the menu. This will create a mask on the Wax Edge layer based on the paths we have selected.

In the Tools palette change the foreground color to #bb362e and press Option-Delete (PC: Alt-Backspace) to fill the layer with that color. Notice that only the area exposed by the layer mask is showing through.

For reasons I’ll explain later we’re going to need a duplicate copy of this layer, so lets create that duplicate now by pressing Command-J (PC: Ctrl-J). Call the lower layer Shadow.

Your Wax Edge should now be looking something like this.

Next we’re going to create the center of the wax seal by using pieces we’ve already created. Pay close attention here so you don’t get lost.

Click on the Shadow layer and duplicate it by pressing Command-J (PC: Ctrl-J). Name this new layer Wax Center. So that we can work with this new layer clearly lets hide the Shadow and Wax Edge layers by clicking on the little eye icon next to each in the Layers palette.

Press the A key to switch to the Path Selection tool if it’s not still selected. Click on the outer path to select it and then press Delete (PC: Backspace) to remove it. This will instantly switch the color to the inside of the inner circle.

This inner circle we’ve now created is the exact size of the center of our wax, it is common however in this sort of situation for a small outline of white to appear between the inner and outer pieces so we’re going to expand this inner area a bit.

Click on the path to select it and then press Command-T (PC: Ctrl-T) to invoke the Free Transform tool. Instead of clicking and dragging the corner points we’re going to use the Free Transform options bar to do all the work. Click the Maintain Aspect Ratio icon between the Width and Height size percentage fields to insure a perfect transformation, then enter 105% into the Width field and notice that the Height field changes to 105% instantly. Press the Return (PC: Enter) key twice to commit the transformation of the path.

Go ahead and unhide the Wax Edge and Shadow layers now and if you don’t want to see the paths on stage you can press Command-H (PC: Ctrl-H) to hide them.

Making sure the Wax Center layer is selected add the following Bevel and Emboss, Contour and Satin layer styles. These styles will allow the center of our wax stamp to blend with the edge softly and will create a nice rounded transition between the two. Remember to check each individual setting to insure you don’t miss anything.

If you got the layer styles right this is what your wax seal should be looking like thus far.

While we’re in the mode of adding layer styles, lets add a Drop Shadow and Outer Glow to the Shadow layer as well. Notice that I’ve changed the color and blend mode of the Outer Glow style to black and multiply. By doing this I can add an even outer shadow of just a few pixels around the whole object to make it look like it’s sitting on the surface a little nicer.

Remember when I said I’d explain why we’d made this duplicate of the Wax Edge layer? Well here you go… If we had added this Layer Style to the Wax Edge layer, the shadow would have also been cast across the Wax Center layer on the inside and would have ruined the effect, but by having a duplicate copy hiding at the bottom of the layer stack we can apply the shadow and it only shows up where it’s supposed to at the outer edge of our seal. Pretty tricky eh?

Now that our wax seal is built we can add a detail to the center of it that will finalize the effect. I’m going to use one of the shapes from my Heraldic Custom Shapes set, but you can use any custom shape you’d like, even text.

Create a new layer above the Wax Center layer (I’ll call mine Heraldic Shape since that’s what I’m putting on it). Press the U key to switch to the Custom Shape tool, make sure the Custom Shape blob is selected in the Options bar at the top of Photoshop and that the Paths option is also selected. Choose a custom shape from the Custom Shape picker and then click and drag your shape path onto the stage.

Just like we did earlier, lets convert this path to a Vector Mask by first switching to the Path Selection tool by pressing the A key and then Command-Clicking (PC: Right-Clicking) on the path and choosing Create Vector Mask from the menu. Now fill the layer with color by pressing Option-Delete (PC: Alt-Backspace) - any color will be fine because we’re going to drop the layer’s Fill opacity to 0% as well.

If you didn’t get that hint, now would be a good time to drop the Fill opacity of this new layer to 0% in the Layers palette.

Press Command-H (PC: Ctrl-H) to hide the paths and then add a Bevel and Emboss and Contour to this layer as well. Since we’ve set the Fill opacity of the layer to 0% but the Opacity is still set to 100% the bevel and emboss will show as highlight and shadow areas but will allow the underlying layer tones to show through.

The finished wax seal should now look like this.

In my final image I added a piece of string below the seal and some folded old paper for the wax seal to live on. You can learn to make both of these pieces in other tutorials I’ve written. I also added a clipping mask from the Heraldic Shape layer to the Wax Center layer which allowed even more of the color from the underlying layer to appear on the Heraldic Shape. You can see all of this in the file download at the end of the lesson.

Learn to make the string in my Custom Hang Tag tutorial (Steps 14-19).
Learn to bend the string’s shadows in my Adding Depth With Shadows tutorial.
Learn to make the old paper in my Creating Old Paper With Custom Brushes tutorial.

In this second installment we’ll take the pattern created in Complex Repeating Patterns Part I and use it to create a heavy damask fabric by adding layer styles and a few unique layers.

If you didn’t download the source file for Part I and want to follow along simply download .pat file here. Install the pattern by choosing Edit>Preset Manager from the main menu, choose Patterns from the drop-down-menu and press the Load button on the right hand side of the dialog. Navigate to wherever you saved the downloaded .pat file, select it and press OK to load the pattern into Photoshop.

Now that the pattern is loaded lets go ahead and open a new document in Photoshop (mine is 540×400px at 72ppi). Although the dimensions of your file don’t matter, if you’re using a higher resolution you’ll need to make slight adjustments to the layer styles we apply along the way.

By default the background layer of a new Photoshop document is locked. Double click on the Background layer and rename it to unlock it (I usually just rename it Background again but you can call it Elmo or George if you’d like).

The first item of business is somehow get our pattern onto the stage where we can work with it. You could choose Edit>Fill from the main menu and fill the layer with the pattern, but you’d loose some of the valuable adjustments that are gained by using a Layer Style to add the pattern instead, so we’re going to do it that way instead.

Control-Click (PC: Right-Click) on the Background layer in the Layers palette and choose Blending Options from the menu. Select Pattern Overlay from the list of style options on the left, choose the pattern we loaded into Photoshop in Step 1 (it should be the last pattern in the Pattern Picker).

One look at the stage will tell you that the pattern (at least for this document size) is far too large, and here’s where using a Layer Style comes in handy… Take the Scale slider at the bottom of the Pattern Overlay style options box and slide it down to 50%. Here’s another little tip for you - if the pattern isn’t set on the stage the way you like it, just click and drag it on the stage to a position that’s more pleasing before closing the Layer Styles dialog box. Once it looks the way you want press OK to commit the style.

(*note: I’ve found that the Scale slider in the Pattern Overlay style dialog works best at even divisions of 100%, so 75%, 50%, 25% and 12.5% will yield the clearest and least pixelated results.)

Now we have the pattern added to the background but we don’t have any way to work directly with the pattern itself. To solve this problem we’ll now move the pattern onto it’s own layer. Control-Click (PC: Right-Click) on the layer style icon inside the Background layer and choose Create Layer from the menu. This will take the layer style we just applied and break it into layers that are clipped to the Background layer. In this case it creates a new layer above the Background layer called Background’s Pattern Fill.

We don’t actually want this new layer clipped to the Background layer, so lets release the clipping by Control-Clicking (PC: Right-Click) on the Background’s Pattern Fill layer and choosing Release Clipping Mask.

Now we’ve got our document setup and are ready to start adding the styles that will create the look and feel of our heavy damask fabric. Lets start with adding some color and and texture to the Background layer.

Click on the Background layer in the Layers palette to select it as the working layer. Change the foreground color in the Tools bar to something nice and subtle, anything except purple is fine… by now you know my rule about purple. I chose a nice blue color #30505d. Press Option-Delete (PC: Alt-Backspace) to fill the Background layer with the pretty new color and add the following Pattern Overlay layer style.

The pattern used here is called Gauze

After adding the color and pattern overlay to the Background layer this is what my document looks like so far.

Click on the Background’s Pattern Fill layer in the Layers palette to select it as the working layer and add the following two Layer Styles. By adding a different Pattern Overlay and a slight Bevel and Emboss we can make the pattern look as if it stands off the base fabric and is heavier and darker. These two layer styles are both rather subjective and you can get cool results playing around with the settings, patterns and blend modes of each so don’t be afraid to experiment.

Here are my style settings. Be careful to check each setting and slider as many of them have been adjusted.

Again here is what my document looks like after adding the Pattern Overlay and Bevel and Emboss to the Background’s Pattern Fill layer.

With our texture and color added we can now select an area to define as a repeating pattern just like we did in Part I (Steps 13-14) by setting guides at each edge of the repeating pattern. It helps to really zoom-in on the pattern so that you can see each pixel to make each guide exact.

Using guides to define the pattern make sure that any areas that are excluded on one side of the pattern are included on the opposite side.

Once you think you’ve got your guides in the right place, copy the pattern area, open a new document and using duplicate layers mock-up the pattern to make sure all sides align correctly.

Once you’re sure your guides are in the right place make a selection of the pattern and choose Edit>Define Pattern from the main menu. Your new pattern will now appear in the Pattern Picker ready to use in your next project.

At this point I’d recommend saving your file incase you decided you want to change anything on it later. Simply filling the Background layer with a different color will change the coloring of the entire fabric pattern and you can save that pattern for future use as well.

In the download at the end of the lesson I’ve included a .pat file with the basic pattern as well as a blue and red version for your use. I hope you’ve learned something useful!

I received an overwhelming response to the Creating Custom Patterns and Hero Header Part I tutorials asking for a comprehensive tutorial on creating complex repeating patterns, especially the heavy damask style that I have such an obvious affinity for. This one is for all of you who want so badly to dig even deeper into this technique. Grab a shovel and lets get to work. I’ll be breaking this tutorial into 2 parts and in this first installment I’ll show you how to create the base pattern and in Part 2 we’ll be adding color and texture to create an even cooler effect.

Though there are multiple ways to get to the same result, for me the following method is the most accurate, detailed and versatile, and unlike other methods it allows unlimited future reworking of the pattern if needed… it’s also requires the most work, so be prepared.

(*note: This tutorial assumes you know how to use the pen tool with a degree of proficiency.)

There are a myriad of excellent resources and inspiration for repeating patterns online and anytime I’m creating something this complex I like to at least have a piece of reference material to get me started. In this case I’m going to go wallpaper shopping… yes, actual wallpaper. I paid a visited to the Wallpaper Direct website and did a search for "damask" patterns. Once I found a pattern I thought would make a good starting point I copied the image and pasted it into a new Photoshop document.

To get this swatch for yourself if you’re following along at home follow this link to reach the search page where I found my pattern. Click on the DE067 / Ashdown swatch which will open the popup window showing the pattern repeating in the background (although not exactly perfectly). Command-Click (PC: Right-Click) on the background pattern in the upper left corner of the window and choose "View Background Image", this will show just the .jpg file the page is using as it’s repeating background. Command-Click (PC: Ctrl-Click) on the image and choose "Copy Image" then switch back to Photoshop and press Command-V (PC: Ctrl-V) to paste the pattern onto the stage of a new document.

(*note: I’m using a 1000×1000 pixel document so that I can have plenty of room to work.

Next lets press Command-J (PC: Ctrl-J) to duplicate the new layer and move the copy to where the next tile in this repeating pattern should go. Repeat this another two times until you’ve created a space where you can see how the pattern is supposed to look on all sides. I’m going to place a copy above, below and off to the right of my initial swatch. If you’re using the same swatch as me, you’ll notice that the edges don’t meet up exactly right (like there are a few edge pixels missing), to compensate for this I’m going to leave a little gap between those spaces so when I trace the pattern everything will actually be in the right place.

To keep things clean select all 4 pattern layers in the layers palette and press Command-E (PC: Ctrl-E) to merge the selected layers into a single layer.

Now that I’ve got a good idea of the flow of the pattern we’ve got one last step in the setup process before we get into creating the new pattern. We’ll be tracing the edges of our source pattern with the pen tool in a minute and since we obviously want our pattern to be perfectly symmetrical lets add a simple vertical guide. If your rulers aren’t visible press Command-R (PC: Ctrl-R) to bring them up and drag a guide onto the stage by clicking on the ruler on the left side of the stage and dragging the guide out to the stage. The guide needs to cut the pattern in half perfectly.

This is where the real work begins. Grab the Pen tool by pressing the P key. Beginning at the top of the pattern place an anchor point on the guide line and begin tracing the right (or left) side of the pattern. I find that zooming in on the area I’m working on makes this easier. Keep in mind that you’re creating a new pattern here and you can take as much liberty or add/subtract as much detail as you see fit. The swatch we’re working on is just a guide and you can deviate as much as you like.

Work until you’ve got one side of the pattern completely traced out.

Before we go any further lets click over to the Paths tab in the Layers palette and give our work path a name (if it isn’t visible choose Window>Paths from the main menu). If we were to deselect our path and start a new work path at this point we would loose all that hard work which (speaking from experience) totally sucks. By giving the path a new name we commit it as part of our working document.

Press the A key to switch to the Path Selection tool and drag a selection around the whole path to select the entire thing. You’ll know it’s all selected because every point on the entire path will be selected.

With the whole path selected and the Path Selection tool still active hold down the Option (PC: Alt) key and click and drag the path to duplicate it. This will effectively duplicate our entire path inside the existing path layer. Be sure to drag the copy far enough away from the original that the two are not touching.

(*note: If you press and hold the shift key once you begin to drag/copy the path you can constrain your the line of your drag so it is exactly straight across from the original.)

Obviously we need to make this copy of our path face the opposite direction so lets choose Edit>Transform Path>Flip Horizontal from the main menu. Then with the arrow keys move this copied path to meet the other side. You will want to zoom in on one of the junction points as close as possible to make sure that the two paths meet perfectly at the center. I found that hiding the guide made it easier as well.

Because this core pattern repeats vertically with a slight overlap, I’m going to now select the entire complete path and duplicate it again (just like before), this time dragging it vertically down until it sits over the source pattern below, slightly overlapping the upper path.

Notice that to the right and left of the main pattern that the center portion of that pattern is repeated on each side. To create these we’ll simply duplicate the path again, remove the leafy outer border and place what’s left to the right and then the left of the main pattern.

(*note: I’d hope you know better than to get this far into a complex project without saving your document, but if not, you ought to do it now!)

The path layout is now complete so lets switch back to the Layers palette and create a new layer by clicking the Create New Layer icon at the bottom of the Layers palette or by using the keyboard shortcut Command-Shift-N (PC: Ctrl-Shift-N) and call the layer Pattern.

Press the D key to reset the foreground color to black and then fill the layer with black by pressing Option-Delete (PC: Alt-Backspace). Now lets add a Vector Mask to this layer using our path. Press the P key to switch to the Pen tool, Control-Click (PC: Right-Click) on the path and choose Create Vector Mask.

You can now hide or delete the original pattern reference layer because we don’t need it anymore.

Now that we’ve got the pattern laid out with all it’s parts it’s time to define the center of the pattern that will be our repeating section. We’ll begin by placing a guide at a top point of the pattern. It’s important to choose a spot at the top that’s easy to find and contains all the repeating information. I chose the top of this point to make it easy to find the correlating point in the lower area. It helps a lot placing these guides to zoom in until you can see each pixel.

(*note: Before placing these new guides I chose View>Clear Guides from the main menu to remove the center guide we placed on the stage earlier.)

Now scroll down and find that EXACT same point in the lower half of the pattern and place another guide there. Every pixel counts so make sure your guide is placed perfectly.

Repeat this process adding guides to the left and right sides of the pattern. Make sure that any parts of the pattern that are outside the guide on the left are inside the guide on the right.

With all my guides placed for the pattern I’ll often create a selection inside my guides of the pattern area, copy the selection and paste it into a large new document where I can duplicate the pasted tile and layout the repeating tiles to make sure everything lines up perfectly. In this case I discovered that a small area at the top corners of my pattern were missing. I show you this oversight to demonstrate how important it is to make this test file before going any further and how easy it is to miss small details in a complex pattern.

Testing your pattern at this stage will save you hours of trouble later.

By simply deleting the Vector Mask from my layer and adding copies of the smaller side elements to the top of the design back in my Paths layer in the Paths palette, and adding a new Vector Mask including the modified paths I easily remedied the problem.

Now that we’ve fixed and tested the pattern to insure that it tiles perfectly it’s time to turn this baby into a Photoshop pattern.

We only want the black areas to be visible on in the pattern so hide the Background layer by clicking the eye icon next to it in the Layers palette and make sure the Pattern layer is selected as the active layer. Press the M key to invoke the Rectangular Marquee tool and drag a selection inside our guided area.

Choose Edit>Define Pattern from the main menu, give your pattern a name and click OK. The pattern has been saved and is now available in the Pattern Picker. If you choose Edit>Preset Manager and choose Patterns from the menu you will find your new pattern at the end of the list.

You’ve now completed Part I of the tutorial. You can now continue to Complex Repeating Patterns Part II where we’ll add color and texture to create a stunning and versatile repeating pattern.

It seems like everywhere I look these days designers are using more and more handmade objects in their work. From pencil sketches and fabric scans to paper scraps and household odds and ends these items are making their way into our work. In this Photoshop tutorial you’ll learn how to create a retail "hang tag".

As always I recommend using a little reference material when you’re creating something from scratch that actually exists in the physical world. For today’s lesson I’m using two pieces I found at iStockPhoto, one for the card-stock background and one for the hang tag. By entering the item ID into the iStockPhoto search you can pull up the exact images I’m using.

In this lesson we’ll be using a photo of actual card-stock for the project. If you’d like to learn how to create this effect from scratch check out my Cardboard And Torn Paper Business Card tutorial.

Our first step will be to organize these items on the stage. I’ve merged the reference tag from iStock with the background layer for convenience. (The .PSD file at the end of the lesson will contain both original comp pieces from iStock). I’ve also rotated the card-stock background.

Lets go ahead and create the shape of our tag by tracing the outline of the reference tag with the Pen tool. This will be easy since the outline of the tag is all straight lines. Press the P key to invoke the pen tool and click your way around the outside of the tag until you end up back at your start point.

(*note: This is easier if you zoo in on the tag for a better view.)

Before we go any further lets click over to the Paths tab in the Layers palette (or by choosing Window>Paths from the main menu) and lets name our path. The reason for this is that if we create a new working path now without naming the one we just created we risk loosing the initial path because if we don’t name it Photoshop assumes we’re done with it.

While we still have the Paths tab open and our Main Tag Area path selected lets also add the hole. Press the U key to invoke the Custom Shape tool, in the options bar at the top of Photoshop make sure that the tool is set to Paths, choose the Ellipse tool and make sure the Exclude Overlapping Path Areas icon is selected.

Holding down the Shift key to constrain the circle, click and drag a circular path onto the stage where the hole in the tag is.

Sometimes despite our best efforts to do things in the correct order Photoshop can have a mind of it’s own so lets double check and make sure this new circular path indeed has the Exclude Overlapping Paths option actually chosen. Press the A key to switch to the Direct Selection tool and take a look at the options bar at the top of Photoshop. Mine actually had defaulted to the Add To Shape Area option rather than retaining the Exclude Overlapping setting. If this is the case for you, just go ahead and click on the Exclude Overlapping Path Areas icon to switch it. We do this to make sure that the hole is actually cutout of the tag.

Switch back to the layer tag and with the Direct Selection tool