UI Design With Adobe® Illustrator® ·Discover the Ease and Power of Using Illustrator to Design Web Sites and Apps (Dylan Evers' Library) by Moore, Rick -- Read -- Imperial Library of Trantor

Index

Introduction 1 UI Design with Adobe Illustrator: An Overview

It’s All About the Vector Typography + Color = Power Typography for UI Design Powerful Tools for Color Design for Consistency Layouts with Precision Conclusion

2 Tools and Panels

Choosing Your Tools Selection Tools Selection Tool (V) Direct Selection Tool (A) Group Selection Tool Magic Wand Tool (Y) Lasso Tool (Q) Drawing Pen Tool (P) Lines and Shapes Typography Type Tool (T) Transformation Tools Reflect Tool (O) Free Transform Tool (E) Color Gradient Tool (G) Eyedropper Tool (I) Fill and Stroke Workspace Tools Modes Drawing Modes Screen Modes Panels The Control Panel Expanding and Collapsing Panels Workspaces Using a Custom Workspace Conclusion

3 The Illustrator Workspace

Go from Print to Pixels Choosing the Right Units Optimizing the Color Space Application Frame Working with Artboards Opening a New Document Creating Artboards Organizing Artboards Conclusion

4 UI Design Building Blocks

Guides Objectified Creating Guides Making Guides from Objects Using Alignment Tools Smart Guides Alignment Guides Anchor/Path Labels Object Highlighting Measurement Labels Transform Tools Construction Guides Grids Made Easy Creating a Grid Making the Gridlines Fit Applying the Grid to Multiple Artboards Achieving Pixel Precision Pixel Preview Mode Aligning Objects to the Pixel Grid Coordinates and Reference Points Beginning the Layout Typography for the UI Looking Good on the Screen Typesetting Basics Adding the Final Headline Conclusion

5 Getting Stylish with Graphics

Adding Style to Appearances Using the Appearance Panel Stacking Appearance Attributes Creating and Editing Graphic Styles Using Symbols Creating a Symbol Working with Symbols Going Off the Pixel Grid Creating an Application Logo Enhancing the Hierarchy Using Layers for Organization The Layers Panel Display Options Creating Layers Moving Objects Between Layers Tightening Up the Layout Conclusion

6 Finishing Touches

Taking Appearances to the Next Level Illustrator and Photoshop Effects Adding Old-School Style to the Page Header Additive Styles Additional Type Techniques Getting Text into Illustrator Area Type Options Simulating Floats Using Find and Replace Working with Images Preparing Images for Import Importing Images Conclusion

7 Working Smarter

UI Design Planning Creating a Site Map Creating Wireframes Communicate Your Design Intentions Visualizing Interactions with Storyboards Adding Notes Style Libraries Create Color Schemes Portable Colors, Symbols, and Styles Templates Getting Your Work Out of Illustrator Presentation Mode Exporting to Other Formats Saving PDFs Save for Web Conclusion

Index