1. Digital Imaging
Unit 11: Creating Images for the Web
Module 3: Creating Buttons
Creating Buttons
Buttons are used to guide users
through a website.
There are plenty of stock buttons
available for use, but sometimes
it is best to create you own in
order to match brand, be unique,
make them more prominent.

2. Digital Imaging
Unit 11: Creating Images for the Web
Module 3: Creating Buttons
Creating Buttons
Using basic Photoshop tools you
can design your own button. To
create a button, draw a shape
and fill with a color or gradient.
This is the first state of your
button. Name that layer “First
State”.

3. Digital Imaging
Unit 11: Creating Images for the Web
Module 3: Creating Buttons
Creating Buttons
Buttons have four states:
• Normal
• Rollover (when you mouse
over)
• Mouse Down (when you click)
• Active

4. Digital Imaging
Unit 11: Creating Images for the Web
Module 3: Creating Buttons
Creating Buttons
Using layers, create variations of
the first state to show the four
different states.
Save for use on the web.