Mastering Fireworks

© 2013 Smashing Media GmbH, Freiburg, Germany ISBN: 978-3-943075-49-6 (Version 2: April 2013) Cover Design: Ricardo Gimenes PR & Press: Stephan Poppe eBook Strategy and Editing: Vitaly Friedman Technical Editing: Cosima Mielke Planning and Quality Control: Vitaly Friedman, Iris Lješnjanin Tools: Elja Friedman. Syntax Highlighting: Prism by Lea Verou. Idea & Concept: Smashing Media GmbH With an interface similar to other creative softwares from Adobe, Fireworks allows Web Designers to create interfaces and prototypes for their websites. It's especially helpful to see whether your application works properly before moving onto the development stage. This eBook will show you what can be achieved with Adobe Fireworks; such as creating interactive prototypes, time savers, parent libraries and extracting logos. You might even rethink your workflow after having finished this reading. TABLE OF CONTENTS - The Power of Adobe Fireworks: What Can You Achieve With It? - Developing A Design Workflow In Adobe Fireworks - Refining Your Design In Adobe Fireworks - Interactive Prototypes And Time-Savers With Adobe Fireworks - Create Interactive Prototypes With Adobe Fireworks - Simulating The Letterpress: From Live Filters In Fireworks To CSS Code - Extracting Logos Using Levels In Adobe Fireworks - Creating a Pattern Library with Evernote and Fireworks - Create Demo: An Easy Way to Present Adobe Fireworks Design Prototypes Imprint 2 About This Book 2 Table of Contents 2 The Power of Adobe Fireworks: What Can You Achieve With It? 3 What Exactly Is Fireworks? 3 What is it? 4 What is it good for? 4 Export features 4 Formats support 5 Highly extensible 5 The Showcase Of Fireworks Illustrations 5 1. David Hogue 6 Golden Compass illustration 6 Quartz Watches illustration 7 2. Matthew Inman 7 15 Things Worth Knowing About Coffee 8 20 Things Worth Knowing About Beer 9 How a Web Design Goes Straight to Hell 10 Why working at home is both awesome and horrible 11 Duck in Coffee illustration 12 3. Ryan Hicks 12 XD Brownbag Poster series 13 XD Lunchbox poster 14 XD Beet poster 15 XD Mackerel poster 15 XD Salad poster 16 XD Brownbag poster 16 4. Rogie King 17 rogieking.com personal site illustrations 17 Logo for rainboxx.de 18 Mad Mimi Illustrations 19 Adaptive UI icons 21 5. Xiao Cai 22 DCP2 Fireworks illustration 23 DCP3 Fireworks illustration 24 DCP4 Fireworks illustration 24 DCP8 Fireworks illustration 26 6. Jon Hicks 26 Mozilla Firefox logo 27 7. Fabio Sasso 29 Apple Air banner 30 Light Effects illustration 30 The Abduzeetles Rockband website design 31 8. Lucian Dragomir 31 Vectorizer illustration 32 Anger Management illustration 33 iCry illustration 34 TakeOFF illustration 34 9. Fred Michel 35 Porsche Carrera illustration 35 Cadillac illustration 36 Mercedes SLA concept car illustration 36 VW Tiguan illustration 37 10. Mikko Vartio 37 Bears illustration 38 Sealife illustration 38 Longboard illustration 39 Surprise illustration 39 Darth Android illustration 40 Magic Mushroom illustration 41 11. Angelo Sabal 41 Colt gun illustration 42 Candle illustration 43 Dragon shield illustration 44 Iron Man 2 helmet illustration 45 12. Craig Erskine 45 Mac Mini illustration 46 Apple remotes illustration 46 13. Pete Lacey 47 Fireworks icons 47 14. David Brooks 47 Camera-Phone illustration 48 Northward Compass website illustration 48 15. Tomas Gajar 49 DigitalLabs website design 49 Beck’s design concept 50 SofaSurfer website design 51 16. Vincent Tremblay 51 Neos Carbon 2 logo prototype (neOS Sapphire logo) 52 iCompanion logo prototype (iTunes Companion logo) 53 17. José Rivera 53 Twitter icons 54 The iPhone, in Fireworks PNG (.fw.png) format 55 18. Nick Isenberg 56 Spiral Notebooks illustration 56 Le Petit Porcelet illustration 57 Safari Dock icon 58 19. Adobe CS5 Branding 58 The Adobe CS5 branding 59 The Adobe CS5 branding — the icons 60 The Adobe CS5 branding — the splash screens 61 So, how good is Fireworks for Web design? 62 Conclusion 63 Adobe Photoshop CS5 splash screen 64 Developing A Design Workflow In Adobe Fireworks 66 Sketches 67 High-Fidelity Sketching 68 Sharpie and a Big Pad of Paper 69 Whiteboard and a Camera 70 Sketch in Adobe Fireworks 71 Wireframing 73 Thinking in Patterns 73 Creating Pages 73 Creating and Using Symbols 75 Graphic Comps 76 Vectors and Bitmaps 76 Layers, Sub-layers, Groups 78 Property Inspector Panel 78 Applying (Live) Filters 79 Exporting 80 Defining Slices 80 Exporting Defaults 82 Exporting Options 83 Try It Out 84 Further Reading And Resources 84 Refining Your Design In Adobe Fireworks 86 Improve Fine Strokes 86 Draw Better Triangles 90 Draw Better Ellipses 94 Fillet Points 95 Inset Paths 97 Gradient Dither 99 Avoid Large Shadows 101 Practical Examples 104 Conclusion 107 Further Reading 107 Interactive Prototypes And Time-Savers With Adobe Fireworks 109 Prototyping In Code Vs. Prototyping In Fireworks 110 PNG, Pages, Master Pages 110 Pages (and PNG) 110 Master Page 112 Select Behind Tool, Subselection Tool, Symbols 112 Select Behind Tool 112 Subselection Tool 113 Symbols 114 How To Create Interactive Prototypes 114 Image Maps and Hotspots 114 Manipulating Hotspots 116 Export the Prototype 117 Fireworks Pages: What Is Their Limit? 118 Handling a Fireworks PNG Document With Many Pages 118 Pages Under Control: Splitting a Complex PNG File 119 Symbols 121 Reusability of Symbols 121 9-Slice Scaling Guides 122 Download A Sample Fireworks PNG File 124 Further Reading 126 Create Interactive Prototypes With Adobe Fireworks 127 What Is A Prototype, And Why Should I Use One? 127 What Is A Click-Through Prototype? 128 HTML Prototypes 128 (Interactive) PDF Files 129 Advantages Of Prototyping 129 How To Impress Your Client 130 How To Create Click-Through Prototypes In Fireworks 130 Pages and Master Pages 130 States 132 Slices and Hotspots 133 Linking Pages 135 Add Real Interactivity To Your Prototype 136 Embed Google Maps 137 Embed Video 139 Embed Flash Animation And More 139 Export The Click-Through HTML Prototype For Review 139 A Couple Of Live Demos 140 A Word On The New Mobile Web And Fireworks 141 Acting On Client Feedback 141 Further Reading 142 Simulating The Letterpress: From Live Filters In Fireworks To CSS Code 143 What Is Letterpress? 143 Why Not Just Use Bevel or Emboss? 144 Letterpress Text In Fireworks 145 Embossed Text 146 Impressed Text 147 Save as Style for Reuse 148 Translating Into CSS 151 Option 1: Translate the Values of the Live Filters Manually 151 Option 2: Use the CSS Properties Panel in Fireworks CS6 153 Tips on Using the Letterpress Effect 156 Examples 156 Downloads 159 Extracting Logos Using Levels In Adobe Fireworks 160 Let’s Begin! 160 Step 1: Breakdown 162 Step 2: Desaturate 164 A Note on Filters 164 Step 3: Levels 165 Step 4: Alpha Transparency 168 Step 5: Recolor 169 Step 6: Convert To Symbol 171 Taking It Further 173 Creating A Pattern Library With Evernote And Fireworks 174 Patterns With Benefits 175 If They’re So Great, Why Don’t You Marry Them? 175 Evernote + Fireworks = Winning Combination 176 (Unique) Fireworks Features 176 Organization 177 Syncing and Accessibility 177 Pattern Recognition 177 Patterns vs. Components 178 The Library In Action 180 Drag, Drop And Roll 181 One Final Note(book) 182 Further Reading 183 Create Demo: An Easy Way To Present Adobe Fireworks Design Prototypes 184 Overview 184 Why Is It Needed? 184 A Bit Of Background 184 Installation And Requirements 185 Supported Browsers and Platforms 187 How Much Does the Extension Cost? 187 Create Demo: How To Use It 188 Basic Use 188 A Note on Locations (for Exported Presentations) 191 Practical Examples 192 Touch, Keyboard Keys and Mouse 194 Create Demo: In More Detail 194 How It Works 194 Adapts to the Device 195 iOS Application Mode 196 Known Issues 196 Download A Fireworks PNG Template For iOS 197 Quick Demo 198 Conclusion 198 About The Authors 200 André Reinegger 200 Benjamin De Cock 200 Craig Lawson 200 Jose Olarte 200 Joshua Bullock 201 Kris Niles 201 Michel Bozgounov 201 Trevor Kay 201 About Smashing Magazine 202 About Smashing Media GmbH 202 © 2013 Smashing Media GmbH, Freiburg, Germany ISBN: 978-3-943075-49-6 (Version 2: April 2013) __Cover Design: Ricardo GimenesPR & Press: Stephan PoppeeBook Strategy and Editing: Vitaly FriedmanTechnical Editing: Cosima MielkePlanning and Quality Control: Vitaly Friedman, Iris Lješnjanin Tools: Elja Friedman. Syntax Highlighting: Prism by Lea Verou. Idea & Concept: Smashing Media GmbH__ With an interface similar to other creative softwares from Adobe, Fireworks allows Web Designers to create interfaces and prototypes for their websites. It's especially helpful to see whether your application works properly before moving onto the development stage. This eBook will show you what can be achieved with Adobe Fireworks; such as creating interactive prototypes, time savers, parent libraries and extracting logos. You might even rethink your workflow after having finished this reading. **TABLE OF CONTENTS** - The Power of Adobe Fireworks: What Can You Achieve With It?- Developing A Design Workflow In Adobe Fireworks- Refining Your Design In Adobe Fireworks- Interactive Prototypes And Time-Savers With Adobe Fireworks- Create Interactive Prototypes With Adobe Fireworks- Simulating The Letterpress: From Live Filters In Fireworks To CSS Code- Extracting Logos Using Levels In Adobe Fireworks- Creating a Pattern Library with Evernote and Fireworks - Create Demo: An Easy Way to Present Adobe Fireworks Design Prototypes