Modifying and Optimizing Web Graphics

1
Modifying and Optimizing Web Graphics

• Holly Quarzo

Ideas in motion.
2
Biography

• Holly Quarzo
• Partner, Instructor, and Chief Creative Officer
• echoeleven Atlanta, Georgia
• oversees all creative aspects for echoelevens
  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

3
Objectives

• Introduction and Overview
• Section I Design Conception
• Section II Design Creation
• Section III Design Corrections
• Section IV Project Completion
• Summary

4
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

5
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)

6
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

7
The Development Process and Procedures Used In
This Session

• High Level Plan/Methodology Used For The Exercises

8
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

9
Section I Design Conception

• Pre-Development Work Cheers, To The Responsible
  Designer

10
Know Your User Defining Your Target Audience

• Determining Who Is Your Lowest Common Denominator
  User
• Response Time
• Browsers
• Color Specifications
• Screen Resolution

11
Webpage Response Times

• 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.

Reference http//www.useit.com/papers/responset
ime.html
12
User Internet Connection Speed

• Still Mostly Slow
• 38 of home users were on "broadband"
• 62 were still on dial-up

Reference http//www.useit.com/alertbox/9703a.h
tml January, 2004
13
Browsers Share Statistics
The Most Popular Browsers On The Web
Reference w3school.com, July, 2005.
14
Web-safe vs. Millions Of Colors
Color Depth Stats
Reference thecounter.com, July, 2005.
15
How Much Real Estate Is Available?
The Most Popular Screen Resolutions On The Web In
The World
Reference w3schools.com, June, 2005.
16
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?

17
What Determines Success?

• Developing and Recording Measurable Outcome Goals
• This Project Is Successful If
• Users Buy Product
• Users Contact Artist For Custom Work/Orders
• Becomes A Trade Resource

18
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

19
Flow Of The Site Site Map Creation Step I

• Get The Client Involved
• Ask Client To Make Outline

20
Flow Of The Site Site Map Creation Step II

• Refining The Flow
• Post-It Notes Meeting With Client

21
Flow Of The Site Site Map Creation Step III

• Create Final Site Map - Blueprint

22
Giving Clients Strategic Options With Minimal Work

• The Sketch Phase Wireframing / Grid

23
Liquid Design Or Not?

• Creating Your Development Strategy
• Using A Combination Of Graphics And CSS For Look
  And Feel
• Static Layout Using Mostly Layers And Some Tables

24
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

25
Section II Design Creation

• Design Analysis And Strategy

26
Creating The Overall Look N- Feel As A Graphic

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

27
Looking At And Analyzing The Final Design

• What Will Be A Graphic And What Will Be HTML?

28
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

29
Web Graphic Types And Optimization

• The Corner Stone Of Fireworks
• Balancing Quality With k Size

30
.gif or .jpeg Which File Format Should I Use?
31
.gif Specifications

• Max 256 Colors
• One Transparency
• Can Be Animated
• Usually Used With Minimal Color Assets Such As
  Logos And Clip Art.

32
.jpeg Specifications

• Millions Of Colors
• Lossy Compression
• Usually Used With Photographs And Complex Visual
  Assets.

33
Optimization Methods Within Fireworks

• Wizard
• Image Preview
• Optimization Panel

34
Optimization With Fireworks Wizard
35
Optimization With Fireworks Image Preview
36
Optimization With Fireworks Preview And Optimize
Panel
37
Saving Settings For Batch Process

• Redundant Optimization Tasks

38
Batch Process Using Saved Optimization Presets
39
Exercise 4 Optimize Graphics For Project

• Objectives
• Optimize Featured Item Using Optimize Panel And
  Preview
• Do A Batch Process On Secondary Item Images

40
Converting The Graphic Into A Webpage

• The Plan Is Created Converting Concept To HTML

41
Using Graphic As Blueprint For Development

• Dreamweavers Tracing Image

42
Waiting For A Graphic To Be Developed?

• Use An Image Placeholder And Continue Working

43
Creating Navigation Buttons In Fireworks
44
Converting Graphic to Symbol
45
Creating States Of The Button Symbol
46
Creating Rollover Buttons For Navigation
47
Add A Pop-up Menu
48
Exporting The Navigation Elements From Fireworks
To Put Into Dreamweaver
49
Inserting Navigation From Fireworks Into
Dreamweaver
50
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

51
Section III Design Corrections

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

52
You Dont Need To Leave Dreamweaver To Make
Common Edits To Graphics

• Instead Use The Integrated Graphics Tool

53
Replacing The Placeholder Graphic

• Creating the graphic in Fireworks using roundtrip
  editing

54
Creating A Graphic To Replace Placeholder
55
Using Roundtrip Editing Feature

• Fluid Transition Between The Two Products

56
Exercise 6 Edits Made Easy

• Objectives
• Optimizing Image From Within Dreamweaver
• Create A Graphic To Replace Placeholder
• Making Edits To Navigation Bar

57
Section IV Project Completion

• How To Work Within In A Team Or Alone -
• The End Is Near

58
Maintaining Projects

• Collaborative Use Of Check-In/Check Out
• From Within Both Dreamweaver And Fireworks
• Shared Site Updates Through FTP

59
Summary

• Review of Talk
• Questions

60
Thank You.
Ideas in motion.