Novice designers always come up with a question about which application to use to create user interfaces. Most choose a bitmap editor such as Photoshop. However, I believe vector editors are better suited for this purpose, especially when it comes to such a powerful application as Adobe Illustrator. Why? Let’s talk about this in detail.
This article is an introduction to the series of tutorials that will be devoted to the creation of interface elements in Adobe Illustrator.
About two years ago, the screens for mobile devices with very high resolution appeared on the market. Apple branded their iPhone devices with “Retina Displays”. This resolution corresponds to commercial printing quality and equals 300 ppi. In this case, pixels become something not very important for the screen graphics, because the human eye simply cannot distinguish them. Monitors for desktop computers with high resolution should appear in the near future. You will need to optimize your design to display on such screens. So, if you take the 27″ screen and double its resolution, you get almost 15 megapixels. In this case, a graphics file that should fill the entire screen will have a huge size. There is only one manageable solution for this problem — soon all the interfaces will be vector-based.
Sooner or later, you will only need to create vector interfaces, so now’s the best time to readjust if you are still creating using a raster editor such as Photoshop.
Using Adobe Illustrator, you save time since vector files are easier to edit. In addition, the “object rather than layer” philosophy allows you to work more efficiently. Now let’s move from general concepts to specific advantages and features of Adobe Illustrator in creating interfaces.
In Photoshop one file can only have one page. But modern interfaces and websites rarely consist of a single “page”. Adobe Illustrator allows you to create multi-page documents. It is very convenient, since your project will contain fewer files. You can re-use the same elements for different artboards and you do not need to look for and open other files to do so. This saves you time and your computer’s memory storage.
New artboards can be created in the process of working in a document, or you may set them up when creating a new document. Recent releases of Adobe Illustrator have presets of artboards for web and mobile devices.
The grid is important when creating any interface. For website interfaces, it is advised you use a grid with 10 px increment. For mobile applications, use the grid with 8 px increment. Grid sizes are set in the Preferences dialog window
Interface objects should be placed so that they are aligned to the grid. To simplify this work, turn on the Snap to Grid mode
Appearance panel is a powerful tool for creating interfaces. With its help, vector and raster effects can be applied to any object in any order, which are recalculated in real time, while changing the shape or size of the object.
In order to apply all the effects to another object you just need to take the Eyedropper Tool (I) and copy them.
You can also save all the properties of the element as a graphics style and apply it to the necessary objects.
You can access all the applied objects from the Appearance panel, so you can change them at any time.
You can also apply various effects to the text that remains editable by the object.
The main types of fills that are used to create interfaces are gradient fills. You can control the gradient with the help of the Gradient Annotator.
In addition, you can change the opacity of the gradient slider that allows you to work faster without using Opacity Masks.
While high resolution monitors have not yet become a reality with the release of Apple’s MacBook Pro with Retina, let’s talk about what Adobe Illustrator gives us to achieve the sharpest graphics. Before you start creating interfaces, set the basic dimension of the current document in pixels.
To see how your work will look like as raster, choose the Pixel Preview mode.
The blurred edges of objects look like this due to the fact that the coordinates of the vector objects and/or sizes do not match Illustrator’s internal pixel rendering positions.
In order to eliminate this disadvantage, use only integer values (ie. “15.0px” and not “15.3px”) for the coordinates and sizes of objects, and use Snap to Point and Snap to Grid modes in the process of creating objects as it was mentioned above.
You may also use Align to Pixel Grid in the Transform panel for these purposes.
However, this feature is not suitable for outlined (expanded) text and objects that include dynamic features such as Dynamic Corners (VectorScribe plugin). In the case with the text, we obtain an unacceptable distortion of the letter shapes.
In the case with dynamic objects, we lose of their dynamic status.
If you use a few the same elements in the interface designing such as buttons, you can save the first one as a symbol. In this case, when editing this symbol, all changes will be displayed immediately in the rest of the buttons, previously created by duplication of this symbol.
The 9-Slice Scaling option introduced in Adobe Illustrator CS5 allows to set the areas of the symbol that will not stretch in the process of changing its size. If we change the width of the button without using this function, we will obtain deformed text and profile of the button, as shown in the picture below.
Drag the button to the Symbols panel, and tick “Enable Guides for 9-Slice Scaling” in the dialog window.
When editing a symbol, we will see four dotted guides, limiting the area that will stretch (areas 1 to 4 indicated in the picture will not stretch).
You can move the dotted guides, changing the position and size of the area. Move them so that the text is outside the stretching area.
Try to resize the button. As you can see, text does not deform.
This article was only intended as an overview to the key benefits and tools of user interface design in Adobe Illustrator. This week, a series of in-depth tutorials will follow providing specific details of how to make full use of Illustrator and Astute Graphics’ plugins to make better interfaces quicker.
Remember to return to this blog to check these out!