Darren Pangan

How to Make Web 2.0 Buttons in Adobe Photoshop

I’m sure you already have heard of the term “Web 2.0″ used as a descriptive term for designs. I must admit that at this moment, I still can’t describe the details of a Web 2.0 design. But I have already offered Web 2.0 logos and templates to my past clients. So how do I make my design Web 2.0-ish? I use the following as often as possible:

• Gradients
• Reflections
• Gloss
• Bright Colors

I’m sure these are not the only elements of a web 2.0 design as I have seen comprehensive articles and publications about Web 2.0 design. In this tutorial, we’ll make a simple button that has those elements. You can apply the techniques you will learn here on other web design elements as well like logos and icons, not just buttons.

We are going to use Photoshop (I’m still using Photoshop 7 because I haven’t got myself a copy of CS3 yet, so please bear with me). I’ve heard of Web 2.0 designer software but I’m sure Photoshop is still the current standard for any design. So if you’re serious about your designs, you should get Photoshop.

So let’s begin!

Open up Photoshop and create a new project. Let’s make our canvas size 400 pixels by 200 pixels. You’re free to make the canvas size bigger if that’s what you prefer. The screen that you will see will be similar to the one below.

Now, select the Rounded Rectangle Tool from the tools at the left side of the screen. Refer to the screenshot. If you can’t find this tool that’s probably because the Rectangle Tool is selected by default. Click the rectangle tool, hold down the mouse and wait for a pop-up menu to appear. From there you can select the Rounded Rectangle Tool. Once you have selected this tool, take a look at the options above your screen and look for “Radius”. Adjust this radius to your desired value. For now let’s use 20.

Create a new layer by using the shortcut Shift + Control + N. You can also go to Layer > New > Layer. Then, click and drag your mouse on the canvas to form a rounded rectangle similar to the one in the figure on the right side.

Next, let’s add a text above the rounded rectangle shape. Simply click the “Horizontal Type Tool”. The icon is shown in the figure on the left side. Once you click this icon, you’ll notice that the menu above will chnage accordingly. Select the type of font, style, and size. In this tutorial, let’s use Arial, bold, and 60pt in size. Also, make sure that the font color is white so you can see it in a darker background.

Now click the canvas once. Once you have done that, you should be able to type a text. In the sample you can see below, I typed “join Now”. Let’s assume this will be a button that will redirect the user to the sign-up page.

Now it’s time to add some effect to make the button stand out. We will add the following styles:

• Gradient Overlay
• Inner Shadow
• Drop Shadow
• Inner Glow

In the layers list at the right side of your screen (shown in the image at the right). Double click the layer that has the black rounded rectangle shape. Make sure you don’t double click the name because instead of the Layer style properties window to pop-up, you will be asked to rename the layer. Once you have double-clicked the layer, you will see the Layer Style window shown below.

From this window, check and select “Drop Shadow” and apply the following properties: Opacity: 30, Angle: 90, Distance: 2, Size: 2. Don’t change all the other values except from the ones I mentioned. Refer to the screenshot below.

Now, go back to the Layer Styles window. Click and select “Gradient Overlay”. Click the gradient box to open up Gradient Editor (see figure). To change the colors of the gradient, click the “stops” (arrow-like symbol) located below the gradient preview. There are also stops above the gradient box but we only need to modify the ones below. For the one in the left corner, pick a lighter shade of green while darker for the one in the right corner. The result should be similar to the figure below. Click “OK” once you’re done and you should be back to the Layer Styles window.

For added effects, let’s add some inner shadow. This is a bit similar to the drop shadow but the effect will be different. Just set it so it has an opacity of 30. Other fields must be kept to the default value. Also apply some inner glow (another layer style). The values you need to change are: Opacity - 30, choke - 10, size 10. We are now done styling the layer so click “OK” and this should exit the layer styles window. The result of all the layer styles we added will be a button that looks like the one shown below.

But we are not yet done. Let’s add some more light effects to make the button look glossier. Create a new layer on top of the text layer. Select the rounded rectangle tool again and make sure that the foreground color is white. Drag a white rectangular box on top of the button. Make sure it fits the way shown in the image below.

Now, select the rectangular marquee tool. This is the first tool you will find in the tools window. In the options above, change the “feather” value to “20 px”. Drag a marque on the canvas. Refer to the image below to see how it will be positioned. The rounded corners of the marque is the result of the “20 px” feather.

After you have created a marquee, press Delete. Change the layer’s opacity (at the layers list) to 60 percent. The result will look like the image below.

You can experiment other color shades by changing the Gradient Overlay in the Layers Style window. You can also try adding a stroke to make it stand out more.

Posted on: May 15, 2008     Filed under: Photoshop