Adobe Photoshop Components 2.0 Making Catches For Sites

Presentation Transcript

Adobe Photoshop Elements 2.0 Creating Buttons For Websites

Launch Photoshop Program, File>New

Set Width & Height to Inches, Resolution 72 dpi, Mode RGB, OK

Image>Mode>RGB to Edit

Window>Layers Double Click the Background Layer & Rename to Unlock

After Double Clicking on the Locked Italic Background Layer Text Rename It, OK

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

Window>Layer Styles

Drag the Layer Styles Palette Down by the Tab in the Palette Well to Keep it Open for Making Selections

Layer Styles Drop-Down Menu Choices

Layer Styles Drop-Down Menu Choices

Layer Styles Drop-Down Menu Choices

With the Rectangle Tool Drag Select the Desired Button Size

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

Edit>Fill the Selected Color

The Selected Color Fills the Rectangle

Select the Desired Layer Style

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

Now Only Your Shape is Filled Edit>Deselect

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

Only Your Button Remains

File>Save As

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

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

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

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

File>Save For Web

Select .gif or .jpg File Format, OK

Name All Lowercase With File Extension, Save to Desktop

Completed Button for Adding to Your Webpage