Macromedia Studio 8 Step-by-Step MACROMEDIA FIREWORKS 8 Project 2: Experience Bank Logo

Project 2 2 Macromedia Studio Step-by-Step Set up a new document Use grids to align image elements Draw and edit images by using a Pen tool Select and modify images by using selection tools Project Objectives

Project 2 3 Macromedia Studio Step-by-Step Apply gradient and drop shadow effects Copy and paste objects Use transformation tools to rotate objects Use alignment tools to position objects Project Objectives (continued)

Project 2 4 Macromedia Studio Step-by-Step Adjust a drop shadow effect Group objects to create a single image Create text and modify its properties Position text Project Objectives (continued)

Project 2 5 Macromedia Studio Step-by-Step Apply and modify gradients on text Apply drop shadow effects to text Group and resize an image Optimize and export an image Project Objectives (continued)

Project 2 6 Macromedia Studio Step-by-Step Logo: graphic identifying an organization Logos are used in many media –Print materials –Products –Advertisements –Web sites Special functions of logos on Web sites –Unify the look and feel of the site –Orient visitors as they navigate site Overview

Project 2 7 Macromedia Studio Step-by-Step Make a Web logo for Experience Bank Logo revises print-based design Logo colors evoke integrity of bank Three major design specifications –Draw and modify objects –Generate and position objects –Add and adjust text The Assignment

Project 2 8 Macromedia Studio Step-by-Step Logo size is constrained by site design –Logo dimensions: 209 pixels x 30 pixels Logo colors and gradient based on needs of bank Carefully review the design document Experience Bank Logo Design Document

Project 2 9 Macromedia Studio Step-by-Step FIGURE 1: The design document for the Experience Bank logo

Project 2 10 Macromedia Studio Step-by-Step Lesson 1: Drawing and Modifying Objects Lesson 2: Generating and Positioning Objects Lesson 3: Adding and Adjusting Text Project 2 Lessons

Project 2 11 Macromedia Studio Step-by-Step Lesson 1 Objectives Set up a new document Use grids to align image elements Draw and edit images by using a Pen tool Select and modify images by using selection tools Apply gradient and drop shadow effects

Project 2 12 Macromedia Studio Step-by-Step Lesson 1 Introduction Experience Bank mark –Four triangular objects (or elements) –Location: left side of logo Elements based on lines and shapes Lesson tasks –Set up a new document –Use Pen tool to draw element of mark –Add gradient fill and drop shadow

Project 2 13 Macromedia Studio Step-by-Step Setting Up a New Document Initial size: 1045 pixels x 160 pixels –Easier to work on larger canvas –Resize logo before placement on site Logo sits on white background –Canvas color is background color Overview of tasks –Open New Document dialog box –Set dimensions, resolution, and color

Project 2 14 Macromedia Studio Step-by-Step FIGURE 1-1: New document dialog box

Project 2 15 Macromedia Studio Step-by-Step Using the Grid, Guides, and Rulers Rulers, guides, and grids –Assist with object layout –Enable more precise drawing Overview of tasks –Open Edit Grid dialog box Set grid size to 30 x 30 pixelsSet grid size to 30 x 30 pixels Set color to #99CCFF (pale blue)Set color to #99CCFF (pale blue) –Ensure Rulers are visible (go to View) –Add vertical and horizontal guides

Project 2 16 Macromedia Studio Step-by-Step FIGURE 1-3: Edit Grid Dialog Box

Project 2 17 Macromedia Studio Step-by-Step FIGURE 1-4: Vertical Guide

Project 2 18 Macromedia Studio Step-by-Step Drawing a Basic Object Four parts to Experience Bank mark –Slightly curved triangles –Use Pen tool to create first element Pen tool draws points, straight lines, curved linesPen tool draws points, straight lines, curved lines Overview of tasks –Draw two sides of triangle Lines meet at intersection of guidesLines meet at intersection of guides –Draw triangle base To curve base, drag right vertex to right and downTo curve base, drag right vertex to right and down

Project 2 19 Macromedia Studio Step-by-Step FIGURE 1-6: Open paths create the sides of the triangle

Project 2 20 Macromedia Studio Step-by-Step FIGURE 1-7: Curved line drawn with the Pen tool

Project 2 21 Macromedia Studio Step-by-Step Creating and Applying a Gradient Fill Color and gradient effects –Mark colors blend into each other –Elements appear curved up from page Various fill characteristics –Solid, dithered, pattern, gradient Various fill attributes –Color, edge, texture, transparency

Project 2 22 Macromedia Studio Step-by-Step Creating and Applying a Gradient Fill (continued) Overview of tasks –Add linear gradient to triangular element –Set fill color of center to #8A995A –Set fill colors of edges to #DFE5D0 –Use gradient handles to adjust gradient

Project 2 23 Macromedia Studio Step-by-Step FIGURE 1-9: Edit Gradient Window

Project 2 24 Macromedia Studio Step-by-Step FIGURE 1-12: Triangle with gradient

Project 2 25 Macromedia Studio Step-by-Step Removing the Stroke Remove border (stroke) of curved triangle –Elements of mark will appear to float Overview of tasks –Select circular triangle –Click Stroke Color box on Tools panel Color window opensColor window opens Click Transparent button (red diagonal)

Project 2 26 Macromedia Studio Step-by-Step FIGURE 1-14: Transparent button in the color window

Project 2 27 Macromedia Studio Step-by-Step Lesson 2 Objectives Copy and paste objects Use transformation tools to rotate objects Use alignment tools to position objects Adjust a drop shadow effect Group objects to create a single image

Project 2 28 Macromedia Studio Step-by-Step Lesson 2 Introduction Mark is composed of four elements –Rectangular formation resembles a shield Lesson tasks –Replicate the basic object –Position objects into a rectangular shape –Adjust the drop shadow on each object –Group objects together to create the mark

Project 2 29 Macromedia Studio Step-by-Step Replicating Objects Build logo without repeating tasks Overview of tasks –Select the triangular object –Click Copy on the Edit menu –Return to Edit menu and click Paste –Repeat Copy/Paste operation two times Copied objects appear over original Four objects reflected in Layers panel

Project 2 30 Macromedia Studio Step-by-Step FIGURE 2-1: Four objects in the Layers panel

Project 2 31 Macromedia Studio Step-by-Step Positioning Objects Rotate and position each element –Match sketch drawn by designer Overview of tasks –Draw four more guides for assistance –Rotate top triangle 90  CW and position –Rotate next triangle 180  and position –Rotate third triangle 90  CCW and position

Project 2 32 Macromedia Studio Step-by-Step FIGURE 2-4: Rotated and moved Triangle

Project 2 33 Macromedia Studio Step-by-Step FIGURE 2-6: Completed mark

Project 2 34 Macromedia Studio Step-by-Step Adding a Drop Shadow Add shadows to reinforce dimensionality Shadows and glows easily added –Adjust angle relative to light source Overview of tasks –Select triangle on the left side of the mark –Click Add live filters (+ icon) on inspector –Go to Shadow and Glow, click Drop Shadow –Key values for drop shadow –Repeat process for other triangles

Project 2 35 Macromedia Studio Step-by-Step FIGURE 2-8: Drop shadow window

Project 2 36 Macromedia Studio Step-by-Step FIGURE 2-10: Completed mark with drop shadows

Project 2 37 Macromedia Studio Step-by-Step Grouping Objects Good practice to group elements into a single object so you cannot mistakenly alter one part of it Overview of tasks –Click top triangle –Click remaining triangles –Click Modify and then click Group –Select the group and move it –Save the file

Project 2 38 Macromedia Studio Step-by-Step Lesson 3 Objectives Create text and modify its properties Position text Apply and modify gradients on text

Project 2 39 Macromedia Studio Step-by-Step Lesson 3 Objectives (continued) Apply drop shadow effects to text Group and resize an image Optimize and export an image

Project 2 40 Macromedia Studio Step-by-Step Lesson 3 Introduction Logo has two basic features –Text: names the organization –Mark: symbolizes organization qualities Overview of tasks –Add and format text –Apply text effects that evoke qualities –Position and group elements –Optimize logo for use on Web site –Resize and export logo image

Project 2 41 Macromedia Studio Step-by-Step Adding Text to the Canvas Logo consists of the mark and text Create text based on two sources –Drawn logo –Company design guidelines Overview of tasks –Select Text tool from Tools panel –Key “Experience Bank” to right of mark –Set font, font size, Kerning –Change font of "Bank" to Arial Black

Project 2 42 Macromedia Studio Step-by-Step FIGURE 3-3: Text Property inspector

Project 2 43 Macromedia Studio Step-by-Step FIGURE 3-4 Logo text with different fonts

Project 2 44 Macromedia Studio Step-by-Step Adjusting Text on the Canvas Better align the text with the mark Overview of tasks –Select the text box –Drag text to meet two specifications Left border is five grid spaces in from left edge of canvasLeft border is five grid spaces in from left edge of canvas Top border is one grid space away from top of canvasTop border is one grid space away from top of canvas

Project 2 45 Macromedia Studio Step-by-Step FIGURE 3-5 Text aligned on grid

Project 2 46 Macromedia Studio Step-by-Step Adding a Gradient Fill and Drop Shadow to Text Unify the components of the logo –Emulate mark effects in text Overview of tasks –Select the text, “Experience Bank” –Set gradient range: #6666FF to # –Rotate gradient fill –Apply drop shadow using a Live filter

Project 2 47 Macromedia Studio Step-by-Step FIGURE 3-8: Logo text with vertical gradient applied

Project 2 48 Macromedia Studio Step-by-Step FIGURE 3-9: Text with drop shadow applied

Project 2 49 Macromedia Studio Step-by-Step Optimizing, Resizing, and Exporting an Image Remaining project tasks –Group the mark and text together –Optimize logo Set Export file format to JPEG with 75% QualitySet Export file format to JPEG with 75% Quality –Resize the logo Open Image Editing panelOpen Image Editing panel Change width to 209 pixels, set Constraint proportionsChange width to 209 pixels, set Constraint proportions –Export logo Save PNG type file as a JPEG type fileSave PNG type file as a JPEG type file

Project 2 50 Macromedia Studio Step-by-Step FIGURE 3-10: Optimize panel

Project 2 51 Macromedia Studio Step-by-Step FIGURE 3-14: Canvas fit around final logo

Project 2 52 Macromedia Studio Step-by-Step Summarizing Project 2 Experience Bank Web site logo created Element drawn with Pen tool Gradient fills and shadows applied Text associated with mark Completed logo prepared for Web page