Affordable Website Design - or Here to email Affordable Website Design

Simple Button
Free Articles and Tutorials for Web Designers or

GraphicsFactory GraphicsFactory

Tutorial: Simple Button
Software: Adobe Photoshop 6.0
Difficulty: Beginner

Software needed - Adobe Photoshop 6, however this tutorial can easily be learned with Adobe Photoshop 5 as it has similar functions.

Skill level - Beginner.

Below is a simple tutorial for Adobe Photoshop that will show you how to create a button with text on it.

1. Open up Adobe and then go to file new, the box below will appear. This box is for choosing your file settings such as width and height. I chose 160 pixels for the width and 32 pixels for the height and left the canvas transparent, to do this click transparent (you can choose any settings, but 160X32 is ok for a button).

2. You will now be presented with a blank transparent canvas (see below). This will be your work area.

3. Now you will need to fill the transparent canvas with a colour, click on your paint filler shown in the left diagram and choose your color (I choose black, any color will do though). Fill in the blank canvas using the paint filler.
3.a Your canvas will now look like the below diagram.

4. Now we need to make a border for the button, click on the rectangular marqee tool like shown on the left diagram

4.a Make the marqee about 1 pixel from the edges of the canvas like the diagram shown below.

5. Now fill in the marqee with your prefered color, I chose blue, then press Ctrl and D to deselect the marqee, your canvas will now resemble a button like the below diagram.

6. Now we need to apply some text to the button, click on the type tool like shown on the left diagram (or simply press the letter T on your keyboard) and then click inside the button and start typing.

6.a Once you have finished typing and positioning your text you will need to click the tick at the right corner of the text toolbar. You can also use the text tool bar to change font styles and sizes. Below is a diagram of the text tool bar.

Text tool bar that appears whenever you apply text to an image

7. Your button should now look like the button below.

8. The final step is to now save your button, to do this go to file+save for web. You can mess about with the different settings but try and keep the image size small for quick load time also remember to save it as a gif. Once you are happy press OK and save it to your computer.

I hope this tutorial was of help.

Article copyright @

<< Tutorials           Top of Page           Articles >>

© July 2003 Affordable Website Design - All rights Reserved
Add to Favourites       link To AWD       Disclaimer       Privacy       Tell A Friend