Topic awaiting preservation: Creating HTML fromo a PSD (Page 1 of 1)

Hi guys and gals,

I've heard that it's possibe for Photoshop (or maybe ImageReady) to output a HTML page from a PSD, it uses it's layers to place everything into a large ugly un-semantic table based layout, but all text is preserved etc...

I've not yet been successful in findout out how to do this, is it an urban myth or is it actually possible, any clues how it can be done?

Reason being is that I need to make a few prototypes for useability testing, the code won't actually be used for the final product, so doing something like this will help make the pprocess a lot quicker as they're quite complex designs.

TIA

Cheers,

Never having worked with that feature, I still believe it's called 'slices' - so have a look into the online help under that keyword.

Just do 'Save Optimized As...' and select HTML as file type.

You would need to do the slices first or else you'll probably just get a big fat image. There should be a sample .psd with "web page" in its file name you can test out somewhere in \Adobe\Photoshop (version)\Samples.

Yes it is indeed called slices. The "slice" tool looks a bit like a knife and it's one of the 6th first tools on top of the tool panel.

This is how I use it:

1. Make sure you have set all your guides properly all over your image, just like you want it to be sliced. Also make sure the option "snap to guide" (or whatever it is called) is turned on.

2. Select your slice tool and create your slices as needed. They will stick to your guides.

3. Now you can use the slice selector tool (click and hold the slice tool and wait for the other options to appear, I'm sure you know what I mean), double-click on each slice and give them a name, an URL, a target or whatever you need in the option box. Note that the names you give to the slices will be the names of your pictures.

4. Save for Web: here you can selected each of your slices again and decide if you want .gifs, .jpgs, and so on. You need to make sure that each of them is the type you need.

5. Save, give a title to your file (which will be the name of your HTML page). You're done.

Then, wherever you saved you file, you will get an HTML page with a directory next to it called "image", which contains all your images.


Hope this is helpfull and what you are actually asking about!
Cheers

Well I thought it may have something to do with slices, but using the slice tool will just create images won't it? I was hoping there was some magical way of preserving text too.

Maybe this is where I only heard part of a story and put my imagination to work

What do you mean by "preserving text"? Making it selectable or something?
Don't forget you're working with an image edition software

Yeah I know but that's why I thought it was quite an amazing feature

Not quite that amazing

Actually it is quite amazing when you consider it as a part of the entire package. The slicing and outputting is a huge part of the productivity advantage of PS/IR. The mind boggles if you give it some deep thought!

Consider the GDK for phpBB 2x and you can begin to see the potential of this software for streamlining repeatable tasks, add to it the actions, layer styles and scripting capabilities that are coming along in PS, it's at this point that my mind begines to boggle! I've had fantasies about a Windows/Mac web server running scriptable Photoshop instead of Apache/GD. Slightly more expensive but I'm sure the capabilities would be in line with the expense!

But even scaled back it can be quite helpful in a production environment where time is money (I use GDKs like the one for phpBB2 a lot).

There's a couple of old but applicable slicing tutorials at the gurusnetwork