Applications for Web Development (CIS 162) Intro to Photoshop

Designing a Logo Intro 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-Law Who 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 confidence Poor Design Cartoon or “cute” text and symbols

Sample Scenario: Jonathan Bing, Attorney-at-Law What 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-Law Decide 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 pixels Height: 50 pixels Resolution: 72 pixels/inch Color Mode: RGB Color 8 bit Background Contents: White Click OK

Change the Unit of Measure As 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 BING Enlarge 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 the Angle 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 select Copy 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?