Graphics Zone - Buttons

CE CASH 3.0

XRATED BUCKS

Quick Guide to Designing Buttons in Photoshop

by BarryHilton, Adult NetSurprise

In this tutorial we'll be using Photoshop's built in functions to quickly design a rectangular button with rounded corners, top off with some Effects and you're done! Begin by opening up a new image...Click Here to view Screen Shot with Instructions.

We'll be using a black background, so fill the 'empty' layer with black and lable the layer... Click Here to view Screen Shot with Instructions.

We'll be using the Rounded Rectangle Tool to make the base for our button. Click Here to view Screen Shot with Instructions. Note: When you're designing your own buttons with either the Rectangle Tool or the Rounded Rectangle tool by clicking the down arrow next to the row of shape icons on the Options Bar Menu, you can input exact sizes and 'curves' for the corners.

Next, when you're happy with your button, Rasterize the layer... Click Here to view Screen Shot with Instructions. This makes it easier to work with, allowing us to change colors etc.

We're going to make a Green Enter Button, so click the Foreground color box and set up the Green color... Click Here to view Screen Shot with Instructions. Don't forget to Lock the Transparency of the Layer... this is because when you fill the 'button' with green it will keep the smooth anti-aliased edges, if you don't Lock the Transparency you'll get jaggie corners!

Now, click in the MIDDLE of your button to paint it green... Click Here to view Screen Shot with Instructions. NOTE: if you 'miss' the button with your click nothing will happen as you're trying to fill an area that is Locked to Transparent.

Next, lable your button layer... Click Here to view Screen Shot with Instructions.

Now we'll start adding our Effect to the button... first setting up the Highlight color... Click Here to view Screen Shot with Instructions. Note: By changing the Highligh and Shadow colors from White and Black you get a softer, less harsh effect.

Set up the Shadow color... Click Here to view Screen Shot with Instructions.

In our example we want a sharper beveled edge, so adjust the Bevel %, Technique, Size and Soften...Click Here to view Screen Shot with Instructions. When you're working on your own buttons experiment with different values. With a little trial and error you can produce some cool results!

Next, add Guidelines in the center of your button, so we can position our text exactly in the middle... Click Here to view Screen Shot with Instructions.

In our example, we're going to use a Bold Arial font, 30 pixels high... Set up the font and type your text! Click Here to view Screen Shot with Instructions. It doesn't have to be in the middle as we can reposition the text in the next step. NOTE: If you see pt or mm and not px for the height value of your text, you'll need to go to the Edit drop down menu at the top of the screen, select Properties, then Units and Rulers. Change the Type setting to Pixels.

Now, drag your text into the center of your button... Click Here to view Screen Shot with Instructions.

To save time we're going to copy our Button's Effects and paste them on to our Text toas a base, altering them in the next step... Click Here to view Screen Shot with Instructions.

Paste the Effect to the Text layer, then bring up the Effects menu changing the Inner Bevel to Outer Bevel (which gives the text a raised up appearance)... Click Here to view Screen Shot with Instructions.

And you're done! Click Here to view Example.