Intuitive Tools for Digital Artists

Why you should use Adobe Illustrator to create user interfaces

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

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.

Artboards

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.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

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.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

Grid

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 (Cmd / Ctrl + K)

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

Interface objects should be placed so that they are aligned to the grid. To simplify this work, turn on the Snap to Grid mode (View > Snap to Grid)

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

Appearance panel

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.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

In order to apply all the effects to another object you just need to take the Eyedropper Tool (I) and copy them.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

You can also save all the properties of the element as a graphics style and apply it to the necessary objects.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

You can access all the applied objects from the Appearance panel, so you can change them at any time.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

You can also apply various effects to the text that remains editable by the object.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

Gradient Fill

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.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

In addition, you can change the opacity of the gradient slider that allows you to work faster without using Opacity Masks.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

Pixel-perfect Output

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.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

To see how your work will look like as raster, choose the Pixel Preview mode (View > Pixel Preview).

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

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.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

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.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

You may also use Align to Pixel Grid in the Transform panel for these purposes.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

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.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

In the case with dynamic objects, we lose of their dynamic status.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

Symbols

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.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

9-Slice Scaling

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.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

Drag the button to the Symbols panel, and tick “Enable Guides for 9-Slice Scaling” in the dialog window.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

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).

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

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.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

Try to resize the button. As you can see, text does not deform.

Advantages and Special Features of the Creation the Interfaces in Adobe Illustrator

Conclusion

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!

Written by Iaroslav

Iaroslav

Iaroslav Lazunov is a graphic designer from Zhytomyr, Ukraine who has found the job that allows him to share his extensive knowledge and experiments with Adobe Illustrator and plug-ins from Astute Graphics. Iaroslav was also a key author over at Vector Tuts+ as well as his own website Vectorboom

Comments (14)

  1. Awsome post Iaroslav!
    Really inspiring =D

    I have tried many times to use Illustrator for website and application design but always switched over to Photoshop because of Illustrators unusable pixel ruler which slow down the creative process to a grinding halt.

    Why have a pixel ruler option at all when it’s completely and utterly useless?

    Maybe one day Illustrator will also have a real pixel ruler like every other good vector and bitmap program.

    J.L
  2. Great Tutorial !!!!!!!
    I read just now!
    greatings from peru, i´ll be waiting for next issues
    PD. Thanks for share.

    Alexei Lopez
  3. The problem I’ve found is any rastor graphics (textures, backgrounds, spot photos) that are saved out from illustrator sometimes are degraded in quality. Illustrator just isn’t build to handle that type of graphic as well as photoshop. What I am looking forward to is seeing how Photoshop CS6 handles vectors and how that can be utilized for UI elements..

  4. It is not about efficiency it is about quality. If you want to create beautifully rendered UI use photoshop

    Timur
  5. Hi Jen – there are ways to vastly improve this (for example, by applying a rasterize live effect). Perhaps a good topic for future discussion?

  6. I wholeheartedly agree with the ideas in this post. I also think that most of the criticism of the idea of designing in illustrator is caused by not understanding how to use illustrator correctly. I have never seen degradation of exported image quality when the right settings are used, and beautifully rendered UI is easily creatable within illustrator (unless you are going for a painterly, or heavily textured style) . As for the pixel rulers, I’ve never used them in illustrator, but using a different technique for measurement can solve this problem, although I’ll admit I wish there were an easier and more reliable way to do this.

  7. Hi Melissa, I’m glad to meet you here. Thank you for your opinion.

  8. Awesome article, Laroslav! Thanks for sharing your expertise!

  9. Hi Ivan, Thank you very much.

  10. I completely agree with you here. I personally prefer using Illustrator when designing 1. its scalable without any distortion 2. edges are neat (as you’ve highlighted) 3. its easier to apply gradient effects via gradient mesh. Cheers from Dan @ webtemplates.com.au

  11. Great read. Thanks!

  12. What a well done and clean set up. Those buttons really pop

  13. Do you have any solution to the artifacts that you get on edges of rounded rectangles?

    For instance: create a black rounded rectangle, 60px x 30px with 5px radius, on a white background. Zoom in to the top right edge, and notice 1-2 pixels actually exist outside the rectangle.

    I presume this is a bug in Illustrator CS6, but definitely makes the argument for using Photoshop a lot stronger.

    Brian
  14. How do you make a button with centered text that is still scalable using 9-slice? I can’t seem to do it without the text being separate from the symbol.

    Jay

Leave a Reply