Adobe Photoshop Tutorial 3

Displacement It's easy to make a coloured block of text, or a simple diagram (e.g. a flag), but to make it look like it's actually real, you'll need to follow these steps:

1 – Setting Up Take your object (Australian flag in this case), and make some space around it, by clicking Image > Canvas Size, and putting in a greater height and width for the canvas.

2 – Creating a Gradient Now make a new image, the same size as your first image. Select the "Gradient" tool, and edit the gradient (Click on the visual representation of the gradient, or click on "Edit" on the Options tab.) Put in lots of

black and white markers, as I've done in the image (this will make your gradient produce black and white bars).

3 – Applying the Gradient Hold down Shift, and apply the gradient across your new image from left to right.

4 – Softening the Gradient Click Filter > Blur > Gaussian Blur, and blur your image a bit. This image is now your "displacement map". Save this image (I generally use the name "dispmap.psd").

5 – Applying the Displacement Map Now go back to your original flag image, and click Filter > Distort > Displace. Put 0% in "Horizontal Scale" and 5% in "Vertical Scale". (You can go higher if you want the waves to be bigger.) When it asks for a file, select your displacement map. (This will distort your image depending on how dark the displacement map is at that point.)

6 – Bringing in the Displacement Map Now grab your displacement map image, and drag it onto your image. Use the arrow keys to nudge the displacement map until it covers the whole image.

7 – Using an Overlay to Create Some Light Change the displacement map layer's Mode from Normal to Overlay, and reduce its opacity (75% is good). Voila, a funky flag. Scroll up and compare this image to the first one, and you'll really notice the difference. This technique can also be used to make realistic curtains, ribbons, and banners.

BUTTONS 1. Start by creating a new document — use the Rounded Rectangle Tool to draw a pillshaped button (for older versions of Photoshop, please refer to the Round Edges Tip, and then return here). Once you have your shape you wish to make silver, follow the steps below. 2. First, make a new layer and name it button (which should have your shape selection on it). Press D on your keyboard in order to set your forground color to black and your background color to white. Now, go to Filter » Render » Clouds — Press CTRL+F until you have the clouds the way you want them (you might also try using Difference Clouds for a different effect if you want).

3. Now, make a new layer. Choose Select » Modify » Border, and set the value to about 6 (this may differ in your situation). Then choose Select » Feather, and set the value to around half of the number you set the border to — in this case it would be 3.

4. Next, press ALT+Delete on your keyboard to fill the feathered selection with Black (which should still be your forground color). Press CTRL+D to deselect.

5. Now, CTRL+Click on the button layer to get the selection back — make sure you are still on the layer with the black shading though. Go to Select » Inverse to select the excess black and press Delete to get rid of it.

6. Just press CTRL+D to deselect and you have your very own silver button! You may then choose to fill the background layer with a seamless texture, add some text, or perhaps place your button on your website's layout/interface.

1. Open a new document and click on the Create new channel icon in the Channels Palette. Select the Marquee Selection Tool from your toolbox and create a number of different shapes, either seperate or connected to each other. Hold down the Shift Key so that you can make more than one shape at a time, without deselecting others. As you do this, keep in mind the "basic" overall finished shapes you see in your mind. Once you have your shapes, go ahead and fill them with white.

2. Once you are satisfied with your shapes, press Ctrl+A to Select All. Go to Filter » Blur » Gaussian Blur. Set it to 5 and click OK. If you want the corners to be less rounded then all you have to do is reduce the number, more rounded, increase the number.

3. Now, press Ctrl+L to get the Levels Dialogue Box. Move the input levels to 120, 1.00, and 140 — press OK.

4. Once you recover from your amazement, you'll probably begin to wonder how to make your new round-edged masterpiece start looking like a "real" interface, button, etc. The answer lies in a Texture Fill. 5. Open whatever texture you like (if you need some cool ones, check out the free Seamless 3D Texture Section on Absolute Cross for nearly 1000 to choose from!). Select All (Ctrl+A) and then choose Edit » Define Pattern. 6. Go to the Channels Palette and CTRL+Click on channel you made to load the selection. Go back to the Layers Palette and make a new layer — ensure it's the active layer before continuing. 7. Next, choose Edit » Fill » Pattern to fill the selection with the texture (in Photoshop 6, you must choose which Custom Pattern to use from the drop down). If you like what you see, then save your work... or you can use other techniques to make it look even better — such as beveling the edges or adding buttons and crazy gadgets! Have fun!

1. Start by creating a new document about 200x350. Open the Channels Palette, and click on the Create new channel icon. Press D on your keyboard to reset your colors to default. Use the Rounded Rectangle tool with Fill Pixels mode selected in the Options bar, and draw a round-edged box as in the example below (if you're using an older version of Photoshop, please refer to the Rounded Edges Tutorial to learn how to make rounded corners, and then come back here). 2. Once you have a shape that looks something like the example shown below, CTRL+Click on the channel to load the selection (if you don't already have it). Rename the channel outline.

3. Open the Layers Palette, and create a new layer. Then fill the selection with solid grey and rename the layer base. 4. Next, duplicate the channel we named outline (click on it and drag it to the new channel icon) and name the new copy of the channel shadow. Use Filter » Blur »

Gaussian Blur » 4 or 5 pixels (higher may be necessary if your shape is substantially larger than the example). 5. Now, switch to the Layer Palette and choose Select » Load Selection » shadow. After that, choose Select » Modify » Contract by 3 pixels, then Select » Inverse. Then press D to set colors to default and ALT+Delete to fill with black. Now choose Select » Load Selection » outline to load the original selection. Choose Select » Inverse and press Delete... your image should now look like the one below.

6. Looks pretty cool so far, eh? Press CTRL+D to deselect, and go to channels again, duplicate the shadow channel, and rename it reflex. 7. Now, with the reflex channel selected, choose Image » Adjust » Curves and manipulate the diagonal line until it looks about like the example screen below. The resulting image should look similar to the example (2nd image). This will distort the channel so it can be used as a reflex — the difference between shadows (own shadow and drop shadow).

8. Switch to the base layer on the Layers Palette. Choose Select » Load Selection » reflex and move the selection 3 pixels up and 3 pixels left. Now, choose Select » Inverse and create a new layer. Fill the layer with white — Rename to reflex. 9. Now it's time to adjust the reflex layer. Press CTRL+D to deselect. Set it the Layer's opacity to somewhere between 60-80% if it seems to be too bright (depending on how you feel about it). Make sure that the reflex layer is still selected, and choose the Eraser Tool (also select a big soft brush from the Brush Palette). Erase the left and upper sides of the reflex layer so you can see more of the (black) shadow from the base layer. Choose

Select » Load Selection » outline (with the reflex layer still active). Choose Select » Inverse and press Delete, then CTRL+D to deselect. Keeping reflex selected, press CTRL+E to merge the layer down - you should now only have just the base layer and the background layer. 10. Choose Image » Adjust » Levels and adjust the your shape until you are satisfied with the color and balance between shadows and highlights.

11. Select the bottom part of the base layer with your Marquee Selection Tool. Select the Move Tool, and use the Down arrow on your keyboard to split your shape into two pieces (you may have to resize your canvas to make it fit). Then, create a new layer and call it inside. Draw a rectangular selection on the new layer (see 2nd image) and fill it with light gray — check the layer's Marquee Selection Tool. Check the Preserve Transparency box (necessary for upcoming step).

12. Now, select the Airbrush Tool and set its pressure to 25-30%. Pick out a soft brush (45 pixels wide is good) and draw 2 lines along the left and right edges while holding Shift so they are straight (these will be shadow lines to make the middle section appear to be round). Go to the Layers Palette and drag the inside layer so it is below the base layer, and make sure it is centered. 13. Now, select the Single Row Marquee Tool from the fly-out menu and switch to the base layer. Create a selection line one pixel from the edge where the layer was divided in half (mouse over the sample image below for a zoomed example). Now, choose Image » Adjust » Levels, and enter 2 in the middle "Input Levels" box. Click OK, then move the selection 1 pixel up and choose Image » Adjust » Levels and put 0.4 in the middle "Input Levels" box. This will create a beveled line on the very edge of the base layer. Repeat this process for the other edge, only move one pixel down this time. We will use this technique again later. (Optional: You may wish to add "two" of these bevel lines to the edges to make them stand out, I have included 2 in the sample image)

14. Time for drop shadows! Create a new layer, and name it drop shadows (this layer should be underneath the base layer - base on top). CTRL+Click the base layer, and then select the drop shadows layer. To create the drop shadow (the drop shadow layer should still be selected), choose Select » Feather » about 4 pixels (depending on your taste). Move the selection 3 to 4 pixels right and 3 to 4 pixels down. Now fill the feathered selection with Black. Repeat this process for the inside layer.

15. Now, using the same beveled line technique (with one line selection) create lines to

separate the remote into separate buttons. You will need to make them on the appropriate layer (inside or base). If you want, add some text for the buttons and a background. Add rollovers, cut up the image with Adobe ImageReady or using the Cutting Up Images tutorial, and you should have a remote control interface that will make all your buddies jealous!

1. Let's get started. You'll want to start with a fairly large image to give you plenty of space to work with - a good choice would be at least 500x50px, with a resolution of 72 pixels/inch and a white background. It can be scary staring at a blank white canvas, so why not paste your favorite wallpaper or background onto the first layer of your image, and turn the opacity down so it's present but not obtrusive.

2. Let's start with the main shape. The shape for this tutorial will be fairly simple, based on a mini-disc player remote. Select a light gray as your foreground: #E5E5E5 and grab the Rounded Rectangle tool. Match your options to the following:

Now create a new layer and draw out a large pill shaped bar, about the size of the example below.

You "could" just stick with this simple shape... but hey where's the adventure in that? The cool thing about using the vector shape tools in Photoshop is that the shape is actually a path that you can change any way you like. To manipulate the shape, grab the Direct Selection tool and click the center of your shape to highlight the path. Now click along the path so that all of the anchor points can be seen.

With the Direct Selection tool still active, click the anchor point in the top right so it becomes black. Now on the keyboard nudge the point up 5 times (5 pixels). Do the same with the bottom right anchor point. It should look like this:

At the moment it looks like an un-even pill shape. Grab the Add Anchor Point tool (found by right clicking on the pen tool in the toolbar). Click along the path in the same places as in the example below to add two new anchor points.

Now using the Direct Selection tool again, select the top anchor point you just added by clicking on it, and press down on the keyboard 4 times to nudge it down 4 pixels. Do the same with the bottom anchor point you just created, but nudge it 4 pixels up instead of down. If you did that correctly, it will look like this.

Press CTRL + H to hide the path and look at your smooth shape.

Now we are done creating our main shape, but since we did it as a path we can easily modify it later if we need to which is always a good bonus. TIP: try to create as much of your interface using paths/shape tools, since they're vectorbased and as such will always be better quality and you'll always be able to go back and edit them.

3. The main shape is complete, so now we want to make it stand out and look realistic. An important thing you can do that will vastly speed up your work is to save all of the layer styles you create when using Photoshop version 6.0 and later. For instance, in this tutorial's example, a smooth metal bevel layer style was created for the main shape... if the rest of the interface were completed, the same layer style could be instantly applied to the main shape of that as well. It saves you LOADS of time compared to entering the same settings over and over again, and looks great. So on your shape layer, go to Layer » Layer Style » Gradient Overlay Enter these settings: Gradient Overlay Add a Satin layer style with these settings: Satin Add a Bevel style with these settings: Bevel and Emboss Add an Inner Glow layer style with these settings: Inner Glow Now we need an Inner Shadow with these settings: Inner Shadow And last but not least a drop shadow: Drop Shadow If you save your layer style by clicking the style button at the top of the styles palette then clicking "New Style", you can use it again and again later on. Once you've finished, click OK.

As you can see, we've created our main shape for all of our elements to sit on essentially using only two tools: the pen/shape tools and layer styles. No interface is complete without a slew of fancy buttons and gadgets though, right?... on the next page you'll learn how to add an inset tab, a glossy LCD screen, buttons, and plenty more. 4. The next addition will be a black plastic tab that's inset into the surface, which will later contain the interface's screen (for extra details, see the Inset Buttons tutorial). Select the Rounded Rectangle tool again with the same options as before:

This time though, use white as your foreground color. Create a new layer and draw another smaller pill shape over the top of your interface shape so it looks like the example below. Go to Layer » Layer Style » Gradient Overlay and use these settings: Gradient Overlay. Click OK.

The previous step created the inset, and in this step it's time to make the plastic tab itself. The plastic tab will consist of another (black) pill shape slightly smaller than the one created in the previous step. Drag the layer with the gradient pill shape on it to the "Create a new layer" icon to duplicate it. Right click on the newly duplicated layer and choose "Clear Layer Style". Click on the new layer to make sure that it's the active layer and press D then X (to reset your color palette), then hit CTRL+Backspace to fill the new shape with black. Now we need to make this shape slightly smaller, so press CTRL+T to enter Transform mode.

Hold ALT and drag the bottom side up slightly (holding ALT mirrors anything done to the bottom side onto the top side so it remains equal). Now do the same with the right hand side. Once you're happy with it, Hit ENTER to commit it or ESC to cancel and try again. If all went well, it should look something like this:

Now it's time to add a bit of shine to the black plastic area. Go to Layer » Layer Style » Bevel and Emboss and use these settings: Bevel and Emboss Now add a contour layer style with these settings: Contour And lastly, you might want to add an inner glow: Inner Glow Again, you might want to save this style before you click OK. It should look similar to the example below at this point:

5. Now for the fun part — time to add the LCD screen. Create a new layer, and select #86B7E7 as your foreground color. Using the Rounded Rectangle tool with the following options, draw your LCD screen onto the black plastic tab, as shown below.

And it will look like this:

Time for... yeah I know you're not expecting this... another layer style! Go to Layer » Layer Style » Drop Shadow and use these settings: Drop Shadow Now add an Inner Glow with the following settings: Inner Glow Next a Bevel and Emboss layer style: Bevel and Emboss And lastly a Stroke layer style: Stroke

As usual, you should consider saving your new layer style for later use. When you've completed the settings, click OK and compare your results with the example below.

Now, the next part is optional, but to make the LCD look more realistic (er ok, maybe just more cool haha), you can simulate light reflecting off the surface by adding a highlight. Here's how: This can get a little tricky, and while there are a few easier ways of getting a similar effect, this way is more realistic. Duplicate the layer that contains your blue LCD screen by dragging it onto the "Create a new layer" icon . Right click on this new layer and choose "Clear Layer Style", then press X then D on the keyboard to reset your colors. Now hit CTRL + Backspace to fill the shape with white. With the Direct Selection tool, click the now-white shape, and press CTRL + T to transform the shape. In the options bar at the top, enter these settings (see highlighted):

Hit Enter on your keyboard to commit the changes. It should now look like this:

Lower the fill opacity (in the layers palette) to 0% so the white shape is invisible:

Now, press D then X to reset your colors. Go to Layer » Layer Style » Gradient Overlay and use these settings: Gradient Overlay, then click OK. You should have a good looking highlight now, but it's actually a little too perfect. In the Layers palette, add a layer mask to your screen highlight layer by pressing the "Add layer mask" icon . Now select the Pen tool (make sure you have the correct one). In the options bar, set the options to these:

Now, on your canvas, draw a path that will contain all parts of the highlight you want to keep (see image below)

Now right click INSIDE the path and choose "Make Selection" (you should still have the pen tool as your active tool). Leave all settings as default and click OK in the dialogue that pops up. Press X then D to reset your colors (if needed) and hit CTRL + Backspace on the keyboard to fill the selection with ... Press CTRL + D to deselect, and your results should look similar to the example.

The LCD screen is now complete; all that remains is to add your text to it. You can download an LCD-like font here.

6. Now you will want to add your buttons to the interface. As usual, you should try to use layer styles as much as possible to create your buttons. The process of creating and adding buttons will not be covered in this tutorial, but look out for interface button tutorials coming soon. By this point you now have quite an array of useful interface-design techniques under your belt - see what you can come up with.

1. For this tutorial, my LCD Orb was created at 350x350px and scaled down in the examples below - if you apply this technique to a different sized shape, you may need to adjust the values to suit your particular image. Begin by making a new 350x350px image with a white background, and create a new layer — name this layer "LCD Shape". Select the Elliptical Marquee tool. Now hold SHIFT and ALT on your keyboard and from the center outward draw your circle so that it fills most of the image area.

Fill in the selection with your color of choice (Edit » Fill). The example's fill color is #ACBEDC. 2. Now without deselecting, create a new layer and name it "LCD Shading". Press D on your keyboard to reset your colors to default. Go to Edit » Stroke — for the width enter 9, Location should be Inside, and if it isn't already, ensure that the color is black. Click OK.

Now, with the "LCD Shading" layer selected and your selection still active, go to Filter » Blur » Gaussian Blur, enter a setting of 9, and click OK. Lower the opacity of the layer to about 28%. Remember to keep in mind that if your image is a different size than the example (350x350px) then you may need to use different settings to get a similar look. Press CTRL + D on your keyboard and compare what you have so far with this example.

3. The next step will be to create a subtle outline around the Orb, to give the shape a little definition from its background. Hold CTRL and click on the "LCD Shape" layer to load the circle selection. Again create a new layer on top of the other 2, and name this one "Stroke". Go to Edit » Stroke and enter a setting of 2. Now lower the opacity of this layer to about 32%. 4. Create a new layer on top of all the others and name it "Orb Glow" — change the layer blending mode of this layer from Normal to Color Dodge, and lower the "Fill" (located under the opacity) to around 21%. After that, select the Paintbrush tool and in the Options bar at the top of the screen, select the Airbrush icon. Press D on your keyboard to reset your colors, and then press X so that white is your foreground color. In the Option bar set your brush size to 300, and set 0% Hardness and

40% Flow. Hold your brush at the bottom of the LCD Shape so that it is positioned about half way out of the selection (see the example below), and hold down your mouse button for about 1 second give or take.

Move your mouse down further so that now only the top 1/3 of the brush is inside the selection, and click for about 1 second again. You should now have painted a bright glowing area around the bottom half of the circle, which is brightest at the bottom. Looking smooth eh?

5. The next step will be to create the highlight for the orb. Create a new layer and name it "Highlight". Choose the Pen Tool and set it to Paths mode. Now draw a series of points to create a rough section in the top half of your circle as illustrated in the example below. (If your path ends up as a solid shape that you can't see through, make sure your Pen tool is set to Paths mode as mentioned above).

To get the bottom of the path to curve, you can use the Add Anchor Point Pen tool. Add a point to the middle of the bottom line, then click and drag the point upwards to slightly bend the path.

6. With the Pen Tool still selected, right click in the path and choose "Make Selection..." and press OK. Press M on your keyboard to switch to your Selection tool. The next part is a bit tricky, so hold on to your hat. Create a new layer (don't lose your selection), hold SHIFT + CTRL + ALT together, and click on the "LCD Shape" layer (the original circle layer). Move the selection down about 5 pixels using the Down arrow on your keyboard. This should give you a selection similar to that in the example below.

7. Select the Gradient Tool, and choose the "Foreground to Transparent" setting (white to transparent). Now, make a gradient in your selection starting from the top and dragging to the bottom of the selection. You will end up with a nice highlight. Press CTRL+D to deselect. Go to Filter » Blur » Gaussian Blur and enter a setting of about 6. To delete any of the blurred gradient that may have strayed outside the shape, hold CTRL and click on the "LCD Shape" layer to bring back your original circle selection. Choose Select » Inverse and press Delete on your keyboard. You won't see anything change, but you would if your LCD Orb was on a background color other than white. If you'd like your highlight to be brighter, try making a duplicate of the Highlight layer, and adjust the opacity of the copied layer. Also try scaling the highlight with Edit » Free Transform for different effects.

8. Your LCD Orb is now complete! Use it as part of your interface, skin (i.e. winamp), website layout, or wherever you like. You can add on additional effects as well, such as scanlines, a translucent logo, or inset it into an interface. To learn how to make a smooth metal panel like in the example below, see the smooth metal tutorial. If you had any trouble completing this tutorial, feel free to download the PSD and take a look under the hood on how this effect works (right click on the link and choose Save Target As or Save Link As). You can also download a PSD of the example below.

1. First, create a new image about 600x600 pixels (or whatever size is appropriate for the image you plan to create). If you haven't already got a shape that you want to apply this effect to, now's the time to make something. The shape in the example is simply made up of 2 circles blended together. Once you have your shape, fill it with this shade of gray: #E6E6E6. Keep your shape on its own layer and make sure you have nothing selected (press CTRL+D).

2. Most of the steps from this point on will be using Layer Styles, which are available in Adobe Photoshop 6.0 and later versions. Once you've created this layer style, you can save it and use it instantly whenever you want, without the hassle of re-entering all the settings every time you need this effect. With your shape's layer selected, go to Layer » Layer Styles » Inner Glow, and match up your settings with these: Inner Glow This gives our shape its first hint of a bevel. Next you'll be adding a bright highlight (the lightsource). Click on the Inner Shadow category to the left, and match these settings: Inner Shadow

3. Next click on Gradient Overlay and dial in the following settings: Gradient Overlay To add a final touch to the smooth metal, click on Satin and match these settings: Satin Settings Your smooth metal style is complete at this point, though you may wish to add in an optional drop shadow. But wait... do NOT click OK yet. Remember, we want to add this layer style to your arsenal so you can call upon it when ever you need it. Click at the top where it says Styles

Now click the "New Style" button and give your style a name such as "Smooth Metal", then click OK. You should then save your styles by clicking the arrow icon to the left and choosing "Save Styles" from the list.

4. At this point your basic smooth metal panel is complete, though if you'd like, follow along and take it to the next level. In the example, a glowing orb has been added, which you can learn to create with the LCD Orb tutorial. To make the orb appear as though it's inset into the metal panel simply complete the following steps... Place the orb onto your image, and create a new layer UNDERNEATH the layers containing your orb but ABOVE your smooth metal shape. Now select the elliptical marquee tool, and draw a selection so that it's just a little bigger than the original orb. To make this easier, place your mouse in the center of your orb, and hold SHIFT and ALT at the same time and drag your selection. Now, select your gradient tool, and use the following settings:

Drag from top to bottom over your selection to create the inset effect. When done press CTRL+D to deselect.

5. Now, with new gradient-inset layer you just created still selected, go to Filter » Blur » Gaussian Blur and use a setting of about 0.5 to make it a bit smoother.

6. You can now apply the same techniques to other "stuff" you want to add to your new interface. Here's an example. Be creative and enjoy your new layer style :)

1. Adding the crack (highlight) In this Photoshop tutorial we're going to use the following image:

You can save this image in Windows on your hard drive by right clicking on it and selecting Save Picture As... (I don't own a Mac, so I don't know what the procedure is on a Mac). Select the Pencil tool in the tool bar and choose a master diameter of 1 px by opening the Brush Preset picker window in the option bar:

Create a new layer by clicking on the Create a new layer icon at the bottom of your layers palette and rename it to White crack by double clicking on its name in the layers palette. Press the letter D on your keyboard to make the fore- and background color black and white. Press the letter X on your keyboard to switch the fore- and background color; the foreground color is now white:

We're now going to draw the crack. While holding down the left mouse key start in the top/left corner and draw a crack over a distance that's about 1/5 of the final size of the crack. Once you've reached that point, release the mouse button but don't(!) move the mouse, press the right bracket key ] on your keyboard once, to increase the master diameter of the pencil with 1 pixel and continue where you left off. Stop at 2/5 of the total length of the crack, release the mouse key again, press the right bracket key ] to increase the diameter another 1 pixel and continue drawing the crack. At 3/5 of the distance you continue by using the bracket key [ instead to decrease the diameter to 2 pixels and you repeat this again at 4/5 so that you draw the last part of the crack with a diameter of 1 pixel. The result could be something like this:

Make sure that you draw a random line with some sharp corners, a few bends and some straight parts. At this point the beginning and ending of the crack stops too abrupt. We're going to fix that by using a mask. Add a mask to this layer by clicking on the Add layer mask icon layers palette.

at the bottom of the

At that moment the mask is the active area (notice the double border and the mask icon in front of the layer (A)), so any further edits will take place on this mask only:

Grab the brush tool option bar:

in the tool bar and select a soft brush with a diameter of 40 in the

Set the opacity of this brush in the option bar to 25%:

Make sure that your foreground color is black: Now paint with black over the edges of the crack to make them fade (more transparent). Use the following before & after rollover image as a guideline:

Continue by changing the blending mode to overlay in the layers palette and select an opacity of 75% (see screenshot on next page) . Click on the layer's thumbnail (the one with the checker board pattern) and while holding down the left mouse button drag and drop this layer on the Create a new layer icon at the bottom of your layers palette and rename this new layer to Black crack by double clicking on its name in the layers palette:

Press Ctrl + i (Command + i on the Mac) to invert the crack; it will now be black. Important: the crack won't look black when you look at it in your document window, since the layer's blending mode is still set to overlay and the opacity is still 75%, since both were copied when we duplicated the White crack layer. Change the blending mode of the Black crack layer in the layers palette to Color Burn, set the Opacity back to 100% and select a Fill of 85%:

With this layer selected, grab the Move tool key

in your tool bar and press the cursor right

on your keyboard only once, then press the cursor up key

also only once.

At this point you should have something like this:

Notice that by using this method we're blending the shadow with the actual texture of the wall, which results in fine visible details inside the crack which makes it all look slightly more realistic. We're now going to do a little trick to get rid of both identical layer masks, to end up with only one.

First click on the Create a new set icon called a layer group).

to create a new layer set (in Photoshop CS2

Now click on the mask that's attached to the Black crack layer, hold down the left mouse key, move your mouse cursor until it's on top of the Add layer mask icon and release your mouse button:

This will copy the layer mask that was attached to the Black crack layer to the layer set, since the layer set was the active layer at that time. In Photoshop CS2 we can duplicate a mask by holding down the Alt key (Option key on the Mac), click on the mask and drag and drop it onto the target layer: Next we're going to remove the masks of the Black crack and White crack layer by dragging (A) each mask to the Delete layer icon at the bottom of the layers palette. When asked "Apply mask to layer before removing?" simply click on the discard button:

After removing the masks, continue by dragging the Black crack layer (B) to the layer set. Do the same for the White crack layer (C). Note: don't drag the White crack layer first and after that the Black crack layer because then you end with the White crack layer as the first layer in our set, which is of course not what we want. Continue by double clicking on the Set's name and rename it to Crack:

I'm showing you all this to understand some of the advantages of layer sets/groups. At this point we can easily drag the crack around without having to worry about linking them. We can also easily drag the crack to a different document if we prefer to do so, because it's now just a matter of dragging the set/group instead of the individual layers. We can now also easily hide the crack by simply clicking on the eye icon in front of the layer. Of course if we have multiple cracks it's going to be a lot easier to keep the layers palette less cluttered when they're all in one set/group. The other advantage, especially for this tutorial, is that we now have a single mask, which allows us to make a single change that will affect both the black and the white crack, which is important if we want to make the beginning or ending part of the crack fade away. So go ahead, if you want to make some final adjustments to the mask, do that right now. In the end we should have something like this:

1. Remove blemishes We're going to use the following image for this Photoshop tutorial:

Download this image to your hard drive by right clicking on it and selecting (when you use Windows) Save Picture As... The first thing we're going to do is removing blemishes in the face. In the following image I've marked which areas I considered needed a correction:

The reason why we're going to remove blemishes first is because we will have better results when we soften the skin in our next step. The tool that we're going to use to remove blemishes is the Healing Brush Tool can be found in the tool bar:

which

Let's first add a new layer by clicking on the Create a New Layer icon in the layers palette. Rename this layer by double clicking on its name in the layers palette and name it Blemishes. With the Healing Brush Tool still selected, let's look at the option bar:

On the left we can see a black dot with a sharp edge; it means that the brush is going to have a hard edge (also called 100% hardness). Underneath we can see the size of the brush which is 19. More to the right we notice the selected Blending Mode for this brush. For this tutorial we're only going to use Normal mode. If you want to know more about blending modes then you might consider to look at this very detailed article by Jay Arraich: Blend Modes The next option is called Source, for which we have two options; Sampled or Pattern. Sampled means that we're going to use our image as our source. Pattern means that we're going to use an existing pattern as our source. In most cases you will use the Sampled option, because quite often we want the new area to have the same texture as the area surrounding it. Pattern can be useful if you don't have any descent area in your image that you would like to use as your texture. We are going to use Sampled. The Aligned option allows us to have a source area that follows our mouse cursor. Look at the following screenshot:

In this example the user has selected area C as the source (later we will learn how to set the source). The first moment the user presses the mouse button to remove a blemish (in this case at A), Photoshop will remember the distance and angle between A and C. So if the user now decides to remove a blemish at B, then the source will be D (same angle, same distance). So you could say that after the user starts to use the Healing Brush that both cursor and source are 'glued' together as shown in this little animation:

The advantage of the option Aligned is that we always stay close to the area that needs to be corrected and that the texture resembles the texture we want to use for our correction. Notice that the option Use All Layer is selected. This means that the source area doesn't have to be on the same layer, in our case the Blemishes layer. It also means that the result of using the Healing Brush Tool will be placed on the active layer, which is in our case the Blemishes layer. The Healing Brush however only uses those pixels that are visible in our document window, but like I said, it doesn't matter on which layer they are. If you return to the screenshot of the options bar you'll notice that I have placed the letter A beside a little black triangle. Click with the mouse on this little triangle and a new window will pop up:

We're going to use a small brush size for our Healing Brush Tool so we select a value of about 20 px. We also want to have soft edges to avoid that our corrections are noticeable in the final image and that's why we're going to select a value of 0% for Hardness. The other settings have Photoshop's default values and don't need to be changed. If these values are different in your case then change them according to the values of the screenshot of the options bar. The last thing we have to do before we start removing some blemishes is setting the source area. Move your mouse cursor close to an area that needs to be fixed (the source area and the area that needs to be fixed shouldn't overlap) and hold down the Alt key (option key on the Mac) and press your left mouse button; this will mark the source area.

With the source area set you can start by removing blemishes by using your mouse cursor as if it were some magic brush. Note: sometimes it's necessary to change the source area of the Healing brush Tool. You can do this at any time by following the same steps that we used to set the initial source area.

2. Smooth skin Create in Photoshop a new layer on top of the Blemishes layer by clicking on the Create a New Layer icon . Rename this layer to Smooth Skin by double clicking on its name in the layers palette. Hold down Ctrl + Alt + Shift + E (Command + Option + Shift + E on the Mac) to merge all visible layers on the active layer (Remember this Photoshop shortcut, it's a very useful one) or in other words; the layer Smooth Skin will contain the image that was visible in

the document window when you used this shortcut, which includes all the corrections we did to remove blemishes. We're going going to use the Median filter to make the skin look smooth. Some tutorials advice you to use Gaussian Blur, but I prefer median because it takes better care of edges and it's exactly those sharp edges that we want to leave intact as much as possible. To show you the difference between applying Gaussian Blur or Median to our image, look at the following comparison:

Gaussian Blur

Median

Notice that by using Gaussian Blur you're actually moving the blue that's in the background in the skin. This is of course something we want to avoid at all cost. Now go to the menu and select Filter / Noise / Median... , enter a radius of 10 pixels and click OK. Set the opacity of this layer to 50%:

The result:

The skin now looks exactly the way we want it, but by using the Median filter we've blurred areas that need to stay sharp, like eyes, lips, hair, hat, eyebrows, eyelashes and the edges of the nose and nostrils. We are going to fix this by adding a mask which allows us to ignore those area that need to stay sharp. We add a mask to the Smooth Skin layer by clicking on the Add layer mask icon the layers palette.

in

Press the letter D on your keyboard to make the foreground color white and the background color black: Press the letter X on your keyboard to switch the fore - and background color: Select the the Brush Tool by clicking on its icon

in the tool bar. Check the options bar:

Use the settings that you see in the options bar. Notice that we're going to start with a size 50 brush. This time the hardness of the brush is set too 100% (hard edges). You can change both the size and hardness of this brush by clicking on the little black arrow like we did earlier with the Healing Brush Tool. Now it's important that you have your mask active at all times before you start using the brush, since we have to apply the brush strokes to our mask and not our image. An active mask can be recognized by its double border (marked with the red arrow) and the mask icon in front of it:

To be able to see what we're actually masking, let's turn on the equivalent of Quick Mask by pressing \ on your keyboard. You won't see anything happen, but let's paint on the hat inside the document window. You'll notice that the quick mask mode now marks the area that is going to be masked with a transparent red. Turn off Quick Mask by pressing \ again and you'll see the area of the background layer that you've made visible by masking the same area on the Smooth Skin layer:

So that's the whole purpose of our mask in this tutorial, to hide the areas that are blurry and which have to stay sharp. You can change the color and opacity of Quick Mask by righting clicking on the mask's thumbnail in the layers palette and selecting Layer Mask Options... The following window will open:

In this window you can change the color by double clicking on the red square. You can also change he opacity of the Quick Mask color, which is by default 50%. Note: The opacity setting doesn't affect the layer or the mask itself, it only affects the transparency of the mask in Quick Mask mode. Continue by turning on the Quick Mask mode by pressing \ again. Look at this screenshot:

You'll notice that I have masked everything that needs to stay sharp (unaffected by the median filter). If you have a hard time to tell whether you've fully masked those areas that need to be mask, then do the following: • •

if Quick Mask mode is on, turn it off Alt + Left click (Option + click on the Mac) on the mask's thumbnail (see next screenshot, A) in the layers palette

This allows you to view (or edit) the mask in your document window and will show you pretty precise where you need to make adjustments, like in this case around the left eye:

You can return to the normal view by clicking on the layers thumbnail in the layers palette (B). To create a clean mask you have to use the following guidelines; •

• • •

Change the brush size often. Instead of switching to the options bar several times we're going to use a shortcut; press [ on your keyboard to decrease the brush size or press ] to increase its size. There's also a shortcut for hardness; press Shift + [ to decrease the hardness of your brush or press Shift + ] to increase the hardness. Mask large areas with a large brush and a hardness of 100%. Mask small areas with a small brush and a hardness of 0%. Mask accurate edges by using a large zoom factor and work with a small brush, low hardness of 0% and a low opacity (about 30-50%).

Also make sure that sure that you don't forget to mask areas like the corners of the mouth, fine hairs, eyebrows, eyelashes and the contours of nose and nostrils. For those areas try to use a soft, small brush with a low opacity. This is the final result (after some slight sharpening): Important: Give your browser enough time to download the "after" image or you won't see any difference

1. Prepare the background and drawe the shape Open a new document in Photoshop, 500x500 pixels. Press the letter D on your keyboard to set the foreground color to black and background color to white Grab the Paint Bucket Tool from the tool bar and fill the background layer with the current foreground color (black). Select the Custom Shape Tool by clicking on its icon

(B) in the tool bar:

Go to the options bar and click on the area marked with A to show all shapes. Then continue by clicking on the little black triangle in the upper right corner (B) to open the fly-out menu:

In the menu select Ornaments:

The following window will pop up:

It's up to you what you want to answer here; click OK to replace the current shapes or click Append to append them to the current ones. Now select the Spiral shape by double clicking on it in the preview window...

...and make sure the option Shape Layers in the options bar is selected:

2. Add the shape and add the transparent 3D effect Click on the foreground color icon in the tool bar marked with red:

In the Color Picker window that opens you enter the value 699EE0 in the area marked with A.

Click on the Custom Shape Tool icon again if it's not active or press U on your keyboard. We're now going to draw the shape. Hold down the shift key while you do that to constrain its proportions and draw something like this:

Don't make the shape too big, we need the extra empty space around it in one of our future steps. Don't you worry if you can't get the shape centered the first time; just draw the right size while holding the shift key like I told you earlier and then use the Path Selection Tool to move it into the right position.

Make sure that the shape layer is active (a

in front of it)...

...and press Ctrl+E (Command + E on the Mac) to merge the shape layer with the background layer:

Now go to the menu and select Filter / Blur / Motion Blur... and select -30 for Angle and a Distance of 30 pixels and click on OK:

Duplicate this background layer by clicking on its icon in the layers palette and while holding the mouse button, drag and drop it on the Create a New Layer icon :

Again, go back to the menu but this time select Filter / Stylize / Glowing Edges... and enter • • •

1 for Edge Width 20 for Edge Brightness 1 for Smoothness

..and click OK. The last thing we have to do now is changing the blending mode of the Background copy layer to Lighten:

This is the final result:

Final words Try to experiment with different settings, different blending modes, add some color, other shapes or effects, just use your imagination as much as possible (don't underestimate yourself) and experiment (that's how I learned Photoshop). I showed you a technique that explains how make 3D objects and it's now up to you take it a step further. Here are two other examples, this time using text:

I hope you enjoyed this Photoshop tutorial. For more help with Photoshop check out our

section.

1. Select the right image Open an image that doesn't have a lot of rough textures, because like with the other techniques the results are not going to be that good. In my example I've opened the image of a clock in Photoshop.

Duplicate this background layer by clicking on its icon in the layers palette and while holding the mouse button, drag and drop it on the Create a New Layer icon .

First press Ctrl + D (Command + D on the Mac) to change the foreground color to black:

2. Apply High Pass Filter Select in the menu: Filter / Other / High Pass Select a very small radius. The radius depends on the size of the image. In my example I've chosen a radius of only 0.3 pixels.

Just make sure that you don't use too much radius like in this example:

3. Apply Note Paper filter Select in the menu: Filter / Sketch / Note Paper... Use the following values: • • •

Image Blance: 25 (depends on the image, experiment) Graininess: 0 Relief: 0

The result looks like this:

4. Convert gray lines to black In our previous step the lines are not black but some shade of gray. We can change this by adding a threshold correction. Select in the menu: Image / Adjustments / Threshold... Move the slider to the right until you see a black & white drawing of the image. In my example a Threshold Level of 180 was enough. Here's the result:

Go to the tool bar and select the Pencil Tool and set the foreground to white by pressing X on your keyboard (this switches the fore- and background colors) Now remove some a the few distracting pixels by clicking on them with the pencil tool. Make sure that you zoom in and that you use a small sized pencil.

Here's another example:

Have fun! For more help with Photoshop check out our

section.