UI Design with Adobe Illustrator: Discover the ease and power of using Illustrator to design Web sites and apps by Rick Moore, PDF, EPUB, 0321833856

UI Design with Adobe Illustrator: Discover the ease and power of using Illustrator to design Web sites and apps by Rick Moore

  • Print Length: 256 Pages
  • Publisher: Adobe Press
  • Publication Date: August 9, 2012
  • Language: English
  • ASIN: B008OHWK5Y
  • ISBN-10: 0321833856
  • ISBN-13: 978-0321833853
  • File Format: PDF, EPUB

 

”Preview”

Acknowledgments

Writing a technical book is crazy hard, and this adventure would not have been possible without the help of so many people. First, thanks to my wife, Shelley, for her encouragement, support, understanding, and love as I undertook this wild endeavor. I could never have done this without you. Thanks to my daughters, Cali and Carice, for being patient while Dad was holed up in his office banging away at a keyboard for six months. Let’s go play now!

Huge thanks go to Denise Jacobs for tons of helpful advice and for putting me in touch with the right people to make this a reality. I never could have gotten it started without your help. Thanks to Victor Gavenda who got the ball rolling. Thanks to my superstar editor, Nancy Peterson, and her team, Stephen Nathans-Kelly and Darren Meiss, for all the time and effort spent bringing my words to life and making me sound like I know what the heck I’m talking about. Thanks to my tech editor, Tom Johnson, for methodically checking and questioning my instructions so that they make sense to you, the reader. Finally, thanks to Mimi Heft, Danielle Foster, and all the other production people working behind the scenes to make this book look great.

Thanks to all of my coworkers, friends, and professionals who provided ideas, feedback, and support before, during, and after the process: Colt Pini, Nic Johnson, Kaleb Tracy, Juna Duncan, Albert Candari, Jared Lewandowski, Ty Hatch, Michelle Barber, Clifton Labrum, David Lindes, Cameron Moll, and Khoi Vinh.

Thanks to my mentors who helped me immensely as I started my journey into the world of user experience: Gilbert Lee, John Dilworth, Rob Thomas, Todd Ericksen, and the entire NorthTemple team. You guys rock. I miss the old days.

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

Introduction

UI Design with Adobe Illustrator

I realize right off the bat that I am going to date myself here. I began my career as a graphic designer when the web was still in its infancy. I learned paste-up techniques and created marker comps before I ever knew that same stuff could be done faster on a computer. Once I got out of school, it became apparent very quickly that those skills, while useful, were pretty much obsolete. To get with the times, I bought myself the only computer I could afford at the time, a shiny new Wintel PC, added a copy of CorelDraw, and started down the path of digital graphic design. Little did I know that many years later my print skills would rarely be put into use. Right around that same time, I got an Earthlink account and started a web page on Geocities as a playground for learning HTML, which at the time was nothing more than a curiosity.

A Web Start

I bought my first Mac in 1998, then designed and built my first client website that same year (I.A). I used Photoshop to mock up the pages and slice up the graphics for a (gasp) table-based layout. Dreamweaver was utilized to write the markup. I remember the joy I experienced watching that first site come to life, as crude and unrefined as it was compared to what is possible today. In the many years since that first site, I have tried to hone my workflow to be the most efficient it could be, but have always struggled in finding a way that felt as fast as it was creative.

I.A. My very first client website courtesy of the Wayback Machine (www.archive.org/web/web.php). There used to be images there…really.

In recent years, my career has shifted into the field of interaction design and user interface design. All the skills I learned as a graphic and web designer were taken to a whole new level while creating UIs for web applications and mobile devices. Like many in my profession, I used Photoshop daily to complete my design tasks. I loved the program for its ability to create pixel-perfect mockups. The thing I liked least about it was its lack of flexibility in performing said task. I did have another tool in my design quiver that I used often, but mostly as a supplement to Photoshop. That application was Adobe Illustrator, which I loved for its speed and its vector-drawing chops. I tried through several versions to use it for mocking up web pages and application UIs, only to end up getting no further than wireframes and ultimately reverting back to Photoshop to finish the job.

Then something marvelous happened. In early 2010, Adobe released Illustrator CS5 with some pretty spiffy pixel-related features. Despite the problems I’d had previously and after some hesitation in upgrading, I decided to give it a go. And wouldn’t you know it, the stars aligned and I was able to move my workflow to this tool without looking back. With the latest version, CS6, I have been able to become even faster and more efficient without ever hampering my creativity.

Who Needs This Book?

You might be a seasoned veteran and a Photoshop ninja, a budding designer fresh out of school, or someone with a good eye that needs help realizing their artistic vision. Whatever your background, this book aims to show you how to produce high-fidelity mockups in an extremely fast and efficient way. Although it covers some drawing techniques and tips for UI element creation, this is not a book that goes into great depth on how to create illustrative design. It’s more focused on how to fit the pieces of your design together into a cohesive structure in order to craft the experience. Readers of any experience level will be able to find useful information.

* * *

Note

Notes are used throughout the book to alert you to important things to look for as you use an Illustrator tool or feature.

* * *

* * *

Tip

Tips provide you with additional information or techniques.

* * *

Today’s websites and applications are so much different than they were when I started in the industry. For the web, HTML5 and CSS3 reduce the need for tons of graphics, and responsive design allows for those sites to adapt to the context of the device being used for browsing. I am firmly in the camp that in order to be a great designer, you need to know how to code what you design. It’s important to understand how to design for the screen—no matter the size—and understanding the code helps you do just that. It’s nothing like designing for the printed page. That being said, I don’t follow the crowd that believes design should happen solely in a browser. For me, it happens more quickly on paper first and then in Illustrator. The techniques I cover in this book have made me faster at trying different ideas for a design before I mark them up or send them to development.

* * *

Sidebars

Look in the sidebars to find information that more thoroughly explains a tool or feature, as well as the explanation of more advanced concepts.

* * *

An Air of Familiarity

If you have experience with Photoshop or InDesign, many of the concepts in Illustrator will seem very familiar. That’s by design. Most of the apps in the Adobe Creative Suite share user interface conventions so they’ll play well with each other (I.B), which makes the Illustrator learning curve much shorter. If you have never used any Adobe apps, all is not lost. You’ll find the learning curve, while somewhat steep, fun to tackle and relatively easy to master. Like anything else, it’s all about practice and patience. Once you get used to Illustrator, you’ll have a hard time wondering why you never used it for web or app design before.

I.B. Photoshop and Illustrator look and feel very similar. That helps a lot when it comes to learning a new tool.

By the way, I am a keyboard-shortcut junkie. As they say, you learn by repetition, so I will repeat keyboard shortcuts throughout the book so that they will be easy to learn and remember. I really dislike choosing commands from menus. If you get nothing else from this book than a head full of keystrokes, you will have gotten your money’s worth. That being said, I’ll be sure to provide a couple different ways to do something and let you decide which works best for you. (Hopefully it’s the shortcut route. Hint hint.)

Let’s Get Started!

As a designer, I’ve used Illustrator for creating illustrations and designing logos for the majority of my career. Coming from using other applications for web design, though, is where I had to “unlearn” many of the habits I developed during those years. If you have never used Illustrator before, you may have an easier time getting settled in. As you open the program for the first time, you may be a little uneasy. The interface is fairly utilitarian and can be daunting at first. You may be looking at the tools, panels, and a big blank screen thinking, “Where do I even start?”

All of this power helps create a flexible workflow that works for you, rather than forces you to conform to the app. Illustrator is fairly customizable, so you can arrange panels, tools, and menus to suit your style and flow. Because of its object-based nature, it’s easy to change your mind or experiment without fear.

I learn by doing, so this book teaches you how to use the tools in the creation of one screen of a UI mockup. Be sure to save your work as you go through the process. However, if you forget, you can download each stage of the mockup, as well as other helpful examples, by going to www.peachpit.com/UIwithAI. So, sit back, grab something refreshing to sip, and let creativity flow as you discover how to use Illustrator to realize your creative vision.

1. UI Design with Adobe Illustrator: An Overview

Chapter Overview

There are a lot of options on the market today for creating UI mockups and prototypes. They come with varying degrees of difficulty and a staggering range of features. One might say it’s as hard to choose a mockup tool as it is to pick a computer platform.

Throughout my career, I have used several of these tools and have come to rely on Adobe Illustrator for my day-to-day work. It’s loaded with features for professional UI design and is relatively easy to use. In this first chapter, you’ll get a brief overview of some of the features that make Illustrator the perfect tool for creating high-fidelity mockups for your sites and apps:

• Vector-based drawing environment for flexibility

• Excellent color and typography tools

• Tools to help achieve design consistency

• Pixel-precise layouts

Let’s dig in!

It’s All About the Vector

Adobe Illustrator is a vector-based application. That means it uses mathematical expressions to draw points, lines, curves, and shapes on the screen to create graphics. In this way, Illustrator differs from a raster-based application like Photoshop that draws these same graphics with individual pixels. Vectors are inherently faster because computer processors can execute math instructions a lot faster than they can draw pixels.

The benefits for Illustrator users are many. To start, Illustrator just feels fast. Complex documents don’t bog down your system and keep you from getting work done. Whether you’re creating highly detailed UI mockups or simple wireframes, Illustrator chugs along without skipping a beat. Second, files don’t consume as much storage space, allowing you to store more documents on your drive.

For example, the Illustrator file for a typical application screen mockup (1.1) weighs in at 883 KB. The same design saved as a layered Photoshop document is a hefty 4.4 MB. Add multiple screens or states into the Photoshop file and the size begins to increase exponentially. That may seem like a small file in comparison to high-resolution photos, but when you start to generate a lot of project files, it adds up quickly.

1.1. A typical application screen mockup has a much smaller file size in Illustrator. This entire design is less than a megabyte, even with photos.

Third, vector graphics are scalable. For example, a design element created in Illustrator using vector shapes can be resized larger or smaller without affecting the quality of the graphic. Edges are always crisp, because all the computer has to do is redo the math to accommodate whatever change in size you made (1.2 and 1.3). It allows you to be more creative and spontaneous, because it frees you from having to think about the technical aspect of what you’re creating. Let fear of client changes be a thing of the past.

1.2. Vectors produce smooth edges that stay smooth when resized (shown here at 300% zoom).

1.3. Raster images pixelate when resized (shown here at 300% zoom).

Finally, Illustrator is very stable; I rarely experience crashes that steal away half a day’s work like I did with my old Photoshop work-flow. Notice that I didn’t say never. Like any other software application on a computer bogged down with lots of activity, Illustrator is susceptible to scream-inducing crashes. You should really get in the habit of saving early and often. I’ve learned by sad experience that time still sometimes gets the better of me. I’ll go an hour before saving my progress—that seems to be when crashes happen most. Murphy’s Law, I guess.

Typography + Color = Power

1.4 This screen design uses color and typography to create a visual hierarchy.

Typography and color theory are important principles of design. Adhering to or ignoring these principles can make or break the message or feeling you’re trying to convey to your users. Illustrator’s type and color tools help you to get that user-experience vision out of your head and onto the screen.

Typography for UI Design

If the content of your app delivers the experience you’re trying to create, then good typography reinforces the voice of that experience. To help to achieve this synergy, Illustrator is stocked with professional-level typography tools (1.5). Truth be told, it’s been one of Illustrator’s strengths for a long time, but was made even better for UI design with the recent addition of anti-aliasing options.

1.5. A bevy of typography tools gives users the power to create professional results.

Anti-aliasing adjusts how type looks on the screen by slightly blurring curved edges of letters to make them look as smooth as possible (1.6). Starting with Illustrator CS5, Adobe added additional anti-aliasing options from Photoshop. These new options allow you to more accurately simulate how type will render on your target devices. It’s not 100% perfect, but it gets the job done.

1.6. Anti-aliasing smoothes the curved edges of a typeface to help it look better on-screen.

Illustrator’s flexible typesetting and extensive formatting tools give you tremendous agility when setting type. Character and Paragraph styles make formatting loads of text quick and easy. The Glyphs panel gives you access to any character in a typeface—no more hunting around the keyboard trying to find alternate characters, ornaments, or symbols. You can also wrap text around graphics in order to simulate browser floats in your design.

Powerful Tools for Color

Choosing the right color is fundamental to establishing a visual hierarchy and evoking emotion. Often, color speaks to your users in ways that content can’t. Whether your design vision calls for a simple two-color palette or a complex system of color, Illustrator provides the tools you need to realize your vision.

Illustrator’s color tools help you create the perfect color schemes and color any object with ease (1.7). There are several ways to apply color to your designs, allowing for maximum flexibility in your workflow. You can choose to use the default color swatches or go and make your own by mixing colors from one of several color models. Creating custom gradients is a cinch, and you can create and interact with them in a panel or directly on the object.

1.7. Get the right color for your project with Illustrator’s extensive color tools.

If, like me, you’re one of the many designers who sometimes struggle with choosing the right colors, Illustrator can help you immensely with color harmony tools that take the guesswork out of color theory. With the Color Guide panel, you’ll be able to build palettes using any of the standard color harmony rules and then vary your swatches based on included swatch libraries. You can even use Adobe’s fantastic color inspiration tool, Kuler, right inside Illustrator.

Design for Consistency

One of the most time-consuming things to deal with in UI design is making sure that your design is consistent. Consistency is an extremely important attribute of great design. However, once you start working with multiple screens across several documents, keeping things consistent can become quite a chore. Illustrator addresses this need with several tools to help make the job easier.

For type, Illustrator’s Paragraph and Character styles enable you to format text with a click (1.8). Gone are the days of trying to remember what font size you used on a headline, or what the leading value was for a standard bloc of body copy. Save these values in a style that can be used over and over again, just like you would with a word processor or page-layout app. You can also load them from one document into another so that you can maintain consistent typography as you begin to work with multiple documents.

1.8. Using Character styles allows for one-click text formatting

You’ll find it easy to design complete color schemes and combine the swatches together into portable swatch groups (1.9). These groups can be named and loaded into documents whenever you need them. This keeps you from having colors deviate between documents, creating inconsistencies that are a pain to fix.

1.9. You can save color swatches in groups to create different color schemes.

Illustrator keeps track of how objects look with the Appearance panel. An appearance is a group of attributes that include an object’s fill, stroke, transparency, and effects. You can style objects with ease using the Appearance panel and then save the appearance attributes as a graphic style. This graphic style can then be applied to other objects with one click (1.10). This automates the repetition of styling across similar elements, reducing time and effort to achieve consistency.

1.10. Complex designs saved as a graphic style can be applied to other objects in one click.

Design elements can be repeated easily using symbols. A symbol is an object that can be reused multiple times (1.11). In a document, a symbol can have multiple instances that are based on the original symbol. Where this helps with consistency is that if the original object changes, all the instances are automatically updated to reflect the changes. Conversely, symbols can be resized without affecting the original.

1.11. A symbol is an object that can be reused multiple times.

Another feature that enables consistency is the ability to create a template. You’ll be able to save document settings, color schemes, graphic styles, character and paragraph styles, and symbols into the template and save it as a separate file. You can then use this template to create a new document that contains everything you need to get started.

Finally, you can “componentize” certain design elements by saving them as separate files and then importing them into a document. This feature is awesome if you work regularly with an interface design that spans multiple documents. When you import a file, it creates a link to the original. Any changes you make to the original file automatically updates all documents that contain an imported copy.

Layouts with Precision

Illustrator provides you with an ultra-precise drawing and layout environment. Because vectors rely on math to plot the location of each point, putting objects right where you want them is really easy. The object-based drawing model makes each piece of your design accessible and changeable with relative ease. Selecting objects, moving them around, and resizing them happens with laser-like accuracy.

With excellent grid tools and guides, you’ll find that creating layouts can happen very quickly (1.12). You can create a layout grid (or even multiple grids) in seconds without relying on plug-ins. Smart Guides help you draw with precision, and extensive alignment tools mean you don’t have to eyeball where an element lines up with the grid or another object. A broad range of zoom options allows you to get up close and personal in order to work on the minute details. And that’s great because, as they say, the devil is in the details.

1.12. Creating grid systems is really easy with Illustrator.

Conclusion

This chapter skimmed the surface of what makes Illustrator a great tool for UI design. Illustrator is a feature-packed application with many tools designed to help you realize your creative vision.

In the next chapter, you’ll get a more indepth view of Illustrator’s tools and workspace. As you continue through the book, my goal is to give you enough knowledge to start using Illustrator right away to create beautiful user interfaces in your own projects.

2. Tools and Panels

Chapter Overview

In the previous chapter, you read a brief overview of the features that make Illustrator a great tool for UI design. In this chapter, we’ll take a look at the tools that actually help you get work done. The following topics will be covered:

• How to navigate the Tools panel and find the tools that are useful for UI design tasks

• How to configure and use Illustrator’s many panels

• How to use custom workspaces to tailor Illustrator’s user interface to the way you work

By the end of the chapter, you should have a basic working knowledge of the main features that Illustrator provides for UI design. Let’s begin by jumping right in to the tools.

Choosing Your Tools

Every good design application has a toolbox and, in that department, Illustrator is no slouch. I counted about 85 tools in the Tools panel. For a novice Illustrator user, that seems to be a pretty overwhelming amount of functionality to learn. This is the very reason why professional-grade applications like Illustrator have a relatively steep learning curve.

Thankfully, a UI designer will rarely, if ever, need to use all the tools in the Illustrator Tools panel (2.1).

2.1. The Illustrator Tools panel.

Let’s cut this huge number of tools down a bit by focusing on the ones that are optimal for UI design. The Tools panel is separated into groups, presumably by functionality or type. Within each of those groups, some tools with similar functions are grouped together under one button. These tool groups are signified with a small arrow in the lower-right corner of the button (2.2).

2.2. Click and hold buttons with this icon to reveal the other tools in their respective groups.

To access hidden tools:

1. Click and hold any button with a small arrow in the lower-right corner. The tool flyout menu appears (2.3).

2.3. An example of a tool flyout menu

2. To “tear off” the flyout from the main Tools panel, keep the mouse button held down and drag the pointer over the arrow to the right of the flyout and release the mouse button to detach these tools and create a floating tool panel (2.4).

2.4. Click the edge of the flyout to detach it from the Tools panel.

This is convenient if you are focusing on a certain area of your design and don’t want to take trips back and forth to the Tools panel. It’s also great if you’re using one of the hidden tools exclusively.

3. These extra tool panels stay open until you close them. Click the Close button to put the flyout away (2.5).

2.5. Click the Close button to put the tool flyout away.

* * *

Tip

Once you’ve mastered the basics, take some time to play and experiment with the other tools that aren’t covered in this book. Noodling around helps make a beginning user into an intermediate one, and I expect that you’ll even find a way to use a tool for a purpose that it wasn’t designed. That’s ingenuity right there.

* * *

Selection Tools

Right at the top of the Tools panel are five tools for selecting objects. One might say you need only one way to select something, but once you see the flexibility that having multiple options provides, you’ll see the reason why there are so many. The selection tool group is made up of the Selection, Direct Selection, Group Selection, Magic Wand, and Lasso tools.

Selection Tool (V)

The Selection tool allows you to pick whole objects with a single click. The Selection tool has the following options:

• Click anywhere on an object to select it. If the object doesn’t have a fill, click its edge to select it. You’ll know that an entire object is selected when all its points are solid.

• Select multiple objects by holding down the Shift key as you select.

* * *

The Bounding Box

As you select an object with the Selection tool, you’ll see eight little boxes that surround it (2.6), called the bounding box. You can click and drag any of the boxes to resize the object, and hovering the cursor just off a corner will allow you to rotate it. You can choose to show or hide the bounding box from the View menu. The keyboard shortcut is B/Ctrl+Shift+B.

2.6. The bounding box

* * *

• Press the /Ctrl key as you click to select objects behind the topmost object in a stack. As you click, the selection moves down in succession until you reach the bottom.

• Click and drag the Selection tool around an area to select multiple objects. If any part of the object is within the selection box (also known as the selection marquee), that whole object becomes part of the selection (2.7).

2.7. Drag your cursor over multiple objects to select them all at once.

Direct Selection Tool (A)

The Direct Selection tool will select an entire object if you click its fill. But the tool goes a step further: It allows you to also select individual points or line segments of an object, which is helpful for reshaping or resizing parts of an object. Select points and segments in the following ways:

• If you can see a point, click it to select it. If you can’t see the points, click any line segment on the object to make the points visible. Selected points are solid; unselected points are hollow (2.8).

2.8. Selected points are solid; unselected points are hollow.

• Add to or remove points from the selection by holding the Shift key as you click.

• Click and drag over multiple points or segments to select them.

• Click a line segment to select it. Unfortunately, you don’t get any visual feedback signaling that you have only a segment of the line selected. You have to drag the segment and hope that it’s the right one. However, Illustrator is pretty accurate, and it’s rare that you’ll make an incorrect selection.

Group Selection Tool

Objects in groups are locked together as one. (To group several objects, select the objects and then right-click and choose Group.) Using the regular Selection tool on a group will select the whole group. The Direct Selection tool will still select points and line segments. The Group Selection tool , however, picks individual objects inside the group. To use the Group Selection tool:

• Click an object inside the group to select it. You can then edit the object however you’d like.

• Click again to select the entire group.

Magic Wand Tool (Y)

The Magic Wand tool will grab all objects with a specified attribute. For example, if you have a screen full of different colored objects, clicking a red object with the Magic Wand will select all the objects with a red fill. Before you use the Magic Wand tool, though, you can configure how sensitive or tolerant its selection is:

1. In the Tools panel, double-click the Magic Wand tool.

A panel of options specific to the tool appears (2.9).

2.9. Access the Magic Wand panel by double-clicking the Magic Wand tool.

2. Set the sensitivity of the selection with the Tolerance option. Click the box and type in a value between 0 and 255, or click the arrow to use the slider. A higher number selects a wider range of the chosen attributes.

* * *

Tip

Several of the tools in the Tools panel have configurable settings. Take some time to double-click each of the tools and see what you can find.

* * *

Lasso Tool (Q)

The Lasso tool works a little like the Direct Selection tool in that it allows you to select individual points and segments. The difference is that the Lasso allows you to draw a freeform selection marquee. It also doesn’t select the whole object if you click its fill.

To use the Lasso tool, do the following:

1. Click and drag around a point or line segment to select it (2.10).

2.10. Selecting a point or line segment

2. Add to the selection by holding the Shift key as you drag around unselected points. You can even select individual points and segments on different objects.

3. Remove points or segments from the selection by holding the Option/Alt key as you drag around selected points.

* * *

The Select Menu

The Select menu (2.11) gives you additional options for making targeted selections. The basic selection options (Select All, Select All on Active Artboard, Deselect, Next Object Above, and Next Object Below) in the menu have keyboard shortcuts. Those are the selection commands you’ll use the most often, so I highly recommend learning those shortcuts.

2.11. The Select menu offers powerful selection capabilities.

Selecting objects with similar attributes is the real power of this menu. This is an extension of what the Magic Wand tool can do. You can use Select > Same to select any of the following:

• Objects with the same appearance or specific appearance attributes

• All instances of a symbol

• All objects with the same graphic style

* * *

Drawing

Over the years, Illustrator has become a jack-of-all-trades tool, adept at page layout, illustration, and now website and UI design. In the beginning, however, Illustrator was created for drawing (2.12). That’s how it got its name. Really, the most useful tools in the Tools panel are probably the drawing tools. These tools provide the means of getting content on the page. There are quite a few drawing tools here; you’ll use some more than others.

2.12. Illustrator was built to create illustrations like this. (The MP3 Effect; © Rick Moore)

* * *

Note

This is not a book about learning how to use Illustrator’s drawing tools to create illustrations, so it covers only the basics of their use for illustration. For an extensive guide on how to become awesome with Illustrator’s drawing tools, I recommend Von Glitschka’s excellent book, Vector Basic Training (New Riders Press).

* * *

Pen Tool (P)

The Pen tool is probably the tool that most defines Adobe Illustrator. It’s a simple tool but a difficult one to master. You use the Pen tool to draw freeform objects in your document point by point. It creates line segments and smooth curves (known formally as Bézier curves). Each curve handle has a control point that allows you to alter the shape of the curve. It’s not essential to master the Pen tool to use Illustrator as a UI design tool, but if you want to create anything more than generic shapes, you’ll want to take some time to learn how to use it.

First, you’ll draw a simple rectangle with the Pen tool.

1. Select the Pen tool and click to set a point.

2. Click to the right of the first point to set another point. The two points are now connected with a line segment (2.13).

2.13. Using the Pen tool to set another point

3. Click to create the third side of the rectangle, and then hover the cursor over the first point you created.

As you draw, Illustrator’s cursor changes to give you helpful feedback. The little circle that appears here means that when you click the starting point, the path will be closed (2.14).

2.14. Click to close the path.

Next, you’ll draw an ellipse.

1. Click and drag horizontally to set the first curve.

Illustrator creates a Bézier curve point. Each point in a Bézier curve has one or two control handles that extend from the point itself. You can move these handles to alter the shape of the curve.

2. Click and drag to set three more points (2.15). As in the previous exercise, be sure to click the starting point to close the path.

2.15. Click and drag the mouse to create Bézier curves.

Click and hold the Pen tool to reveal the tools grouped with it (2.16). These are the Add Anchor Point tool (+), Delete Anchor Point tool (−), and the Convert Anchor Point tool (Shift-C).

2.16. The Pen tool group

The funny thing about these tools is that, although they are available in the Tools panel, you will never really need to access them there. They are most easily accessed by using keyboard shortcuts while drawing paths with the Pen tool.

Here’s how to access these Point tools while the Pen tool is the active tool:

• Add an anchor point to a path by hovering the cursor over any part of a line segment and clicking. The cursor will change to the Add Anchor Point tool to let you know when you can add a new point (2.17).

2.17. Adding an anchor point

• Delete an anchor point by hovering the cursor over any point on a path and clicking the point. Again, to provide helpful feedback, the cursor changes to the Delete Anchor Point tool (2.18).

2.18. Deleting an anchor point

• Convert a smooth point to a corner point by holding the Option/Alt key and clicking the point (2.19).

2.19. Converting a smooth point to a corner point

• Convert a corner point to a smooth point by holding the Option/Alt key while clicking and dragging Bézier handles out of the point (2.20).

2.20. Converting a corner point to a smooth point

Lines and Shapes

Illustrator has several useful tools for creating basic shapes (also known as primitives). These types of shapes will probably be the most useful for UI design. They come in handy as you begin to create icons, buttons, toolbars, menus, and the like.

Line Segment Tool (\)

To create a line segment with the Line Segment tool do the following:

1. Click to set the starting point.

2. Drag the mouse to draw the segment.

3. Hold the Shift key to constrain the line to the vertical, horizontal, or 45-degree angle axes.

Use this as an alternative to the Pen tool for creating single lines (also known as rules) in your design.

Rectangle Tool (M)

The Rectangle tool creates—you guessed it—rectangles. You can click and drag to create a rectangle, or click once to get a dialog box for setting specific parameters.

Ellipse Tool (L)

Click and hold the Rectangle tool to reveal the Ellipse tool . As with the Rectangle tool, when the Ellipse tool is selected, you can click and drag to create an ellipse or click once to get a dialog box for setting specific parameters.

* * *

Shape-Drawing Options

The Rectangle and Ellipse tool have keyboard shortcuts to aid in drawing perfect shapes. Both tools allow the following options:

• Use the Shift key while drawing to constrain each shape to a square or circle.

• Hold down the Option/Alt key to draw the shape from the center.

• Hold down the spacebar while drawing to reposition the shape on the artboard.

The Polygon and Star tools (see next page) have shortcuts as well:

• Use the Shift key to lock the rotation angle to 0 degrees as you draw.

• Press the spacebar to move the shape to a different location on the artboard.

• Press the Up or Down arrows on the keyboard to add or remove points from a star and sides from a polygon.

• Press /Ctrl to change the inner radius of a star.

* * *

Polygon and Star Tools

The Polygon and Star tools both reside with the Rectangle tool as well. While these tools are similar to the Rectangle and Ellipse tools in that you can click to set the shape parameters, they have really useful keyboard shortcuts to aid in the creation of interesting shapes. The Star tool is especially useful for creating badges:

1. Click and drag to create a star (2.21). The star is always drawn from the center point.

2.21. Creating the star

2. Continue to hold the mouse button down and press the Up Arrow key several times. This will add points to the star (2.22).

2.22. Adding points to the star

3. When you are satisfied with the number of points, hold down the /Ctrl key and drag the mouse up to increase the inner radius of the star (2.23).

2.23. Changing the inner radius

4. Release the mouse button to complete the shape.

Typography

Besides being known as a drawing tool, Illustrator also has several tools in its arsenal to help you create professional-level typography. If you’re familiar with Adobe InDesign, many of the typographical features in Illustrator work the same way.

Type Tool (T)

The Type tool is another very important tool in the Tools panel. It’s actually much simpler to use than the Pen tool. Two built-in modes help make this tool really versatile when setting type.

Clicking once in the artboard with the Type tool creates point type (2.24). This mode is best for single lines of type or decorative headlines. It has no container, so its length is unconstrained and will stay on one line until you press Enter/Return.

2.24. Point type is free of any boxes or borders.

Clicking and drawing a box with the Type tool creates area type (2.25). This mode is best for creating long passages. It’s also useful when type needs to be constrained to a fixed width without having to rely on hard returns.

2.25. Area type stays within a user-specified boundary.

The Type tool also has some tools hidden underneath it (2.26).

2.26. The Type tool group

Transformation Tools

Illustrator’s transformation tools provide easy ways to stretch, resize, rotate, or mirror your design elements.

Reflect Tool (O)

The Reflect tool lives under the Rotate tool in the Tools panel. It’s used to flip an object on either its vertical or horizontal axis.

1. Option/Alt-click the object to open the Reflect dialog box (2.27).

2.27. The Reflect dialog box

2. Choose Horizontal or Vertical for the axis of reflection. Enter a degree of rotation if desired.

3. Click OK to perform the reflection or click Copy to reflect a copy of the original object.

Free Transform Tool (E)

If you have the bounding box turned on (which it is by default), you won’t see much of a difference when you select the Free Transform tool from the Tools panel. But while dragging the handles of the bounding box will scale or rotate an object, the Free Transform tool does much more.

It’s an extremely versatile tool, and if you’re like me, it’s probably the one you’ll use most often to transform objects. It combines much of the functionality of all the other transformation tools.

* * *

Tip

If you prefer working with the bounding box turned off, you can use the Free Transform tool (instead of the Scale or Shear tools) to transform an object.

* * *

Color

We can’t leave color out of the equation, can we? For both the color-loving and the color-challenged, Illustrator has a few powerful color tools in its Tools panel.

Gradient Tool (G)

The Gradient tool lets you apply multiple colors to a shape or stroke in either a linear or radial fashion. Each gradient has two or more color stops that accept color and opacity. More color stops can be added to create special effects. Gradients can be edited with the Gradient panel (F9/Ctrl+F9) or directly on the object with the gradient annotator.

To create and edit a gradient:

1. Select an object and give it a gradient fill by clicking the Gradient button (>) in the Tools panel.

Illustrator fills in the object with the default gradient, and a bar, called the gradient annotator, appears on top of the object.

2. Adjust the angle and length of the gradient by clicking and dragging across the object.

3. Change the length only by clicking and dragging the square icon on the gradient annotator (2.28).

2.28. Changing the length of the gradient

4. Move the gradient around in the object by clicking and dragging the circle end (2.29).

2.29. Adjusting the gradient location

5. To rotate the gradient, hover the cursor near the diamond end of the gradient bar. When the cursor changes to the rotation icon, click and drag to rotate (2.30).

2.30. Rotating the gradient

6. Adjust the center point of the gradient by clicking and dragging the center point handle (2.31).

2.31. Adjusting the center point of a gradient

7. Adjust color stops by clicking and dragging them across the gradient bar (2.32).

2.32. Dragging color stops across the gradient annotator

8. Each color point on the gradient is called a color stop. Add a new color stop by hovering your cursor just below the gradient bar and then clicking to add the new stop. The cursor will show a plus next to it when you are in the right spot (2.33).

2.33. Adding a new color stop

9. Change the color stop’s value by first double-clicking it.

The Color panel appears. You’ll be able to change the color there (2.34).

2.34. Using the gradient annotator to change a color stop

10. To delete a color stop, click on it and drag it off the gradient bar.

Eyedropper Tool (I)

The Eyedropper tool is used to sample and copy color, type, and effect attributes from one object to another. You can double-click the tool to set selection preferences.

To use the Eyedropper tool:

1. Select the object whose attributes you’d like to change.

2. With the Eyedropper tool, click the object whose attributes you want to copy.

This will make the selected object look identical by copying all appearance attributes, including any effects.

3. Hold the Shift key to pull (or sample) a color from a portion of a gradient, mesh, or placed image.

Fill and Stroke

The Fill and Stroke tools display the fill and stroke of the currently selected object. You can click to activate either the fill or stroke by clicking it or toggle between them by pressing X. The active attribute sits on top (2.35).

2.35. Click the fill or stroke to activate the attribute.

You can swap the fill and stroke of an object by clicking the Swap Fill and Stroke icon (Shift-X) (2.36) or reset the object to its default appearance by clicking the Default Fill and Stroke icon (D) (2.37). This gives any selected object a white fill and a black stroke. That could come in handy if you’ve created a mess and want to start from scratch.

2.36. Clicking this icon will swap the fill and stroke of a selected object.

2.37. Clicking this icon will reset the selected object to the default appearance.

Directly below the Fill and Stroke indicators are icons for Color (<), Gradient (>), and None (/) . These tools give you a quick way to apply the active color or gradient, or remove the fill from a selected object. The icon previews are dynamic for the Color and Gradient options to allow you to see what you will get when you click.

Workspace Tools

The last section of tools contains the Artboard tool (Shift-O), the Slice tool (Shift-K), the Hand tool (H), and the Zoom tool (Z). These tools are useful for interacting with the workspace itself, and in the case of the Slice tool, for creating areas for exporting artwork. The Slice and Artboard tools aren’t covered in detail in this chapter. The functionality they provide warrants much more than a blurb. Instead, look for entire sections devoted to their use in later chapters.

The Hand tool is used to pan and scroll the workspace and can be accessed at any time by pressing the spacebar. Double-clicking the tool in the Tools panel will adjust the view to fit all objects on the selected artboard.

The Zoom tool allows you to zoom in or out of the view (2.38). You can either click to adjust the view by 100% increments, or click and drag to specify a spot to magnify. You can access the tool at any time and zoom in by pressing the spacebar and then /Ctrl. Adding the Option/Alt key will zoom out. Double-clicking the tool will reset the selected artboard to 100%.

2.38 Zooming in with the Zoom tool for close-up work

Modes

The last two sections in the Tools panel control different modes of drawing and viewing artwork.

Drawing Modes

You can use drawing modes to determine how artwork is stacked on the artboard as you draw. Illustrator provides three modes for this purpose. The selected drawing mode stays active until you explicitly turn it off. You can press Shift-D to toggle between modes.

Draw Normal

Draw Normal is the default mode and places objects on top of the stack in ascending order as you draw.

Draw Behind

Draw Behind places objects at the bottom of the stack in descending order.

Draw Inside

Draw Inside provides a quick way to create a mask as it places objects inside of a selected object as you draw. You must select an object to act as the mask before this mode is enabled. Dashed lines on the corners indicate the mask (2.39).

2.39. Draw Inside mode places new objects inside a user-specified shape as you create them.

Screen Modes

The final tool in the Tools panel is the Change Screen Mode tool . Screen modes determine how Illustrator’s user interface is configured.

To change the screen mode:

1. Click the button to reveal a menu to select the desired screen mode.

2. You can also toggle through screen modes by pressing F.

In Normal Screen mode (2.40), your artwork is displayed in a standard window with the menu bar, scroll bars, and panels.

2.40. Normal Screen mode

In Full Screen with Menu Bar mode (2.41), your artwork window displays full screen.

2.41. Full Screen with Menu Bar mode

In Full Screen mode (2.42), your artwork displays full screen, and the menu bar, title bar, and all panels are hidden. You can temporarily access the panels by hovering the cursor over the left or right edge of the screen. In any of these modes, pressing Tab will toggle the display of the tools and panels.

2.42. Full Screen mode

Panels

Illustrator’s power lies in the use of onscreen panels. Panels are used to perform tasks like transforming objects, creating and applying colors, organizing artwork, and working with type. They provide an easy way to access this functionality without having to use the menus. Panels also allow you to configure your workspace to suit the task at hand by giving you the option to open or close, dock or float, and expand or collapse functionality on an as-needed basis. Personally, I find that it makes Illustrator easier to use because it enables you to get everything you don’t need out of the way and focus on being creative.

Each panel has functionality that is visible in the form of controls, text inputs, and icon buttons. They also have a panel menu at the top right that contains additional functions or options (2.43).

2.43. An example of a panel menu

The Control Panel

The Control panel (2.44) is the long bar docked to the top of the screen by default. You can dock it to the bottom or just let it float freely as well. I prefer it at the top—it’s easier to get the cursor up there. The panel is contextual, which means it displays information based on the currently selected object. You can use the panel menu on the right side of the control panel to choose what information to show.

2.44. The Control panel

Illustrator displays this information a couple of different ways, depending on your screen resolution or workspace size. By default, options and preferences are spelled out in detail with input boxes and icons in full view.

If you’re using a smaller display, options that take up the most space are reduced to a link, which pulls down the respective panel when clicked (2.45).

2.45. On smaller screens, some Control panel functionality can be accessed via a link.

Having a lot of panels open takes up precious screen real estate; the Control panel aims to free up some of that space for your artwork by including the functionality of other panels inside of it.

Expanding and Collapsing Panels

Panels can be expanded or collapsed to save space in the UI for your artwork. Collapsed panels display as icons (2.46). After you click a panel icon, the panel opens and stays open until you close it by clicking its icon again. The downside to using collapsed panels is that you can view only one collapsed panel at a time.

2.46. A collapsed panel group

Panels can be grouped together to form panel groups. Each group has a drag handle at the top and is separated by a line. Clicking and dragging the left edge of the panels reveals the label for each (2.47). When you click an icon in a panel group, the panels appear together in tabs with the one you clicked visible. You can switch between tabs by clicking the tab header.

2.47. Collapsed panels with labels

You can move a panel by clicking the drag handle and dragging it to the desired location. As you move a panel, the drop zone is indicated by a blue box. It shows whether the panel will be dropped in between or inside the panel group.

• Drag to a dividing line to place the group between two other groups. Dragging anywhere else will combine the two groups.

• Click and drag the panel icon to move a single panel to another group or to undock it.

• Undock a panel group by clicking the drag handle and pulling it off the edge of the screen. To dock it, drag it back to a dividing line or panel group as in the previous step.

Clicking the double arrow at the top right expands or collapses a panel or panel group (2.48). Expanding a panel allows you to view more at once without having to click the icon to open it. Expanded panels take up quite a bit more screen real estate, but the ability to view info at a glance makes the tradeoff worth it.

2.48. An expanded panel group

Expanded panels can be moved and docked as well, but the process works a little differently from that of collapsed panels.

• Move a panel group by clicking in the space to the right of the tabs and dragging to the desired location (2.49).

2.49. Moving a panel group

• Move a single panel by dragging its tab. To drop it into a different group, drag it to the tab bar of the desired group.

• Change the order of tabs in a group by clicking the tab and dragging it left or right.

• Undock a single panel by dragging its tab off the edge of the screen. Undock a panel group by clicking in the space to the right of the tabs and dragging the edge off the screen. To dock, click and drag the panel bar back to a dividing line or a tab group.

Expanded panels can be collapsed to tabs to allow more space for bigger panels. Collapse to a tab by double-clicking the desired panel’s tab. Double-click the tab again to open it. Many panels can be resized by dragging the bottom of the panel.

Workspaces

We’ve only scratched the surface of the functionality that Illustrator offers. One of the awesome features it provides for managing this complexity is the ability to create workspaces that can be customized for a particular task. A workspace is a saved view of the location and position of panels. You can hide or show, dock or free-float, and expand or collapse certain panels and then save them in that state. Illustrator ships with several of these workspaces by default. You can access these workspaces from the workspace switcher at the right of the Application bar, which lives at the top of the screen just above the Control panel (2.50).

2.50. The workspace switcher

Using a Custom Workspace

Custom workspaces can be handy when you switch tasks or contexts often. I still do some print work from time to time, so I created a customized print workspace. I also use a laptop hooked to an external display as my primary machine, so I have also created two workspaces that I use depending on whether I am using the large display or the laptop display.

I stated earlier that panels take up a lot of real estate in the interface, so it’s important to show only the panels that are completely necessary for the task. I use a mixture of expanded and collapsed panels in my workspace, expanding those I use most often and collapsing those that are “set and forget” panels. Many panels can be left out of the workspace because their functions can be accessed from within other panels.

I set up a custom workspace that I find optimum for UI design (2.51).

2.51. My personal workspace for UI design

Here is how it’s set up:

The Application frame (covered in Chapter 3, “The Illustrator Workspace”) is enabled. This keeps me from accidentally clicking windows in the background.

On the right, I have a group of collapsed panels that represent functionality I use often, but not enough to need to see them all the time. From top to bottom they are:

• Symbols

• Graphic Styles

• Align

• Pathfinder

• Character Styles

• Paragraph Styles

• Glyphs

• Color Guide

• Color

• Swatches

• Gradient

To the right of the collapsed panel group is a group of expanded panels that I rely on for constant information and interaction. Again, from top to bottom they are as follows:

• Info

• Artboards

• Appearance

• Layers

As you learn to use Illustrator, you’ll find a workspace configuration that works for you. That’s one of the great things about Illustrator: It gives you the flexibility to work the way you need it to, rather than the other way around. As you create your own workspaces, it’s best to restart Illustrator to ensure that your layout is saved. If you don’t perform this step, you’ll lose this workspace if Illustrator ever crashes.

Creating a new workspace may seem like a lot of work, but thankfully you’ll have to do it only once for each context. You can easily change your workspaces as the task or context changes. This is one of the keystones to efficiency that I cover throughout the book.

If you need to rename or delete a custom workspace, you can do that by choosing Manage Workspaces from the workspace switcher.

Conclusion

We’ve covered a lot of ground in this chapter, and I hope you’ve gained a basic working knowledge of the tools and functions needed to start creating great designs. In the next chapter, you’ll learn how to set up Illustrator for working with pixels instead of print documents and how to use artboards to maximize efficiency in the creation of UI screens.

Table 2.1. Keyboard Shortcuts in This Chapter

3. The Illustrator Workspace

Chapter Overview

In this chapter, you’ll learn about the following:

• Choosing the right measurement units

• Selecting the optimal color space

• Creating artboards and organizing your work

The Adobe Illustrator workspace is designed to allow you to be as creative as you want without a lot of distractions. It has a generous area for creating your designs and minimal user interface chrome. The workspace is very flexible and can be customized to your liking.

Go from Print to Pixels

As you already know, this is a book about designing for the screen, whether your target user platform is a laptop or desktop screen, tablet screen, smartphone screen, or TV screen. But out of the box, Illustrator is set up for working with print documents. You’ll need to make some adjustments so that it’s more appropriate for screen graphics.

Choosing the Right Units

The first option to modify is Illustrator’s unit of measure. In the print world, measurements are usually picas and points, inches, millimeters, or a combination of those. However, in UI design, pixel measurements should be the standard. Illustrator can be adjusted so that you can view everything, including type, with pixel measurements. This setting will help your documents more accurately reflect what end users will view on their devices. Fortunately, this is simple to change.

1. Choose Illustrator > Preferences > Units (Mac) or Edit > Preferences > Units (Windows).

The Preferences dialog box appears (3.1).

3.1. Setting the General, Stroke, and Type units to pixels

2. Change the unit definitions for General, Stroke, and Type to Pixels.

Optimizing the Color Space

The second thing to take care of is changing Illustrator’s color profile. Again, by default, this is set up with a profile that works best in a printing environment. You might easily justify leaving this setting alone, since no two screens are alike in how they show color, but you’ll change it in case you ever want to edit your design in Photoshop or incorporate images from Photoshop.

1. Choose Edit > Color Settings (K/Ctrl+Shift+K) to access the Color Settings dialog box (3.2).

3.2. The Color Settings dialog box

2. In the Settings pop-up menu, choose Monitor Color.

* * *

Note

If you plan to shuttle graphics back and forth to Photoshop, you’ll want to make the same change there so the two apps are in sync. By doing so, you eliminate surprise color changes.

* * *

Application Frame

The Illustrator workspace may look a little different depending on which platform you are running. If you’re using a Windows PC, you will see the tools and default panel configuration running in a window. On a Mac, however, the tools and panels float freely on the screen. Some Mac users prefer this behavior—it’s what we’re used to with all the other apps we use. However, I’ve actually come to like the Application frame (shown in 3.3 and 3.4) because it reduces distractions from underlying windows. I’ve found myself clicking a window in the background far too often to count. If you want to give the Application frame a try, simply turn it on by choosing Window > Application Frame.

3.3. If you run a lot of applications in the background on a regular basis, the standard Mac configuration has the potential to get messy.

3.4. With the Application frame enabled, you can more easily focus on your task.

Working with Artboards

Artboards are a unique and powerful feature of Illustrator. The artboard works just like a piece of paper would on a physical desk. For example, if you were creating a collage, you could put elements you are not currently using on your desk outside of the bounds of the paper. They are still close for easy access, but they don’t interfere with the artwork taking shape on the document. Illustrator works in a similar way.

When you create a new document, you have an artboard in the middle of a large workspace. Any graphics you place on the artboard itself will appear in the final design. Anything outside its bounds will not appear when you print, export, or save as a PDF. It’s a great way to keep all of your assets in one file rather than scattered across separate files on your hard disk, or in hidden layers that become hard to manage.

What’s even better is that you can have multiple artboards in one Illustrator document. Illustrator allows you to create up to 100 artboards in a file, depending on the size of the artboards used. You can use these extra artboards to create a site map, show different states of an interaction, or test several design options for a particular screen (3.5). Additionally, it makes it a lot easier to create multi-page PDFs for client reviews and presentations.

3.5. An example of an entire app mockup, including alternate layouts and test graphics, in one file.

However you end up using artboards, I’m sure you’ll find them very powerful when creating user interfaces. You can keep an entire site in one file and make managing all your design assets so much easier.

Opening a New Document

Let’s create a new document to check out all that the workspace has to offer.

1. Choose File > New (N/Ctrl+N).

You’ll see a dialog box that has options for your new document (3.6). Here you’ll have the opportunity to name your file and choose a profile. Illustrator has several built-in profiles for you to use as a starting point.

3.6. The New Document dialog box

2. Select the Web profile.

Notice several differences between the Web and Print profiles: The document units are pixels instead of points, and the preset artboard dimensions are 960 px by 560 px, a common viewable area for a browser window. You can use one of the presets or type your own dimensions in the width and height fields.

3. Click the triangle to the left of the Advanced section to open it (3.7).

3.7. Advanced artboard options

This section of the dialog box is where you can set the color mode (CMYK or RGB), screen resolution for raster effects (we’ll look at how to use these effects in a later chapter), and preview mode for the document.

The next two settings are ones that I have found to be very useful for UI design.

4. Change Preview Mode to Pixel.

Pixel preview displays your art as if it was created with pixels rather than vector objects. It shows how your artwork will be anti-aliased when viewed at 72 ppi, which is the resolution graphics will be when exported from the program. You’ll feel really comfortable in this mode if you’re used to working in Photoshop.

5. Leave “Align New Objects to Pixel grid” checked and click OK.

This feature keeps your artwork aligned to the pixel grid as you draw. That way, your art stays crisp when saving your graphics for the web or devices.

* * *

Note

See page 80 for more on pixel precision.

* * *

* * *

Saving New Profiles

The profiles included with Illustrator are limited to some of the most popular devices on the market today. Notably missing from the list is the iPhone 4 and iPad with their retina display resolutions. If the iPhone’s 640 x 960 is a screen size you use often, you can create your own profile:

1. Create a new document and use 640 x 960 as the dimensions.

2. On a Mac, save your document to Hard Drive:Users:[user name]:Library:Application Support:Adobe:Adobe Illustrator CS6:[language]:New Document Profiles.

In Windows, save your file to C:\Documents and Settings\[user name]\Application Data\Adobe\Adobe Illustrator CS6 Settings\[language]\New Document Profiles.

If you’re a Mac OS X Lion user, you’ll find that the Library folder is hidden. To access it, perform the following steps:

1. Open a new window from the Finder.

2. Open the Go menu on the menu bar, and then press the Option key. Your Library folder will magically appear.

3. Click the Library folder to open it, and then drag it to the sidebar in the Finder window. Now when you save a file, you’ll have easy access to the Library.

* * *

Creating Artboards

Behold the white rectangle in the middle of the screen (3.8). This, my friend, is the artboard. Illustrator uses this metaphor as its working space. As I stated previously, the artboard is really just like a piece of paper sitting on your desk. You can draw on it, paint it, erase stuff from it, and move it around. At times I think Adobe should add the ability to crumple it up and toss it into the wastebasket, but I digress…

3.8. Hello, artboard!

For those of you coming from Photoshop, the artboard is fundamentally different from Photoshop’s canvas. First of all, it’s another vector object on the screen you can edit without affecting the artwork itself. You can resize it, change its orientation, duplicate it, and remove it. It’s pretty versatile.

Second, the artboard acts a container for your design, allowing you to place unneeded elements outside its bounds without having to delete them or toss them into hidden layers. Anything outside the artboard bounds stays out of your printed or exported files. This enables you to experiment with different ideas outside the artboard before you decide to include them in the final artwork.

As for multiple artboards, I think it’s one of the best features Illustrator has to offer. It makes mocking up entire sites very easy and keeping your entire project in one place really helps with efficiency. When working on enterprise sites that have multiple layers of functionality, I tend to break up modules into different files. I’ve created upwards of 50 screens in one file with no discernible hit on performance and a relatively small file size.

There are several ways to create a new artboard that go beyond opening a new document. Let’s take a look at how you can do this in the next few sections.

The Artboard Tool (Shift-O)

In the Tools panel is a dedicated tool called the Artboard tool (Shift-O) . Activating the Artboard tool puts Illustrator into artboard editing mode. Once activated, the artboard has a bounding box, grab handles, crop marks, and a nameplate appearing with it in the workspace (3.9). You have a couple of options in this mode:

• Add a new artboard by clicking and dragging the cursor anywhere outside the current artboard. This allows you to create an artboard of any size. If you need to change the size, just click and drag any of the grab handles to adjust. This works for any artboard in the workspace.

• Delete an artboard by selecting it and pressing Delete. If you have multiple artboards to eradicate, pressing Delete multiple times will remove them in descending order until you have only one left.

One thing to note is that Illustrator requires at least one artboard at all times. Additionally, deleting the artboard does not delete the art on it. You have to do that manually.

3.9. Crop marks, bounding box handles, and a nameplate are all visible in artboard editing mode.

* * *

Tip

To make the artboard larger than the current window while resizing, drag the cursor to the edge of the screen and it will automatically scroll to reveal more space.

* * *

Using the Control Panel

The Control panel has several tools within it for dealing with artboards. Because the panel is contextual, you’ll need to be in artboard editing mode to view these tools. You can perform the following actions from the Control panel:

• Set the selected artboard to a preset size

• Change the orientation to portrait or landscape

• Add a new artboard

• Delete a selected artboard

• Name a selected artboard

• Choose whether to have artwork move with the artboard when it is rearranged

• Show extras like crosshairs, video-safe rulers, and a center mark

• Show the Artboard Options dialog box

• Place or resize an artboard with numerical precision

To use the Control panel to create a new artboard, do the following:

1. Click the Artboard tool (Shift-O) to enter artboard editing mode.

2. Create a new artboard by clicking the New Artboard icon in the Control panel.

This allows you to place a new artboard in the workspace that’s the same size and orientation as the currently selected artboard. After clicking the New Artboard icon, you’ll notice that you have a box that follows the cursor (3.10).

3.10. Click to place a new artboard.

3. Click anywhere in the workspace to place the new artboard in that spot.

Using the Artboards Panel

The Artboards panel (3.11) shows you a list of all artboards in your document. Unlike the Control panel, it is available at any time. Create a new artboard with the Artboard panel by clicking the New Artboard icon at the bottom of the panel.

3.11. The Artboards panel

Illustrator will put new artboards created this way to the right of the current artboard. If you have several rows of artboards, it will always place the new artboard to the far right of the top row. This gets tricky as you start to create a lot of artboards, as Illustrator won’t let you place artboards outside the workspace.

You can also perform the following actions from the Artboards panel:

• Select an artboard as the active artboard

• Double-click an artboard in the list to view it in the window

• Move an artboard up or down in the page flow by dragging in the list or using the arrows at the bottom of the panel

• Delete an active artboard

• Rename an artboard

The panel menu also allows you to duplicate or rearrange artboards, convert objects to artboards, and delete empty ones.

Duplicating an Artboard

Duplicating an artboard can save you time by giving you a quick start on a new screen where most of the elements are the same. This is useful if you are trying to show different interaction states for an element or just want to try a different color scheme for the same design. There are a couple of easy ways to accomplish this:

1. Select the Artboard tool (Shift-O).

2. In the Control panel, make sure that the “Move/Copy Artwork with Artboard” option is selected. If this is option is deselected, you will only duplicate the artboard itself.

3. Click the artboard you’d like to clone and hold the Option/Alt key as you drag it to a new location. To constrain the artboard to the horizontal or vertical axis, hold the Shift key, too.

You can also use the Artboards panel to duplicate an artboard by selecting the one you want to clone and dragging it to the New Artboard icon (3.12). It will place the duplicated artboard using the same rules outlined in the previous section.

3.12. Drag an artboard in the list to the New Artboard icon to create a duplicate.

Using Existing Objects

In addition to creating new, blank artboards, you can use an existing object as the basis for a new artboard. This is useful in several common scenarios:

• You have design elements outside of a current artboard that you want to move to a new artboard.

• You want to move a part of your design to a new artboard and create the new artboard at the same time.

• You want to quickly export or create a PDF of part of your design.

To create a new artboard from an existing object, perform the following steps:

1. Select the Artboard tool (Shift-O).

2. Click the object you want to use as the basis for the new artboard (3.13).

3.13. Click an existing object with the Artboard tool to create a new artboard based on its boundaries.

Once you’ve done this, you can resize or rearrange the new artboard like you would any other.

Organizing Artboards

Once you get several artboards in your document, things might have a tendency to get a little messy. Missing artboard names, disorganized screens, and holes in the screen flow drive me crazy. If that bothers you like it does me, it’s pretty easy to get everything back in shape.

Give Them Names

You might have noticed that as you add new artboards to your document, each one gets a generic name, such as Artboard 1, Artboard 2, and so on. As convenient as this is, it isn’t really helpful as your project grows. It’s akin to a Photoshop document with a plethora of unnamed layers. To deal with this problem, Illustrator allows you to name your artboards (3.14).

3.14. Name your artboards for maximum efficiency.

1. Select the Artboard tool (Shift-O) and select the artboard you want to name.

2. Type a new name in the Name field in the Control panel. Making the name relevant to the content on the artboard will help immensely as you add more artboards to your project.

You can also use the Artboards panel to name your artboards.

• Select the artboard you want to name in the panel list and then click its Artboard icon once. The Artboard Options dialog box appears, where you can type the new name as well as access various other options.

Move Them Around

When I work on a large project, I typically start with a set number of artboards. As I work through the design process, I organize the artboards into a flow or site map. As features and functionality gets added or removed, the number of screens needed in the mockup may grow or shrink. When this happens, I end up with screens that are out of order or have holes in the flow (3.15 and 3.16). To fix this problem, Illustrator allows the ability to rearrange artboards in the workspace.

3.15. During the course of designing a UI…

3.16. …pages sometimes get removed, leaving holes in the page flow.

To move artboards manually, do the following:

1. With the Artboard tool (Shift-O), click the artboard you wish to move and drag it around the workspace until you have it in the desired position.

2. If you want to leave the art where it is and move just the artboard, make sure to deselect the “Move/Copy Artwork with Artboard” icon .

To rearrange artboards using the Artboards panel:

1. Make sure that your artboards are in the order you’d like them to flow in the workspace by dragging them into position in the panel (3.17). The number next to the artboard in the panel corresponds to its position in the workspace.

3.17. Drag artboards to order them the way you’d like them to appear in the workspace.

2. From the Artboards panel menu, choose Rearrange Artboards.

3. Choose the layout you prefer, how many columns to use, and the desired space between each artboard (3.18). If you don’t have “Move Artwork with Artboard” selected in the Control panel, don’t worry. You can select it here so that all of your art gets rearranged as well. Click OK.

3.18. The Rearrange Artboards dialog box

After a second or so, you’ll see the workspace zoom to fit all the artboards and you’ll see them in their new positions.

Navigating Multiple Artboards

Once you have a few artboards in the workspace, you’ll need an easy way to move between them. You could use the scrollbars or the Hand tool to scroll the workspace, but that’s slow and imprecise. Instead, you can use the Artboards panel or the artboard navigator to quickly and easily find the right artboard.

To switch artboards through the Artboards panel:

• Double-click the desired artboard in the panel. It jumps into view on the screen at whatever zoom percentage it needs to fit the whole artboard in the window. To reset the zoom level to 100%, double-click the Zoom tool or press 1/Ctrl+1.

The artboard navigator (3.19) is found at the bottom-left corner of the document window. To use the artboard navigator:

3.19. The artboard navigator

• Choose the desired artboard from the pop-up menu (3.20). This is so much easier if you named your artboards.

3.20. Your artboard list

• Use the Next and Previous buttons to click through a series of screens in succession. This succession is determined by the order of the artboards in the Artboards panel. Clicking the Next and Previous arrows moves one screen at a time, while clicking the First and Last arrows jumps to the first and last artboards.

 

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.


Related posts

Encyclopedia of Algorithms by Ming-Yang Kao, PDF 1493928635
Heroku Cookbook by Mike Coutermarsh, PDF 1782177949
The Enthusiast’s Guide to Photoshop: 64 Photographic Principles You Need to Know by Rafael Concepcion, PDF 1681982986
Final Fantasy V (Boss Fight Books) by Chris Kohler, PDF 1940535182
Ready: A Commodore 64 Retrospective by Roberto Dillon, PDF 9812873406
Biologically-Inspired Energy Harvesting through Wireless Sensor Technologies by Anang Hudaya Muhamad Amin, PDF 146669792X

Leave a Reply

Your email address will not be published. Required fields are marked *