Applications for Web Development (CIS 162)Intro to Photoshop

Designing a LogoIntro to Photoshop

(Hands on Activity)

Planning Considerations•Who is your audience?

▫Who will view the logo and what are their interests? What’s the product, message, feel, etc. of the company?

•What do competitors’ logos look like?▫Can you make a logo that stands out, in a

positive way?•Decide the format for the logo.

▫JPEG or GIF?▫72 dpi and RGB mode

Sample Scenario: Jonathan Bing, Attorney-at-

LawWho is your audience? Who goes to see

lawyers?•Clients seeking legal help or advice•Probably apprehensive, confused, stressed,

etc.Good Design•Conservative Logo• Images that invoke justice and confidencePoor Design•Cartoon or “cute” text and symbols

Sample Scenario: Jonathan Bing, Attorney-at-

LawWhat do competitors’ logos look like?•Quickly look online for some comparisons

Good Design•Simple•Bold•Often use only two colors and simple lines

Sample Scenario: Jonathan Bing, Attorney-at-

LawDecide the format for the logo.•JPEG using 72 dpi

Intro to Photoshop•Open Photoshop CS4

▫Start > All Programs >Adobe > CS4 >Photoshop

•Photoshop work area▫Toolbox (left)

Left click to select a tool Right click to view additional options

▫Menu Bar (top) Perform common functions, such as saving,

copying and pasting, accessing specific palettes, and applying image effects

▫Pallet (right) Contains added controls like adjusting colors

Create a New Image

Width: 150 pixelsHeight: 50 pixelsResolution: 72 pixels/inchColor Mode: RGB Color 8 bitBackground Contents: White

Click OK

Change the Unit of MeasureAs web designers we want to work in pixels

rather tan inches. Photoshop is set to use inches by default.

•Press Ctrl + K (or click Edit > Preferences > Units & Rulers from the menu bar)

•Change the Unit “Rulers” and “Type” dropdowns to pixels and click OK

Using Layers

•Similar to layers of transparent paper (used for projectors)

•Each layer contains a part of the image that, combined, create final composite▫i.e. One layer might contain the text,

another the background color, another the a 3D bevel style that makes the image “pop”, and a final layer that contains a drop shadow for the entire image.

Using Layers

•Create a new layer “Layer 1”▫Note: “Background” should already appear

as its own layer•Name the layer

▫Double click the layer name and call it “Co. Name”

▫Click anywhere to apply what you just typed

Working with the Toolbox

•Identify the following select options:▫Rectangular Marquee Tool▫Move Tool▫Pencil Tool (maybe a sub tool, right click to

activate additional options)▫Horizontal Type Tool▫Custom Shape Tool▫Foreground Color Tool

Creating Text

•Windows > Character▫Font Family: Palatino Linotype▫Font Style: Regular▫Font Size: 10 pt▫Leading: (Auto)▫Tracking (AV horizontal): 20

•Click the “Horizontal Type Tool” from the Toolbox and click into the image space

Creating Text

•Type (in all caps): JONATHAN BINGEnlarge the first letter of each word•Using the “Horizontal Type Tool”,

highlight the letter “J”.•In the Character Palette, change the

font size to 12.•Do the same for the “B” in “Bing”

Moving Image Elements

•Select the “Move” tool•Select the appropriate layer (in this case,

“Co. Name”)•Click and drag the image within the

image window to move it to the right (we are making room for a graphic)

•You may use your arrows to help control your adjustments (use ctrl or shift for further assistance)

Creating Subtext for Your Logo•Create a new layer•Click the “Horizontal Type Tool” from the

Toolbox and click into the image space•Select the Character tab from the

Paragraph/Character palette set•Select the Palatino Linotype font•Decrease the font size to 8 pt

▫Type (in all caps): Attorney At Law ▫Use the “Move” tool to center the text

below “Jonathan Bing”, leave a little bit of space in between

Sample Layout

Drawing Lines• From the toolbox, select the Pencil tool

▫Notice that the option bar at the top has changed

▫This also gives you access to various palettes• In the options bar, select Brush and apply a

diameter of 1• Create a new layer and name it “Top Line”• Select the new layer and click somewhere

below the “J”, this will leave a pencil mark• Hold the Shift key and click below the “B”• If the line seems too long, click

“Ctrl + T” (Edit > Free Transform) to resize.“Enter” will apply the line and “Esc” will exit

the transforming line

Adding a Graphical Element

•Create a new layer and name it “Pen”•Activate the Pen layer•Select the Custom Shape tool from the

toolbox(sub menu of Rectangle tool)

•With the shape tool selected, select the Shape drop-down field by the right facing arrow

•Select Objects from the drop down list•Click OK

Adding a Graphical Element cont.•From the options bar, select the Shape

drop down menu.•Select the Pen shape•Hold Shift, click and drag (from left to

right) within the image window to draw the pen

•Click Enter to make this shape an image•Use Free transform (Ctrl + T) to resize the

pen shape if necessary.•Save as bing_logo.psd

Unlocking Layers

•Double click the Padlock icon in the Background layer. A new layer dialog box will appear.

•Type Background, since it is still considered our background layer.

•Click OK

Using the Blending Options•Click Blending Options from the

bottom of the palette•Click the Bevel and Emboss text

label•Change theAngle to 60• Click OK

Using the Blending Options cont.•Select and right click in the Co. Name

layer to select Blending Options•Check the following checkboxes:

▫Drop Shadow▫Bevel and Emboss▫Color Overlay

Using the Blending Options cont.•Click on the Color Overlay option•Click on the colored rectangle to display

the Color Picker•In the Color Picker, change the RGB

values to the following:▫R: 13▫G: 31▫B: 124

•Click OK

Copying and Pasting Layer Styles•Select the Subtext layer. Right click in

this layer and select Blending Options.•Check the Drop Shadow and Bevel and

Emboss check boxes•Click OK•Right click on the Subtext layer and selectCopy Layer Style•Paste to Top Line,and remaining text.

Adding Patterns to Your Layers

•Right click on the Background layer•Select Blending Options•Click the Pattern Overlay checkbox•Using the extended menu, select Rock

Patterns•Select Light Patters•Click OK

Moving Layers

•Now that you have several layers in place, you can click and drag your layers to see how this modifies the look of the logo

Any questions?