Adobe PhotoShop 6.0 - Creating a Button

Home > Creating a Button

Steps in this exercise:

• Create the Object

• Create an Editable Background Layer

• Color Selection

• Adding Text

• Layer Effects

• Image Size

Create the Object

• Create a new file by selecting File and New.

• Name the document - button.psd.

• In the Image Size box:

  • Assign a width and height of 7 and 4 inches, respectively.

  • Select a Resolution of 72 pixels/inch.

  • Select RGB as the Mode.

• In the Contents box:

  • Check White.

• Click OK.

   

[Return to top]

Create an Editable Background Layer

• In the layers palette, double-click on the word "background." This will open the New Layer window.



• Enter "Background Layer" as the name of the layer and click ok.

[Return to top]

Color Selection

• The default colors in Photoshop are black foreground on white background.

• To change your color setting to the default colors, simply click on the small black and white squares in the lower left portion of the Default Colors Tool.

• To change the foreground color, click on the foreground color square.

• The Color Picker dialog box will appear, and you can select a color. This will be the color with which you paint or fill.



• Under the Edit menu, choose Fill. The Fill box appears. In the Contents box, select Use Foreground color.

• Under the Filter menu choose Noise, Add Noise. The amount should be 15%. In the Distribution box, select Uniform.



• Under the Layer menu, choose Layer Style, Bevel and Emboss.

• Set the style to Inner Bevel.

• In the Structure box, set the Depth to 100%, Size to 40 pixels, and Soften to 10 pixels. In the Shading box, set the Angle to 120 degrees.

• Click OK.



• Switch the Foreground and Background Colors by clicking on the curved arrow in the upper right hand corner.

• Select a new foreground color or keep white.

• Whichever color you choose will be your text color, so the color you select should be visible on the background of your button.

[Return to top]

Adding Text

• Select the Text Tool . This will create a new layer.

• Click an insertion point in the center of your button to begin entering text.

• Choose a thick Font typeface (Arial Black, ComicSans, GillSans Bold or Impact).



• Choose a type Size between 60 and 110 points (this will depend on how long your button label is).

• Begin typing the button text. The text will appear on your button. Click OK when finished.

• Select the Move Tool , and place your text in position.

[Return to top]

Layer Effects

• Notice in the Layers Palette that there are two layers. The new layer is a text layer and contains the text you just created.
  Choose Layer, Effects and Drop Shadow.

  

• Go to File, Save and save the file. You now have a template you can use to make new buttons. All you have to do is open up the document and change the text. You can hide the old layers by pressing on the Photoshop eye in the Layers palette.

• To make this image ready for the web, it needs to be a GIF or JPEG.

• Save it as a GIF. Go to File, Save As and choose GIF as the File Type. The Indexed Color window opens. Click OK.



• The GIF Options window opens. Click OK.

[Return to top]

Image Size

• Change the size of your image so that it is an appropriate button size.

• Go the Image menu and choose Image Size. An Image Size dialog box will appear. Notice that Constrain Proportions is selected. This keeps the ratio of your image intact so you only have to change one attribute (height or width), and the other changes with it.

• In the Print Size area change the Width to 2 inches.

[Return to top]