Use Adobe Illustrator to Create a Clean Website Layout

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 $19/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.

Step 8

Continue finalizing your header with images, icons, and graphics.

Step 9

Below I’ve decided to add a light blue color to enhance the header.

Step 10

Add styling to your text, making sure to decide what links and headings will look like. I find it much easier and faster to accomplish as many design elements inside Illustrator so I can concentrate on programming and coding the website when the time comes.

Step 11

There are a couple different ways to prepare a design for use inside a WYSIWYG (What You See is What You Get) editor, like Adobe Dreamweaver. The first method is using slices. Slices can be made using guides or a selection. To use guides to make slices first drag guides onto your page around each object that will require its own link. For example, an icon that, when clicked, goes to a specific page. Below I have four icons, each icon will lead the visitor to a different web page or area of the site.

I have drawn guides between each icon and just outside of the blue area. It is usually cleaner if you draw your guides about 1 or 2 pixels outside of the area that you are slicing. This ensures none of your artwork will be cut off.

Sidenote: Do not draw guides over your entire layout at once. Instead, do sections one at a time. For example, first do the header area. Clear all of your guides by going to View > Guides > Clear Guides. Save your slices for the web (discussed in a later step) and repeat this process for other areas of the layout.

Step 12

Once you have your guides drawn the next step is to make slices out of them. To make slices from your guides go to Object > Slice > Create from Guides. On occasion, Illustrator may not make slices the first time you attempt to. I have found that I sometimes need to repeat this step three or four times before Illustrator actually will make slices. Below, the black numbered boxes indicate that the slices have been made.

Step 13

To save your slices for use on a website go to File > Save for Web & Devices… Use the Slice Select Tool (K) highlighted in the upper left corner to select the specific slices that you want to save. Select multiple slices at once by holding down shift. Adjust the settings on the right to suit your needs. JPEG images work best for items that have several colors, while the GIF file format works well for items that have large areas of color and not many colors in general, PNG file format works well for transparent graphics (though may require some work to adjust for older IE browsers). You may want to test quality versus file type and adjust the Quality to save bandwidth. Once your ready, click Save.

Step 14

Decide where you want to save the images to. I’ve chosen the Desktop. Under format select Images Only, then click Save.

Step 15

On your Desktop you will now have a folder called Images. Inside this folder will be the specific slices (images) you selected. These images are ideal in resolution and file size for use on the web.

Step 16

As mentioned in Step 11, clear your guides by going to View > Guides > Clear Guides. Now, draw new guides around the next area that you want to slice. The hover state (when the mouse is over the navigation) will be red, while the off state will be grey. You will need to make both versions of the navigation. To efficiently accomplish this, first make all of your navigation red then go to File > Save for Web & Devices…

Step 17

Select the specific slices you want to save. Since my navigation is not made up of images or an abundance of colors I have decided the best filetype for the navigation will be GIF, then click Save. Also, note that if your user a web supported font, then you may decide to use html text instead of images.

Step 18

You can give your images a new name at this point. However, they are automatically named for you so this is not mandatory.

Step 19

If you saved your images to the same location as before, you will notice the Images folder on your Desktop now includes the additional images you just saved. Repeat Steps 16-18 to make the off state for your buttons.

Step 20

Keep in mind this is just one possible workflow. Alternatively, you could place on and off states somewhere in your document, create all your slices, and export them together.

The other method of creating slices is by selecting an object then going to Object > Slice > Create from Selection. Creating slices using guides or from a selection is fine as well. Use a workflow that you find comfortable and best for the particular project you’re working on.

Step 21

On occasion you will not need to include the text that falls within a slice. For example, the footer will have text that is typed inside of the WYSIWYG editor. If this is the case simply delete the text before or after you make the slices, but previous to saving the slices for the web.

Step 22

Below you’ll notice that I deleted the text after the slices were made.

Final Image

Observe the final website. As you can see, laying out a website in Adobe Illustrator is simple and effective. You can quickly experiment with design and give this phase of the web design process the attention and thought it needs. You can view the final image below or view a larger version here.

Subscribe to the VECTORTUTS RSS Feed to stay up to date with the latest vector tutorials and articles.