Step by Step tutorial, from photoshop to slicing to CSS tabless design

[AffiliateDreamer]

Hi all,

Can you recommed a step-by-step tutorial on the process of taking a photoshop design to a css tableless design web page?

[mayest]

Do a Google search on "photoshop slice css design" (no quotes). There is an article that looks pretty good from A List Apart in about the 5th position. You might also find others using that search that fit your needs.

[AffiliateDreamer]

damn that was fast, WebmasterWorld is in the 7th position!

[SuzyUK]

Can you recommed a step-by-step tutorial on the process of taking a photoshop design to a css tableless design web page?

Quick answer = No, sorry no recommendations!

I did try mayest's search but I'm not convinced there is such a thing, I just don't think it's possible without abusing Absolute Positioning in the same way tables for layout is abused :o

Trust me you wouldn't want the long answer ;)

[Xapti]

My answer is that you would use the Photoshop image as a reference. Use the photoshop color codes for as much as possible, then make transparent gifs for various images you may use. Realize that doing special border/corner images can be difficult, but it is doable with non-table layouts, there are many resources on the web.
With your reference image, start coding in divs and such, and then style the CSS... essentially do everything manually. I'm not really what else you're looking for.

[AffiliateDreamer]

Basically looking for a 'best practise' guide on converting a PSD image to CSS. I like learning by seeing and was hoping there was a good video tutorial somewhere on the web (free or paid).

[swa66]

The true spirit of CSS and slicing are almost opposite.

Use the colors, make gradients, bits of graphics like a sliding doors button, backgrounds that you can reposition on hovers etc. all in PS if you like (or any other product for that matter).

But starting from I need to slice means you're almost going to glue it back together in a table like fashion.

Instead: try to think of you document as a set of layered items where you can position a few things around, where you can add backgrounds and here you let the text itself flow in between.

Don't think of it too much as a grid or you'll be fighting it till the end.

[AffiliateDreamer]

Yeah I am just going through some CSS tutorials and that was one of the points that was driven 'home' hehe.

You really need patience designing, looking at a final result can be intimidating, but things seem to work out with a structured approach and slowly building things out: wireframe mockup, adding details and color/gradients, then planning on how you are going to do it in CSS (<b>this is the part i'm trying to get a grasp of now</b>).