Web design basics: Adding button elements to a wireframe

This tutorial shows you how to create and add button elements to your wireframe design.

Using Photoshop CS2, I will demonstrate creating button elements for your wireframe design, and then ultimately adding them to your final website design as well.  We will be creating two png image files and saving them, then converting them to gif file types when done. [Note: I have zoomed in the active window for most of the screen shots for better viewing.] This tutorial is a continuation of the post "The basics: Design a website wireframe in Photoshop."

Create a blank canvas at 75px (width) x 25px (height) to start off the button design. Create a new layer and call it Background_01. Select the Rounded Rectangular tool, hold the SHIFT key, and draw a round sided square in the center. Any color is fine at the current stage, I am selecting a shade of gray.

Double-click on Background_01 from the layers pallet to open up the Blending Options, and then adjust the following styles: Drop Shadow
  • Opacity: 40%
  • Distance: 0px
  • Spread: 0%
  • Size: 6px
Gradient Overlay
  • Color stop: 0%, #cccccc
  • Color stop: 100%, #333333
Using the Rectangular Marquee, enclose the area as shown in Figure A; then, from the menu bar, click Select, Color Range, and click OK. Then click Select, Modify, Contract, and 1 pixel as shown in Figure B. Then click OK.

Figure A

Figure B

Create a new layer and name it Background_02. Fill in the highlighted area with any color. For this example, as you can see in Figure C, I'm using #000000 black.

Figure C

Double-click on Background_02 to launch the Blending options and tweak the following style. For the purposes of this tutorial, select these colors and styles:

Gradient overlay
  • Color stop: 0%, # cccc99
  • Color stop: 100%, # 666633
Figure D shows the finished button at 10% view. Save this as Button_02.psd.  Then save the button as a gif (Button_02.gif). The result is the button image shown in Figure E.

Figure D

Figure E

Now we will create an inverse of this button and it will become our mouse-over button.

With the Button_02.psd file open, double-click the Background_02 layer to open up the Blending options, and then select Gradient Overlay. Change the angle to -90° as shown in Figure G.

Figure F

Now click OK. The button will now look like an inverted image of the original, as you can see in Figure G.

Figure G

Save this new button as a gif by naming it Button_Over_02.gif.

We can use this button as is, add a text layer for each named button, or we can use cascading style sheet (CSS) code to add the text during implementation of the page.

Adding text

With the Button_02.psd image open, the first step is to add a horizontal text layer by selecting the T text tool then dragging a horizontal box within the dimensions of the image as shown in Figure H.

Figure H

Next we can add text, such as the word Home in this case as seen in Figure I. Since the length of the text can vary, you can adjust the width of the button to fit longer titles. We will save this file as Button_02_home.psd, then save it for the web as a gif image. Create another Home button using the Button_Over_02.psd image and save in the same manner as described above.

Figure I

For the sake of the wireframe we can place these manual text buttons in our mock-ups. Continuing with the Juniper Wood Company wireframe we discussed in the first piece of this series, we will create the remaining buttons for the mock-up. For all buttons both the Button_02.psd and Button_Over_02.psd are utilized and saved with the title for each named button. All buttons stay the same width for all named titles.

Continue with the above procedure for the additional text buttons Blog, Catalog, Featured, Gallery, and Videos. Since each title requires two images, the button and over button, you will end up with twelve separate gif image files.

Modify the width to fit longer titles

Extending the width of the button is quite simple. Open an original file, such as Button_02.psd, then modify the image size. In this case, you will extend the width to 125px. Open the Image Size dialog box by clicking through Image and Image Size from the menu bar, as shown in Figure J. Change the width setting to 125, being sure Constrain Proportions is unchecked, and then click OK. The modified width button is displayed in Figure K.

Figure J

Figure K

Placing the buttons on the wireframe

To the button images, simply add them to the existing navigation area within the wireframe image file, then place each button image into that layer as seen in the screen shot image in Figure L. Open each button image file, then Select, All, from the menu bar. Copy the image, make the wireframe template the active window, then select paste and use the move tool to position each button image into the desired area of the wireframe template.

Figure L

Wouldn't it be nice to just make a few button backgrounds and be done with it? This is why I like to create slices for background buttons and leverage the power of CSS to display the text. I will demonstrate slicing for backgrounds and CSS placement in a future post.

About Ryan Boudreaux

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks