Test only

2011-11-30T02:50:00.001-08:00

Final Product What You'll Be Creating

A few times a each month we revisit some of our reader’s favorite posts from throughout the history of Vectortuts+. This tutorial by Jonathan was first published on November 4th 2008.

This tutorial is perfect for the beginning to intermediate Adobe Illustrator artist. We’ll cover how to layout a website and prepare it for use on the web. Also, we’ll use the recently released Website Elements Freebie to mock up the design as well.

Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join VECTORTUTS PLUS for just $9/month.

Step 1

Start a new document with a width of 960 px and a height of your choosing. I’ve chosen this width because this website will likely incur internet traffic who have average to large monitors. A width of 960 pixels is a safe size that will favor the majority of visitors. Last, set your Color Mode to RGB.

Step 2

The black border shows the document size (called the Artboard) that we created. I like to place a blank screenshot of a browser window on its own layer while I’m designing, to get a good idea of what my website will look like when it’s done.

Step 3

This next step is very important. Make sure you are aware of what zoom you’re viewing the document at. When all is said and done, your website will be seen at 100%. Feel free to zoom in and out while working on your layout, but be certain all your text and design elements are readable when viewed at 100%. Use the drop down highlighted below (or simply type in the percentage you want) to change the zoom to.

Sidenote: sometimes Adobe Illustrator gets testy and doesn’t show the numbers as you type them into the zoom area highlighted below. For example, if you type 58% sometimes the numbers don’t change as you’re typing. If this is the case, simply press return after you enter your values, and your document will be resized to the number you entered.

Step 4

The Artboard can be toggled between visible and invisible by going to View > Hide Artboard. The problem with this is that it takes a little longer than showing and hiding guides (Command + Semicolon Key) So, I find it best to use guides and hide the Artboard. Over the course of laying out a whole website you will find it much easier to press a quick key command rather than going to the top of the screen and selecting from a list every time.

Step 5

You may find it easy to establish balance and a nice hierarchy by first drawing simple grey boxes on your page. The thin rectangles represent where I plan on using text while the large grey boxes will be images.

Step 6

After you have a general idea of what the layout will look like you can add guides and remove the grey boxes.

Step 7

Using only the guides as a reference, add other elements like navigation, text, and tighten-up where the logo, images ,and icons will go. It is helpful to toggle your guides on and off (Command + Semicolon Key), while you are finessing the layout. If the guides you drew don’t work as well as you thought, definitely adjust them as you see fit.

Sidenote: when you toggle guides on and off they automatically become locked. You cannot move locked guides. To unlock guides quickly press Command + Option + Semicolon.

Web design