How to make a perfect Web 2.0 close button using Photoshop CS4

Background

In this tutorial I will explain how to create a Web 2.0 style close button with a perfect cross on it. We shall be creating this button using Adobe Photoshop CS4. Before we get started, this is how the end product will look like:

Note, all the transient images of sample are displayed in 300% zoom mode.

Step 1

The first step in creating the button is to create the cross image. For this purpose we shall create a new 128 pixel by 128 pixel Photoshop document having a resolution of 72 pixels per inch. You would ask why did we create 128 pixel by 128 pixel document? The answer is twofold. First, 128 x 128 pixel image is a standard icon size in many application (so is 16 x 16, 24 x 24, 48 x 48, 80 x 80, 256 x 256) hence by choosing these dimensions you would get the icon in the standard size. Secondly, in Photoshop the grid size is 8 pixels side square. Hence if you are indulging in creating a high precision image using pens, it is easier to snap points to grid.

 

Step 2

A cross is really a plus sign rotated by an angle of 45 degrees. Hence we shall first create a plus sign. Rename the background layer as Vertical_Bar as this is the layer we shall be creating our vertical bar on. Select the pen tool and zoom the image to 300% for high precision path drawing. Now click the first pen path vertex one row down from top and at the end of sixth square from left. Click to create second vertex at the horizontal distance of 4 squares from the first vertex. Now click on third vertex vertically below the second one in the second last row. Lastly click on the first vertex to obtain a closed path in the shape of vertical bar.

As you can see the vertical path is symmetrically placed in the document. Now choose Layer->Vector Mask-> Current Path. This will create a vector path corresponding to the path we have drawn. Vector paths are important since in Photoshop all image manipulation by default are pixel based. If vector paths / masks are used then image can be enlarged, shrink, rotated without any loss of quality since in this case vector components of path are manipulated and no pixel interpolation / extrapolation is done. Now select a foreground color (I chose #e5dcdc) and selecting the layer choose Edit->Fill to fill the layer with foreground color. You will see since we have applied a vector mask, only the portion of image inside the closed path will be filled with the color leaving outside area transparent as before.

Create a new layer and name it Horizontal Path. Repeat the above creating a horizontal bar this time and proceed to create vector mask and fill the masked layer with the same color. Now you should obtain a plus sign.

Step 3

Click on Vertical_Bar layer and go to Paths tab. Click on the vertical path. This should draw a solid border around the vertical path. Go back and select Vertical_Bar layer mask. Now press Ctrl + T to enter the transformation mode. In the top transformation toolbar, enter 45 in the angle textbox to rotate the layer mask by 45 degrees. Now press enter key to exit the transformation mode. Repeat the same steps for Horizontal_Bar layer.

We are done with making a perfect cross icon and ready to proceed to create the button on which this icon will be overlaid. This cross can be reused in other UI elements as well so we will save this in cross.psd file for later reuse.

Step 4

To create a fancy Web 2.0 style background we shall reuse some Photoshop styles and gradients that can help us quickly set the effects we want. I recommend downloading these styles from http://myphotoshopbrushes.com/styles_and_gradients. I personally downloaded 42 Button Layer Styles and Ultimate Web 2.0 Styles from the parent link. Once you download the files, open the zip file and double click on .asl file. This will register the styles automatically with Photoshop.

Step 5

Now create a 144 pixel by 144 pixel image in Photoshop. Name the layer button. Click and hold mouse on rectangle tool in Photoshop toolbox. This will pop down all the shapes from the toolbox. Select rounded rectangle from the dropdown. Ensure that path option is selected on the top toolbox. This will ensure that any shape that is drawn is considered a closed path. Select the radius to be 10px.

Now draw a rounded rectangle having one row border outside the rectangle. Again choose Layer->Vector Mask-> Current Path to create a vector mask on the layer. Now select the selection tool and select any style from the styles palette with layer selected(I selected Photobucket Join style for background).

Step 6

Now goto cross.psd and press Ctrl + D to select the entire image. Next, choose Edit->Copy Merged to copy the merged layer. Go back to the button document now and press Ctrl + V to paste the cross on top of the button layer. Now select this new layer and name it cross. With cross layer selected, select any style from the style palette to fill the cross with desired gradient (I selected Flixster Search style). There you go, now you have a trendy and crispy Web 2.0 style cross button.