UI Design with Adobe Illustrator : Discover the Ease and Power of Using Illustrator to Design Web Sites and Apps

Create high fidelity prototypes for complex websites and applications with the easy-to-learn and super-efficient vector capabilities of Illustrator and make the fear of client changes a thing of the past. Whether you're a seasoned Photoshop veteran, a budding designer, or someone who simply has a good eye and artistic vision, this book will show you how to produce mockups and UI elements in a creative and productive way. Strongly of the opinion that design should not happen solely in a browser, Rick Moore demonstrates how to design mockups and UI elements with Illustrator in a way you may not have realized was possible. Learn which tools are best suited to a UI design workflow and how to customize Illustrator in a way that fits your style and flow. Rick provides expert guidance throughout the process from the initial planning stages to finalizing and sharing your work with clients and others. MuPDF error: syntax error: invalid key in dict MuPDF error: syntax error: invalid key in dict MuPDF error: syntax error: invalid key in dict MuPDF error: syntax error: invalid key in dict MuPDF error: syntax error: invalid key in dict MuPDF error: syntax error: invalid key in dict MuPDF error: syntax error: invalid key in dict MuPDF error: syntax error: invalid key in dict MuPDF error: syntax error: invalid key in dict Contents 6 Introduction 9 1 UI Design with Adobe Illustrator: An Overview 16 It’s All About the Vector 17 Typography + Color = Power 19 Typography for UI Design 19 Powerful Tools for Color 21 Design for Consistency 22 Layouts with Precision 25 Conclusion 26 2 Tools and Panels 28 Choosing Your Tools 29 Selection Tools 31 Selection Tool (V) 31 Direct Selection Tool (A) 32 Group Selection Tool 33 Magic Wand Tool (Y) 33 Lasso Tool (Q) 34 Drawing 35 Pen Tool (P) 35 Lines and Shapes 38 Typography 40 Type Tool (T) 40 Transformation Tools 41 Reflect Tool (O) 41 Free Transform Tool (E) 41 Color 42 Gradient Tool (G) 42 Eyedropper Tool (I) 44 Fill and Stroke 44 Workspace Tools 45 Modes 46 Drawing Modes 46 Screen Modes 47 Panels 49 The Control Panel 49 Expanding and Collapsing Panels 50 Workspaces 53 Using a Custom Workspace 53 Conclusion 56 3 The Illustrator Workspace 58 Go from Print to Pixels 59 Choosing the Right Units 59 Optimizing the Color Space 59 Application Frame 60 Working with Artboards 62 Opening a New Document 64 Creating Artboards 66 Organizing Artboards 72 Conclusion 78 4 UI Design Building Blocks 80 Guides objectified 81 Creating Guides 82 Making Guides from Objects 83 Using Alignment Tools 84 Smart Guides 86 Alignment Guides 87 Anchor/Path Labels 87 Object Highlighting 87 Measurement Labels 88 Transform Tools 88 Construction Guides 88 Grids Made Easy 89 Creating a Grid 90 Making the Gridlines Fit 93 Applying the Grid to Multiple Artboards 94 Achieving Pixel Precision 95 Pixel Preview Mode 96 Aligning Objects to the Pixel Grid 97 Coordinates and Reference Points 100 Beginning the Layout 103 Typography for the UI 108 Looking Good on the Screen 108 Typesetting Basics 111 Adding the Final Headline 114 Conclusion 118 5 Getting Stylish with Graphics 120 Adding Style to Appearances 121 Using the Appearance Panel 121 Stacking Appearance Attributes 124 Creating and Editing Graphic Styles 132 Using Symbols 134 Creating a Symbol 135 Working with Symbols 136 Going off the Pixel Grid 142 Creating an Application Logo 142 Enhancing the Hierarchy 144 Using Layers for organization 145 The Layers Panel 145 Display Options 148 Creating Layers 149 Moving Objects Between Layers 150 Tightening Up the Layout 153 Conclusion 154 6 Finishing Touches 156 Taking Appearances to the Next Level 157 Illustrator and Photoshop Effects 157 Adding Old-School Style to the Page Header 164 Additive Styles 173 Additional Type Techniques 177 Getting Text into Illustrator 177 Area Type Options 179 Simulating Floats 181 Using Find and Replace 184 Working with Images 186 Preparing Images for Import 187 Importing Images 188 Conclusion 192 7 Working Smarter 194 UI Design Planning 195 Creating a Site Map 196 Creating Wireframes 202 Communicate Your Design Intentions 205 Visualizing Interactions with Storyboards 205 Adding Notes 214 Style Libraries 221 Create Color Schemes 222 Portable Colors, Symbols, and Styles 226 Templates 227 Getting Your Work out of Illustrator 232 Presentation Mode 232 Exporting to Other Formats 235 Saving PDFs 236 Save for Web 237 Conclusion 240 Index 241 A 241 B 242 C 242 D 243 E 244 F 245 G 245 H 245 I 246 J 246 K 246 L 247 M 248 N 248 O 248 P 249 R 250 S 251 T 252 U 253 V 254 W 254 Z 256 < > Introduction Why Did I Choose Illustrator? An Air of Familiarity Let's Get Started! Ch 1 UI Design with Adobe Illustrator: An Overview It's All About the Vector Typography + Color = Power Design for Consistency Layouts with Precision Conclusion Ch 2 Tools and Panels Choosing Your Tools Selection Tools Drawing Typography Transformation Tools Color Workspace Tools Modes Panels Workspaces Conclusion Ch 3 The Illustrator Workspace Going From Print to Pixels Working With Artboards Organizing Artboards Conclusion Ch 4 UI Design Building Blocks Guides Objectified Smart Guides Grids Made Easy Achieving Pixel Precision Beginning the Layout Typography for the UI Conclusion Ch 5 Getting Stylish with Graphics Adding Style to Appearances Using Symbols Going Off the Pixel Grid Using Layers for Organization Conclusion Ch 6 Finishing Touches Taking Appearances to the Next Level Additional Type Techniques Working with Images Conclusion Ch 7 Working Smarter UI Design Planning Communicate Your Design Intentions Style Libraries Getting Your Work Out of Illustrator Conclusion "Discover the ease and power of using Illustrator to design web sites and apps"--Cover. - Includes index. - Description based on print version record