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

macromedia studio 8 step-by-step macromedia fireworks 8 project 2: experience bank logo

Documents

macromedia flash

macromedia fireworks mx bible

macromedia flash mx - joni's journals€¦ · macromedia...

fireworks cs6 a quick logo creation. step 1- launch...

macromedia studio 8 step-by-step macromedia flash 8...

flash javascript dictionary - genmagic.net · effects,...

macromedia fireworks 8 revealed working with objects

introducing fireworks 8 - pearson...

macromedia dreamweaver

macromedia fireworks. understanding fireworks what can you...

macromedia studio 8 step-by-step macromedia flash 8 project...

macromedia fireworks

getting started step 1 - copying the cow -...

brainmaster macromedia flash player · brainmaster...

macromedia flash 5 macromedia flash 51815

primeros pasos con fireworks · 2013. 9. 13. · esta guía...

macromedia central

utilización de flashpaper · macromedia flash, macromedia...

macromedia studio 8 step-by-step macromedia dreamweaver 8...

we are learning to (walt): create an advertising banner –...