Requirements:

• Adobe Photoshop

Step 1: Creating a new file

1) From the menu choose File> New

2) In the New File dialog box, set the image properties for the size of the button that you would like.

3) Recommended dimensions - These may be adjusted to your own personal preferences.

Width = 150 pixels
Height = 100 pixels
Resolution = 72

Step 2: Filling in a solid color background using the Paint Bucket Tool


This step demonstrates how to use the paint bucket tool in order to fill in background color of the canvas of the button.

1) Select the Paint Bucket Tool as pictured below.

2) Choose a color by clicking on the box and selecting one from the pallette.

3) Click anywhere on the work area and the paint bucket will fill the entire blank area with the selected color.

Step 3: Applying a gradient background

1) Select the Gradient Tool from the toolbar

* Note: The gradient tool is located under the "Paint Bucket Tool" button. Hold down the Left mouse button over the tool and the gradient tool should appear.

2) Position your cursor on your canvas and drag the line to a desired length by holding down the Left mouse button. Let go of your mouse button in order for the gradient to be applied to your background.

3) The gradient may be modified in various ways using the gradient tool bar which provides multiple options as well as color schemes.

Step 4: Applying a drop shadow

1) Select the Rectangle tool from the shapes menu on the toolbar. Other shapes are available as well, and may be used. For this example we will use the Rectangle.

2) Draw a rectangle onto your workspace:

3) Select the Drop Shadow menu item (Layer > Layer Style > Drop Shadow..)

4) The Layer Style dialog box will pop up, allowing you to adjust the properties of your drop shadow effect. You may change the Angle of the "light", the opacity of the shadow itself, distance of the shadow from the object, as well as other important properties as shown below:

5) Click OK when done, and your drop shadow should be applied and will look similar to below, depending on which properties you had altered.

* Note: Drop-shadows may be applied to text as well as shapes.

Step 5: (optional) Applying a preset Adobe Photoshop style

1) Select from the Window menu> Show Styles - if it is not already visible on your workspace.

2) The style menu should look familiar similar to this:

3) Place your left cursor over the preferred style and click on it once, the style should be applied onto the shape you had created earlier. You will next use the Type Tool to insert button text.

Step 6: Inserting Text Over the Graphic

Use the Type Tool on the toolbar to insert text

1) Click once on the Type Tool to select it.

2) Place the text tool anywhere onto your new blank document and type in the necessary text for your button. The text can be formatted using the Type toolbar.

3) If needed, use the crop tool to crop your image when you are done.

Step 7: Saving the file

1) From the menu bar, select File > Save For Web

2) Type in a new name for the image and select the extension of JPEG if it is a normal image, or GIF.

Resolution Issues:

• Web Graphics: If the file will be used for the web, it is best to save as a JPEG or GIF. JPEG's are recommended for pictures and photos. The resolution should be set at 72dpi (ppi).
• Print Quality Graphics: Some recommended file types this could be saved as is JPEG or TIFF. If this file will be printed out or a high quality is necessary, it is better to set it at a higher resolution, such as 200dpi