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 pill-
shaped 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 vector-
based 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 at the bottom of the
layers palette.

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 in the tool bar and select a soft brush with a diameter of 40 in the
option bar:

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 in your tool bar and press the cursor right
key 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 to create a new layer set (in Photoshop CS2
called a layer group).

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 which
can be found in the tool bar:
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 in
the layers palette.

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.