Illustrator -> Website - Calgarypuck Forums - The Unofficial Calgary Flames Fan Community

photon · 03-12-2009, 01:00 PM

Is this something that's easy to do?

In my mind I'm thinking of taking a flat image file and slicing it up and creating the markup and CSS from scratch, seems like a lot of work.

If done properly in Illustrator, is there a way to do it that is more automatic; or at least gets a start on getting it done?

Barnes · 03-12-2009, 01:32 PM

I have no idea if Illustrator can do it but I know Photoshop can. I've never done it so here's a portion of the help.

Quote:

About sliced web pages
Slices divide an image into smaller images that are reassembled on a web page using an HTML table or CSS layers. By dividing the image, you can assign different URL links to create page navigation, or optimize each part of an image using its own optimization settings.

You export and optimize a sliced image using the Save For Web & Devices command. Photoshop saves each slice as a separate file and generates the HTML or CSS code needed to display the sliced image.

Web page divided into slices

When you work with slices, keep these basics in mind:

You can create a slice by using the Slice tool or by creating layer-based slices.

After you create a slice, you can select it using the Slice Select tool and then move, resize, or align it with other slices.

You can set options for each slice—such as content type, name, and URL—in the Slice Options dialog box.

You can optimize each slice using different optimization settings in the Save For Web & Devices dialog box.

photon · 03-12-2009, 01:36 PM

Cool thanks, Illustrator probably has the same kind of thing, I'll have to see what they end up sending me.

octothorp · 03-12-2009, 01:43 PM

Yeah, Illustrator has all of the same slicing tools as photoshop, and exports to all standard web formats. The only issue I've come across is that for text, Illustrator doesn't seem to allow you to turn off anti-aliasing, so if you're using little pixel fonts, you may not be able to do what you want (it's possible that it has these features and I just don't know where they are). edit: oh, I guess it is possible, you just need to use the rasterize filter.

COGENT · 03-12-2009, 02:16 PM

I'm not sure what your slicing up but be careful to not to slice it up into a lot of little bits... if not done properly the viewer can see every little piece load separately and it looks awful.

I know there is a way to control it but I have no idea what it is... I'm just the designer.

photon · 03-12-2009, 02:20 PM

Heh, in this case it's for a quick and dirty site, doesn't have to be solid.

KTrain · 03-12-2009, 03:21 PM

I've only done it in Photoshop. There are lots of online tutorials to learn how too.

Why the desire to do it in Illustrator?

photon · 03-12-2009, 04:45 PM

Oh just the guys that will be doing the look for the site usually work in Illustrator I guess. They said they could do it in PS too.

llama64 · 03-13-2009, 09:24 AM

Quote:

Originally Posted by photon

Oh just the guys that will be doing the look for the site usually work in Illustrator I guess. They said they could do it in PS too.

There is a Illustrator to PS function. I suppose everyone has their own workflow though.

Russic · 03-13-2009, 10:10 AM

I much prefer to make my shapes in illustrator. Not getting better at Illustrator has been one of my biggest regrets of the past few years. Such an incredible program.

octothorp · 03-13-2009, 12:07 PM

Quote:

Originally Posted by Russic

I much prefer to make my shapes in illustrator. Not getting better at Illustrator has been one of my biggest regrets of the past few years. Such an incredible program.

Very true; it's a really underrated program. I know people who have worked with Illustrator in professional design companies, and yet have never bothered to explore blends, gradient meshes, the warp tools, live paint, and a lot of the other tools that Illustrator offers.

Russic · 03-13-2009, 01:01 PM

Quote:

Originally Posted by octothorp

Very true; it's a really underrated program. I know people who have worked with Illustrator in professional design companies, and yet have never bothered to explore blends, gradient meshes, the warp tools, live paint, and a lot of the other tools that Illustrator offers.

I took an illustrator course once when I was merely a photoshop snob. I lazily went through the motions knowing full well that I could do many of the things I needed in photoshop already and I wouldn't need illustrator. Then I was introduced to the gradient mesh. Wow.