Keep up all the informational posts.

TJ
Boston Web Design

All I can say about your blog is that its overwhelmingly wonderful. But I am more of a fireworks chap and fireworks uses its own kind of png.

Since you are good with AI and PS, your transition to fireworks would be seamless. Just give it a try.

@keith

you can get good web design templates at oswd.org

For flash templates, just google flashmo.

thanks
Keith

p.s I also added a banner for your site in the links section of my blog.

Illustrator files are vector files. You might look into inkscape. (it’s a free vector editor)
http://www.inkscape.org/

~Bitt

Regards,
Sharie Kearns

I just started checking your site on a regular basis, so this is coming a little late, but I have a tip regarding this that you/readers might find helpful. You can take the button image, and the rollover image and place them in the same file, with the button image at the top, and the rollover state directly below it, so the image is now 62 pixels high. The CSS looks something like this:

.button a {
display: block;
height: 31px;
width: 206px;
background-image: url(images/button_tutorial.jpg) no-repeat 0 0;
color: #FFFFFF;
text-decoration: none;
}

.button a :hover{
display: block;
background-image: url(images/button_tutorial.jpg) no-repeat 0 -31px;
}


What happens is the background image is shifted up 31 pixels (the two numbers let you manipulate the position of the background from the left and top respectively), so we see the bottom half, or the rollover state, of the image. This helps reduce the number of image files you use, and since the button and its rollover load at the same time, you won’t get any weird bugs. Hope that made sense…I can re-explain if I confused anyone :).

yeah, this can seem confusing but screen resolution is 72 pixels per square inch. There a a couple of reasons to use 72 for web graphics: First, since screen resolution is 72, anything higher would be increasing your file size. Second, since you typically design websites at 100% scale, there is no need to be able to zoom in, so to say.

As for the vector question, in Illustrator preferences, you can set your unit measurements to pixels to make thing easier. Or you can right click on your ruler and select “pixels.”

Did that answer your question?

~BittBox

Yes, you can save for web directly from Illustrator, But I like using Photoshop because it has better antialiasing when it converts to a bitmap. Also, as long as your vector image goes unchanged as far as size, Photoshop will clip it to the exact pixel dimension of the image (CS) no matter where you button happens to lie on the artboard.
CS2 gives you options like Bounding Box, Art Box, Trim Box. Bounding Box would be the equivalent import option in CS2 I believe.

~BittBox

-Gautch

however, you can create vectors in almost the same way in fireworks and export it in most formats.

photoshop is the numero uno with bitmaps and illustrator with vectors, but fireworks does “sufficiently” with both formats and is much better to work with for web design. with photoshop i particularly dislike having to send images to imageready when exporting for the web.

thanks for the illustrator tute.

~BittBox