Use Adobe Illustrator to Create a Clean Website Layout
Tutorial Details
- Program: Illustrator
- Difficulty: Beginner
- Completion Time: 1 hour
Download Source Files
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 $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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jonathan
How to Build a Successful Blog Business
Learn how we built Tuts+ into a successful blog business and how you can create your own blogging business in this straight-forward guide to online publishing.
Join our newsletter!
3D Map Generator Pro – Eas ... only $6.00 
PROActions Bundle - Film & S ... only $8.00 
:::Thought Bender::: - More
Vector Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Vectortuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
What about Type Rendering ?
Even if i can export thru illustrator, there is not type rendring option in illustrator right ? (smooth/sharp etc.)
nice…
really wonderful design! and truly exceptional, well-written tutorial.
Thank you
Who thought it would be that easy!?
I have problems the step after that though, making the design with dreamweaver.
For those that want pixel perfect lines/boxes/anything, turn on Snap to Pixel, use the rasterize function (under effects) to ensure it renders correctly and then nudge it to the nearest pixel.
I personally lay up in Illy and do complex artwork that requires raster effects in Photoshop. I have found that the best way for my web work is to use both effectively and maximise both of their strengths. Illy is an incredibly powerful layout tool with incredible tools such as smart guides, vector scalability and vastly superior typography control and manipulation.
In a designer (both in print and web), I look for people who command the ability to use all the Creative Suite tools together creatively and intelligently. Designers that only use Photoshop (and likewise those that only use Illustrator) would benefit from broadening their skillset.
Versatility in design is key, and this applies to the tools that you use too.
I totally agree with you. Especially when it comes to typography, illu is a lot easier – and faster – to work with. I personally use illu for wireframes and actually the rest of the process until it’s time for the final touch, for that I use photoshop.
Are you sure you have to rasterize to get it pixel perfect in illu?
Thankfully no more rasterization needed with align to pixel grid in CS5! ^.^
your tips were gr8!! my only problem is..after saving for web..the page does not fit exactly in the centre..but displays in the left hand side of the browser..my screen size is 1440 * 900 pixels and my website size i created is in 982 * 1400 pixels..is there something wrong?
The way I usually do this:
title
body {
width: 100%;
}
#wrapper {
position: relative;
margin: auto;
width: 960px;
}
hmm, that didn’t look too good. I think I have to read some guidelines for comment posting.
Basically I make a div with “wrapper” as an id and put my content between it, then give the body a with of 100% and the wrapper the with you want it to be, set the margin to auto and position to relative.
You can find a lot of tutorials on this on nettuts. Another page that is a “must” to check out if your into web-design is http://www.w3schools.com
Try opening the HTML in a text editor and replace the “” within the first 10 lines or so with:
I’m no expert, just a guess.
I guess I can’t paste code in here.
insert the words align=”center” between “height” and “border”
actually i found when doing websites on a mac and viewing the file on a windows pc the slices shift the image you have sliced over about 1/4 of an inch making the image no loner flush. so i what i found in Adobe Dreamweaver is what is called a hot spot and it is the same as a slice but it keeps the link flush with the design. it is located at the bottom box in Adobe Dreamweaver and there are a light blue box, circle, and another werid shape.
ok i’m a beginner at this but before i made a layout on gimp and never knew how to code it could i possibly put it on illustrator and then be able to put it onto my website and use it or no?
because my layout is one where you have to put text over it and none of the buttons work please help me :’(
email me at rettus888@yahoo.com if you have to
Thanks for tutorial!
Im a nettuts plus member (or premier as it is now) – never ventured onto the graphics side as never needed to, but a client gave me an AI file and I needed help.. and I found it here!
Glad to see the vectortuts are equal quality to the nettuts!
Thanks for saving me hours of torment on AI.
Flash
Guys im a total beginner at this and really want to learn how to build websites..and more importantly..make them work! So i know AI to some extend and got my layout done. Now what do i do? Is there anyone that has some tutorial(s) about going from having this layout to putting it online and making it work? Or is the answer, learn html/css etc?
how do u publish it after the website is done?
Thanks for this great post.
You just teach us how to slice the webpage, but I do want to know how to make AI generate the CSS file automatically ?
You should try Fireworks if you want to make CSS.
When setting up your file, I recommend that you set your preview mode to pixel. that way you can move objects around at any zoom without worrying about going off pixel. This is key in getting clean output.
Extremely well written and easy to follow. Much appreciated!
When I read this tut back in 2008, I was surprised that Illustrator CS even had a “slice” tool. Then I started to experiment with the “SAVE FOR WEB” and all of it’s different options. This tut opened my eyes……I can set up an all CSS website pretty fast now. Who knew Illustrator allowed you to export as CSS layers, AND you can save layers to SWF frames for simple flash on your website. AI and Dreamweaver work together just as good as Photoshop and Dreamweaver. As far as the comments on here about Illustrator not being capable of creating a pixel perfect site, well that just isn’t true. It IS possible, provided they use the correct settings within Illustrator. Did anyone read the book, “The hidden power of illustrator CS: web graphics techniques” by Steve Kurth? Wonderful book! Tutvid was a good resource too. I prefer Illustrator over Photoshop because it seems my workflow is much faster…..but to each his own.
CS5 also has a function that renders the image to pixel lines too, so it’s never been better to make websites in Illustrator
I agree both PS and AI have a part to play, but AI is perfect for creating layouts. I personally prefer my layouts to be as flexible as possible allowing fast colour changes or quickly changing column widths and character styles. To all people who complain about blurry pixels, changing vector shape sizes in PS throws up the same problems, in spite of the ‘snap shape to pixel’ option.
Where’s it gone?
Remembered it from a while back, came back for a look again and nada.
Be very grateful if somebody could post it back up please.
what’s gone?
Jonathan,
You’re a legend. Thank you so much for this tutorial. As a print designer I have spent WAY too long trying to blag a website on Dreamweaver, you have just made my life a whole lot easier (“,) Instead of a shitty, thrown together website I will now have a visually stimulating but problably just as unusable website
Thanks mate
Thanks a million for the step by step tutorial
Most useful tute I’ve seen on Illustrator for web design. Thanks.
Jupp, just have to agree that this was a nice tutorial
Hi,
I have few questions. In step 5, you’ve placed thin strips for the text. How did you decide the height of each strip and the distance between them (so that you can place the text comfortably between those thin gray strips)
Also, how did you decide the font size for everything so that they look meaningful like your design? By that I mean, where to use bold, where to use italics, which text should have what font size?
And finally, thanks so much for this inspiring tutorial!
…generally speaking/writing, you need to aim for balance, make headings text bigger than body copy and highlight areas that require user interaction, keep it simple is the rule of thumb. So don’t try and highlight AND make everything BIG! This approcah doesn’t always work…less is often more.
Very nice.
Good article.
Thanks for sharing.
Thanks for tutorial!
Is a great tutorial
comprehensive and easy to follow, great tips
thanks!
Thanks for tutorial!
Tight design… Sure looks professional… Love the Cyan-red combo.
Wow, this is from forever ago!
All steps cleared mentioned, that’s why i love this website.
This whole method disturbs me, as a web developer and an illustrator. Go ahead and use this for personal stuff, but this is not how professionals work and it scares me that some people out there might think it’s okay to sell websites to clients using these methods.
I want to do my design in illustrator, however I have cs3 and was told that this would not help for creating disjointed rollovers, or swapping images for a data list where you can scroll over multiple images. I was told I would have to use photoshop. Can I create disjointed rollovers with illustrator in conjunction with dreamweaver?
Like CSS rollovers?
Use Adobe Illustrator to Create a Clean Website Layout is a good tutorials but i want to khow which option that i should choose in raster effect ( 72ppi, 150ppi or 300ppi ) for website. When in choose 72ppi and when i preview in browser the images are blur ( quality is very bad ). What should i do? Anybody can help me please.
If i choose 150ppi or 300ppi i afraid that my website too slow loading in browser.
Do you use save for web when you make the images?
Hi, someone know or can help me ?
I want to know how to do this kind of animation for a web : http://www.skeyndor.com
Thanks !!
I think Fireworks has the ability to do that. Check out http://webdesign.tutsplus.com/
I really don’t understand this. Can you use the navigations that are in the document that you created? If not, then why put them in there? If so, how can they be used? Very confusing.
It’s a template to cut up and import into Dreamweaver or another web program to add the code.
How does one add the Facebook Like button to the AI file before saving for web & devices?
Interesting tutorial. Hoping to give a try.
Nice one, Thanks for sharing this I was looking for this tutorial hopelessly!
Thanks for a nice and easy to follow tutorial. I need help laying out my websites and Illustrator is well made for that.
Hi. Would appreciate some help with creating a website template in illustrator cs5. I have designed all my logos and headers and footers. But regarding the content for each individual page, do I need to repeat this so in total I have 18 completed website pages. ??? Thanks.
I’m glad to find this tutorial. It’s useful for me _ a new babie website designer