slicing in Image Ready

any good book

[ferhanz]

is there any book for novice users to explain the art of slicing in image ready?

[GeeWhizzler]

Excellent question... I too want to know more

I have a layout in PSD that I want to slice. There are graphical columns, for example. The columns are subject to stretch downwards as more text fills the container.

I would like to know the best way to slice and represent the containers. I know Image ready can render DIVs or tables. The DIVs are useless to me because its just absolute positioning stuff. The other options is tables but everyone is using CSS so I have to convert the table representation to CSS! (round and around we go).

I know there is an art to slicing... I've searched everywhere tonight for the reasons why to slice certain zones but come up with nothing.

Any help appreciated

[limbo]

To be quite honest I would not consider slicing as good practice. It creates a lot of problems for a variety of reasons.

<hops onto fence>

However I have created reasonably successful websites using sliced graphics from fireworks....

just don't mention accessibility...

Some things to remember

When you slice try to keep areas low and high density graphics separate. This will allow more streamlined optimisation - i.e. 1 colour GIF's for areas of block colour and optimised JPG's for areas with higher density of difference colour pixels; like photos.

Slicing should be kept as minimal as the layout will allow. For instance using a grid will reduce the amount of individual images as each slice will butt up against the next. This will reduce the overall amount of divs or table cells

Avoid using nested a layout If you are using tables (don't drop one sliced area into another). Nested tables are very bad for ac...

Add markup to distinguish content from layout structure - table summary, table header for navigation this will improve acce...

Do not use images to display a text. Delete the image containing text from the layout and replace using real text. Text in images is very bad for acces...

If you are using native actions like rollovers then place the javascript into and external script and validate the HTML.

Deleted bloated markup in the html - you might find rows of cells with spacer gifs - but be-warned this can interfere with javascript effects so...

Always keep a copy of the source (PSD or PNG) - just in case...

Rename you images - the default file naming is confusing and makes no sense - rc_f2_02.gif isn't exactly going to help your workflow - logo.gif will.

Learn CSS-P [webmasterworld.com] ;)

[benihana]

Whilst Limbo makes some excellent points, I wouldnt say slicing is bad practice in itself. Its a tool and as such depends on the abilities of the user.

I use slicing constantly when working on a new design, but only on a one by one or sectional basis; e.g. Ill have the layout all set out how i want it in IR, and ill say, create a 1 px wide slice of an area i want to tile, save it, switch to my code editor and stick it in the CSS (probably re-naming which helps loads). then switch back to get the next bit - working with IR and my code editor side by side to build the page incrementally.

Certainly would not recommend exporting a whole layout as slices and using the generated html/css, which i think is probably what limbo was getting at :)

[limbo]

Ben - you are absolutely right - slicing has it's place for optimisation - my points were aimed more at the results of exporting sliced files from an image editor.

[Lynque]

I have to agree with Limbo, having used both methods in the past - I find CSSP is far easier to use and has much more flexibility.

Slicing has it's place but not for the design/development of an entire site.

[Lynque]

Sorry to leave you out of the last mention benehina...