Modifying and Optimizing Web Graphics Holly Quarzo Ideas in motion.
-
Upload
darrell-wilson -
Category
Documents
-
view
215 -
download
0
Transcript of Modifying and Optimizing Web Graphics Holly Quarzo Ideas in motion.
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.