1. Modifying and Optimizing Web Graphics Holly Quarzo Ideas in motion.

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

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.  Determining Who Is Your Lowest Common Denominator User –Response Time –Browsers –Color Specifications –Screen Resolution Know Your User: Defining Your Target Audience

11. Webpage Response Times * Reference: http://www.useit.com/papers/responsetime.htmlhttp://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.

12. User Internet Connection Speed * Reference: http://www.useit.com/alertbox/9703a.html January, 2004http://www.useit.com/alertbox/9703a.html Still Mostly Slow  38% of home users were on "broadband"  62% were still on dial-up

13. Browsers Share Statistics * Reference: w3school.com, July, 2005.w3school.com The Most Popular Browsers On The Web

14. Web-safe vs. Millions Of Colors Color Depth Stats * Reference: thecounter.com, July, 2005.thecounter.com

15. How Much Real Estate Is Available? * Reference: w3schools.com, June, 2005.w3schools.com The Most Popular Screen Resolutions On The Web In The World

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: 1.Users Buy Product 2.Users Contact Artist For Custom Work/Orders 3.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.  The “Sketch” Phase – Wireframing / Grid Giving Clients Strategic Options With Minimal Work

23.  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?

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  Dreamweaver’s 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 Don’t 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. Ideas in motion. Thank You.