Contents

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