Advertise    Write for Us


Adobe Illustrator Tutorial: Why You Should Use Adobe Illustrator to Create User Interfaces

posted by: Iaroslav Lazunov, in Illustrator Tutorials / Web Design/ Comments: 0
Final Image Preview

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

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)


You can read full version this tutorial on



Follow us if you want to be the first to know about the latest Adobe Illustrator tutorials and articles. Vectorboom team works for you!

Total comments: 0
Only registered users can add comments.
[ Registration | Login ]
Subscribe Now!
RSS feed twitter
Recent Consultations
How to Create Watercolor Background in Adobe Illustrator
How to Illustrate a Handgun in Adobe Illustrator
Free vector - Set of four seamless backgrounds with retro dandy elements
Illustrator Tutorial: Create a Vector Bottle
Illustrator Tutorial: How to Create an Abstract Speech Bubble