photoshop PSD file to HTML

Hello,

I have a relatively complex file a designer made for me. The designer
saved it as a photoshop PSD file. I've opened it in photoshop and see
that it's saved in many layers, as I expect it should be.
I need to turn this file into and HTML file. I know the long way to do
it would be use my HTML editor (I use GoLIVE), create tables and drag
each of the pieces of the photoshop file into the appropriate place in
the table(s).
I'm wondering if there is an easier faster way. Are there any
programs/procedures out there to make this tedious process easier and
faster?

Thanks for all your suggestions.

Mike

Michael Shavel wrote:

I have a relatively complex file a designer made for me. The designer
saved it as a photoshop PSD file.

Uh oh... that way lies madness.

I've opened it in photoshop and see
that it's saved in many layers, as I expect it should be.
I need to turn this file into and HTML file.

Oh boy.

(OK, it /is/ possible to take an image and use it to produce a decent
webpage ... but the _designer_ needs to know how to create a decent webpage
in the first place. It sounds like you've got an artist doing your
designing.)

I know the long way to do it would be use my HTML editor (I use GoLIVE),

I'm yet to see a graphical HTML generator that does a good job ... or even a
half decent job.

create tables and drag each of the pieces of the photoshop file into the
appropriate place in the table(s).

No. Tables are not layout tools.

The way to go about this is to identify the areas of the image that
correspond to content areas, and separate out the main portion of those
areas so they can be used as a tiled background for the content areas. Then
locate those sections which act as borders around the content areas, and
separate those out. Then you can use techniques along the lines of those
found at ...

http://www.sperling.com/examples/box/

.... to put them together again with your style sheet.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

I'm wondering if there is an easier faster way. Are there any
programs/procedures out there to make this tedious process easier and
faster?

I don't mean to be over-simplistic about this, but why not save the PSD
file as a jpg and use it? Of course, I haven't seen your PSD file :>)

If it's in layers, saving it as a jpg would merge all the layers and flatten
the image. I'm not sure what that would do to your image. I've created
layered images in Photoshop and merged the layers to create a jpg. Of
course, you would do a "Save As..." to keep your original image intact. I'm
sure you already knoew that, though. :>)
--
Viken K.
http://home.comcast.net/~vikenk

On Thu, 19 Jan 2006 13:43:11 -0500, Michael Shavel
<mshavel (AT) adelphia (DOT) net> wrote:

Hello,

I have a relatively complex file a designer made for me. The designer
saved it as a photoshop PSD file. I've opened it in photoshop and see
that it's saved in many layers, as I expect it should be.
I need to turn this file into and HTML file. I know the long way to do
it would be use my HTML editor (I use GoLIVE), create tables and drag
each of the pieces of the photoshop file into the appropriate place in
the table(s).
I'm wondering if there is an easier faster way. Are there any
programs/procedures out there to make this tedious process easier and
faster?

Thanks for all your suggestions.

Mike

Why not just go to the "layer" button, "flatten" the image,
and then save it as a JPEG? Does it absolutely HAVE to be in PSD
format on the Web page?

On Thu, 19 Jan 2006 13:43:11 -0500, Michael Shavel <mshavel (AT) adelphia (DOT) net> wrote:

Hello,

I have a relatively complex file a designer made for me. The designer
saved it as a photoshop PSD file. I've opened it in photoshop and see
that it's saved in many layers, as I expect it should be.
I need to turn this file into and HTML file. I know the long way to do
it would be use my HTML editor (I use GoLIVE), create tables and drag
each of the pieces of the photoshop file into the appropriate place in
the table(s).
I'm wondering if there is an easier faster way. Are there any
programs/procedures out there to make this tedious process easier and
faster?

Thanks for all your suggestions.

Mike

If it's a good size for a web page, and you don't care about proper html...

Click the "Edit in ImageReady button" at the bottom of the Toolbar.

Arrange slices as needed, Save Optomized as...

You may want to peruse an ImageReady tutorial or two.

HTH

In article <6i31t1ljn9s75feu1g18l5eggkd66aeho5 (AT) 4ax (DOT) com>,
Scotius <wolvzbro (AT) mnsi (DOT) net> wrote:

On Thu, 19 Jan 2006 13:43:11 -0500, Michael Shavel
mshavel (AT) adelphia (DOT) net> wrote:

Hello,

I have a relatively complex file a designer made for me. The designer
saved it as a photoshop PSD file. I've opened it in photoshop and see
that it's saved in many layers, as I expect it should be.
I need to turn this file into and HTML file. I know the long way to do
it would be use my HTML editor (I use GoLIVE), create tables and drag
each of the pieces of the photoshop file into the appropriate place in
the table(s).
I'm wondering if there is an easier faster way. Are there any
programs/procedures out there to make this tedious process easier and
faster?

Thanks for all your suggestions.

Mike

Why not just go to the "layer" button, "flatten" the image,
and then save it as a JPEG? Does it absolutely HAVE to be in PSD
format on the Web page?

No, I don't want it to be a PSD on the web page. I want to convert the
PSD to HTML. I was looking for a fast way to do that. Note, the web page
is relatively complex with lots of links and graphics and such. Just
saving it as a flat image and putting it up isn't practical.

Thanks for all of your suggestions!

Mike

On Tue, 24 Jan 2006, junk wrote:

There is a tutorial at
http://www.photoshopcafe.com/tutoria...02/website.htm

Character encoding error, and 20 HTML syntax errors reported. Not a
good start for a tutorial. The W3C CSS checker refused to even
consider it.

After that, fonts sized in px units, and a web page that insists on
throwing a left/right scrollbar instead of calmly fitting itself into
the window that was provided, comes as no surprise.

using photoshop to create a web page, you may get some ideas from it.

These "ideas" are more than widespread enough already.

But the idea of flexible design is slowly permeating. It's taking its
time, but it's good to see it making progress, despite these desperate
attempts by the entrenched pixel-exact merchants: screenshot at
http://ppewww.ph.gla.ac.uk/~flavell/tests/pshop.jpg

Michael Shavel wrote:

I have a relatively complex file a designer made for me. The designer
saved it as a photoshop PSD file. I've opened it in photoshop and see
that it's saved in many layers, as I expect it should be.
I need to turn this file into and HTML file.

There is a tutorial at
http://www.photoshopcafe.com/tutoria...02/website.htm

using photoshop to create a web page, you may get some ideas from it.

On Sun, 22 Jan 2006 10:17:12 -0500, Michael Shavel <mshavel (AT) adelphia (DOT) net> wrote:

In article <6i31t1ljn9s75feu1g18l5eggkd66aeho5 (AT) 4ax (DOT) com>,
Scotius <wolvzbro (AT) mnsi (DOT) net> wrote:

On Thu, 19 Jan 2006 13:43:11 -0500, Michael Shavel
mshavel (AT) adelphia (DOT) net> wrote:

No, I don't want it to be a PSD on the web page. I want to convert the
PSD to HTML. I was looking for a fast way to do that. Note, the web page
is relatively complex with lots of links and graphics and such. Just
saving it as a flat image and putting it up isn't practical.

Thanks for all of your suggestions!

Mike

a-ha, lots of links. Graphical links? You can some really neat stuff with
graphical links in ImageReady. I just dug up the only ImageReady page I ever
built - all based off a single .psd (with some slices' colors changed for hover
effects) It's not very pretty, and never was optimized, but you can gut an
idea of what can be done.

http://thedings.servebeer.com/Nyquil%20BAK/
--
LesterOfPuppets
http://stumptownrock.servebeer.com/
http://thedings.servebeer.com/

Just wanted to thank everyone for their suggestions!! They were very
helpful.

Mike



In article <mshavel-3AB1C9.13431119012006 (AT) news (DOT) isp.giganews.com>,
Michael Shavel <mshavel (AT) adelphia (DOT) net> wrote:

Hello,

I have a relatively complex file a designer made for me. The designer
saved it as a photoshop PSD file. I've opened it in photoshop and see
that it's saved in many layers, as I expect it should be.
I need to turn this file into and HTML file. I know the long way to do
it would be use my HTML editor (I use GoLIVE), create tables and drag
each of the pieces of the photoshop file into the appropriate place in
the table(s).
I'm wondering if there is an easier faster way. Are there any
programs/procedures out there to make this tedious process easier and
faster?

Thanks for all your suggestions.

Mike