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