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 LawAccomplishments:Created a logo for Mr. Bing using text

and a custom shapeGoal: Create a series of web buttons for Mr.

Bing that have a ‘default’ and a rollover look

Creating Shapes with SelectionsWhat 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 ButtonsPurpose of buttons on a website:• Allow users to easily navigate the website via

clickable images (buttons)• Complement the look and feel of the websiteAvoid 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 pixelsHeight: 25 pixelsResolution: 72 pixels/inchColor Mode: RGB Color 8 bitBackground Contents: Transparent

• Create a new layer and name it Circle

Photoshop ToolboxNavigate through the toolbox and identify the

location of the following tools:Marquee ToolMove ToolLasso ToolCrop ToolQuick Selection ToolMagic Wand ToolSlice ToolsPen ToolsPainting 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 ToolHistory Brush and Art History Brush ToolGradient Tool and Paint Bucket Tool

Creating a CircleWhile on the Circle Layer, Select the Ellipse

Marquee toolHold down the Shift key then click and drag

to create a perfect circleDouble-click the Foreground Color square in

the toolbox.From the Color Picker dialog box, change the

RGB to R:13 G:31 B:124Click OKSelect 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 ImageWhile still in the Circle layer, click Ctrl+D to

deselect the circleSelect the Single Column Marquee Tool

In the options bar, select Add to SelectionClick 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 ToolWhile holding the Shift key, use your left

arrow twice.This demonstrates that you have successfully

isolated a portion of your imageUse Ctrl+Alt+Z to return the column that you

moved

Creating a Selection from and ImageWith 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 EnterClick Ctrl+D to deselect the image

Adding EffectsAdd a Drop Shadow effect (we used this

functionality last week)Right click in the Circle layer and select Blending OptionsCheck Drop Shadow and Bevel and

EmbossClick OK

Adding Text to Your Web ButtonSelect the Text Tool from the toolboxSelect Window > Character. From the

Character pallet make the following changes:Font Family: Palatino LinotypeFont Style: Bold ItalicFont Size: 10 ptChange the Tracking (letter spacing) to 200Change the anti-aliasing method to SharpText color: White (RGB 255, 255, 255)

Adding Text to Your Web ButtonClick somewhere on the image and type

the text “HOME”Use the Move Tool to place the text where

you want it to appearKeep in mind the name (and text placement)

of the other buttons you plan to createMake the letter “H” size 12 pt (two sizes

larger)Add Bevel and Emboss blending options to

the HOME textZoom out to view your image

Using Preset StylesSometimes 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 selectBlending OptionsClick on Styles (Text Effects 2 from the extended menu)Click on Dark Red BevelClick OKSave your image as a .psd

Defining a Button for a Rollover EffectWhile holding the Shift key, click the

Circle and the Home layerRight click on the select layers and click

on Duplicate LayersClick OKRename the layers as button mouseover

and HOME mouseover

Defining a Button for a Rollover EffectRight click the button mouseover layer and

select Blending OptionsClick on the Pattern Overlay OptionSelect Color Paper from the extended menuSelect the Blue Crepe pattern (row 1, column

3)Before clicking OK, click the Inner Shadow

checkbox (this is to give the impression of a pushed-down 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 EffectFor 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 ContactOne for Services

Each button should have a default as well as a rollover button

Remember to also name each button accordinglyBing_contact.psdBing_services.psd

Any questions?