graphic design, freelancing, illustration, advertising, web design

IMHO Its bad practice to use a print based design package to produce a web layout, I know it has had a lot of web based features added to it recently but you can not beat a tool that is specifically designed for the job.

I use both Illustrator and Fireworks daily, & I would never dream of putting Fireworks up to 300dpi and outputting an image for print.

It is important to use the right tool for the job, but I understand that it’s also important for the design flow to be comfortable in the program you are working in. My advice to you if you are going to do any more web layouts, then get your self a copy of Fireworks and learn it. It’s not a hard program to get to grips with, just think of it as halfway between Photoshop and Illustrator. It handles vectors perfectly but it’s on a pixel based canvas which is crucial for a crisp clean web design.

I personally use Photoshop for all website mockups. I have never thought of illustrator as a web tool at all…but I guess it still does the job if that’s the program you want to use!

Also, I never use the slice tool in these programs. Im not sure how commonly they are used by people that code all css based websites..but it would be interesting to find out. I find it is much faster to just throw down some guides and cut away.

I disagree with you, Rick. Illustrator is a tool just as Photoshop and Fireworks are. If you use it correctly, it can be quite effective. It might not be the right tool for you to use, but it may be better for other people with less experience with Fireworks.

You a correct in saying you should not use Fireworks for print media, but it does not matter if you use Illustrator for web. It is like increasing an images resolution versus decreasing the resolution.

OMG LOL

I’m just of the opinion that you should always use the best tool for the job. I really disagree with what a lot of companies are doing these days with big software packages. They are adding so many features and there is so much overlap that the programs are becoming polluted. Like the web features in Illustrator.

For example, I remember when Microsoft Word was just a word processor, where as now it tries to be a word processor, a desktop publisher, and I believe now it even has some tools built into it for putting html together. WTF?

Don’t get me wrong though, I love Illustrator & I do a lot of work in it. If I’m doing a more complex image/shape for the web, I will quite often draw it in Illustrator and the copy it over to fireworks to scale & position in a layout and then output.

I’m also of the opinion that if you have a good grasp of Illustrator and you are using it at a professional level then it really should take you no more than a weekend to pick up Fireworks and be putting together ninja web graphics. No excuses…

I think that you should use whichever tools you feel comfortable using that can produce acceptable results.

I personally use Photoshop for Web mockups because Fireworks’ interface just seems alien to me - as does the other former Macromedia app, Dreamweaver. At the end of the day, Fireworks doesn’t make a gif, jpg or png image any better than Photoshop does.

In the infrequent moments when I design, I much prefer Illustrator to Photoshop. However, Illustrator is a nightmare for production. Its precision–down to fractions of a pixel–means that slicing is often inaccurate, and it can be really hard to align your slices to the edges of strokes and borders.

Working with someone else exacerbates this problem, as the developer may have to significantly adjust the design in order to make it “fit” on the pixels. Photoshop, because it’s bitmap, largely avoids these issues.

I haven’t been able to find any illustrator settings that mitigate this issue, but if you have one, I’d love to know!

Well Well Tara you’ve opened a can of worms

I use Illustrator everyday and love the app as well as using Photoshop everyday but I find I will use all kinds of programs just to reach for something different or to experiment. Basically what I am trying to say is its FUN to move from app to app creating towards a final piece with quality. A very good way i’ve stuck with a good few times is to move from layout in Illustrator straight into Photoshop for the final touches of quality and slicing. Especially with CS3 moving from platforms is a pleaure.

I’m glad people are finding the series I wrote over at GoMedia interesting. I use Illustrator, Photoshop, and Firworks for web design. I use Fireworks the most, as I find it to be the quickest tool for mockups. Occasionally, I need the pixel perfection of Photoshop. At time I slice directly from Illustrator. This is usually when there is a layout made up of all vectors and there were some complex vector illustrations involved.

I agree with the concept of using the best tool for that project and use what your comfortable with. If your comfortable with all 3 then use what is convenient.

I do not agree with the assessment that Illustrator is only for print. Its an illustration tool and creates great images for the web. You do need to know how to set up a document in Illustrator for the web though. I don’t find Illustrator to be a “nightmare for production”. Though I did in the past. It does require some setup to get Illustrator to behave like Fireworks does by default. Once you know how it takes 30 seconds to set up. So, it’s not difficult. Check out this link: http://aiburn.com/article/building_a_website_wireframe_in_illustrator

I decided to go straight from Illustrator to the web in the tutorial mostly to show that it can be done. It may have been covered elsewhere, but I hadn’t seen that workflow in a tutorial. Thanks for the feedback.

Thanks All!

Hi everyone, thanks for all your comments and suggestion.

Hi Sean, I really liked your article and thanks for taking the time to explain a bit more in your comment. Just had a quick lok at that article and will check it out more in detail soon. Thank you

Ermmm nice web site rocket man…

Probably not the best place to spam a website built with 5 year out of date methods… esp one as badly designed as that.

Also what does your comment have to do with using Illustrator for web design? if you could let me know that would be great…

If you don’t use what you are comfortable with your design will suffer as a result of your limitations. If you’re not getting complaints from your developer and the end result is what you planned you must be doing something right.
Nice site, by the way.

Hi Sir Bob, I got rid of the spamer thanks for pointing it out.

Hi Teri
Thanks for your comment and the compliment

Nice design idea - you’ve got inspiration, that’s great.

Hi Tara

Nice design work on the website.

One of the joys of illustrator is that it can be used for print AND web work. You can design whatever you want and if it’s going on a webpage, all you need to do is choose SAVE FOR WEB & DEVICES from the file menu and voila! You have an image saved at 72ppi suitable for web use. The slice tools work in exactly the same way as in Photoshop and are there specifically for web graphics.

So as some of your other readers have said, use whatever you’re comfortable with. Why use two tools if you can do it all efficiently with one?

Hi Jeniffer, thats the tutorial screen shot not mine I am afraid - looks good though. Thank for your tips. Eventually I will get to building a website from scratch - design and coding

I’ve always created web design mock ups in Illustrator.

I had a slight guilt about it thinking that I should really be doing it in Photoshop or something and so you’ve made my day after reading this!

Illustrator can create web graphics just as well as print graphics and it sounds to me that slicing is the only area where it falls down (the developer can always pop it into Fireworks themselves for slicing can’t they though), however….

No more guilt because I’ve designed many sites and not one single developer has ever complained or had any problems with my files

I agree with Ryan. The pixel shifts taking an Illustrator file to Photoshop is a BIG problem. I guess if you’re staying within Illustrator, it’s fine but when sharing files with a team and slicing and other mods are done within PS, it’s a big drawback.

I work with a lot of other designers cutting up their designs. Traditionally I ask for everything in Photoshop, just because it’s what I use for web design. We have run into a number of cases when people provide me with AI files. I tend to have a lot of trouble with the sizing (probably due to my lack of familiarity with Illutrator). Does anyone know what I’m talking about here or have any good tips on how to avoid this when slicing in Illustrator or how to move an Illustrator design to Photoshop?

Thanks!

Hi Kelly
In illustrator if you go to export you then get an option to save the file as a PSD, you can choose the resolution and whether you want to save the layers or not.

Yeah, I find the layers translate not so well sometimes, depending on the designer.

Thanks

I used to have a bit of a nightmare with getting the right size of slice using Illustrator.

Everytime someone needed something like a banner at a very precise size I dreaded it like anything.

Then recently I realised something very useful (periles of self teaching, it can take a while to figure some things out).

To get a very precise slice shape using Illustrator simple open a new document and make the size of the document the exact size you need your slice to be.

Go to ‘object’ and go to ‘crop area’ and then ‘make crop’.

Go to your main document and grab the header design …lets face it, getting the header at the right size is often the biggest hassle and importance so that it lines up with the rest of the web page.

Anyway, I digress.

So make the crop area and drop your header design into the space.

‘Save as web image’ and you get an image at the precise size you need it with no annoying extra slices generated or stupid file names in slice format, or it dumping the image into an ‘images’ folder that you then need to swap back into the main folder.

Anyone using Illustrator for front end web design will understand all of these irritations! Well using the crop tool instead of the slice tool solves them all