Instructables

Build your own website with dreamweaver

Featured

Step 7: Taking it from photoshop to dreamweaver

Picture of Taking it from photoshop to dreamweaver
Or whichever programs you're making the jump with... 

Open up your favourite template and get to work with the slice tool, make a slice that encompasses the entire header. 

Now slice up your navigation bar, cut out each link as a slice, cut the ends either side too, to create a nice clean cutout - leave the big empty piece at the bottom there for now. 

To export the page you'll need to go to save for web, use gif settings (size is best smaller) and when you hit save make sure to hit the dropdown to save images and HTML. 

At this point you should have or make a document in my documents - name this folder "killerjackalope site" as an example, save the page in here, PS will automatically make an image folder, which is handy. 
 
Remove these adsRemove these ads by Signing Up
Pro

Get More Out of Instructables

Already have an Account?

close

PDF Downloads
As a Pro member, you will gain access to download any Instructable in the PDF format. You also have the ability to customize your PDF download.

Upgrade to Pro today!