Photoshop Layers

Photoshop can be used for more than just your photographs! It’s one of the most used tools by web designers like me. Today I wanted to share a couple of PSD’s web 2.0 buttons I created in Photoshop.

Checkout Web 2.0 Button PSD

Purchase Web 2.0 Button PSD

The PSDs have been organized into folders and each have two buttons; one to show up as normal and one as a rollover image (when you hover). When you put both images into one image they call it a sprite. With this setup you can just change the background position in the CSS rather than loading a new and separate image.

How it’s done

The rounded corners are created using the shape tool. Your tools may show a circle, square or other shape but by clicking and holding for a few seconds the option of a square with round corners will be available. You can set the radius of the corners on the square, I’ve set mine to be 30 px. At this size that radius makes this nice button shape where there isn’t really a left or right side- just curves.

Once I got the shape I wanted with the color I wanted I added a few effects. You can also change the color after the fact by clicking the colored square in the layers pallet. The two effects I added were gradient overlays and a stroke.

Adding Gradient Overlay

Gradient Overlay

It’s pretty simple to start adding effects. You just select the layer and then select an effect from the effect menu at the bottom of the layers pallet. In this case we add the gradient overlay and then we’re presented with options for this effect. I changed the opacity to be 66% overall. If you click the gradient (black to white scale) you’ll then be presented with options to change the color and opacities. The top markers are to adjust opacity and the bottom markers are to adjust color. I changed the black color to be white and the opacity to be 0 or the left side. This makes it so the white color fades from 100% to 0%.

Adding the Stroke

Adding the stroke is easy after adding a gradient overlay. Just add the effect as before and you’ll be presented again with options. In my case I changed the stroke size to be 1 px and I used #8d7d57 as the color. #8d7d57 probably doesn’t look like a color to you, but if you read the lesson on light and the human eye, and understand that the first 2 colors are a value for Red, the second two for Green, and the third two for Blue, then you’ll start to see colors in these values. This color scale goes from 0 to F where 0 is no light and F is full light, so FFFFFF is white and 000000 is black.

Once you’ve got the button shape and effects you just have to add some text and add a background color. These are as easy to add as adding a separate photoshop layer. With the paint bucket you can drop in a background color and the text tool makes it easy to add text. I like to drag a text box out using the text tool rather than just clicking to have text added. Either way the result looks the same!

Web 2.0 Checkout ButtonYou’ll notice that there are layers for each element. This will allow you to change the background, text, and color of the buttons to fit your needs! It’s this easy to edit compatibilities that make PSDs so wonderful! I hope you enjoy these Free Web 2.0 E-Commerce PSD Downloads!