Psd --> Editable Html

htdefiant

Sep 30 2007, 12:23 AM

Here's the deal. I am new at working with web objects in photoshop. I have CS3, and I created a really nice template. I'm told I have to do something with slicing. So I have the template, and it has images, buttons, and text on the buttons, and text fields, etc. How can I export this to HTML and images, and be able to open it up in dreamweaver in an editable web page? I've tried exporting to "web and devices" and exporting as HTML and Images, but when I open it up in dreamweaver, it looks right, but it is all images.

Thanks

Comment/Reply (w/o sign-up)

acantocephala

Oct 1 2007, 01:45 PM

It's not so hard...

First of all I haven't use CS3 but CS2 so I guess there's no a big difference. Here's an advice first:

* I't a bad idea to try to make the whole template with images 'cause your web site will load slow. You must use the images the header and maybe the footer, and the rest of the body use html, trying to combine the color of yor header with your html background and so on... About CS3 you were right, you could use the web and devices tool with the slice tool.

You can find the slice tool as part of the Ps tools and it's seems a cutter tool image... so pic that tool and try to draw "squares" over your CS3 image. The tool is quite smart and it will numerate each slice. You must try to make pieces and make a sort of a puzzle with your PSD image. One your finished, export your image with web and devices option menu; set the parameters (if yu want jpg's or png's or gif's and the quality) choosea name for the file, the target folder and save it, or better said, save them, because CS3 will make for you separate images as slices you did with; after that go to dreamweaver and using tables "re-compose" the puzzle by loading the images previoulsy sliced and stored by CS3

Comment/Reply (w/o sign-up)

html

Nov 5 2007, 08:59 PM

QUOTE(acantocephala @ Oct 1 2007, 06:45 PM)

It's not so hard...

First of all I haven't use CS3 but CS2 so I guess there's no a big difference. Here's an advice first:

* I't a bad idea to try to make the whole template with images 'cause your web site will load slow. You must use the images the header and maybe the footer, and the rest of the body use html, trying to combine the color of yor header with your html background and so on... About CS3 you were right, you could use the web and devices tool with the slice tool.

You can find the slice tool as part of the Ps tools and it's seems a cutter tool image... so pic that tool and try to draw "squares" over your CS3 image. The tool is quite smart and it will numerate each slice. You must try to make pieces and make a sort of a puzzle with your PSD image. One your finished, export your image with web and devices option menu; set the parameters (if yu want jpg's or png's or gif's and the quality) choosea name for the file, the target folder and save it, or better said, save them, because CS3 will make for you separate images as slices you did with; after that go to dreamweaver and using tables "re-compose" the puzzle by loading the images previoulsy sliced and stored by CS3

Thanks having a good tutorial which you replied to the question. its really good and easy to understand slicing tools for web designers.

Comment/Reply (w/o sign-up)

iGuest-

Aug 21 2008, 10:21 AM

I still don`t get it, after all the work done in photoshop, one has to recompose exactly from the beggining the whole website in dreamweaver..Isn`t there a simple way like converting..Or something..?

Comment/Reply (w/o sign-up)

iGuest-denvahluvah

Sep 23 2008, 08:40 PM

Photoshop CS3
Psd --> Editable Html

Whenever you want to export your images to the web. Photoshop will automatically flatten your image to accommodate for the slicing process. If you do not want a background to your work, leave the default setting in your export settings to ".Gif" to preserve transparency.

Using your slice tool, you can dictate how you wish to have your images to be sliced, ie., (number of rows and columns). After that, when you go into Dreamweaver, my personal favorite was to control layout and positioning is to use the "draw div" icon. This is the same as layers in the previous versions of Dreamweaver. After opening this movable box, you can start adding your images slices into the box numerically. You can expand the box to accommodate for width. Once you reach the desired width of images (example: 5 images across), do not press enter to start your next row, just insert image and it will seamlessly and automatically fall into the first spot on the next row. Once all has been added. Your can move the group and 1 unit and positon it where you wish on your page.

-reply by denvahluvah

Comment/Reply (w/o sign-up)