Fast and Fun Buttons for Your Website

By Liz Ness · June 15th, 2011

· 8 Comments · Add to my favorites · Print

No matter what hat I’m wearing (photographer, mixed media artist, web designer), Photoshop Elements seems to be one of my favorite go to tools for creative projects. While it’s a great tool for developing beautiful photographs, it’s so much more than a photography tool. I’m always finding ways to use it for other projects. The built in tools, filters, and effects make it so easy to use when creating graphics. Which leads me to the topic of our post today: How to make website buttons.

The following steps describe how to make a fun website button quickly through the built in features provided by Photoshop Elements.

Step 1: Open a New Document

Select File>New>Blank Document and type in 600 px for the width, 300 px for the height, 300 for pixels/inch, and choose Transparent for the Background Contents.

Step 2: Draw the Button

Select the Rounded Rectangle tool (U), and set the radius to 50 px. Don’t worry about color for now, we’ll come back to that later.

Then, draw the button, leaving room along the edges for a drop shadow.

Step 3: Create Dimension and Adjust the Color.

Select Complex from the Effects panel drop-down (to see the Effects panel, choose Window>Effects). Then, select the Star Glow effect to turn your button blue and give it dimension.

Select Layer>New Adjustment Layer>Hue/Saturation and move the Hue and Saturation sliders to adjust the color of the button as desired.

Step 4: Add Text and Save

Select the Horizontal Type Tool (T) and set the font to Arial, the size to 18 pt, and the color as desired (for the example, I chose black). Position the cursor over the button and type.

TIP: Use the move tool (V) to position the text over the button.

Finally, save your button as a .PNG file so that the graphic’s background remains transparent. This makes the graphic usable with any website background color.

TIP: The above instructions yield a large graphic. Therefore, when using the button, reduce the size of the graphic to around 25%. For example, the code for the button (above) looks something like this: < img src=”http://location of image” width=”150″ height=”75″ >

8 Replies to Fast and Fun Buttons for Your Website:

Julie
June 15, 2011 at 5:37 pm

Thanks for that, LIz. I’m going to play around with this a bit but see how I can use it on my site.
- Liz
  June 19, 2011 at 6:56 pm
  
  Awesome Julie! =)
Bob
June 20, 2011 at 6:59 am

Thanks Julie,

I just designed an “ANY KEY” for applications that ask you to hit any key.
- Liz
  June 20, 2011 at 5:17 pm
  
  LOL! While I was writing this post, I kept thinking that I needed to create a panic button, heh-heh!
Mary
July 4, 2011 at 5:02 am

Great job, Liz. Your button are great!

Thanks!

Mary
- Liz
  July 6, 2011 at 2:55 pm
  
  Thanks Mary! =)
Gary
July 11, 2011 at 7:23 pm

Hi,

I just played with this and found it very interesting and fun. What size is the green area when you first drew the button?

Gary
- Liz
  July 24, 2011 at 5:27 pm
  
  Hi Gary!
  
  The green area is about 475 pixels (wide) by about 125 pixels (tall). When I drew it, I wanted to be sure to leave enough room for the drop shadow and sort of guessed (based upon past experience) about how big it should be.
  
  Hope that helps and wish you luck making web buttons!
  
  =) Liz