How to use Web Buttons and Graphics in Adobe Photoshop

Adobe Photoshop is considered the essential software for graphic design. It is sold on its own, or as part of Adobe’s Creative Suite, which also includes Illustrator, InDesign, Flash, Dreamweaver, Acrobat Pro and several other tools. Photoshop’s primary functions include photo editing, website design, and the creation of elements for any type of project. It is also commonly used to create layouts for design, such as posters and business cards, although Illustrator or InDesign are often better for those tasks.

Difficulty: Moderately Easy

Instructions

Things You'll Need:

• Adobe Photoshop Software 7.0

1. Create the button shape. Select a circular area with the selection tool. (Hold down the shift key, this will make the selection stay circular, rather than being elliptical.) Fill the area with the paint bucket. This is the curved end of your web button.

2. Select a column for extension. Zoom in using Ctrl + and select a one-pixel wide area in the center of the circle. You can use the normal Selection Tool to do this, or you can hold down on the Selection Tool, and choose the Single Column Marquee Tool.

3. Extend the button shape. Select the web button and press Ctrl+T to "Free Transform" the selection. Extend the selection to the left as far as possible.

4. Color the web buttons. Press Ctrl+U to bring up the Hue/Saturation properties of the layer. Click "Colorize". Drag the sliders around to pick a color. Choose your color.

5. Give the buttons "Effects." To layer buttons in Photoshop 6.0 and 7.0 click on the layers list, double-click here to layer or right-click in Photoshop 5 and select "Effects". Also this is where you can give web buttons a Drop Shadow and/or a Bevel look.

Tips & Warnings

• AFTER CREATING BUTTONS, YOU HAVE THE OPTION TO ADD TEXTURE, COLOR, GRADIENTS (LIGHTING), LAYERS AND LETTERING, SEE STEPS BELOW:
• ADDING TEXTURE TO BUTTONS
• Click Filter, Texture, Texturizer, for example choose Sandstone.
• ADDING COLOR VARIATIONS
• Select the area of the button, by holding Ctrl and clicking on the button's layer in the layers list. This keeps the clouds inside that area.) Click Image > Adjustments > Brightness/Contrast. Set the contrast to maximum. (This turns the random grey clouds into equally random patches of black and white.)
• ADDING LAYERS
• Change the new layer from Normal to Overlay. (This changes the layer from solid colour to a kind of illumination, as if it were cellophane over the web button layer, instead of coloured paper.)
• ADDING GRADIENT/LIGHT
• Make another new layer.Choose the Gradient tool. Click on the visual representation of the gradient (Adobe Photoshop 6.0 and 7). In Adobe Photoshop 5.0, click the Options tab first.
• On the visual representation of the gradient, put in several tabs. These tabs should be in a black, white, black, white pattern.
• Change the layer's Mode from Normal to Overlay. This should give the button some nice illumination.
• ADD TEXT TO BUTTON
• Using the Text tool, add some text to your button. Some useful tips for button text are:
• Make the button text all capitals.
• Increase the tracking (letter spacing). It makes the text more dramatic.
• Make the first letter of each word two points larger.
• Make the first letter of each word red (pale yellow for white text.)
• It's best to use Palatino Linotype font in place of Times New Roman.
• HOW TO EMBELLISH TEXT
• Double-click the text layer (Photoshop 6.0 and 7.0) or right-click it and select "Effects" (Photoshop 5). Give it a Bevel and a white Outer Glow. I've also put a black outline on the button layer, to make it stand out more, but that's optional.
• Note: you can only change the colour of individual letters of the button in Photoshop 6.0 and 7. In Photoshop 5, you'll have to right-click the layer in the Layers list, and render it, then lasso the letters you want to change, then Press Ctrl+U to colour-shift them. Most annoying. :)