Roxy

For those of you who have Adobe Photoshop, did you know that you are able to save an image (most likely layout for a website) for web, and get the coding for it automatically! Sounds to good to be true, right? Well it isn't!

Scenario: You've just created a great looking layout for your website using Photoshop, but you're not sure exactly how to save it to use it with HTML coding.

Solution:

Once you are finished with creating your layout, click on the slice tool icon in your left side tool bar.



Click and drag the slicing knife to create "sections" (or boxes) of your layout.

Tip: I usually create a slice for the header, then for the body I slice it into 5 sections, one slice is for the left border, second for navigation, third for the space between the navigation and main content, fourth for the main content, and the last fifth one for the right border. After that the last slice if for the footer.



After you are finished slicing your layout to your liking, click on the File tab at the top left of the window. Scroll down and click on where it says "Save for Web".



Once you click on it, a window will pop-up showing your layout and it's slices. Usually the image will look "faded", if this happens, click and drag your pointer from the left top corner to the bottom right corner and click. You've basically just selected all of the slices to save. On the right hand side you will see a number of options to optimize your slices. I would use the options selected in the image below for your own slices. Then click save.



You will then be taken to the "save as" window. If you have already, create a folder for your files and use the settings below to save as with your files.



Opening the folder you saved everything in, you will notice a folder called images and your index file. The images folder contains the slices of your layout and the index file is your "main" page of your layout.



Right click on the index file and hover over where it says "open with" and choose the program where you would usually edit an HTML document. (e.g. Dreamweaver, Notepad) You'll notice that Photoshop uses tables to code your layout, of course if you are OK with HTML, you can easily change this to divider coding to suit your needs. =)



Good luck!

__________________
Roxanne


Urban Roxy -Personal Blog
SH63 - the best darn shared server!