6738897 Adobe Photoshop Tutorial 3

8/8/2019 6738897 Adobe Photoshop Tutorial 3

1/63

Displacement

It's easy to make a coloured block of text, or a simple diagram (e.g. a flag), but tomake 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 thecanvas.

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 visualrepresentation of the gradient, or click on "Edit" on the Options tab.) Put in lots of


2/63

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

3 Applying the Gradient

Hold down Shift, and apply the gradient across your new image from left toright.

4 Softening the Gradient

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


3/63

5 Applying the Displacement Map

Now go back to your original flag image, and click Filter > Distort > Displace. Put0% in "Horizontal Scale" and 5% in "Vertical Scale". (You can go higher if youwant the waves to be bigger.) When it asks for a file, select your displacementmap. (This will distort your image depending on how dark the displacement mapis at that point.)

6 Bringing in the Displacement Map

Now grab your displacement map image, and drag it onto your image. Use thearrow keys to nudge the displacement map until it covers the whole image.


4/63

7 Using an Overlay to Create Some Light

Change the displacement map layer's Mode from Normal to Overlay, and reduceits opacity (75% is good).

Voila, a funky flag. Scroll up and compare this image to the f irst one, and you'llreally 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 theRounded Rectangle Tool to draw a pill-

shaped button (for older versions of Photoshop, please refer to the Round Edges Tip, andthen 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 onit). 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 untilyou 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 toaround 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.
http://void%280%29/http://void%280%29/http://www.absolutecross.com/tutorials/photoshop/interfaces/round-edges/http://www.absolutecross.com/tutorials/photoshop/interfaces/round-edges/http://void%280%29/http://www.absolutecross.com/tutorials/photoshop/interfaces/round-edges/


5/63

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 theexcess 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 ChannelsPalette. Select the Marquee Selection Tool from your toolbox and create a number ofdifferent 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 dothis, 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 clickOK. If you want the corners to be less

rounded then all you have to do is reduce the number, more rounded, increase thenumber.
http://www.absolutecross.com/graphics/textures/http://www.absolutecross.com/graphics/textures/http://void%280%29/http://void%280%29/http://www.absolutecross.com/graphics/textures/http://void%280%29/http://void%280%29/


6/63

3.

Now, press Ctrl+L to get theLevels 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+Clickon channel you made to load the

selection. Go back to theLayers Palette and make a new layer ensure it's the activelayer before continuing.

7. Next, choose Edit Fill Pattern to fill the selection with the texture (in Photoshop6, 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!
http://www.absolutecross.com/graphics/textures/http://www.absolutecross.com/graphics/textures/


7/63

1. Start by creating a new document about 200x350. Open the Channels Palette, and click

on the Create new channelicon. Press D on your keyboard to reset your colors to default.

Use the Rounded Rectangle tool withFill Pixels modeselected in the Options bar, anddraw 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+Clickon the channel to load the selection (if you don't already have it). Rename

the channel outline.

3. Open theLayers Palette, and create a new layer. Then fill the selection with solid grey

and rename the layerbase.

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
http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://www.absolutecross.com/tutorials/photoshop/interfaces/round-edges/http://void%280%29/http://void%280%29/http://void%280%29/http://www.absolutecross.com/tutorials/photoshop/interfaces/round-edges/


8/63

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 LoadSelection 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 andmanipulate the diagonal line until it looks aboutlike 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).


9/63

8.

Switch to the base layer on the Layers Palette. Choose Select Load Selection reflexand 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 EraserTool (also select a big soft brush from theBrush 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
http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/


10/63

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 andthe 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 yourMarquee 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 itinside. 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 Transparencybox (necessary for upcoming step).
http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/


11/63

12. Now, select theAirbrush 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 theSingle 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. ClickOK, 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)
http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/


12/63

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+Clickthe base layer, and thenselect 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


13/63

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 ImageReadyor using the Cutting Up Imagestutorial, and you should have a remote control interface that will make all your buddies

jealous!
http://en.wikipedia.org/wiki/Adobe_ImageReadyhttp://en.wikipedia.org/wiki/Adobe_ImageReadyhttp://www.absolutecross.com/tutorials/photoshop/basics/image-slicing/http://en.wikipedia.org/wiki/Adobe_ImageReadyhttp://www.absolutecross.com/tutorials/photoshop/basics/image-slicing/


14/63

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, sowhy 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 theexample 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 clickalong the path so that all of the anchor points can be

seen.


15/63

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 asin the example below to add two new anchor points.

Now using the Direct Selection tool again, select the top anchor point you just added byclicking 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.


16/63

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... ifthe 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 OverlayAdd 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 GlowNow 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, clickOK.
http://void%28window.open%28%27/images/tips/psd/audioint/audioint-gradientoverlay1.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-satin1.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-bevelemboss1.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-bevelemboss1.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-innerglow1.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-innerglow1.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-innershadow1.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-dropshadow1.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-gradientoverlay1.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-satin1.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-bevelemboss1.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-innerglow1.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-innershadow1.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-dropshadow1.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))


17/63

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 learnhow 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). Selectthe 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: GradientOverlay. 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 newshape with black. Now we need to make this shape slightly smaller, so press CTRL+T to

enter Transform mode.
http://www.absolutecross.com/tutorials/photoshop/interfaces/inset-buttons/http://void%28window.open%28%27/images/tips/psd/audioint/audioint-gradientoverlay2.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-gradientoverlay2.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://www.absolutecross.com/tutorials/photoshop/interfaces/inset-buttons/http://void%28window.open%28%27/images/tips/psd/audioint/audioint-gradientoverlay2.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-gradientoverlay2.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))


18/63

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 Embossand use these settings: Bevel and EmbossNow add a contour layer style with these settings: Contour

And lastly, you might want to add an inner glow: Inner GlowAgain, 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 ShadowNow 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
http://void%28window.open%28%27/images/tips/psd/audioint/audioint-bevelemboss3.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-contour3.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-innerglow3.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-dropshadow4.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-innerglow4.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-innerglow4.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-bevelemboss4.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-stroke4.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-bevelemboss3.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-contour3.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-innerglow3.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-dropshadow4.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-innerglow4.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-bevelemboss4.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-stroke4.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))


19/63

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 justmore coolhaha), 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 screenby 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 totransform 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:
http://void%280%29/http://void%280%29/


20/63

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 alittle 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 Pentool (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.
http://void%28window.open%28%27/images/tips/psd/audioint/audioint-gradientoverlay5.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-gradientoverlay5.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%280%29/http://void%280%29/http://spacefonts.8m.com/font6.htmhttp://void%28window.open%28%27/images/tips/psd/audioint/audioint-gradientoverlay5.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%28window.open%28%27/images/tips/psd/audioint/audioint-gradientoverlay5.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=485'))http://void%280%29/http://spacefonts.8m.com/font6.htm


21/63

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 lookout 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 theexamples 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 theElliptical 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.
http://void%280%29/http://void%280%29/http://void%280%29/


22/63

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 enter9, 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 theexample (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 littledefinition 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 thislayer to about 32%.

4. Create a new layer on top of all the others and name it "Orb Glow" change the layerblending mode of this layer from Normal to Color Dodge, and lower the "Fill" (located

under the opacity) to around 21%. After that, select thePaintbrush 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 yourforeground color. In the Option bar set your brush size to 300, and set 0% Hardness and
http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/


23/63

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 thePen Tool and set it to Paths mode. Now draw a series of points tocreate 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 theAdd 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.
http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/


24/63

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 yourselection), 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 tothe bottom of the selection. You will end up with a nice highlight. Press CTRL+D todeselect. 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, butyou 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.


25/63

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, orinset itinto 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 thePSD and take alook 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 PSDof the example below.

1. First, create a new image about 600x600 pixels (or whatever size is appropriate for theimage 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).
http://www.absolutecross.com/tutorials/photoshop/interfaces/inset-buttons/http://www.absolutecross.com/tutorials/photoshop/interfaces/smooth-metal/http://www.absolutecross.com/images/tips/psd/lcd-orbs-sample.psdhttp://www.absolutecross.com/images/tips/psd/lcd-orbs-sample.psdhttp://www.absolutecross.com/images/tips/psd/lcd-orbs-robouk.psdhttp://www.absolutecross.com/images/tips/psd/lcd-orbs-robouk.psdhttp://www.absolutecross.com/tutorials/photoshop/interfaces/inset-buttons/http://www.absolutecross.com/tutorials/photoshop/interfaces/smooth-metal/http://www.absolutecross.com/images/tips/psd/lcd-orbs-sample.psdhttp://www.absolutecross.com/images/tips/psd/lcd-orbs-robouk.psd


26/63

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 cansave 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 GlowThis gives our shape its first hint of a bevel.

Next you'll be adding a bright highlight (the lightsource). Click on the Inner Shadowcategory 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 anoptional 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.
http://void%28window.open%28%27/images/tips/psd/smooth-metal-innerglow.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=520,height=372'))http://void%28window.open%28%27/images/tips/psd/smooth-metal-innershadow.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=520,height=372'))http://void%28window.open%28%27/images/tips/psd/smooth-metal-innershadow.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=520,height=372'))http://void%28window.open%28%27/images/tips/psd/smooth-metal-gradientoverlay.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=520,height=372'))http://void%28window.open%28%27/images/tips/psd/smooth-metal-gradientoverlay.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=520,height=372'))http://void%28window.open%28%27/images/tips/psd/smooth-metal-satin.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=520,height=372'))http://void%28window.open%28%27/images/tips/psd/smooth-metal-satin.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=520,height=372'))http://void%28window.open%28%27/images/tips/psd/smooth-metal-innerglow.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=520,height=372'))http://void%28window.open%28%27/images/tips/psd/smooth-metal-innershadow.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=520,height=372'))http://void%28window.open%28%27/images/tips/psd/smooth-metal-gradientoverlay.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=520,height=372'))http://void%28window.open%28%27/images/tips/psd/smooth-metal-satin.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=520,height=372'))http://void%28window.open%28%27/images/tips/psd/smooth-metal-satin.gif','','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=520,height=372'))


27/63

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, whichyou can learn to create with theLCD 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 layerUNDERNEATH the layerscontaining 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 yourgradienttool, and use the following settings:

Drag from top to bottom over your selection to create the inset effect. When done pressCTRL+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.
http://www.absolutecross.com/tutorials/photoshop/interfaces/lcd-orbs/http://www.absolutecross.com/tutorials/photoshop/interfaces/lcd-orbs/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://www.absolutecross.com/tutorials/photoshop/interfaces/lcd-orbs/http://void%280%29/http://void%280%29/http://void%280%29/


28/63

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:


29/63

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 layerspalette.

Press the letterD on your keyboard to make the fore- and background color black and

white.

Press the letterX on your keyboard to switch the fore- and background color; theforeground 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 ] onyour 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 mousekey again, press the right bracket key ] to increase the diameter another 1 pixel andcontinue 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 thecrack with a diameter of 1 pixel.

The result could be something like this:


30/63

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 fixthat 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%:


31/63

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:


32/63

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%:


33/63

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 withonly one.


34/63

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 mousekey, 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:


35/63

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 notwhat we want.

Continue by double clicking on the Set's name and rename it to Crack:


36/63

I'm showing you all this to understand some of the advantages of layer sets/groups. Atthis 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, whichallows 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:


37/63

1. Remove blemishesWe'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 youuse 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:


38/63

The reason why we're going to remove blemishes first is because we will have betterresults 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:


39/63

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 haveany 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 (inthis case at A), Photoshop will remember the distance and angle between A and C. So ifthe 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 andsource are 'glued' together as shown in this little animation:
http://www.arraich.com/ref/tool_blend_modes.htmhttp://www.arraich.com/ref/tool_blend_modes.htm


40/63

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 resultof 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 letterA 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 ofabout 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 thescreenshot 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.


41/63

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. Youcan do this at any time by following the same steps that we used to set the initial source

area.

2. Smooth skinCreate 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 inthe 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


42/63

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 tutorialsadvice 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. Toshow 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 thebackground 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:


43/63

The skin now looks exactly the way we want it, but by using the Median filter we'veblurred 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 inthe 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:


44/63

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 maskicon in front of it:

To be able to see what we're actually masking, let's turn on the equivalent of Quick Maskby pressing \ on your keyboard. You won't see anything happen, but let's paint on the hatinside 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 MaskOptions... The following window will open:


45/63

In this window you can change the color by double clicking on the red square. You canalso 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 themedian 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:


46/63

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 tryto 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


47/63

1. Prepare the background and drawe the shapeOpen 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:


48/63

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:


49/63

It's up to you what you want to answer here; click OK to replace the current shapes orclick 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 effectClick 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 markedwith A.


50/63

Click on the Custom Shape Tool icon again if it's not active or press U on yourkeyboard.

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:


51/63

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)...


52/63

...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:


53/63

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


54/63

..and click OK.

The last thing we have to do now is changing the blending mode of the Background copylayer to Lighten:

This is the final result:


55/63

Final wordsTry 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 underestimateyourself) 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:


56/63

I hope you enjoyed this Photoshop tutorial.

For more help with Photoshop check out our section.

1. Select the right imageOpen an image that doesn't have a lot of rough textures, because like with the othertechniques 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 .
http://www.lunacore.com/training/training.htm


57/63

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

2. Apply High Pass FilterSelect 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:


58/63

3. Apply Note Paper filterSelect 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:


59/63

4. Convert gray lines to blackIn 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 myexample a Threshold Level of 180 was enough.

Here's the result:


60/63

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.


61/63

Here's another example:


62/63

Have fun!

For more help with Photoshop check out our section.
http://www.lunacore.com/training/training.htm


63/63

Documents

6738897 Adobe Photoshop Tutorial 3