[badtz]

Greetings,

I was wondering what's the most effective way to slice up a photoshop'ed webpage into dreamweaver?

When you go to a webpage like http://www.tdk.com/ how is it that they have these really slim lines of graphics loading up? [4 pixels height x 100-200 pixel width]

How were they brought into dreamweaver?

Also, what's the most efficient way to get your idea from photoshop into dreamweaver?

* i know it's dependent on the site, but I'm just asking in "general" *


Thanks for any help!

[bluedog]

I've used Photoshop 7 (version 6 will also work well) and create my menus and such in layers. Save the file.

Then I switch to Imageready (which as a more limited toolset, hence the reason to start in photoshop). I create the slices where I want them, then flatten the different rollover/effects onto separate layers. This makes it easier to do their 'rollover' options.

[Make sure if you save, to save with a new name to not write over the original layered file.]

Then do the Export Original and make the settings to include the HTML and slices. The naming conventions for the slices is a bit confusing, but you can either manually edit the filenames or figure out how it works. I usually just leave them how they are exported. Export into a new folder.

Then open the HTML file in Dreamweaver. The code can then be pasted into your own pages. Its not as streamlined as I would have liked, but it is an elegant way to get the advantages of HTML export with rollovers from Photoshop/Imageready.

The other option which is a bit more flexible but takes some more work is to simply export the sliced graphics and then 'build the rollovers' from within Dreamweaver manually using the actions. The advantage of this method is Dreamweaver has control of the rollover code and you can modify it from within dreamweaver a little easier.

Learn to look at the code and understand how Dreamweaver or Imageready is creating the effects. Its essential to making a good site that does exactly what you want it to.

[badtz]

Thanks for the the tip!

one question :

Since you have a separate layer containing the "rollover" images in ImageReady .... do you export everything out twice? [once for the "off" pictures, and again for the rollover images]?

I'm not sure how that works?

also, what exactly is "flatten" an image?




thanks!

[philzilla]

their site is littered with Macromedia code, so i'd take a wild stab in the dark, and guess they may have used Fireworks for the layout, then imported the whole thing into Dreamweaver

[badtz]

would fireworks be used as a photoshop or imageready replacement? [in their case]

thanks!

[philzilla]

very much so, in Image Ready's case. IR is basically ripped off Fireworks anyway.

you can do whole sites with just Fireworks & Dreamweaver. some people would frown if they didn't see Photoshop being opened at least once during the construction of a site, but *gasp* it is not completely necessary.

for web work, Macromedia win (in my book)

go take the tour: http://www.macromedia.com/software/fireworks/

[bluedog]

Originally posted by badtz:
Thanks for the the tip!

one question :

Since you have a separate layer containing the "rollover" images in ImageReady .... do you export everything out twice? [once for the "off" pictures, and again for the rollover images]?

I'm not sure how that works?

also, what exactly is "flatten" an image?




thanks!

To flatten each section of layers (if you have several items on separate layers for a specific rollover). It would be easier to describe by looking at a PSD file.

The flattening isn't necessary as much now since we have layer effects for almost everything. If you find your rollovers don't appear to work as you want, the method I use for merging layers together (and destroying their separate editability) is to link them, then press CMD-E which merges the layers into one.

This shortcut also works if you only have one layer selected, when pressing it, by merging the current selected layer with the one below it.

Its a fast way if you have copy/pasted and a new layer is formed.

I'll see if I have any older rollover examples I could post (not something I've currently used for a client or myself). If not please anyone else wanna try posting an example of their work as a PSD?

There's another thread of someone asking for just this sort of thing in the Graphics forum.

[badtz]

that other person in the graphics forum is me also


I'm still a little unsure of how you export the images in ImageReady ...?

Do you export twice? once for the "off" pics and again for the "on" pics?

currently, how I do it is ... I create a separate layer for my "on" and "off" pics, and use the same slices to export each layer separately...

?

[nextadvantage]

I bring my psd's into fireworks to slice em' much easier and I think I can optimize the graphics better in fireworks. It is also easy to ad behaviors to your graphics in fireworks. Such as rollovers or menu's