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

Macromedia Studio 8 Step-by-Step

MACROMEDIA FIREWORKS 8 Project 2: Experience Bank Logo

2Macromedia Studio Step-by-Step Project 2

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


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)


Adjust a drop shadow effect

Group objects to create a single image

Create text and modify its properties

Position text



Apply and modify gradients on text

Apply drop shadow effects to text

Group and resize an image

Optimize and export an image



Logo: graphic identifying an organizationLogos 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


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


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


FIGURE 1: The design document for the Experience Bank logo


Lesson 1: Drawing and Modifying Objects

Lesson 2: Generating and Positioning Objects

Lesson 3: Adding and Adjusting Text

Project 2 Lessons


Lesson 1 Objectives

Set up a new documentUse grids to align image elementsDraw and edit images by using a Pen toolSelect and modify images by using selection toolsApply gradient and drop shadow effects


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


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


FIGURE 1-1: New document dialog box


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 pixels Set 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


FIGURE 1-3: Edit Grid Dialog Box


FIGURE 1-4: Vertical Guide


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 lines Pen 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 down To curve base, drag right vertex to right and down


FIGURE 1-6: Open paths create the sides of the triangle


FIGURE 1-7: Curved line drawn with the Pen tool


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


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


FIGURE 1-9: Edit Gradient Window


FIGURE 1-12: Triangle with gradient


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 opens Color window opens

Click Transparent button (red diagonal)


FIGURE 1-14: Transparent button in the color window


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



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


Replicating Objects

Build logo without repeating tasksOverview 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


FIGURE 2-1: Four objects in the Layers panel


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


FIGURE 2-4: Rotated and moved Triangle


FIGURE 2-6: Completed mark


Adding a Drop ShadowAdd shadows to reinforce dimensionalityShadows 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


FIGURE 2-8: Drop shadow window


FIGURE 2-10: Completed mark with drop shadows


Grouping ObjectsGood practice to group elements into a single object so you cannot mistakenly alter one part of itOverview of tasks– Click top triangle– Click remaining triangles– Click Modify and then click Group– Select the group and move it– Save the file


Lesson 3 Objectives

Create text and modify its properties

Position text

Apply and modify gradients on text


Lesson 3 Objectives (continued)

Apply drop shadow effects to text

Group and resize an image

Optimize and export an image



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


Adding Text to the CanvasLogo consists of the mark and textCreate 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


FIGURE 3-3: Text Property inspector


FIGURE 3-4 Logo text with different fonts


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


FIGURE 3-5 Text aligned on grid


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 #330066– Rotate gradient fill – Apply drop shadow using a Live filter


FIGURE 3-8: Logo text with vertical gradient applied


FIGURE 3-9: Text with drop shadow applied


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% Quality Set 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


FIGURE 3-10: Optimize panel


FIGURE 3-14: Canvas fit around final logo


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

Documents

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