[Fetch_Man]

I made my layout in photoshop but I can't seem to find a way to convert it i
nto HTML/CSS. Can anyone show how to do this? And preferably without using t
ables.

Here's the photoshop image:

[IMG]http://img292.imageshack.us/
img292/5953/layoutbl4.th.jpg[/IMG]

[Duckman69]

normally i dont do what your saying with photo shop... i usually either make 1 image or piece for either a banner or background / etc then save that image and upload it to that area of the page...

I know you probably dont want to do this but you have the option of just uploading that image as your background and then then positioning the links exactly where they need to be, and work with the rest from there...

I also belive that if you choose to take the roote you seem to want to you need a java script for that, im not 100% but i downloaded a BUNCH of templates looking at code and looking for pictures i could use, if you goto http://www.freewebtemplates.com/ they have 1000's of free templates download like 2 of them and see the stuff they have in there packs i think your looking for a javascript file like i said... hope i helped some...
~later

[Atcony]

CSS Design Mockup - Here you will find a quick step by step instructions on how to get it done.

ATB

[Duckman69]

nice thanks atcony learn something new everyday ^^

[Fetch_Man]

Thanks for making that page on your website just for me.

I don't understand what you mean in step #5 though, "5. Now you need to specify in image ready the ouput parameters." I couldn't find that in ImageReady. (Using version CS)

And on the Outputsettings menu, there is no CSS export, there's only: HTML, Saving HTML, Slices, Image Maps, Background, Saving Files, and Metadata.

[Atcony]

Yeah, Just for you. You are special

Anyway, I have the same version (CS 8.0) You will get these settings by keyboard shortcut [ctrl+alt+shift+H] too.

There you will find output settings.

Select [slices] and you will be able to generate CSS. I hope this is helpful, and you get it right. Let me know.

If you do it once, you will be able to create mockups within a minute. It's just easy!

That was just a quick version. Will elaborate it later on, with details.

Thanks.

[Fetch_Man]

Will elaborate it later on, with details.

how much later on is the question.

[Atcony]

Well, that's a great question.

How about answering later on.

Anyway you might have got the page sliced by now.

[cperkins]

I wrote a Photoshop plug-in that helps convert Photoshop designs to working web sites. Rather than slicing the page up, you name the layers certain way and it'll figure out the rest (we call it putting "hints" on the layer names, like contact us-button and contact us-rollover).

If you are having trouble figuring slicing out, you should check out SiteGrinder: http://www.medialab.com/sitegrinder

And, even if you understand slicing, SG can be handy. It outputs CSS based sites ,no tables, no slicing. It can convert styled text in Photoshop directly to styled HTML text, supports multiple pages, menus, image gallerys, flash slideshow creation, email forms, and more.

Hope it helps someone,

Chris

[Atcony]

Hello Chris,

Welcome to TechGuy!

That's a great plugin. Thanks for sharing with us. Hope to see you around often.

[WebKing27]

Yep, that's a useful plugin, very neat and clean. Thanks for sharing.

Atcony,

CSS Design Mockup - Here you will find a quick step by step instructions on how to get it done.

The site mentioned by you is good too.