View Full Version : Starting a site

11-10-2008, 05:25 PM
I have designed a site in Photoshop. I know the basics of Dreamweaver but I am not sure how to incorporate the background image for this site. Here are two sample shots of the Photoshop file (http://www.edsstudios.com/sample/sample1.html , http://www.edsstudios.com/sample/sample2.html ). What I would like to know is how to incorporate the background image of the guitar. As you can see the image passes through the navigation button on the top and bottom. When I slice the page up for Dreamweaver do I just keep the image as part of the page so that it will in essence get sliced apart or is there a way to just place the image as one entire background while still having it look just as it does in these photoshop files? I wan to make sure the site is created in the most efficient matter for future updates. Hope this makes sense. Thanks in advance for the help.

11-10-2008, 06:05 PM
alpha transparency is a headache in web design.
Here's what I think the easiest (albeit maybe not the best) approach.

Add the background image as is, and then slice the nav items. Make sure the background is not part of the nav items. You want them as transparent GIF's from Photoshop. Make sure the color you are transparent towards ('matte' in 'save for web' in Photoshop) is a dark one, preferably a color between the 2 colors in your background image.

11-18-2008, 11:59 PM
Since the background is the same between the two pages presented, you can set up a file, or template preferably, with the guitar image as the background, centerered in your space, no repeat. You will have to have the file somewhat oversized with extra black backround to compensate for larger screens, or you can use a background color, black, that matches the background in your guitar image. You can then place your foreground image, centered or positioned however you need be, over the background image. By using a template with a header-body-footer for most efficient initial setup, you'll be able to place your two sets of nav menuse into the header and footer, while leaving the main content (body) for your other images (in background of main content) with text or whatever else over it. I'm approaching this from the graphics side of dreamweaver, leaving most of the code out. There may be other ways, but this should work just fine, and should be a relatively easy transition from Photoshop. I've found slicing to be a bit dicey, no pun intended!

11-19-2008, 04:11 AM
joesp is right.... slices for me its not the best way at all... its dicey and sometimes results may be different... instead of slicing in PS i use layers and save them individually and them add them in DW. That way you will have your Background appart in a unique layer and the nav in other, so if you want to update your site it will be easier and don't have to change everything.

11-19-2008, 01:17 PM
By 'slice' I mean selecting and saving from PS, I wouldn't do any automatic slicing either :)