Upload
gerard-manning
View
221
Download
1
Embed Size (px)
Citation preview
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
In Class WorkFor 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
Homework•Create 3-5 buttons, along with their
matching hover displays, for your website•Using the skills learned in class, along with
the skills that you have learned via online tutorials, create an image which combines at least 2 original (separate) photos. You should send me your originals along with your final image.▫Note: This does not have to pertain to your
website, I want you to use this as an opportunity to explore Photoshop on your own
Homework cont.
•Post links to your del.icio.us website that:▫Explain copyright laws. Be sure to read the
pages to which you are linking!▫Identify where you can obtain royalty free
(public domain) images online.