This tutorial aims to introduce many of Adobe Illustrator's tools which are essential to any designer's toolkit and would help beginners and intermediate Web Designers gain confidence in using Illustrator for Web Design. We will start by setting up the document for the web and discuss how Artboards can be used to set multiple screen sizes. We'll learn how to Create a Baseline grid (Inspired by Teehan+Lax's Baseline Grid using Illustrator's built-in tools). We'll also learn how to use Symbols, Alignment Tools, as well as Character and Graphic Styles to create a consistent design with ease. Not only will this aid us in wire framing but also in experimenting with the design's appearance far easier than Photoshop would allow.
Ah... Adobe Illustrator. Often a neglected part of a web designer's toolkit, however, happens to be one of the most powerful web designing tools available. Not only is it much more stable than Photoshop, but it also allows us to create precise and consistent layouts with precision and ease. If you haven't yet experimented with Illustrator as a wire framing tool, or integrated it in your web design work flow you are missing out. Not to worry, the day can still be saved.
I have attempted to be as comprehensive and thorough as possible in order to appeal to beginner and intermediate users alike, however, a step once detailed may not be repeated and some details would be left to the reader to fill in. Furthermore, this tutorial will teach how to set up Artboards and grids for three separate screen sizes, however the design itself would be for the screen size.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post