Web Domination Using Photoshop

If you’re familiar with Photoshop, you’re probably eager to toy with its many features. In this article, we’ll cover some of the basic tasks that Photoshop users should master, such as resizing and rotating documents and layers, working with masks, creating curves and custom shapes, working with transparent images, and more!

First up, we’ll cover the fundamentals that every Photoshop user needs to know. Then we’ll dedicate ourselves to learning all there is to know about creating cool button effects. We’ll cover a huge range of different effects, so I hope you’re ready for some serious Photoshop action!

This article represents two chapters from my new book, The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques, which is a complete compendium of Photoshop techniques — all of them in full color! You can download this article, plus the book’s introductory chapter, in PDF format to read offline. But now, let’s get a solid grounding in Photoshop.

Chapter 2. Basic Skills

This chapter covers fundamental solutions that we’ll call upon throughout the remainder of this book. And as an added bonus, I’ll show you how to create a coupon box with dotted borders — no doubt you’ve always wanted to make your very own one of these!

Placing a Graphic in your File

Often you’ll want to import existing graphics and artwork into your Photoshop document. A problem for Photoshop? Not at all — in fact, there are several ways you can do this!

External graphics can be placed in Photoshop as raster layers or Smart Objects. First, I’ll show you how to place these graphics, then we’ll talk about the difference between raster layers and Smart Objects.

Solution

Placing Artwork from a Web Page

Copy the artwork from the web page, then select Edit > Paste or press Ctrl-V (Command-V on a Mac) to paste it into your Photoshop document. Photoshop will create a new layer containing the artwork, or place it into a selected empty layer. The artwork will be on a raster layer.

Placing Artwork from Flattened Image Files

A flattened image file — such as a GIF, JPEG or PNG — contains artwork on a single layer. Open the file in Photoshop and use Select > All or press Ctrl-A (Command-A) to create a selection of the entire document. Click on your Photoshop document then select Edit > Paste or press Ctrl-V (Command-V) to paste it. Photoshop will paste the document into a new or selected empty layer as it does when pasting artwork from a web page. The artwork will be on a raster layer.

Placing Layers from a Different Photoshop Document

Position the document windows so that both are visible. Select the window of the document you wish to import from, to bring up its Layers palette. Select and drag the necessary layers over to the new window and release the mouse button when you see a thick, black outline around the window. This will copy the layers across as shown in the example at the top of the next page. The copied layers will retain their original properties.

Copying a layer from one Photoshop document to another

Placing Artwork from Illustrator

Open Illustrator and select the artwork you wish to export to Photoshop. Copy the artwork using Ctrl-C (Command-C on a Mac). Switch to Photoshop while Illustrator is still open and paste your copied artwork using Ctrl-V (Command-V). A dialog box will appear, asking you whether you wish to paste the artwork as a Smart Object, Pixels, Path or a Shape Layer.

Paste dialog box

Placing Artwork as a Smart Object

Select File > Place and choose the file you wish to import. Click Place to import the file into your Photoshop document as a Smart Object. For PDF and Illustrator files, Photoshop will display a dialog box that asks you to select the pages you wish to place. Choose the pages you want and click OK.

The bounding box for an image pasted as a Smart Object

The Smart Object will initially be placed with a bounding box surrounding it, as shown here. You can use this bounding box to move, rotate, scale, or make other transformations to the object. When you’re done, double-click inside the bounding box to commit the Smart Object to its layer.

Discussion

Smart Objects

A Smart Object is an embedded file that appears in its own layer in Photoshop. A Smart Object layer is distinguished by an icon that overlays the thumbnail image displayed in the Layers palette, as shown in the example below.

Smart Objects are different from other layers because they are linked to a source file (e.g., an Illustrator file, JPEG, GIF or other Photoshop file). If you make changes to the source file, the Smart Object layer will also be updated with those changes.

Raster layer vs Smart Object layer

In contrast, raster layers (or regular layers) are fully editable, so you can draw and paint on them, fill them with colors, or erase pixels. Unlike Smart Objects, where you retain image quality, if you resize a raster layer smaller, you will lose information.

This is demonstrated in the example on the next page, which shows the result of a Smart Object that has been decreased in size, then resized back to its original dimensions. The same steps, when applied to a raster layer, produce an image that is blurred and of lower quality.

The difference in image quality when resizing a Smart Object compared to a raster layer

Because Smart Objects are linked to an outside document, you can resize them without losing the original image data. While you can apply layer effects and some transformations to Smart Object layers, you cannot actually manipulate (paint, draw, erase) their pixels because they are not editable from external documents. You can open the original source file for editing by double-clicking on the Smart Object icon.

Rasterizing

You can rasterize Smart Objects by right-clicking on the name of the Smart Object layer and choosing Rasterize Layer. This will break the link to the original source file and treat the layer as an ordinary raster layer.

Resizing a Document

Solution

Bring up the Image Size dialog box by selecting Image > Image Size or pressing Ctrl-Alt-I (Command-Option-I on a mac). You can resize the document by altering either the Pixel Dimensions or the Document Size. Use the former when resizing images that will be used on screen (such as images that will be used on a web page), and the latter when resizing images that will be printed.

Image Size dialog box

You can maintain the original document proportions as you resize the image by checking the Constrain Proportions checkbox. To scale layer styles (drop shadows, strokes, etc.), check the Scale Styles checkbox.

Resizing a Layer or Selection

Photoshop also lets you resize layers or particular portions of a document without affecting the overall size of the document.

Resizing an element using corner handles

Solution

From the Layers palette, select the layer that contains the element you wish to resize. If the layer contains other elements that you don’t wish to resize, select your element using one of the selection tools.

After making your selection, use Edit > Free Transform or press Ctrl-T (Command-T on a Mac). A bounding box with handles will appear around your selection. Click and drag these handles to resize the element, as shown in this example. To keep the transformation in proportion so that the image does not appear squashed or stretched, hold down the Shift key and resize it using the corner handles.

You can also resize the element to a specific width or height using the options bar. In the example below, I clicked the Maintain Aspect Ratio button (signified by chain links), then specified the width — this changed the height of my element automatically. If I had not maintained the aspect ratio, only the width of my rose would have changed.

Press Enter or double-click inside the bounding box to apply the transformation.

Using the Free Transform options

Discussion

When you resize different layer types, you get different results. Vector shape layers, such as text or shape layers, can be resized larger or smaller without loss of quality.

Smart Objects can also be resized larger or smaller without loss of quality, depending on the original file. If the original file is a vector graphic, the Smart Object can be resized without ever losing quality. If the original file is a GIF or similar, the Smart Object can be resized up to the size of the image dimensions, above which it will start to lose quality.

Raster layers or selections can only be resized smaller. Resizing them larger will usually result in loss of quality.

Rotating a Layer or Selection

Earlier, you may have used the Free Transform command to resize layers and selections, and thought it was pretty swell. What you probably weren’t aware of at the time is that the very same command can also be used to rotate layers and selections!

Solution

Make a selection or choose the layer you’d like to rotate. Select Edit > Free Transform or press Ctrl-T (Command T), and move your cursor outside the bounding box.

You’ll see that it turns into a curved, two-headed arrow as shown in this example. You can click and drag this cursor to rotate the elements within the bounding box.

Rotating a selection

Hold down the Shift key to constrain the angle movement to 15-degree increments. You can also set a specific angle of rotation (between -180° and 180°) in the Angle text box in the options bar.

Setting the angle of rotation in the options bar

Rotation Alternatives
For 90- or 180-degree rotations, you can select Edit > Transform and choose from Rotate 180°, Rotate 90° CW, or Rotate 90° CCW.

Press Enter or double-click inside the bounding box to complete the transformation.

Using Drawing Tools to Create Lines

Solution

Vertical and Horizontal Lines

Using the Brush or Pencil Tool (B), move the cursor to the position from which you’d like the line to start on your document. Click and hold down the mouse button.

Hold down the Shift key to constrain mouse movement to straight lines, then drag the cursor to draw your line. Release the mouse button to complete the line.

Diagonal Lines

Using the Brush or Pencil Tool (B), position the cursor at the point from which you’d like the line to start and click once (release the mouse button this time). Hold down Shift and click on the spot where you’d like your line to end. Photoshop will connect the dots with a straight line.

Perfect Squares and Circles

Solution

If you’ve been a bit adventurous and tried your hand at drawing a few shapes in Photoshop, you’ve probably found that it can be difficult to draw a perfect square or circle “freehand.”

The solution is simple — if you hold down the Shift key while creating a rectangle or ellipse, Photoshop will ensure that the shape is a perfect square or circle. This works for both the selection and the shape tools.

Straightening the Edges of a Rounded Rectangle

It’s pretty straightforward to create rectangles and rounded rectangles using their respective shape tools. But what if you want a rectangle on which only some corners are rounded?

Solution

1. Create a rounded rectangle using the Rounded Rectangle Tool (U) highlighted in this example. Be sure to use the Shape layers option in the option bar, not the Fill pixels option.

Creating a rounded rectangle

2. Choose the Convert Point Tool (P), which you’ll find in the Pen Tool flyout menu. Click on the path to show the anchor points of the vector shape. These are represented by small white squares.

Clicking on the anchor points with the Convert Point Tool

3. Click on each of the anchor points that make up the rounded corner you want to “straighten.” This will change the curve into a “cut” corner, as shown in the example below.

The result of using the Convert Point Tool

4. Select the Direct Selection Tool (A) and click on the top angled point (zoom in if necessary). Holding the Shift key to constrain the movement to a horizontal path, drag the point laterally until it aligns vertically with the bottom point, as shown in this example. You can move the point using the arrow keys for more precision if you prefer.

Moving the corner point

5. To tidy it up, select the Delete Anchor Point Tool (found in the Pen Tool flyout menu), and click on the bottom point to delete it (as shown in this example) as it’s now become redundant. Voila! You’ve got a straight edge on a rounded rectangle!

Deleting the anchor point

Creating Curved Design Elements

There may come a time when you find yourself wanting to create curved design elements such as those shown here. You’ve probably noticed that Photoshop doesn’t have a “curve” tool. Where does the curvy goodness come from?

Curved design elements

Solution

The answer, in a nutshell, is the Pen Tool (P). Creating curves involves learning how to draw your own vector shapes — it’s exciting stuff! If you’ve never used vector drawing tools before, you’re in for a treat!

Think back to your adventures with the pencil and brush drawing tools, where you clicked and dragged the mouse to create a shape. The Pen Tool is distinctly different, because instead of creating a shape, you are clicking and dragging to set anchor points and curve directions. It takes some practice, but mastering the Pen Tool is your key to creating delightful curves.

Let’s start with the basics. Before I explain how to make curved shapes, I’ll quickly go over how to draw polygon shapes with the Pen Tool; it’s quite easy, and sets a good foundation for drawing trickier curves.

Let’s draw a triangle. Each click with the Pen Tool will create a corner point.

Click once to create the first point, then again to create the second point. A line segment will automatically connect these points to form a path. Click again to create the third point — a line segment will connect this to the second point, extending the path. Any subsequent points created hereafter will be connected with line segments, but since we’re creating a triangle, we only need three points.

To make the triangle shape, simply close the path by clicking on the first point we created. You’ll notice that the cursor changes into a pen with a little circle when you move it over the original point. This means that you can close the path by clicking on that point.

Alternatively, you could close the path simply by pressing Enter. The example below shows the four clicks described to create a triangle.

Using the Pen Tool to create a polygon

Let’s have a go at creating some curves.

This time, when you click to place a point, drag the mouse. You’ll see two lines extending from the point you’ve made. These are known as Bezier control handles, or “handlebars.” The length and direction of these handlebars will determine the curvature of the path that we are about to make. Release the mouse button and move your cursor to another position.

Curved paths

Click and hold down the mouse button again. You’ll see that a path has been created between your first and second points, and that one of your handlebars has disappeared. If you drag your mouse, new handlebars will extend from the second point.

Adjusting the curve with handlebars

Choose the Direct Selection Tool (A) and adjust the curve by dragging the end points of the handlebars, as shown in this example. Let’s try making the curved shapes I showed you on the previous page using these techniques.

Curved Shape 1

Follow along with the diagram below.

Step by step for Curved Shape 1

1. Using the Pen Tool (P), click once to create a point.

2. Hold down the Shift key and click above the first point to create a straight, vertical line.

3. Keeping the Shift key down, click to the right of the top point to create a straight, horizontal line.

4. Still holding the Shift key, click below the point on the right-hand side to create a vertical line segment a bit shorter than the first one we created.

5. Position your cursor as shown. Press Shift and click and drag to create a point with horizontal handlebars.

6. Position the cursor as shown in step 6 in the diagram. Hold down Shift, click and then drag to create another point with horizontal handlebars.

7. Click once on the original point to close the shape.

Curved Shape 2

Creating Curved Shape 2

1. Using the Pen Tool (P), click once to create a point.

2. Hold down the Shift key and click above the first point to create a straight, vertical +line as shown.

3. Keeping the Shift key down, click to the right of the top point to create a straight, horizontal line.

4. Position the cursor as shown. Click and drag to create a point with handlebars, then hold down Shift and drag to the left to create the curved section.

5. Click once on the original point to close the shape.

Curved Shape 3

Creating Curved Shape 3

1. Using the Pen Tool (P), click once to create a point.

2. Hold down the Shift key and click to the right of the first point to create a straight, horizontal line.

3. Keeping the Shift key down, click above the point on the right-hand side to create a straight, vertical line.

4. Hold down the Alt key (Option on a Mac). Click on the point you just created and drag the mouse up and to the left to create a handlebar.

5. Click on the original point to complete the shape, but do not release the mouse button. Drag the mouse downwards and to the left, as shown in step 5 in the diagram, to create a handlebar. Use the Direct Selection Tool (A) to adjust your curve with the handlebars.

Reusing Vector Shapes

As you work more with shapes, you may find that you’re often recreating the same vector shape. If it’s a simple shape — one that doesn’t involve outlines or layers — you can save it as a custom shape and access it later using the Custom Shape Tool (U).

Warning: Save Your Shapes!
After you create and add your custom shape, I recommend that you click on the small arrow in the custom shape flyout box and select Save Shapes. This will save all of the custom shapes that are currently visible into a .csh file. This way, if you ever need to reinstall Photoshop or reset the preferences, you’ll be able to reload your shapes. You’ll find that most customizable elements, such as layer styles, patterns, and brushes, provide menu options that allow you to save the custom settings you’ve created for them.

Saving custom shapes

Solution

Defining a custom shape

1. Select your vector shape by clicking on it with the Path Selection Tool (the black arrow).

2. Select Edit > Define Custom Shape… .

3. Type a name in the Shape Name dialog box and click OK.

4. To use your shape, select the Custom Shape Tool (U) and scroll down the list of available shapes — you’ll see that your shape’s been added!

New custom shape

Sampling Colors from Image Files

Solution

Open the image file in Photoshop. If you’re not able to open it in Photoshop (the image might be embedded in a document, for example), open it in an appropriate program that lets you view the file on your computer (such as a web browser, or Microsoft Word if the image is in a Word document).

If the image is open in Photoshop, select the Eyedropper Tool (I) and click on the image to grab the color. Your foreground color will be set to the color you selected.

If you’ve opened the image in another program, resize and move the Photoshop window so that you can see both the Photoshop window and the image simultaneously (this example shows the SitePoint web site next to the Photoshop window). Select the Eyedropper Tool (I). Click anywhere in the Photoshop window, and then drag the eyedropper out to the image you’re sampling color from. In the example shown here, I sampled the orange color from the SitePoint logo. You can see that this color has been set to the foreground color in the Color Picker.

Sampling a color from outside the Photoshop interface

Finding the Hexadecimal Code for a Color Solution

When you’re working on the HTML and CSS for a web site design, you’ll need the six-digit hexadecimal codes for the colors that you use. Photoshop makes these available to you in two ways.

Time-saving Tip
Some icons in the Info palette have a little arrow icon next to them. You can change the Info palette display options by clicking on these icons?this way, you won’t need to go through the Palette Options dialog, which saves you two clicks!

Choosing the color display option

Using the Info Palette

As you move the cursor around a document, the Info palette will show you the value for the color over which the cursor is positioned. By default, the palette is set to display the RGB and CMYK values for colors. You can configure the information displayed in the palette by clicking on the small arrow on the top right-hand side of the palette and selecting Palette Options. A dialog box will appear, displaying the options you can change. Among other things, you’ll see two drop-down menus to change the Color Readout — change one of these to Web Color.

Selecting Palette Options… for the Info palette

This will display the hexadecimal codes for the color’s red, green, and blue values. String these together to get your six-digital hexadecimal code. In this example, the hexadecimal code is c9ad1c.

The Info palette displays the hexadecimal color codes

Using the Color Picker

The hexadecimal codes for colors are also displayed in a text field at the bottom of the Color Picker dialog box, as shown here. You can highlight the color code, copy it using Ctrl-C (Command-C on a Mac), and paste it into a style sheet or HTML file. Note that the hash sign (#) isn’t copied, so don’t forget to add that when you’re pasting the code!

The hexadecimal color code displays in the Color Picker

Adjusting Layer Transparency

Solution

We talked about this task briefly in “Layer Shortcuts and Tasks” in Chapter 1. To adjust the transparency of a layer, change its opacity using the Opacity field in the Layers palette.

If you have the selection, move, or crop tools selected, you can change the transparency simply by typing a number — the opacity level will magically change to reflect that percentage!

Changing the opacity of a layer

Fading an Image into the Background

An effect that’s commonly used in web design is to fade a whole image, or part of an image — its edges, for example — into the background on which it sits. You can easily produce this funky effect using gradients and layer masks in Photoshop.

Solution

1. Arrange your Photoshop document so that the image you wish to fade is on one layer, and the background color is on another layer.

Initial document

2. Select the image layer and click on the Add Layer Mask icon (signified by a white circle on a dark gray background) at the bottom of the Layers palette, as shown in this example. A blank rectangular thumbnail will appear next to the layer thumbnail, representing the layer mask. Make sure this thumbnail is selected.

Creating a layer mask

3. Set your foreground color to black. Select the Gradient Tool (G) and choose the Foreground to Transparent gradient.

Selecting the Foreground to Transparent gradient

4. Apply the gradient by clicking at the bottom edge of the image and dragging the mouse upwards. Hold down Shift to constrain the gradient path to a straight line. Release the mouse button, and the gradient will be applied. Your fade effect is complete!

Adding the fade effect

Discussion

Layer masks are grayscale images that show or hide areas of the layers to which they have been applied. The gray tones on the mask reflect the transparency of corresponding areas on the layer: black areas are completely transparent and, therefore, invisible; white areas are not transparent at all, so they’re completely visible; and shades of gray have varying degrees of transparency, depending on how dark the gray is (the closer it is to black, the more transparent the corresponding section on the image layer will be).

You can edit a layer mask using any of the drawing or painting tools, including the pencil and brush tools (B), the Gradient Tool (G), and the Paint Bucket Tool (G). Drawing on a mask affects the mask only, and does not touch the pixels that make up the image. Draw or paint on the mask in black, white, or gray.

In this solution, I used a black-to-transparent gradient to create a gradient on the layer mask. This allowed the upper part of the image to remain visible, but let the lower part fade away so that the background color could show through.

Creating a layer mask using the Brush Tool

We could also have created a fade effect with the Brush Tool (B). In the example shown, I’ve selected a soft-edged brush, set my foreground color to black, and painted along the bottom of the image on the layer mask to paint out the areas I want to fade.

You’re probably wondering why you wouldn’t just paint a green gradient on
the bottom of the picture layer, or on its own layer, to achieve the same effect.

Why use a layer mask? The beauty of layer masks is that they are non-destructive. They don’t actually modify any of the pixels on the image layer itself — a benefit that, ultimately, gives you greater flexibility. If you decided that you didn’t want the effects you’d created using your layer mask, you could get rid of the mask and the original image would remain intact. Or, if you decided you didn’t like the green color, you could change the background color and the fade effect would still work.

Blending Two Images Together

Solution

Blending two images together is very similar to fading an image into its background: you’ll apply a layer mask to at least one of your images. If you haven’t created layer masks before, read the solution titled “Fading an Image into the Background,” in Chapter 2.

Arrange your Photoshop document so that one of the images overlaps the other, as shown in the example below. I’ve usually found that the effect works best if the image backgrounds have similar colors or textures, although this is not mandatory by any means!

Initial document with two image layers

Create a layer mask for the top layer and use the Gradient Tool (G) or the Brush Tool (B) to create a fade effect as I described in “Fading an Image into the Background.” If you’ve hidden too much of the layer with the layer mask, you can make these areas visible again by painting them back with white on the layer mask.

Creating a layer mask

Personally, I’m pretty happy with that effect so I’ll leave it there. You can see the final result here.

Beautiful flowers

Rounding the Corners of a Photo

Solution

1. Select the Rounded Rectangle Tool (U) and choose the Paths option, as shown here.

Choosing the Paths option

2. Use this to create a rounded rectangle path over the image. You can view the path in the Paths palette.

Creating a rounded rectangle

3. Select Layer > Vector Mask > Current Path. Photoshop will create a vector mask using the rounded rectangle path you just created. The example here shows the new vector mask in the Layers palette. You can use the Direct Selection Tool (A) to modify the path and change its shape.

Creating the vector mask

Masking Multiple Layers with the Same Shape

Let’s say that you have multiple layers and you want them to be masked with the same shape. You could create a layer mask for one and then duplicate the mask for each layer, but what if you want to change the shape layer later? If you were motivated enough, you could go through each layer and modify the shape mask … but why would you bother when you could easily halve the time that job would take using the clipping mask?

Solution

In this solution, I’ll start with an interface design for a simple web site. It has a header bar, a menu bar, and a content area as shown in the example here.

Web site design

I’ll paste in the flower images that I blended together earlier in this chapter. As you can see in the example below, the images are bigger than the header area. I want them to be contained within the header region, but I still want to be able to move them around. The solution may seem simple at first — a layer mask on each layer will do the trick. But what if I decide to change the header height later? Then I’ll have to modify all the masks.

Images for header area

Enter the clipping mask. First, your document must have a shape layer that contains the shape of the “masking” area. Put the layers you need to mask directly on top of this shape layer.

In the Layers palette, move the cursor to the boundary between the shape layer and the layer above it. Hold down the Alt key (Option on a Mac). The cursor will change into two overlapping circles, as shown in this example.

Holding the Alt (Option) key changes the cursor

Click once. The top layer will be clipped by the bottom layer. If you examine the Layers palette, you’ll notice that the thumbnail for the top layer now has a black arrow next to it, and our shape layer’s name is underlined.

Clipping one of the layers with another

Now let’s do the same with our second image. Move your mouse up to the edge of the next layer in the Layers palette, hold down Alt and click.

Clipping another layer

Both layers have now been clipped by the base layer, as shown in the example below.

Creating a clipping mask for multiple layers

You can move the individual layers around, and they will remain clipped by the shape of the base layer. The image below illustrates this point.

Moving a layer with a clipping mask

As a final flourish, I’m going to use the solution from “Fading an Image into the Background” to fade the right edge of the second flower into the background. Our final result is shown below.

Adding a layer mask

Discussion

A clipping mask allows you to mask multiple layers using a single, editable mask that sits on its own layer. This mask will clip all the layers that sit above it, which saves you from needing to create multiple layer masks based on the same shape.

The clipped layers inherit the base layer’s properties. So, for example, if the base layer has a 50% opacity, the clipped layers will also have 50% opacity.

To unclip layers, hold the Alt (Option) key and click below the layer you wish to unclip. All the layers above it will be unclipped.

Making a Dotted Coupon Box

You’ve probably seen dotted coupon boxes before, and saved a good dollar or two by using them! This solution shows you how to create a couponstyle
box with dotted borders using customized brush strokes.

Loading square brushes

Solution

1. Select the Brush Tool (B).

2. Open the Brushes palette. Click on the small arrow in the top right-hand corner and select Square Brushes. A dialog box will appear, asking you whether you want to replace or append to the list of brushes you currently have displayed. You can always restore your original brush settings by selecting
Reset Brushes… (click Append if you’d rather add the default brushes to your
current list, otherwise click OK.)

3. Choose Brush Tip Shape and select a square brush whose diameter matches the length you want each dotted stroke to have. If the size is not quite right, you can adjust it with the Diameter slider as shown in the image on the right.

Modifying brush tip shape options

4. Increase the Spacing slider until the spacing between brush strokes works for you.

Changing the height of the stroke

5. You might want to squash your brush so that it’s more of a rectangle. Click on the top or bottom point of the circle in the dialog box and drag it towards the horizontal axis until the stroke looks similar to that in the image at left.

6. Check the Scattering checkbox and change the scattering amount to 0%.

Changing the scattering amount

7. Right. Now you’re ready to draw your box! Choose a foreground color for your dotted line. Create a new layer, hold down the Shift key, and drag across your document to draw a horizontal line.

Drawing a dotted line

8. Next, return to the Brushes palette and drag on the horizontal axis arrow to rotate the brush by 90 degrees (or type 90 in the Angle textbox).
This will allow you to draw vertical strokes.

Rotating the brush

9. Hold down Shift and drag the mouse down to draw a vertical line.

10. Rotate your brush back to zero, and draw your second horizontal line.

11. Complete your box by rotating the brush to 90 degrees once more and drawing the last vertical line.

Finished coupon box

Applying a Drop Shadow

Solution

Choose the layer to which you wish to apply the drop shadow, and select Layer >
Layer Style > Drop Shadow. Play with the opacity, angle, distance, and other settings in the Layer Style dialog box until you’re happy with the effect.

Note that the value for Angle will affect all drop shadows in your document, so that the light source is consistent across your entire image.

Dragging your Shadow
You can also click directly in the document window and drag the drop shadow around, as shown here. Make sure Drop Shadow is highlighted in the Layer Style dialog box, otherwise this won’t work!

Moving the drop shadow

Images with Transparent Backgrounds

Solution

Open a Photoshop document that contains transparent areas.

You’ll see that Photoshop marks the transparent areas with a gray, checkered pattern.

Document with background layer turned off

Select File > Save For Web…, or press Shift-Alt-Ctrl-S (Shift-Option-Command-S on a Mac). In the dialog box that appears, choose GIF and check the Transparency option, as shown in the image to the right.

While both GIFs and PNGs support transparency, some browsers (including Internet Explorer 6) donot support PNG transparency. For this reason, I’d recommend that you use GIFs to meet your transparent image needs. Click Save and name your file.

Saving as a transparent GIF

Discussion

Images with curved, smooth edges, like the one in this example, maintain the illusion of crisp edges as a result of anti-aliasing — partially transparent pixels are added onto the edges of the image to smooth them, as shown below.

However, when you save an image as a GIF, these partially transparent pixels are saved as non-transparent pixels where white is the default “background” color.

Close-up of anti-aliased shape

If you’re not placing this image on a white background, it might be wise to define a custom matte color by clicking on the Matte arrow, as shown below. Otherwise, you’ll end up with a white “color halo” around the image.

Choosing alternate matte color

Let’s say that we’re going to place this graphic against a bright red background. Click on the Matte arrow, choose Other…, and select a bright red.

Setting a bright red matte color

Now you’ll be able to see a red color halo around the graphic. If you zoom in, you’ll see that those anti-aliased pixels behave as though they’re sitting on a red background.

Close-up of color halo

Click the Save button to save your image.

No matte vs red matte

Summary

In this chapter, we looked at solutions to some of the basic functions that Photoshop users should master. We learned how to import graphics into a Photoshop document, how to resize and rotate images and selections, how to use the Shift key to constrain movements, and how to use masks and basic layer styles to create effects. We also looked at the basics of creating vector shapes and saving transparent GIFs. These skills form a great foundation for using Photoshop, and we’ll definitely turn to them in the coming chapters!

Chapter 3. Creating Buttons

Now, onto the good stuff!

In this chapter, we’ll be making navigation buttons. The solutions I’ll describe are for creating button effects. Don’t worry about making a complete navigation interface in Photoshop yet; I’ll help you design layout comps later in the book.

The techniques you’ll learn here can be applied to any “button-like” object, including icons, bullets, title and navigation bars, and other page accents.

Making a Simple, Flat Button

Solution

Rectangular Flat Button

We’re going to draw a basic, rectangular button. Set the foreground color to a color of your choice, then draw a rectangle with the Rectangle Tool (U).

I told you it was basic! I’ve made mine more interesting by drawing another rectangle in a lighter color to give my button a thick border on its left-hand side, as shown below.

A rectangular button with a thick border

Rounded Flat Button

You can also create basic, rectangular buttons with rounded corners using — you guessed it — the Rounded Rectangle Tool (U). Alter the “roundness” of your corners using the Radius field in the options bar, as shown here.

Rounded rectangular button with a ten-pixel radius

Photoshop Doesn’t Replace CSS
On a web page, you’d probably use CSS instead of images to achieve this rectangular button effect. However, this technique is handy when it comes to drawing simple buttons for web comps in Photoshop.

Rounded rectangular button with 20-pixel radius

Adding an Outline to a Button

In this solution, we’re going to be adding outlines to our basic buttons to make them look like the ones shown here.

Buttons with outlines

Adding Layer Styles
In this chapter and beyond, we’ll be making heavy use of layer styles, which are applied by launching the Layer Style window. There are a few different ways to launch this window, but the one I use most often is to click on the little f button at the bottom of the layer palette, as shown below. Clicking this button will display a dialog box listing all of the different layer styles available. Simply choose the one you want and the Layer Style window will launch, with the specific effect selected. It’s also possible to select the same styles from the menu bar (Layer > Layer Style), but using the icon saves you one mouse click!

A quick way to access the Layer Styles window

Solution

Let’s add outlines to the basic buttons we created earlier. Select the layer that contains your button. Open the Layer Style dialog box by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Stroke… from the menu that appears. You’ll see that the Stroke style is checked and highlighted — this adds the outline to your button.

Adding an outline to a button by changing its stroke options

Change the look of your stroke by adjusting the settings. You can see from the dialog shown above that I gave mine a black outline by clicking on the color patch and setting the color to black, and gave it a thickness of one pixel by typing 1 into the Size field (you could also use the slider to adjust the size of the stroke).

Making a Smooth, Beveled Button

They’re getting fancier! Let’s have a go at creating the beveled buttons shown here.

Smooth, beveled buttons

Solution

By now, you should be an expert in creating basic, rectangular buttons. Just as well, because you’ll need one for this solution! Create or select your basic button. Open the Layer Style dialog box by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Bevel and Emboss… from the menu that appears.

You’ve just added a bevel to your button. You can give the bevel a more rounded
appearance by increasing the Size and Soften levels. I’m using 7px for Size and 8px for Soften, as shown in the image below.

Make the effect more subtle by changing the Shadow Mode color. Since my button is blue, I’ve changed the Shadow Mode color from black to blue (a slightly darker shade than my button color).

Bevel and Emboss options for smooth bevel

Creating a Chiseled Button Effect

The Bevel and Emboss layer style is a versatile tool that can be used to create many different button effects. In this solution, we’ll use it to create hard-edged, chiseled buttons like the ones shown here.

Chiseled buttons

Solution

Create or select a basic button. Then, open the Layer Style dialog box by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Bevel and Emboss… from the menu that appears. From the Technique drop-down menu, select Chisel Hard and set the Soften field to 0px. Increase the Depth of the bevel to chisel “deeper” into the button.

Bevel and Emboss options for chiseled bevel

Creating an Embedded Button Effect

In this solution, I’ll show you a button effect that makes your buttons look like they’re embedded into the page, as shown here.

Embedded buttons

Solution

Select or create a basic button. Open the Layer Style dialog box by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Bevel and Emboss… from the menu that appears. From the Style drop-down menu, select Pillow Emboss. This will give your button an “embedded” effect.

Experiment with the settings to change the look of your effect. Both the buttons in the example shown above are pillow embossed, but they look different because I’ve set the Technique to Smooth for the top one, the settings for which are shown on the next page, and Chisel Hard for the bottom one.

Pillow Emboss options for the smooth embedded button

Making a Gradient Button

Two-toned gradient buttons like the ones shown here are the “new black” of graphic design. This effect has become increasingly popular — no doubt you’ll have seen it used on the buttons, menu rows, and heading backgrounds of trendy web sites. In this solution, I’ll show you how easy it is to create your very own gradient buttons.

Examples of gradient buttons

Solution

Raster Buttons

Using a selection tool, such as the Marquee Tool (M), create a rectangular selection for your button. Set the foreground and background colors to the two tones you want in your gradient, and create a new layer. With the Gradient Tool (G) selected, choose the Foreground to Background gradient option and click and drag the mouse to fill in your selection. (Holding down Shift will constrain the gradient direction to a horizontal or vertical line.)

Locking transparent pixels

Useful, but not Terribly Usable!
For all its power, the Layer Style dialog is amazingly unintuitive. What I find most confusing is the fact that you can apply a style without selecting it!

That’s right — once you’ve launched the Layer Style dialog, you can apply a style (with Photoshop’s default settings) by checking its checkbox. If you have the Preview checkbox ticked, you’ll see the effect this style has on your image.

Fairly straightforward, right? But what’s confusing is that this doesn’t actually select the style, so you can’t change its settings! You need to highlight the name of the style to bring these up — simply checking the checkbox won’t do!

Applying a Layer Style

The example shown here demonstrates this: In the top image I’ve checked the Drop Shadow style, which has been applied, but the settings in the dialog box are for the layer’s Blending Options. This means I can’t make any changes to my drop shadow!

If I click on the name of the layer style instead, my drop shadow is applied and its settings are displayed (as shown in the second image). Because of this, you might think that if I click on the name of another style that I’ve applied, it will be turned off in the document. That’s not the case — you’ll have to uncheck the checkbox for that!

Selecting (and applying) a layer style

I’d suggest you spend a minute selecting and applying a few different layer styles until you get the hang of how it all works — it’ll save you from confusion later on!

We can achieve the same gradient button effect using the Lock Transparent Pixels option that’s provided for layers. This option is useful for rounded rectangles or other shapes for which we’re not provided with automatic selection tools.

Let’s use it to make a rounded rectangle button. Using the Rounded Rectangle Tool (U) with the Fill Pixels option selected, create a sold-colored, raster button on a new layer. Click the Lock Transparent Pixels icon in the Layers palette, as shown in the example above. Then, set the foreground and background colors to your gradient tones and apply the gradient. Since you’ve locked the transparent pixels, the gradient will be applied only to non-transparent elements in the layer: your button, in this case.

Vector Buttons

If you’re not happy making raster buttons, you can create vector shapes and apply the gradient effect to them.

Open the Layer Style dialog box by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Gradient Overlay… from the menu that appears. The gradient overlay options will be displayed.

Gradient Overlay options

Adjust your gradient by clicking on the Gradient patch in the Layer Style dialog box. This will bring up another dialog box, the Gradient Editor, shown here, which you can use to set your gradient options. The colors of your gradient are represented in tiny color patches underneath the gradient bar. Double-click on them to bring up the Color Picker — you can use this to change the color of the patch (and consequently, your gradient). Add more colors by clicking anywhere along the bottom of the gradient bar — a new color patch will be placed there.

The Gradient Editor dialog

Click OK in both dialog boxes, and voila! You’ve got your two-toned gradient button. And because we’ve “overlaid” our gradient onto our button, the original color of the button is inconsequential!

Vector button with Gradient Overlay

Making a Round Push-button

In this solution, we’ll call on the trusty gradient button-creating skills we learned in the solution “Making a Gradient Button” to make a round push-button like the one shown here.

Round push-button

Solution

1. Create a circular gradient button on a new layer.

2. On another layer, create a circular gradient button that’s a bit smaller than the first. The direction of the gradient on this button should be the opposite to that of the first button — in this example, my big circle has a white-to-gray diagonal gradient and my small circle has a dark-to-light diagonal gradient. (Don’t be too concerned about lining the shapes up just yet.)

Creating two circular gradient buttons

3. Select the layer for the smaller circle from the Layers palette. Hold down Ctrl (Command on a Mac) and click on the layer thumbnail for the larger circle to create a selection based on the pixels of that layer, as I’ve done here. (We talked about this in Chapter 1, remember?)

Creating a selection

4. After you’ve created the selection, select Layer > Align Layers To Selection > Vertical Centers as shown here. This will vertically align the center of the small circle with the center of the larger one.

5. Finally, select Layer > Align Layers To Selection > Horizontal Centers, and just as you suspected, the centers of both circles will align horizontally.

Aligning vertical centers

Your push-button is complete!

Making a Metallic Button with a Matte Finish

More buttons that use gradients! Just as well we brushed up on our gradient button-making skills in “Making a Gradient Button”. We’re going to make matte-finish metallic buttons like the ones shown here.

Matte-finish metallic buttons

Solution

Rectangular, Matte-finish, Metallic Button

1. First, create a simple raster gradient button. I’m going to use two different shades of gray for mine.

Creating a grayscale gradient button

2. Lock the layer by clicking on the Lock Transparent Pixels icon at the top of the Layers palette. Select a light gray (I’ve used #ebeef0) and use the Pencil Tool (B) to draw left-hand and top borders on the rectangle button layer.

3. Select a dark gray (I’ve used #515a60) and draw bottom and right-hand borders onto the button layer, as shown in the example below. Remember to keep your lines straight by holding down Shift as you’re drawing them.

Drawing borders

4. Sure, we could use the button as is, but I’d like to do a few more things to it. First, we’re going to apply a noise filter to our button. Before we do this, make sure that you’re happy with the size, shape, and color of the button, as it’s hard to make changes to these properties after the filter has been applied. To add the matte finish, select Filter > Noise > Add Noise. This will give the button a grainy look and display the Add Noise dialog box. Be sure to check the Monochromatic checkbox, and adjust the amount of noise that you want to introduce. I’ve set mine to 2%.

Adding noise

5. If you feel that the grainy effect is too pronounced, select Edit > Fade Add Noise to drop it back a bit. Change the opacity of the fade (in the example below, I set mine to 50%) and click OK.

Fading the noise effect

Use Fade Promptly!
To use the Fade command on a filter, you’ll need to do so immediately after the filter has been applied, otherwise it won’t be available.

6. Let’s look at our button now. It’s certainly something we could use, but while we’re on a roll, let’s jazz it up a bit more with some lighting effects.

Rectangular matte metallic button

Select Filter > Render > Lighting Effects to bring up the Lighting Effects dialog box, shown below. Select Spotlight from the Light type drop-down menu.

Changing the direction of the spotlight

7. In the preview graphic, you’ll see an ellipse with a line through it — this line indicates the direction of the light. Click on the direction handle at the end of the line and drag it to the upper left-hand corner of
the preview window. You can then click and drag the handles on the ellipse outwards to increase the “spotlight” area, as shown here.

Applying the lighting effect

8. Finally, drag the Gloss property slider towards its Matte side (shown at the bottom of the previous page). When you’re satisfied with your button preview, click OK. Now we’re happy! Our finished button is shown below.

Our pride and joy

Rounded, Matte-finish Metallic Button

Creating a rounded matte-finish button is pretty much the same as creating a rectangular one. The main difference is that we’re going to use a stroke layer effect to add the borders, since it’s going to be difficult for us to draw the borders accurately by hand.

1. Create a rounded gradient button. I used the same shades of gray I used for the rectangular button in the previous solution.

Rounded gradient button

2. Now, instead of drawing a border as we did for the rectangular button, open the Layer Style dialog box for Stroke and give your border the settings shown here:

• Size: 1px
• Position: Inside
• Opacity: 75%

Stroke layer style settings

3. Change the Fill Type to Gradient. Click on the Gradient swatch and set the gradient colors to white (#ffffff) and a darker gray (#384046). As the opacity of the stroke is lowered, you’ll want more contrast between the light and dark colors. (If you’re wondering why you need to lower the opacity, it’s so that the noise and lighting effects will show through.)

4. Adjust the Angle so that most of the gradient stroke is at a slight angle in relation to the button.

5. Click OK to apply the stroke effect. The example below shows the result of our stroke.

Applying the stroke effect to the button

6. Now, add noise and apply a lighting effect (steps 4-8 in the Rectangular, Matte-finish Metallic Button solution), and your rounded button is complete!

Completed rounded matte-finish metallic button

Making a Shiny Metallic Button

Here, I’m going to show you how to create shiny, metallic buttons like the ones shown below. I’ll also show you how you can vary their appearance using different settings.

Shiny metallic buttons

Solution

1. Create a raster or vector button. I’ve created both a rounded and rectangular button in this example. The color of the button is unimportant, as it won’t affect the final result.

Basic buttons

2. The fun begins! Open the Layer Style dialog box by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Outer Glow from the menu that appears. In the dialog box, change the Blend Mode to Normal, and click on the color swatch (light yellow by default) and change it to gray, as shown here.

Applying outer glow

3. Now, select Stroke from the styles list in the dialog box to add a
stroke layer effect. I used a dark gray, 1px stroke, as shown here.

4. We’re ready to add the gradient overlay (there go those gradients
again!). Select Gradient Overlay from the Styles list in the dialog box, and double-click on the gradient color swatch to open the Gradient Editor dialog box.

Applying a stroke to the button

Set the colors of the gradient as I’ve done below. Add more color patches to the gradient bar by clicking anywhere along the bottom of it. Edit the color of a patch by double-clicking on it to bring up the Color Picker. You can also click and slide color patches to adjust the appearance of your gradient.

Adding the gradient overlay

5. Click OK to apply all the layer styles. Your shiny, metallic button is complete! Turn off the Stroke style for a more subtle effect (uncheck its checkbox to do so) — I did this for the left button in the examples shown here.

Completed shiny, metallic buttons

Variations

You can vary the appearance of your shiny button by playing with the gradient editor settings. The examples below show how the look of our shiny button changed when different gradient configurations were applied.

Applying different gradient configurations to buttons (Variation 1)

Applying different gradient configurations to buttons (Variation 2)

Making an Aqua Button

In this solution, I’ll show you how to make the brightly colored, glassy buttons that originated from Apple’s Aqua interface many years ago, and since then have come to be affectionately known as “aqua buttons.”

Examples of aqua buttons

As we’re talking about buttons in this chapter, I’ll show you how to create the button effect here, but if you’ve taken a particular liking to the brushed metal background I’ve used in this chapter, don’t worry?we’ll learn how to create that in the next chapter!

Solution

1. Start with a rounded vector button. We’re going to be adding a gradient overlay to it, so its color’s unimportant — use any color you like! The first step is to apply a gradient overlay to our button. Open the Layer style dialog box by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Gradient Overlay from the menu that appears.

Applying a gradient overlay to the button

2. In the dialog box, set the angle to 90° (shown above) and click on the Gradient patch to display another dialog box for the Gradient Editor, shown below.

Changing the gradient settings

3. Let’s change our gradient settings using the Gradient Editor. Double-click on each of the tiny color patches below the gradient bar to change its color. Create an aqua-to-blue gradient by setting the color of the patch on the left to aqua (#3cc9e2), and the color of the patch on the right to blue (#1160c2). Set the Location of the aqua patch to 25%, and click OK to apply the gradient.

4. Back in the Layer Style dialog box, click on Inner Glow. Set the Blend Mode to Normal, the Opacity to 50%, and the Size to about 10px, depending on the size of your button. Click on the color patch and change the color to a dark blue, as shown in the example below. I’ve used #003298.

Applying an Inner Glow layer style

5. Next, we’ll apply a slight glowing effect. Click on Outer Glow. Change the Blend Mode to Normal, the Opacity to 50%, the Spread to 4%, and the Size to 5px (you might need to tweak these settings to suit the size of your button). Change the color patch to a bright aqua color, as shown below — I’ve used #00bae8.

Applying the Outer Glow layer style

6. Click OK to apply all the styles.

7. To create the button highlight, duplicate the button layer by pressing Ctrl-J in the Layers palette (Command-J on a Mac). Turn off the Outer Glow and Inner Glow styles for this layer by clicking on their corresponding eye icons, as shown here.

Turning off the layer styles of the highlight

8. Double-click on the Gradient Overlay style name in the Layers palette. The Layer Style dialog box will appear, with Gradient Overlay selected. Click on the Gradient patch to bring up the Gradient Editor.

Editing the gradient

9. Double-click on the color patches underneath the gradient bar in the Gradient Editor and set them both to white.

10. Click on the patch above and on the left-hand side of the gradient bar — this is the left opacity stop. Set its Opacity field to 0%, as shown below.

Step 10: Creating a white-to-transparent gradient

11. Click OK to exit the Gradient Editor, and again to apply the new style.

12. In the Layers palette, change the fill for the shape to 0%. This will allow the button on the bottom layer to show through, as shown at right.

Step 12: Changing the fill of the highlight layer

13. With the highlight layer selected, open Edit > Free Transform or press Ctrl-T (Command-T on a Mac). A bounding box will appear around the highlight. Click on the bottom edge of the bounding box, and drag it upwards to squash the highlight a little bit.

14. Next, click on the right- and left-hand sides of the bounding box, and drag the edges of the highlight until they are just inside the button layer. Your highlight layer should look something like the one shown in the image below. Apply the transformation by double-clicking inside the box, or pressing Enter (Return on a Mac.)

Step 14: Transforming the highlight layer

15. Switch to the Direct Selection Tool (A). Click and drag the bottom edge of the highlight path upwards to flatten it, as shown below. Use Ctrl-+ (Command-+ on a Mac) to zoom in if you need to.

Changing the shape of the highlight

16. We’re finally ready to add the text! Create a text layer in between the highlight and button layer and type in your text. I’ve used a dark blue color for mine. I’ve also added a subtle drop-shadow style to my text using the settings shown in the example below.

Applying a drop shadow to text

17. At this point, we’ve got a snazzy aqua button that will work well on most web sites, but since we’ve made a habit of taking things those few steps further, why stop now? Let’s make our button look like it’s been embedded into the page. Duplicate the button layer and drag it to the top, above the other layers. Let’s call this top layer emboss; your Layers palette should now look like the image below.

Duplicating the button layer

18. Hide all the layer styles on our emboss layer by clicking their respective eye icons in the Layers palette. Open the Layer Style dialog box by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Bevel and Emboss… from the menu that appears. Select Pillow Emboss from the Style drop-down menu and change the technique to Chisel Hard. Set the Size to 2px and the Angle to 90°.

Applying the Bevel and Emboss style

19. Towards the bottom of the dialog box you’ll see opacity fields for Highlight Mode and Shadow Mode. Set these both to 93%.

20. Finally, apply a stroke to the edge of the button. You should be familiar with this by now! Select Stroke from the Layer Style dialog box and give your button a 1px black stroke with 60% opacity, as shown in the dialog below.

Adding a Stroke layer effect

21. Click OK to apply the layer styles.

22. Let’s change the Fill of the emboss layer to 0%, as shown at left, so that the button layer beneath it can show through.

Changing the fill of the emboss layer

Our embedded aqua button is complete! The image below shows our normal and embedded aqua buttons.

Completed aqua buttons

Discussion

Since we created this aqua button using vector shapes and layer styles, we have a scalable button that’s easy to edit. If we want to change its colors, all we have to do is change the colors of the gradients and effects in our layer styles. If we want our button to be slightly longer, we can use the Direct Selection Tool (A) to modify the vector path.

This solution has demonstrated an important concept about layers: even when the fill of a layer is set to 0%, the layer styles still show up! You may find this useful when you’re creating your own effects.

Another cool thing about this technique is the fact that once you’ve created your first aqua button, it’s very easy to create other buttons — you just have to copy the layer effects. I’ll quickly show you how you can make a rectangular aqua button in a few simple steps.

1. In the Layers palette, create the layers you’ll need for the rectangular button: the base button layer, the highlight layer, and, if you’re planning on using the embedding effect, an emboss layer, as shown below.

Copying styles to another layer

2. To copy the layer effects from the original aqua button to the rectangular button, hold down Alt (Option on a Mac) and drag the layer style icon from the original button layer over to its corresponding rectangular button layer, as shown in the image above.

3. Change the fill of the highlight layer to 0%.

4. Add the button text and repeat step 2 to copy the drop shadow style we used for the original text.

Button layer with styles applied

That’s it! Your rectangular aqua button is ready to be used, and should look like the one below.

Highlight layer with styles applied

The final rectangular button, and the rounded button on which it was based

Making a Transparent Aqua Button

We can also make our aqua buttons see-through, like the one shown here. In this solution we’re going to begin with a basic aqua button. If you don’t already have one (and everyone should!), you can make one by following steps 1-16 of the “Making an Aqua Button” solution.

Transparent aqua button

Solution

1. Place your basic aqua button on top of a faint, patterned background, as shown here.

Basic aqua button on top of faint,. striped background

2. Double-click on the f icon for the layer — this will bring up the Layer Style dialog box. Select the Gradient Overlay style and click on the Gradient swatch to bring up the Gradient Editor.

3. Click once above the gradient bar, in the position shown in this image, to create a new opacity stop. Change its opacity to 50%.

Adding new opacity stop

4. Click OK to exit the Gradient Editor, and OK again in the Layer Style dialog box to apply the style.

5. Set the fill of the button layer to 0%, as shown at left. The
background will show through. That’s looking pretty good! But, as always, there are a couple of things we can do to make it look even more polished.

Changing the fill of the button layer

6. Double-click the f icon to open the Layer Style dialog box, and select the Drop Shadow style. Choose a bright aqua color for the shadow (#90c9e7) and increase the Distance and Size slightly. Change the Opacity to 40%, as illustrated here.

Adding a drop shadow

7. Next, select the Stroke style. Add a dark blue (#0d487b) 1px stroke, with about 75% opacity, as shown below.

Adding a stroke

8. Finally, select the Inner Shadow style. Change the shadow color to a blue that’s slightly darker than the one we used in the original gradient button. Lower the Opacity to 50%, and change the Distance to about 10px (or whatever suits the size of your button), as shown below.

Adding an inner shadow

9. Click OK to apply these new styles. And — as you can see below — we’ve got our final transparent aqua button! Swish, very swish!

See-through aqua button

Making a Plastic Button

In this solution, we’ll be using Photoshop magic to turn our friend, the basic gradient button, into a plastic button like the one shown here.

Plastic button

Solution

1. Start with a rounded rectangle gradient button that has a radius of 5px. You can change the radius in the Rounded Rectangle options bar. Use the color stops shown here in your gradient overlay layer style. If you’re unsure of how to do this, look at the solution for “Making a Gradient Button.” I’ve made my button green, but you can use different colors for yours if you like.

Just choose a darker shade of your color for the color patch on the far right, a very light shade for the color patch on the far left, and a bright shade for the patch in between, as shown below.

Green rounded rectangle gradient button

2. Add a dark green, 1px stroke layer style to your button, as shown below.

Adding a stroke to the button

3. Add an outer glow using a bright version of the button color, as shown below.

Adding an outer glow

4. Select the button layer in the Layers palette and duplicate it using Control-J (Command-J on a Mac). Right-click (hold Control and click) on the new layer and select Clear Layer Style from the menu that appears, as shown at right.

Clearing the layer style

5. Change the Opacity of this layer to 50%, and double-click on its color patch to open the Color Picker. Set the color of the shape to white, as shown below.

Changing the color of the shape layer

6. Now, click on the vector shape for the same layer in the Layers palette. Using the Direct Selection Tool (A), click on the bottom line of the rounded rectangle and drag it up a little bit, as shown here. (You might need to zoom in for this.)

Editing the vector shape

7. Still using the Direct Selection Tool (A), click on the bottom-left anchor point so that you can see the handlebars of the point (zoom in if you need to). Click on the bottom handlebar, hold down Shift, and drag the handle up to curve the corner.

Curving the corner

8. Repeat step 7 with the bottom-right point. The sides of your shape should now look like those shown in the image below.

Shape after modifications

9. With the Direct Selection Tool (A), click and drag the mouse to make a selection that captures all of the bottom points, as shown in this image.

Selecting multiple points for editing

10. Hold down Shift and drag the selected points up to make a thin strip, as shown at right — this is our highlight. Fine-tune the movement using the up and down arrow keys if you need to.

Making the highlight strip

11. Select the highlight layer in the Layers palette and duplicate it using Ctrl-J (Command-J). Select Edit > Transform > Flip Vertical to flip the duplicated layer.

12. Use the Move Tool (V) to move the flipped highlight to the bottom of the rectangular button, as shown here.

Adding bottom highlight

13. We’re almost there! Now duplicate the button shape layer and name it middle highlight. Change the color of the shape to white.

14. Select the bottom anchor points of the middle highlight shape and move them up to the center of the original button shape. Change the opacity of this layer to 25%, as illustrated in this image.

Modifying the third highlight shape

15. Add a text layer immediately on top of the original button shape (beneath the three highlight layers) and type your text. If you like, add a drop shadow for an added three-dimensional effect, as I’ve done for the completed button here.

The completed plastic button

Making a Glass Button

In this solution, we’re going to create an eye-popping glass button that’s particularly effective when it’s overlaid on photographs and non-solid backgrounds.

Example of glassy button

Solution

1. Start with a vector button of any shape in a color that blends in with your background. Here, I’m using a pink that I color-picked from the sunset image onto which I’m going to place my button. Set the fill for the button layer to 0%.

Open the Layer Style dialog box by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Bevel and Emboss… from the menu that appears. Apply the settings used here, which are illustrated in the dialog below:

• Style: Inner Bevel
• Technique: Chisel Hard
• Depth: 800% or larger (depending on the size of your button)
• Direction: Up
• Size: 13px (You may need to adjust this later.)
• Soften: 7px
• Angle: -65°
• Altitude: 65°

Bevel and Emboss settings for the glass button

• Gloss Contour: Rolling slope-descending (Set this by clicking on the dropdown arrow next to the contour shape and choosing the Rolling slope descending option, as depicted below.)
• Highlight Mode: White, 75%
• Shadow Mode: Dark gray, 75%

Setting Gloss Contour

Your button should be looking like the one shown below.

After applying a Bevel and Emboss effect

2. In the Layer Style dialog box, click on the Contour style under Bevel and Emboss to select it. Click on the thumbnail image of the contour to bring up the Contour editor, shown here.

Changing the contour curve

3. Select and move the bottom-left point of the contour until it’s positioned just above the first horizontal grid marker. Then, click on the contour line to add another point and drag it to form a curve.

The image below shows our button after the contour effect has been applied.

After applying the Contour effect

4. Not bad, huh? Now, select the Satin layer style and apply the settings shown here:

• Blend Mode: Overlay; black
• Opacity: 30-40%
• Angle: 126°
• Distance: 4px (You may need to adjust this later.)
• Size: 10px (You may need to adjust this later.)
• Contour: Cone-inverted

Applying the Satin layer style

5. Select the Drop Shadow layer style. Change the Distance to 4px, the Size to 10px, and the Opacity to 50%, as shown in the example below.

Applying a drop shadow

At this stage, our button’s looking quite glassy, as can be seen below.

Satin and Drop Shadow layer styles applied

6. All we need to do now is add a simple text layer with a slight drop-shadow! Your completed button should look like the image below.

Completed glassy button

You can easily copy this layer style to other shape layers. When you do, remember to set the new layer fill to 0%. Experiment with the layer effects to change the look of your button. The images below show variations of my glass button.

Glassy button style applied to different shapes

Bevel and emboss shadow set to 20% opacity

Making a Pearl Button

Here’s a solution that uses real magic … well, almost!

We’re going to take the glassy button we created in “Making a Glass Button” and turn it into a pearl button!

Example of a pearl button

Solution

1. Start with the glassy button you created in the solution titled “Making a Glass Button.” Change the fill of the button layer to 100%, as shown at right, and use a very light, “pearly” color for the shape. I’ve used #fae1f9 for my pink, pearly button.

Changing the fill color

2. Enhance the three-dimensional effect of the button by adding a slight inner glow. Double-click on the f icon for the layer to bring up the Layer Style dialog box, shown below. Select Inner Glow and change the Blend Mode to Normal and the Opacity to 10%. Increase the Size if you need to.

Adding an Inner Glow effect

3. We’ll also make the drop shadow a bit more subtle. Select Drop Shadow and decrease the shadow size to 3px or 4px.

4. Finally, add your text layer. Here we see our final button — all done!

Completed pearl button

Making Angled Tab Buttons

In this solution, I’ll show you how to use vector graphic tools to create the angled tab buttons illustrated below.

Examples of angled tab buttons

Solution

Angled Tab

1. Start with a rectangular vector shape in a color of your choice. I’ve used a light blue in the image below.

Starting with a rectangular button

2. Using the Direct Selection Tool (A), select the top left-hand anchor point of the rectangle. Hold down the Shift key and move the point to the right by pressing the right arrow once or twice. Your image should look something like the one below.

Moving the anchor point

Release the Shift key and use the arrow keys to fine-tune the point. We’ll go “old school” here and count the number of times we press the arrow key so that we know how far to move the point on the right-hand side when we get to it.

3. Repeat step 2 for the top, right-hand anchor point. That’s it — believe it or not, our angled tab button is complete! If you don’t believe me, look at the finished result below.

Completed angle button

Cut-corner Tab

1. This time, we’ll make a tab button with a cut corner. Again, start with a rectangular vector shape. Select the Add Anchor Point Tool — you’ll find this in the flyout menu of the Pen Tool (P), shown here.

Selecting the Add Anchor Point Tool

2. Add an anchor point to the side of the button as I’ve done in the example below (you might need to zoom in).

Adding a point to the button

3. Choose the Convert Point Tool, which is also in the flyout menu of the Pen Tool (P).

Selecting the Convert Point Tool

4. Click once on the new anchor point to get rid of the direction handlebars, as shown below.

Converting the anchor point

5. Using the Direct Selection Tool (A), click on the top corner anchor point and use the arrow keys to move the anchor point across to form a “cut corner”, as illustrated below.

Moving the anchor point

6. If you like, repeat the effect on the other side; otherwise, take a moment to marvel at our cut-corner tab, shown here.

Completed cut-corner tab

Making a Rounded Tab Button

The basic rounded rectangle button is very versatile. Here, we’re going to convert it into the popular rounded tab button like the one shown below.

Rounded tab button

Solution

1. Start with a rounded rectangle vector shape, as shown below.

Rounded rectangle shape

2. Select the Convert Point Tool, which is in the flyout menu for the Pen Tool (P). Click once on each of the two anchor points, as shown below, to convert them from curve points to angle points.

Converting the anchor points

3. Use the Direct Selection Tool (A) to make a selection around the two bottom-most anchor points on the shape. To indicate that they have been selected, the points will turn from white squares to filled squares, as shown here.

Selecting the bottom two anchor points

4. Delete the anchor points by pressing Backspace or Delete on the keyboard. Your image should now resemble the one shown here.

Image: roundedtab-deletepts.psd
Caption: Deleting the two points

5. With the Pen Tool (P), click first on the bottom anchor point on the left-hand side, and then on the point on the right-hand side, as shown below.

Closing the shape

This will draw a line connecting the two points and complete the shape, which is shown below.

Completed rounded tab button

Making a File Folder Tab Button

In this solution, you’ll learn how to create a nice file folder tab, shaped much like those real folder tabs used in filing cabinets. Remember those old-fashioned things?

Example of a file folder tab button

Solution

1. Using the Pen Tool (P), click once to add an anchor point to your Photoshop document (step 1 in the image below.)

2. Position the cursor over the anchor point. Hold down Shift and Alt (Shift and Option on a Mac), click on the point, and drag the mouse towards the right to create a single horizontal handlebar (step 2 below).

3. Position the cursor as shown in step 3 at right. Click and drag the mouse towards the right to add another anchor point. The line connecting the two points should display a nice curve, thanks to the positions of our control handles.

Step-by-step file folder tab

4. Holding down Shift, click and drag the mouse to the right of the last point we made in order to create another anchor point with horizontal control handles.

Press Shift to ensure that the two points are aligned horizontally (step 4 above).

5. Move the cursor a bit lower and to the right so that it’s aligned horizontally with our first anchor point (step 5). Click to add another anchor point and drag the handlebars out to the right.

6. Bring the cursor back over the last point we made. Hold down Alt (Option) and click to remove the right handlebar (step 6).

7. Bring the cursor back to our very first point and click on it to complete the shape (see step 7 above and the graphic below).

Completed file tab button

Don’t worry if your alignment’s not perfect — you can use the Direct Selection
Tool (A) to select individual points, and the arrow keys to fine-tune them.

Summary

In this chapter, I showed you how to make all sorts of buttons! Beyond the obvious navigation buttons, the techniques you’ve learned here will allow you to make nifty bullet graphics and fancy title bars. For example, you could apply the plastic button effect to a longer rectangle that forms part of your interface, or use it as a bar for text links. You could also use the shiny metal button effect to create shiny metal bullets; you’ve got a gazillion options!

The experience you’ve gained with layer styles and vector shapes in this chapter will be invaluable to you later, when you’re creating full web site comps. There’s a lot more fun to be had in the next chapter — let’s bring on those backgrounds!

Unfortunately, that’s it for the sample chapters from The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques. Don’t forget to download your copy of this article — plus the book’s introductory chapter — in PDF format to read offline, and be sure to take a look at what else you’ll learn in this book. I hope you enjoyed this tour of Photoshop techniques — I’m sure they’ll prove invaluable in your quest for Web domination!