Top Banner
Adobe Photoshop Elements 2.0 Creating Buttons For Websites
30

Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Dec 21, 2015

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Adobe Photoshop Elements 2.0

Creating Buttons For Websites

Page 2: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Launch Program, File>New

Page 3: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Set Width & Height InchesResolution 72 dpi, Mode RGB

Page 4: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Image>Mode>RGB to Edit

Page 5: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Window>LayersDouble Click the Background Layer

& Rename to Unlock

Page 6: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

After Double Clicking on the Locked Italic Background Layer Text

Rename It, OK

Page 7: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

View>Rulers to Control the Size of The Buttons You Create

Page 8: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Window>Layer Styles

Page 9: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Drag the Layer Styles Palette Down by the Tab in the Palette Well to

Keep it Open for Making Selections

Page 10: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Layer Styles Drop-Down Menu Choices

Page 11: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Layer Styles Drop-Down Menu Choices

Page 12: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Layer Styles Drop-Down Menu Choices

Page 13: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

With the Rectangle Tool Drag Select the Desired Button Size

Page 14: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Click on the Foreground Color Box to Select the Desired Button Color

Page 15: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Edit>Fill the Selected Color

Page 16: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

The Selected Color Fills the Rectangle

Page 17: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Select the Desired Layer Style

Page 18: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

If the Selection Overfills the Rectangle, Select>Inverse, & Delete Key to Remove Excess

Page 19: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Now Only Your Shape is FilledEdit>Deselect

Page 20: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Select the Crop Tool, Drag Select the Area to Keep>Return Key

Page 21: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Only Your Button Remains

Page 22: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

File>Save As

Page 23: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

File>Save As, Name in Lowercase, .pds & Check Layers,

Save

Page 24: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Keep a .psd Copy of the Button for Adding New Text To Each Button

Page 25: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Select Text Foreground Color & Text Tool, Click and Type Title

Page 26: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

The Font Tools are Along the Top &the Move Tool is on the Left

Page 27: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

File>Save For Web

Page 28: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Select .gif or .jpg File Format, OK

Page 29: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Name All Lowercase With File Extension, Save to Desktop

Page 30: Adobe Photoshop Elements 2.0 Creating Buttons For Websites.

Completed Button for Adding to Your Webpage