Modifying and Optimizing Web Graphics

Holly Quarzo

Ideas in motion.

Biography

Holly Quarzo

Partner, Instructor, and Chief Creative Officer

echo·eleven – Atlanta, Georgia

– oversees all creative aspects for echo·eleven’s eLearning, interactive, and website projects

– is a Certified Macromedia Instructor in Flash, Dreamweaver and Fireworks

– received Honorable Mention for Macromedia Instructor of the Year 2004

Objectives

Introduction and Overview

Section I: Design Conception

Section II: Design Creation

Section III: Design Corrections

Section IV: Project Completion

Summary

Introduction and Overview

Why Use Fireworks For Graphic Creation And Optimization?

Why Fireworks Work So Nicely With Dreamweaver

The Development Process And Procedures Used In This Session

Reviewing The Final Design – What We Will Build

Why Use Fireworks For Graphic Creation And Optimization?

The product was developed specifically for creative web and interactive developers.

The option to create both raster (bitmap) and vector graphics with one tool.

Built in, frequently utilized, interactive web functionality such as rollover navigation bar and pop-menus.

To strategically, efficiently and creatively optimize your work.

The product works so well with other Macromedia Products (Dreamweaver, Flash, and Freehand)

Why Fireworks Works Well With Dreamweaver

Fireworks is the chosen graphical sibling to Dreamweaver

GUI or User Interfaces of each application are aligned

Built in hooks - integrated functionalities within each application

Work flow coordination between applications

The Development Process and Procedures Used In This Session

High Level Plan/Methodology Used For The Exercises

Exercise 1: Review The Final Project

Look At And Describing All Elements Within The Final Page Design

Identify Which Elements We Will Build

Showing Where The Resource Starting And Completed Files Are Located

Section I: Design Conception

Pre-Development Work – Cheers, To The Responsible Designer

Determining Who Is Your Lowest Common Denominator User– Response Time

– Browsers

– Color Specifications

– Screen Resolution

Know Your User: Defining Your Target Audience

Webpage Response Times

* Reference: http://www.useit.com/papers/responsetime.html

The Three Important Limits

0.1 second is about the limit for having the user feel that the system is reacting instantaneously.

1.0 second is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay.

10 seconds is about the limit for keeping the user's attention focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done.

User Internet Connection Speed

* Reference: http://www.useit.com/alertbox/9703a.html January, 2004

Still Mostly Slow

38% of home users were on "broadband"

62% were still on dial-up

Browsers Share Statistics

* Reference: w3school.com, July, 2005.

The Most Popular Browsers On The Web

Microsoft IE 6, 67%

Firefox, 19.7%

Microsoft IE 5, 6.7%

Mozilla, 2.6% Safari, 1% Opera, 0.8%

0

10

20

30

40

50

60

70

Microsoft IE 6

Firefox

Microsoft IE 5

Mozilla

Safari

Opera 8

Web-safe vs. Millions Of Colors

Color Depth Stats

* Reference: thecounter.com, July, 2005.

8 bit, 1%24 bit, 6%

16 bit, 22

32 bit, 60%

32 bit

16 bit

24 bit

8 bit

How Much Real Estate Is Available?

* Reference: w3schools.com, June, 2005.

The Most Popular Screen Resolutions On The Web In The World

0%

10%

20%

30%

40%

50%

60%

Higher 1024 x 768 800 X 600 640 x 480

Higher

1024 X 768

800 x 600

640 x 480

“If You Build It They Will Come”….NOT!

Why Is This Site/Project Being Built?

How Do You Plan To Let Others Know That It Exists?

What Determines Success?

Developing and Recording Measurable Outcome Goals

– This Project Is Successful If:1. Users Buy Product2. Users Contact Artist For Custom Work/Orders3. Becomes A Trade Resource

Project Design Specifications: Your Design Marching Orders

– Browsers – IE5 And Above With Considerations To The Remaining Leading Browser Shares

– Color Specifications - Millions

– Screen Resolution – 1024 x 768 With Considerations To 800 X 600

– Passing Out Business Cards, Search Engines, Trade Site Links, Show Marketing Materials

– Success Equals:• New Clients Awareness

• New Purchases/Orders – 10K

• Trade Recognition

• Resource For Gardeners

Flow Of The Site: Site Map Creation: Step I

Get The Client Involved – Ask Client To Make Outline

Flow Of The Site: Site Map Creation: Step II

Refining The Flow– Post-It Notes Meeting With Client

Flow Of The Site: Site Map Creation: Step III

Create Final Site Map - Blueprint

The “Sketch” Phase – Wireframing / Grid

Giving Clients Strategic Options With Minimal Work

Creating Your Development Strategy– Using A Combination Of Graphics And CSS For

Look And Feel

– Static Layout Using Mostly Layers And Some Tables

Liquid Design Or Not?

Exercise 2: Testing Design Against Determined Specifications

Objectives– Test Design To See If:

• It Can Be Build In HTML

• It Is Flexible Enough To Accommodate All Data And Images

• The Important Information Is “Above The Fold”

• The Navigation Can Support Company Growth

• Enough Entry/Exploring Opportunity Points

• It Can Easily Be Updated And Maintained

Section II: Design Creation

Design Analysis And Strategy

Creating The Overall “Look –N- Feel” As A Graphic

Designing With A Grid In Mind – Strategizing Design For Final Development.

Looking At And Analyzing The Final Design

What Will Be A Graphic And What Will Be HTML?

Exercise 3: Create Parts Of Final Design

Objectives– Review How To Use Guides

– Draw Background Areas

– Import Main Photo – Raster/Bitmap Image

– Import Vector Image – Inserting Logo

Web Graphic Types And Optimization

The Corner Stone Of Fireworks

Balancing Quality With “k” Size

.gif or .jpeg – Which File Format Should I Use?

.gif Specifications

Max 256 Colors

One Transparency

Can Be Animated

Usually Used With Minimal Color Assets Such As Logos And Clip Art.

.jpeg Specifications

Millions Of Colors

Lossy Compression

Usually Used With Photographs And Complex Visual Assets.

Optimization Methods Within Fireworks

Wizard

Image Preview

Optimization Panel

Optimization With Fireworks Wizard

Optimization With Fireworks Image Preview

Optimization With Fireworks Preview And Optimize Panel

Saving Settings For Batch Process

Redundant Optimization Tasks

Batch Process Using Saved Optimization Presets

Exercise 4: Optimize Graphics For Project

Objectives– Optimize Featured Item Using Optimize Panel And

Preview

– Do A Batch Process On Secondary Item Images

Converting The Graphic Into A Webpage

The Plan Is Created – Converting Concept To HTML

Using Graphic As Blueprint For Development

Dreamweaver’s Tracing Image

Waiting For A Graphic To Be Developed?

Use An Image Placeholder And Continue Working

Creating Navigation Buttons In Fireworks

Converting Graphic to Symbol

Creating States Of The Button Symbol

Creating Rollover Buttons For Navigation

Add A Pop-up Menu

Exporting The Navigation Elements From Fireworks To Put Into Dreamweaver

Inserting Navigation From Fireworks Into Dreamweaver

Exercise 5: Building The Page

Objectives– Inserting Tracing Image

– Insert Placeholder Graphic For Promotional Ad

– Create Navigation Buttons Within Fireworks

– Create a Pop-up Menu Within Fireworks

– Export Navigation

– Insert Navigation Into Page

Section III: Design Corrections

Making Edits And Tweaks To Design Elements From Within And Between Dreamweaver And Fireworks

You Don’t Need To Leave Dreamweaver To Make Common Edits To Graphics

Instead Use The Integrated Graphics Tool

Replacing The Placeholder Graphic

Creating the graphic in Fireworks using roundtrip editing

Creating A Graphic To Replace Placeholder

Using Roundtrip Editing Feature

Fluid Transition Between The Two Products

Exercise 6: Edits Made Easy

Objectives– Optimizing Image From Within Dreamweaver

– Create A Graphic To Replace Placeholder

– Making Edits To Navigation Bar

Section IV: Project Completion

How To Work Within In A Team Or Alone -

The End Is Near

Maintaining Projects

Collaborative Use Of Check-In/Check Out

From Within Both Dreamweaver And Fireworks

Shared Site Updates Through FTP

Summary

Review of Talk

Questions

Ideas in motion.

Thank You.