Using Photoshop with Dreamweaver

henrikjt · 11-03-2008, 10:42 PM

Hello All,

I've been watching lynda.com training videos on "Dreamweaver" and "Photoshop for the web". Almost done with the photoshop video. One thing that is not clear to me is: can i create the full page in PS and then just add the links in DW?

Please look at this example: This looks like a complete layout, would one slice it up and import each image or would one save it in html.

OdinSmasher · 01-26-2009, 09:56 PM

you could look into hotspots to be used but that would limit any rollover effects

Vanish Design · 02-05-2009, 10:56 PM

It may be possible but I wouldn't recommend it. You'd end up with an inefficient, image heavy page, and I'm not sure if it would use tables or CSS for layout but I'd bet on the former.

Haqqan · 02-07-2009, 11:30 AM

This is basically what I do, but I don't know how good it is. Sure is easy though

Basically I slice them in PS then make the image where there's supposed to be text a table and make the image that was intended there the background of the table. The links are all seperate slices. Very very easy and if you "saved as web" in ps the images will be pretty light-wight .gif's so it's not that very heavy. Another option is to make iframes of the image where you want text.

I really don't know if this is the best way, but as i said, it's a very easy method

adamblan · 02-07-2009, 09:31 PM

Quote:

Originally Posted by henrikjt

can i create the full page in PS and then just add the links in DW?

You could, but like Vanish said, that would be a bad idea...

PixelPusher · 02-13-2009, 05:24 PM

I would not create the whole page in PS and then just add links in DW. Bad practice. Way too heavy on images. Just use images for the more intricate stuff like the map, logo, and tea cup. If you slice the site up corrcetly, many of those solid color areas can be replaced by just a hex color. There may be a slight shift in color, by using hex instead of the image, but nothing drastic.

As for your buttons, the dark grey box seems to have a styled border. You could make the button background into three images: left cap, right cap, and a tile image. That keeps the images small, and the tiled one should only be 1-3 pixels wide. If you set these images as the background (L/R cap images as no-repeat, and tile image as repeat-x) you can still acheive that same look as in the psd file. Then just add the text links into the TD or DIV. What structure are going to use? Tables? Tableless?

When getting started with the slices, I would use guides in PS to help lay them out. The snap feature also works well; assures the slices will not overlap and will fill the designated areas perfectly.

Good luck

11-03-2008, 10:42 PM	#1
henrikjt Bronze Member Join Date: Oct 2008 Posts: 59	Using Photoshop with Dreamweaver Hello All, I've been watching lynda.com training videos on "Dreamweaver" and "Photoshop for the web". Almost done with the photoshop video. One thing that is not clear to me is: can i create the full page in PS and then just add the links in DW? Please look at this example: This looks like a complete layout, would one slice it up and import each image or would one save it in html.

02-05-2009, 10:56 PM	#3
Vanish Design New Member Join Date: Feb 2009 Posts: 19	It may be possible but I wouldn't recommend it. You'd end up with an inefficient, image heavy page, and I'm not sure if it would use tables or CSS for layout but I'd bet on the former. __________________ VanishDesign.com - Austin Web Design Austin Web Design Blog

02-13-2009, 05:24 PM	#6
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	I would not create the whole page in PS and then just add links in DW. Bad practice. Way too heavy on images. Just use images for the more intricate stuff like the map, logo, and tea cup. If you slice the site up corrcetly, many of those solid color areas can be replaced by just a hex color. There may be a slight shift in color, by using hex instead of the image, but nothing drastic. As for your buttons, the dark grey box seems to have a styled border. You could make the button background into three images: left cap, right cap, and a tile image. That keeps the images small, and the tiled one should only be 1-3 pixels wide. If you set these images as the background (L/R cap images as no-repeat, and tile image as repeat-x) you can still acheive that same look as in the psd file. Then just add the text links into the TD or DIV. What structure are going to use? Tables? Tableless? When getting started with the slices, I would use guides in PS to help lay them out. The snap feature also works well; assures the slices will not overlap and will fill the designated areas perfectly. Good luck __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

01-26-2009, 09:56 PM	#2
OdinSmasher New Member Join Date: Jan 2009 Posts: 7	you could look into hotspots to be used but that would limit any rollover effects

02-07-2009, 11:30 AM	#4
Haqqan New Member Join Date: Feb 2009 Posts: 4	This is basically what I do, but I don't know how good it is. Sure is easy though Basically I slice them in PS then make the image where there's supposed to be text a table and make the image that was intended there the background of the table. The links are all seperate slices. Very very easy and if you "saved as web" in ps the images will be pretty light-wight .gif's so it's not that very heavy. Another option is to make iframes of the image where you want text. I really don't know if this is the best way, but as i said, it's a very easy method