Comments on: Web Design Mock Ups in Illustrator

By: bikeman

bikeman — Wed, 18 Aug 2010 19:32:41 +0000

I find that I use drop shadows and gradient fills a lot in my web work – Fireworks makes these so much easier that photoshop and Illustrator. I’ve never understood why Adobe make their software to unintuitive. Long live Fireworks – it was designed for web page layout.

By: Sabrina

Sabrina — Tue, 17 Aug 2010 15:32:54 +0000

I took a peep at the tutorial and, up front, I think it will be a big help for me. It’s great that I stumbled upon your post. I’ve been reading up on this topic for quite some time now and I’m eagerly lapping up all the help I can get.

Thanks!

By: i-graphic

i-graphic — Tue, 11 May 2010 00:22:42 +0000

Have had SLICING nightmares in the past – remincent of ELM STREET!!! – Thanks for this.

By: Greg Findley

Greg Findley — Mon, 08 Sep 2008 14:00:29 +0000

I think Illustrator can be beneficial for website layouts, getting an idea how different elements of the site would sit in the space given, ie. using Illustrator to its strengths for quick layouts.

But when it comes down to creating graphics suitable for the web, and final website visuals I couldn’t imagine using anything but Photoshop. One of the major advantages of Photoshop is in illustrating how text will display – showing text to be used as images (header text, logos, etc) and text that will be raw text in the HTML using the anti-aliasing options.

By: Amanda Vlahakis

Amanda Vlahakis — Thu, 01 May 2008 14:48:05 +0000

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

By: Kelly

Kelly — Thu, 01 May 2008 14:26:17 +0000

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

Thanks

By: Tara: Freelance Designer

Tara: Freelance Designer — Thu, 01 May 2008 14:05:02 +0000

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.

By: Kelly

Kelly — Thu, 01 May 2008 13:53:56 +0000

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!

By: hcabbos

hcabbos — Sun, 13 Apr 2008 21:47:36 +0000

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.

By: Amanda Vlahakis

Amanda Vlahakis — Mon, 07 Apr 2008 17:42:24 +0000

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