PS, IR and Dreamweaver

In article <40a1c4a5$0$9409$>, Derek
Fountain wrote:

[…]
PS isn’t an HTML editor, so assuming I can’t get the PS work completely finished before switching to DW, what would be the correct workflow between the products which allows iterations?

Tough it out and use PS for image making and DW for everything else. For your task (omitted above) you don’t need the HTML from Photoshop; all you have is a couple images. Slices aren’t neccessary. For all but perhaps a lot of slicing (and Imageready’s very good slice-on-guides) Photoshop doesn’t do any HTML worth using.

DM design hint – if you can’t noodle out placing images, use DM’s layers. Just don’t nest layers. Overlaps are fine.

Tough it out and use PS for image making and DW for everything else. For your task (omitted above) you don’t need the HTML from Photoshop; all you have is a couple images. Slices aren’t neccessary. For all but perhaps a lot of slicing (and Imageready’s very good slice-on-guides) Photoshop doesn’t do any HTML worth using.

OK, but what about when things get more complicated? I’m just starting to consider a full screen graphic which has two "holes" for text. That will need a decent number of slices. Do you still suggest I save the images as GIFs (or whatever) and build the page using Dreamweaver? If so, that’s a fairly damning commentary on Photoshop’s HTML exporting ability, especially given that they have an application (Imageready) which is supposed to handle all this sort of stuff very smoothly. Where did they go wrong?

OK, but what about when things get more complicated? I’m just starting to consider a full screen graphic which has two "holes" for text. That will need a decent number of slices. Do you still suggest I save the images as GIFs (or whatever) and build the page using Dreamweaver? If so, that’s a fairly damning commentary on Photoshop’s HTML exporting ability, especially given that they have an application

(Imageready) which is supposed to

handle all this sort of stuff very smoothly.

Use the slice palette to decide what slices to export, which slice will have text, etc. You can put the text into the text slice in Image Ready. If you just change a graphic, only export the slice that was changed and replace the old slice with it.
There’s a large range of options that you can select when working with slices and exporting.

http://www.madmousergraphics.com
web design, print design, photography

In article <40a207b7$0$16595$>, Derek
Fountain wrote:

[…]
OK, but what about when things get more complicated? I’m just starting to consider a full screen graphic which has two "holes" for text. That will need a decent number of slices. Do you still suggest I save the images as GIFs (or whatever) and build the page using Dreamweaver? If so, that’s a fairly damning commentary on Photoshop’s HTML exporting ability, especially given that they have an application (Imageready) which is supposed to handle all this sort of stuff very smoothly. Where did they go wrong?

You have introduced a very interesting point of view, Derek. I am guessing that you found, or learned Photoshop first and presumed it would be the tool to make web pages; Photoshop’s complex nature and great expense would seem to indicate that it is a web page tool, but it is not. (I did not put that as well as I could have.)

Okay, rather than dithering over learning concepts let’s solve your problem. First, using Photoshop alone you can create your full-page graphic and float the text in the image as you wish using a text layer. Type the text where you wish in Photoshop, add an optional white background to the text area if you like. Flatten, save and be done with it using slices _or not_ because with a full page graphic the slicing offers no advantage other than loading pieces of the picture at a time, keeping the viewer amused, perhaps, as the page loads.

Full-page images are ‘expensive’ in web terms because they take a long time to load. It might be that your graphic can be approached in another way that would load much faster, but I can’t tell from here.

Use the slice palette to decide what slices to export, which slice will have text, etc. You can put the text into the text slice in Image Ready. If you just change a graphic, only export the slice that was changed and replace the old slice with it.
There’s a large range of options that you can select when working with slices and exporting.

I must be missing something. I’m using Photoshop CS, and I can’t see anywhere in the slices palette which allows me to say I want to export that/ slice, but not /that/ one. Can you point? :o}

I can set a slice to have text, but I need several paragraphs, all with formatting. The dinky little text box in the slices palette isn’t really the tool for the job.

What I was hoping for was some option where I could export the HTML and image files, but in some intelligent way where it leaves in place any editing I’ve already done to those HTML files. I can export just the images, which has the right effect unless I change the slices, in which case it doesn’t help much.

On Wed, 12 May 2004 14:33:01 +0800, Derek Fountain
wrote:

After a couple of years of using PS, I figured it was time to have a look at web site creation work with PS and Imageready. Better late than never. :o) I have a small amount of experience with Dreamweaver (and HTML editing by hand), so I gave myself a task:

Create a fancy top and left border in PS
Mark them as slices
Mark the remaining part of the "page" as a text area Export to HTML and load into Dreamweaver

I did all of the above. It’s pretty simple. :o) However…
I loaded the page into DW and added some text to the "main" area of the page. I saved it, then decided that I wanted to change the borders. I went back to Photoshop, tweaked, then saved the HTML again. This process overwrote the text area editing I’d done in DW.

PS isn’t an HTML editor, so assuming I can’t get the PS work completely finished before switching to DW, what would be the correct workflow between the products which allows iterations?

Use PS for images. Use Dreamweaver for site building. Use IR as a paperweight (the one thing it would be really useful for if you could make into a physical form). If you need a really good web image editor that does slices properly and is everything that IR isn’t, you need to invest in Fireworks. Having said that, you can do a lot inside PS without ever having the sinking feeling that comes with launching IR.

—

Hecate

veni, vidi, reliqui

You have introduced a very interesting point of view, Derek. I am guessing that you found, or learned Photoshop first and presumed it would be the tool to make web pages;

No, not really. I presumed it would be the tool to take an image and turn it into a format where it can be used in a web page. That appears to be correct – there’s lots of slicing options, HTML exporting options, and a complete program for tuning GIG/PNG/JPEG images to be suitable for web use.

What I further presumed was that those tools would acknowledge that the web designer would take the PS-produced HTML and work with it some more, by hand, with Dreamweaver, or whatever. If that presumption was correct, PS would provide a way to control the output of the images slices and their HTML such that they didn’t trash the HTML work done outside PS. It’s this point where I seem to be wrong. I can’t see how PS allows an iterative workflow – PS to Dreamweaver to PS to Dreamweaver, and so on.

I was wondering if anyone had evolved a work flow which allows such iterations, perhaps using the PS HTML as DW templates or something. I can’t figure out such a method, but surely people do this all the time? Maybe not…

Full-page images are ‘expensive’ in web terms because they take a long time to load. It might be that your graphic can be approached in another way that would load much faster, but I can’t tell from here.

I see exactly what you’re saying, and appreciate your suggestions. However, my concern has now gone past my specific objective into the more general. Your suggestions don’t require the use of slices – you are by passing the entire PS feature. But slices are a big feature of Photoshop, Imageready and Illustrator, and your approach (and my experience so far) seems to suggest they are worthless and only there to be worked around. Surely that’s not right? All that work by Adobe is for nought?

In article <40a2d167$0$16587$>, Derek
Fountain wrote:

[… read and understood …]
I was wondering if anyone had evolved a work flow which allows such iterations, perhaps using the PS HTML as DW templates or something. I can’t figure out such a method, but surely people do this all the time? Maybe not…

There is no relationship between DM and Photoshop if you mean something like the way DM manages libraries and global changes between separate Macromedia programs. They are two separate things, and in fact, Macromedia and Adobe have competing products. There is no reason the two programs should cooperate.

But I do use DM (mx) and Photoshop and Imageready and none of DM’s sister products, but I always work from DM as a base. IMHO that’s the only way to work. Where there are complex slices to create, I cut and paste the HTML from Imageready and then place and manage the results in DM. Any other way is backwards, IMHO.

I see exactly what you’re saying, and appreciate your suggestions. However, my concern has now gone past my specific objective into the more general. Your suggestions don’t require the use of slices – you are by passing the entire PS feature. […]

Incorrect, as mentioned above. I have used very complex slices, all sliced using Imageready and bringing the code Imageready produced into DM. That’s the proper workflow because it’s really all about HTML, Javascript, the page itself and imaging is pretty much the easy part. I suggest you work from the page outward, don’t try to cut web code in Photoshop unless it’s quite simple.

In article , Hecate wrote:

Use PS for images. Use Dreamweaver for site building. Use IR as a paperweight […]

I’ll defend ImageReady. It has at least one feature that is very useful: automatically slicing on guides. Hugely useful, fast and reliable for a few jobs I’ve done.

What I was hoping for was some option where I could export the HTML and image files, but in some intelligent way where it leaves in place any editing I’ve already done to those HTML files. I can export just the images, which has the right effect unless I change the slices, in which case it doesn’t help much.

In ImageReady, use File >Export Optimized as
That brings up a dialog window which includes a menu where you can choose to output all slices or only selected slices. Just select the ones without text. There’s also a menu to choose to output images only, html and images or html only.

http://www.madmousergraphics.com
web design, print design, photography

In ImageReady, use File >Export Optimized as
That brings up a dialog window which includes a menu where you can choose to output all slices or only selected slices. Just select the ones without text. There’s also a menu to choose to output images only, html and images or html only.

Ah yes, thanks. Still doesn’t really do what I thought should be possible, but I think jjs is right on this issue: it’s best to write the HTML once from Photoshop/Imageready slices, then work with it exculsively in a proper HTML editor. If the editing process needs iteration, simple selected saves like you suggest might help, but in general expect to have to do it the hard way!

Thanks for your help, much appreciated!

On Wed, 12 May 2004 21:52:13 -0500, (jjs)
wrote:

In article , Hecate wrote:

Use PS for images. Use Dreamweaver for site building. Use IR as a paperweight […]

I’ll defend ImageReady. It has at least one feature that is very useful: automatically slicing on guides. Hugely useful, fast and reliable for a few jobs I’ve done.

<g> Fireworks does it much better 🙂

—

Hecate

veni, vidi, reliqui