Transcript Photoshop II: Creating Buttons and Hover Effects

Applications for Web
Development (CIS 162)
Photoshop Continued
Today’s Outline
• Intro to Photoshop Continued
(hands on activity)
▫ How to create/design buttons
Client: Jonathan Bing, Attorney at Law
Accomplishments:
Created a logo for Mr. Bing using text and a
custom shape
Goal:
Create a series of web buttons for Mr. Bing that
have a ‘default’ and a rollover look
Creating Shapes with Selections
What are selections?
• Areas of an image you would like to isolate from
the remainder of an image
• With the isolated/selected part of the image, you
may choose to modify it or paste it onto another
image
• Example – Remove yourself from a group photo
and place yourself standing next to the President
• We will be creating shapes with selections to
build web buttons
Style of Web Buttons
Purpose of buttons on a website:
• Allow users to easily navigate the website via
clickable images (buttons)
• Complement the look and feel of the website
Avoid the following:
• Flat or boring web buttons
• Graphical buttons that don’t match the style of the
website
• Not using web buttons, since buttons make the
website more pleasant to navigate (Let’s discuss this
point as a class)
Photoshop: Creating a Web Button
• Open Photoshop
• Create a New Image
Width: 75 pixels
Height: 25 pixels
Resolution: 72 pixels/inch
Color Mode: RGB Color 8 bit
Background Contents: Transparent
• Create a new layer and name it Circle
Photoshop Toolbox
Navigate through the toolbox and identify the location
of the following tools:
Marquee Tool
Move Tool
Lasso Tool
Crop Tool
Quick Selection Tool
Magic Wand Tool
Slice Tools
Pen Tools
Painting Tools (Quick Mask Mode)
What do these tools do?
 Marquee Tool: Let’s you select rectangles,
ellipses, and 1-pixel rows and columns.
 Move Tool: Lets you drag a selection or layer to a
new location in the image, and to other images. You
can also use the Move tool to align selections and
layers.
 Lasso Tool: Lets you draw both straight-edged and
freehand segments of a selection border. The
Magnetic Lasso Tool allows the border to snap to
the edges of the defined areas within the image.
What do these tools do?
 Crop Tool: Works similarly to the Rectangular
Marquee tool. You can click and drag to draw a
Rectangular area to select the part of the image
you want to include.
 Cropping is the process of removing portions of an
image to create focus or strengthen the
composition. You can crop an image using the
Crop tool and the Crop command (Image » Crop).
What do these tools do?
 Quick Selection Tool: Used to quickly paint a
selection using an adjustable round brush tip. As
you drag, the selection expands outward and
automatically finds and follows defined edges in the
image.
 Magic Wand Tool: Lets you select a area by color
range without having to trace its outline. You can
specify the color range, or tolerance, for the Magic
Wand tool's selection in the tool's option bar. Enter
a low value to select the few colors very similar to
the pixel you click, or enter a higher value to select a
broader range of colors.
What do these tools do?
 Slice Tool: Used to divide large images into to small
connected pieces of rectangular images that are useful for
building a website.
 Pen Tool: Lets you create straight lines and smooth flowing
curves. For most users, the Pen tool provides the best control
and greatest accuracy for drawing. The Freeform Pen Tool
lets you draw as if you were drawing with a pencil on paper.
Anchor points are added automatically as you draw. You do
not determine where the points are positioned, but you can
adjust them once the path is complete.
 Painting Tools include the following:
 Brush Tool, Pencil Tool, Color Replacement Tool
 History Brush and Art History Brush Tool
 Gradient Tool and Paint Bucket Tool
Creating a Circle
While on the Circle Layer, Select the Ellipse
Marquee tool
Hold down the Shift key then click and drag to
create a perfect circle
Double-click the Foreground Color square in the
toolbox.
From the Color Picker dialog box, change the RGB to
R:13 G:31 B:124
Click OK
Select the Paint Bucket tool and click inside of the
ellipse that you drew.
You may now use the Move Tool to place the circle
where you want it to appear.
Creating a Selection from and Image
While still in the Circle layer, click Ctrl+D to
deselect the circle
Select the Single Column Marquee Tool
In the options bar, select Add to Selection
Click outside of the circle, toward the center, so that
the column selection appears directly through the
center of the circle. You may use your arrow keys to
adjust its placement.
Click the Move Tool
While holding the Shift key, use your left arrow
twice.
This demonstrates that you have successfully isolated
a portion of your image
Use Ctrl+Alt+Z to return the column that you moved
Creating a Selection from and Image
With the single column still selected, click
Ctrl+T (or Edit > Free Transform)
Hover over the left, center area of your free
transform block until your cursor appears as two
horizontal arrows
Click and drag your cursor to the far left edge of
your image
Click Enter
Click Ctrl+D to deselect the image
Adding Effects
Add a Drop Shadow effect (we used this
functionality last week)
Right click in the Circle layer and select
Blending Options
Check Drop Shadow and Bevel and Emboss
Click OK
Adding Text to Your Web Button
Select the Text Tool from the toolbox
Select Window > Character. From the
Character pallet make the following changes:
Font Family: Palatino Linotype
Font Style: Bold Italic
Font Size: 10 pt
Change the Tracking (letter spacing) to 200
Change the anti-aliasing method to Sharp
Text color: White (RGB 255, 255, 255)
Adding Text to Your Web Button
Click somewhere on the image and type the text
“HOME”
Use the Move Tool to place the text where you
want it to appear
Keep in mind the name (and text placement) of
the other buttons you plan to create
Make the letter “H” size 12 pt (two sizes larger)
Add Bevel and Emboss blending options to the
HOME text
Zoom out to view your image
Using Preset Styles
Sometimes a pre-set style can offer you several
options and effects all in one convenient package
To view the available options:
Right click the
Circle Layer and select
Blending Options
Click on Styles (Text
Effects 2 from the
extended menu)
Click on Dark Red Bevel
Click OK
Save your image as a .psd
Defining a Button for a Rollover Effect
While holding the Shift key, click the Circle
and the Home layer
Right click on the select layers and click on
Duplicate Layers
Click OK
Rename the layers as button mouseover and
HOME mouseover
Defining a Button for a Rollover Effect
Right click the button mouseover layer and select
Blending Options
Click on the Pattern Overlay Option
Select Color Paper from the extended menu
Select the Blue Crepe pattern (row 1, column 3)
Before clicking OK, click the Inner Shadow
checkbox (this is to give the impression of a pusheddown effect)
Click the Stroke option and change the Fill Type to
Pattern and select the Blue Crepe pattern
Click OK
Defining a Button for a Rollover Effect
For the full effect, select the HOME mouseover
layer and use the Move Tool to move your text a
few pixels downward
For practice purposes, create two additional buttons:
One for Contact
One for Services
Each button should have a default as well as a rollover
button
Remember to also name each button accordingly
Bing_contact.psd
Bing_services.psd
Any questions?