Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : Slicing PSD into websites

[Pete]

Anyone got any advice/links on properly slicing psd templates into html websites.

It's my least favorite part... ahmm anyone want a job slicing and coding templates?

[abang]

You can try using ImageReady. It comes free with PhotoShop. I can do the slicing and coding for you if you like.

[Rich2k]

One big bit of advice. Once you have sliced your webpage into HTML.... regenerate all of the HTML yourself (either using handcoding or decent software) as photo packages generate horrible HTML usually going overboard with colspans and rowspans... which don't downgrade gracefully.

[InternetPEI]

Pete,

I can vouch for abang, I had him do the finishing touches on a psd for me recently.. He was quick and did a good job on that psd.

[Hamad]

Any one can explain that answer for us ... its important for me same as Pete
Regards

[chrisrhee]

When you use a program to do the HTML coding for you, it generates a lot more code than what's absolutely needed. Also, it may not load properly in all browsers.

Coding by hand can reduce file sizes of the pages and also you can be more precise because you know exactly what you want the design to look like and how you want it to function.

[Charlottezweb]

There's an art to it if done properly. It's also a good idea to think about the way it will be sliced while you're designing it in the first place. Slicing should influence good design.

But that said, think of the image as made up of tables. Slice around anything that will need to be linked (or a rollover) first since those need to be done fairly exact. You don't want mouseovers that aren't exactly where the buttons are.

After that, I slice out the main content area(s). Then if there are single -colored websafe portions, you'll want to slice those together so you can just use code instead of the graphics for those cells to save space and increase load times.

It's not extremely difficult but it's definitely something that you'll get MUCH better at the more times you do it.

I TOTALLY agree with the fact that I NEVER use generated code from a graphics program. I code that by hand after I've exported everything. You will have a much more stable and compatible page if you do this.

Feel free to ask specific questions if you have any.

Jason

[platinum]

Yes, never use the coding from programs like imageready, awful stuff. You want to use CSS where possible, and hand-selecting and slicing is the only way to efficiantly do it

I have coded a ton of layouts for people in the past, so if you're looking for someone...

[Rich2k]

I just love the way people claim that css is the answer to everything. Layout tables are OK so long as you use them well (i.e. keep WAI compliance).

However the image packages don't.

I let the image packages generate the slices for me but then I completely re-write the HTML properly i.e. get rid of the millions of colspans and rowspans. Faster to render too.

[platinum]

Originally posted by Rich2k
I just love the way people claim that css is the answer to everything. Layout tables are OK so long as you use them well (i.e. keep WAI compliance).

Nothing wrong with using tables for complex layouts, but a lot of the time you will fine CSS is the answer to everything, if you don't start implementing it on your sites you will be left behind in the rush. Sites like www.news.com, www.wired.com and www.espn.com are all CSS layouts - maybe you should let them know about the advantages of tables

[Charlottezweb]

Not to jump in this battle, but why bother slicing psd's in the first place if you're talking about a "news layout" like the sites you mentioned? I'm not picking sides either way but when I think of slicing psds, I'm thinking of a site involving heavily integrated graphics or a least something that I couldn't do with just tables alone. Those example sites are all simple formats unless I'm missing your point.

Jason

[Rich2k]

Originally posted by platinum
Nothing wrong with using tables for complex layouts, but a lot of the time you will fine CSS is the answer to everything, if you don't start implementing it on your sites you will be left behind in the rush. Sites like www.news.com, www.wired.com and www.espn.com are all CSS layouts - maybe you should let them know about the advantages of tables

I do know the difference and I do know how to design an entirely CSS website (and have done so) I just don't 'currently' see the point. Of course when doing a three column DIV site float:left is your friend Although I notice you using layout tables on your site too

BBC recently redesigned their site and they didn't go CSS layout.

Actually no I often design nav structures in photoshop and then slice them and export. Also I might design the entire page in photoshop (including where the HTML text will go) and then just remove those spacer images from that part from the template with putting the HTML back together.