Great tut.. very clean outcome!

this is exactly where some ID features would come in handy

Supurb!!!!

i never knew slices could be used in illustrator – neither did i know about the save for web capability. A real eye opener Jonathan…thank you.

nice layout

very disappointing end result

If you had step 2 it looks like your about to show how to nest tables? I’m probably totally wrong. On another note, I don’t think I have ever seen anyone create a website in illustrator, that’s one for the record books.

Nice!

@Nate, It happens more often than you may think. Illustrator is a layout program, so it’s very effective at creating web layouts. But since Photoshop is so popular with web designers everyone feels that it is the best tool to use. It think it should be a combination of both, Illy for layout and photoshop for manips and effects.

ineresting…. i’ll try it to see how it works. Good idea, if you have a vector-like design in mind, do it in a vector application…

Sometimes is a headache when you do a 800×600 px 72dpi psd design for a website, and the client wants the same design line for a 300 dpi 17×22 poster, you have to star all over again. I always say: vectors are good 4 ur health

At the agency that I work at there is a division between people using illustrator for web design, and those that use photoshop. The photoshop advocates have become almost militant in trying to get the others to switch over. I think logically it makes more sense to do it in photoshop because it is pixel-based and the end result is also pixel based, but I still feel much more comfortable doing it in illustrator. There are a lot of tools where I like the way illustrator does it better, and the few times I’ve tried to switch over I just miss the way illustrator does it. It does cause a little more trouble at the end when you are getting ready to program (in spite of the export for .psd option you still need to spend a good amount of effort making sure everything falls on a pixel and that 1 pixel strokes fall on a half pixel, etc.) but for me it is still worth it to work in illustrator. Photoshop does make it a little easier to organize your layers I think, however, because you can put folders within folders within folders. It all comes down to what you are most comfortable with I think.

@ Nate

Of course web designers create websites in Illustrator. Professional companies do the same. Its very versatile.

nice

Just a note on step 21, I do a lot of web work in AI (going back and forth with Photoshop as needed) and its been a lot easier if you have to revise your layout later NOT to delete the text, instead copy and place it on a text layer and turn off the visibility when you need to.

web graphic is always good and this is what i am always in search,

thanks you made my day please share more web related tutorial.

Thanks

Another good workflow is to use Smart Objects for the vectors in Photoshop. So, you do most of the layout in Photoshop, but drop in the icons, logos, etc as Smart Objects, which can then be opened in Illustrator.

Another great app is Fireworks for web layout, which I often use because it’s so fast to work with and even has multi-page funcationality.

I also like using Illustrator for website layouts, especially when your going for a detailed vector look throughout the design.

Which of these to use depends on your experience with each program, work environment, and preference. Ultimately, these programs are just tools.

I personally prefer vectors even for web design because they are so clean and versatile. Great job on the tutorial Jonathan. Thx.

I have been using Illustrator & Photoshop together for slicing. Illustrator has got its own advantages and Photoshop has got its own. It shouldn’t be compared because each program is unique.
I personally love illustrator because I am a vector person and it really depends on persons preferences. May be one day Ps or Ai will have javascript and css features?:)

Nate: You lost me on the nested tables thing. (before anyone leaves any snarky remarks, yes, I know what nested tables are.)
John: It’s not all about the design. The focus was on technique.
Red8ii8: Good idea.

Thanks everyone for the feedback!

Why not just use rectangular guides (select a box turn it into a guide by hitting command-5)? Then you could just leave ‘em and go on to the next section. Am I missing something?

very nice tutorial

in Illustrator CS4 we could avoid clearing of guides (Step 16) since we could use multiple artboards.

I do all my web designs in Photoshop. I tend to be pixel perfect freak and there’s no better tool than Photoshop to achieve that.

Good overall techniques. Where i work, i see many, many students working in illustrator for their websites mock up, but usually they get a really disappointing result, since they forget to set their grid a 1px interval and activate the snap to grid function and illustrator allow you to set a 0.25 width stroke overlapping 2 “pixels” which result in a poor anti-aliasing.

Throughout the years, I have used both to manage my designs. In more recent years I have leaned more towards Photoshop, mainly because of certain tools being easier to use for me. I find that that gradient tool in Illustrator is clunky in comparison with the methods that can be achieved in Photoshop. Same with the Free Transform tool. I still almost always do any identity or icon design in Illustrator and import those in as Smart Objects. I even quit using slices all together in both programs and simply use guides/crop and file > save for web.

Really lovely approach to the coding. Should have thrown in some tables! Oh wait…

This might be a better alternative to the constant, “Eh, I’ll wing it” mindset.

Illustrator is my tool of choice for web design and production.

Wow, perfect timing for me. I was just about to do a Google search for something like this, and here it is, front page page of Digg. Dugg. Thanks.

I think Illustrator is one of Adobes best products. I have used it and Image Styler for years.

JIff
http://www.anolite.echoz.com

So I like the tutorial, but anyone here use any open source tools to do the same thing, like Inkscape and Gimp? Most of the same capabilities, and whole heck of a lot cheaper. I’ve done posters in Inkscape, and done a lot of graphic manipulation in Inkscape and Gimp/Photoshop, but never thought of doing layouts like this.

Thank you very much for the tutorial though, I will definitely try this on my next website.

Very awesome tut. I have never used Illustrator but now I will definitely give it a chance, thanks.

Interesting. Now for the comments that talk of division between Illustrator and Photoshop comes Fireworks. It’s what I would call the hybrid of both.

PLEASE don’t tell people to design websites with Illustrator, and especially don’t use slices. We cringe whenever a client comes to us with a layout from another designer that’s in Illustrator.

I too use photoshop. The sub-pixel placements of illustrator deem is unusable as a design tool for anything that relies on pixel-perfect designs. Vector and scalable content, Illustrator is the best, no question..

but this entire tutorial made me cringe.

Illustrator is for vector graphics. Photoshop is for graphics where each individual pixel matters. I’m a web developer and a web designer. At my company, we hired a “web designer” to create designs, but all she knew was Illustrator. Every design she came up with in Illustrator was very bad for cutting up for the web because it wasn’t exact to the pixel. I spent most of my time fixing her design (or redoing it) in Photoshop because Illustrator was horrible for that task.

DO NOT use Illustrator for the layout of a web page! You will cause more trouble than help. Trust me.

Wow, if I was your boss and you used Illustrator for web work, you would be fired. Not a little fired, super fired. Then I’d throw your tablet at you and go find someone who knows Photoshop and can code.

It’s nice to see you could do it this way, but if you have Fireworks, I would recommend to use that for the layout and Photoshop to create your main graphics to put in it.

Illustrator’s good and you can knock up a clean looking design easily as described in this tutorial (you could also say the same for In Design), but as previously mentioned, the problem with both of these layout programs come with elements not being constrained to pixels due to the fact that they’re not designed as a web design tool.
I’ve spent many hours over the years redrawing artwork in Photoshop because it doesn’t look as clean as when the lines are true lines and not anti aliased.
I can’t believe it would be hard for Adobe to add in an option which would force lines to either be on a pixel or not- the reason I bothered reading this tutorial was to see if the problem’s been cured and I was disappointed to read no mention of it in the text.

I have a quick question that I don’t believe is answered above. From what I can tell, this lays out the project, and allows you to have more of a visual look at things while creating your artwork that then needs to be finished inside a dedicated HTML editor? Is that correct? Or is there a way to export the layout directly into a compatible HTML file while having the layout export as well?

Thanks

For a long time I have only been using PS for my web layouts but have recently gotten interested in learning how to use Illustrator for the web as well. I have even considered to write the Vectortuts editor an email asking for such tutorials.
Thank you for this tutorial Sure, the end result might be a bit “plain” but nonetheless a nice tut for those of us who are new to using Illustrator for web layouts.
Hoping to see more tutorials and especially more advanced ones.

A couple people have mentioned issues with Illustrator not being pixel perfect, but it’s just a matter of setting up your preferences for web work.

Here is a tutorial that covers the setup in detail: http://aiburn.com/article/building_a_website_wireframe_in_illustrator

And for those of you asking for more web design tutorial in Illustrator and Fireworks, we’re certainly listening and these are topics that both myself and some members on the writing team are passionate about. We’ll work on some more advanced tutorials on this topic.

Thx.

Mario: That’s correct. The extent of the integration that I’m aware of is just making sliced images. You can’t output html or aynthing.

Just to remind everyone of the origin of the tut, this website is called VECTORTUTS for a reason. As such, the tutorial shows how to make a website in Illustrator, a vector program. Of course you can do it in Photoshop, but that’s not the point.

Great, never used Illustrator for web stuff. I’ll try now!

Illustrator is not used too much to this kind of work. Pixel precision is essential! But I like it!

Illustrator = Vectors
InDesign = Print Layout
Photoshop = Rasters
Dreamweaver/Text Editor = Web Layout

A rough generalization, but there you go. Please don’t get into the habit of using Illustrator for anything other than vector work.

It sucks for web design for many of the reasons that have already been listed. Web pages are not static in the same sense that something printed in a magazine or newspaper is, and as such they require a lot of different concepts to do right (cross-browser compatibility, screen-resolution consideration, and optimization just to name a few).

By using Illustrator for web work you are setting yourself up to fail before you even had a chance. I’m sorry if this sounds elitist, but I’d be lying if I said anything else.

If you are serious about learning web design then do it right. Read up on HTML, learn about the benefits of CSS, or take a tutorial about Dreamweaver. I know it can be intimidating, but it is worth getting to know.

Here is a link that has been helpful to many aspiring web designers:
http://www.w3schools.com/

Everyone starts at the bottom, but you can work your way up. If you can learn how to use Illustrator you’ve already proven you’re smarter than most. Why not take the next step and learn how to do web design right?

I’m a web designer raised on Photoshop and I just discovered Illustrator for myself. I’m in the conceptual stage of a project and it’s just soooo much faster working in illustrator, despite my speed in Ps and my limitations being new to Ai. My biggest difficulty in illustrator though is pixel perfection – this tutorial didn’t really help me there, gotta say. Also, does anybody else find Illustrator’s gradient tools and color picker to be annoying as hell?

you cannot put this in any better way.. awesome tutorial..
thanks

Nice tut. I’m not going to rely on Illustrator for producing web graphics though. It’s more exact and sharp to collect the pieces you need in photoshop and just export the slices that you really need. No automatic export or slicing has ever got me too far. That’s life

Does anybody know what the font is used in the “alex” logo and main navigation? I really love it but can’t seem to find out what it is.

Cheers!

Thanks for the link to your wireframing tutorial Sean Hodge- that’s exactly the sort of thing I was after. I will be trying my next project in Illustrator

Paul: The font is called Din. http://www.paratype.com/fstore/fonts/DIN-1451.htm

Another point I want to add. While you should definitely be using CSS and HTML for certain elements the fact remains that a website needs to be DESIGNED before it can be programmed. Skipping the design process is a major factor in why there are many websites that are not visually pleasing. Again, this tut is not about HOW to design, rather that you SHOULD design it first, and the tut gives a technique for preparing these elements for a WYSIWYG editor.

isn’t using image buttons a horrible idea

nice and clean

Thanks Jon. Given the scope of your intention here it was nice to see a good design happen with minimal effort. For those expecting something award winning, shame on you I would think that for some clients getting an idea in front of them quickly is important (or maybe it’s just a matter of budget to crank out something that’s at least good).

As for the Illustrator v Photoshop. This gets the bird in the air. If there’s opportunity to go back and fine time (read: replace) each element/object with Photoshop (e.g. a more fancy header graphic or logo) so be it. But that isn’t always required, is it?

I guess, there is no question of debate between, Photoshop v/s Illustrator for web design, it really is the matter of one’s preference frankly. Personally, i think, illustrator does some stuffs for me pretty quickly, which i will have to do in round about way in photoshop. Both apps have its merits/demerits. Designing websites in Illustrator is nothing new as some readers above are surprised about.

I think, this is a neat tutorial.

You can avoid the Illustrator subpixel mess by doing the following:

After designing your site in Illustrator but before creating slices, ensure that every piece of work in your design has X and Y coordinates that are whole numbers. Also, ensure that every piece of work in your design has L and W that are whole numbers.

This takes a bit of doing (especially on a complicated site), but it cured my subpixel woes. You can see the result here: http://www.davidcondolora.com

I think that overall illustrator is superior for web design purposes, photoshop is really designed for “photos”, while I feel like illustrator is better suited to creating things out of thin air.

very nice, simple, and clean tutorial, great for beginners!

@ Sean Hodge

I’m happy to hear you mention smart objects in photoshop. I taught you something for once, as opposed to you always teaching me a thing or two.

@Paul – Yes, thanks for that advice. When you mentioned using Smart Objects in Photoshop months ago it was a new concept for me. I like this advice especially, “you can drag each separate component over to photoshop, thereby creating separate smart object layers.”

After editing PSDTUTS for so long I’m now really comfortable working with Smart Objects and agree with you that the workflow is really simple. It allows you to integrate Illustrator and Photoshop into one PSD file, which is convenient.

For a project that combines a vector and strong photo edited look this workflow would be especially powerful. Thx.

great information

Very very interesting.

how do you create the box with the icons inside it?

i know how to create a rounded rectangle, but i’m confused as to how to create one with multiple colored sections inside it. any advice?

thanks in advance.

To make the multiple color sections you can use the Pathfinder Palette and divide multiple boxes that you have stacked together. In this tutorial i simply made a semi-transparent rectangle over part of the blue box. After that I just drew guides where I wanted each area to be.

very nice !!!!!!!!!!!!!!!!many thanks Dr.

Wow! That means that i’m not the only guy who uses a screenchot of a browser. Honestly i’ve invented this for myself about couple years ago…. It works for me as well as guidelines and baseline.

oh, quit crying about which program is better. come on, guys. grow a pair and be a pro. learn both and deal with it. it’s what you’re getting paid for.

Amazing tutorial. I love it. More more more! =P

I find Illustrator good for creating layouts and wireframes and then taking things over to Photoshop to style it up and poish it off if necessary. It depends alot on the type of pixels you want to generate.

Wow, that’s something new. Definitely an interesting approach for webpage layout. I design wireframes in Illustrator though…

why not just use vector masks in photoshop? you can still have the freedom/flexibility of vectors while working in a pixel environment. Does anyone agree/disagree?

Just use fireworks. This is ridiculous.

How you think when the economic crisis will end? I wish to make statistics of independent opinions!

Naah, I like neither Illustrator nor Photoshop to create web layout i loveeeeee Fireworks….. its Best

Thanks for the article, i’ve always used Photoshop for layouts but will give illustrator a try

i like create a tableless layout
can i use of adobe illustrator

I think everyone who sais that this is wrong…please go and grab a chair at some design conference. I think that adobe products and their interconnectability are the best thing discovered/engineered ever for web designers/designers. The main ideea is that you can use any of their application to create things that you want to do, it depends on which app you master.

Great knowledge share!
Thanks

Thanks for the article. It’s a great knowledge share!!!

nice tutorial, great for web beginners like me.

Great tut!

Navigation and menu design is super important in relation to a web sites look and feel. This is a great beginners guide to a clean web site.

Where can one see a better step-by-step tutorial on this…this is no way step-by-step…the guy jumped a trillion steps…he thinks everyone here is an illustrator pro like him and that is where he failed completely…also anyone has a website where there are video tutorials on illustrator CS3?
Thanks

Despite many here, I favor doing web design in Illustrator. Anyways, which font is used in the logo text?

@Ultra- For the sake of keeping the tutorial moving along and not extraordinarily long some steps are implied. That’s why the tut is for beginners to intermediate.

@Ronny- The font in the logo is Din

http://www.veer.com/search/results.aspx?keyword=din&producttype=TYP

I think its difficult switching illustrator for slicing because of pixel environment of Photoshop.
Its my thinking.

Astrodesigner
http://www.astrodesigner.com

Prey nice and very fast way to do a nice and clean website,
Although i prefer to use convert shape into guidelines (CMD+5)(Ctrl+5)

Thanks.

stunning tut. new idea of creating website.

thanks.

anyone know how to link faster between illustrator and dreamweaver. I would like to be able to edit all body copy and text in illustrator and just import images back to dreamweaver, that way I dont have to mess with css and editing inside of dreamweaver. Anyone know if this is possible?

Thank you so much for this tutorial. This is way more efficient than trying to design a layout from scratch with CSS! And more conducive to designing it effectively!

Thanks to you I finally feel more comfortable in Illustrator (which was always an enigma to me) than Photoshop. I could never get the hang of using those guides! This newfound confidence with Illustrator shall pay dividends!!

Thanks for these tips! I always wanted to find a tutorial like this.
Straight foward. Now, it’s time to build my site.

How did you get the gray boxes on the page?!?

Thanks for sharing this tutorial! Interesting to see how other people work.

Another tip: Use the Pixel Preview option in Illustrator if you’re doing layout for the web. Your lines will snap to the closest pixel (and you can zoom in to make sure). This will avoid all kinds of fuzzy problems when you cut your final graphics.

Designing a site in Illustrator also makes it easy to take the vector artwork into Flash for banner ad development. (saves reinventing the wheel!)

Hmm, why making pixel graphics in a program made for vector graphics?.. the webpage will be blurry and not pixel perfect..

thx, great tut

wow..nice tutorial,..

Great looking work thanks

so simple, so easy, very well illustrated! thank you so much!

For those who want a pixel-perfect results, please refer to my article here: http://chengis.me/2009/06/pixel-perfection-in-illustrator

I think it’s feasible to design pixel perfect works in AI, and that’s what I’m doing.

very niceeee n use full tutorial. . .

Nice tutorial, but I think you could have used layers more effectively. Personally, I like to move guides to a separate layer. I show, hide, and/or lock that layer as I like. You could have multiple layers of guides to make slice creation simpler if you like to draw in your slices. Smart guides and snapping to point will help with this.

I find “create slice from selection” more simplified than creating slices from guides and having to delete the ones I don’t need.

For on and off states for buttons, aligned layers work very well. It also makes it easy to edit later if you need to add another button pairing that matches.

And as someone noted above: keep the text that will be typed into the HTML file on a separate layer instead of deleting it. It makes it easier to edit later if needed. For formatting the text, I suggest using paragraph and character styles to emulate CSS styling. You said to style the text, but you didn’t specify how that was being done. With paragraph and character styles, you’ll already have a good deal of the CSS figured out for styling the text when you code.

I find it interesting that commenters are assuming that Illustrator isn’t precise. It is very precise, if you know what you’re doing. If you don’t know how to use it in a way that results in a pixel precise layout, that’s not the fault of the program.

I’ve got to admit though, I don’t find that I often need to create slices. layering items and exporting individual pieces can work too, depending on the objects.

This was a good overview. It gives me some ideas for how I’d write a web layout tutorial

I spent two hours designing my webpage in Illustrator and a little more time following your directions. So now I have it all saved and NOW WHAT! Now I have all these slices and don’t know how to use them with dreamweaver. Thanks for leaving me hanging…

Slicing using “gudies” i think is not smart idea…
I allways use “CRAP” tool and you dont need so much sliced images,this is clean layout,very easy and nice layout but i think you only need to slice HEADER + NAVIGATION… )

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.