Optimizing Images
Optimizing slices can sometimes be tedious and time consuming, especially when you have all those rollover states; but it is possible to save your optimization settings in the Optimize window. To see the results, click on the Optimized, 2-Up or 4-Up tabs on the top left of your main window. You can use these to compare the various settings to get the best quality, smallest sized graphic possible.
For buttons like the ones I've done on the left menu, it is possible to export all of them from a single slice - if they all look the same - just by changing the text or whatever. Here I've chosen to show another scenario; where the buttons' layer has a lighting effect that causes a slightly different shading on each. So I will just export them from their exact position in the layout.
Here are a couple of tricks to help keep your file sizes down and to spice up your table cells. If you can stretch or tile an image, say in a pattern or gradient like I used in my example, you can cut it down to 1 pixel by "n" pixels (or whatever ratio you require.)
<- (Right) At the top of the layout, I have a transparent "window" and the frame at the top is a 1px by 10px gif that is stretched the length of the window. Here I've shown how to do it by decreasing the size of the slice but it's actually easier just to crop the exported image down to the smallest possible size afterwards. Then I will "stretch" it with HTML code to fit the length of the table cell by giving it a width=192.
<- (Left) For the search box near the bottom, I likewise made a 1px by 73px gradient that will become the background in that table cell. Be careful of using table backgrounds with Netscape 4x, it sometimes doesn't like to cooperate.
When all of your tweaking and fiddling is done, (and remember to save while you're doing all this,) go to File » Save Optimized As.. to export the mockup as an HTML file. The file will be saved to the same directory as your images. If you don't fancy Adobe's code, another option would be to Edit » Copy HTML Code.. which copies to the clipboard the simple table layout of your mockup - no <HEAD> or <BODY> - to be pasted into your own files or called as includes.
HTML Formatting
Now, you can view your page in an HTML editor and clean up all of the extraneous code or insert your own. Odds are that there will be some fine-tuning to do. I can give you some tricks here as well, to prevent headaches. For instance, don't leave any empty table cells. Instead put either a spacer.gif (1px by 1px transparent gif) or a non-breaking space ( ) because browsers tend to have an easier time with tables if they contain something. Netscape 4x is especially buggy this way.
In the <IMG> tag for the top frame, I set the width="n" to however many pixels "n" should be to fit the screen. This is good for fixed tables, whereas if you want it to scale, it would be better to use the images as the cell's background. Keep in mind, that this too can be buggy with Netscape. In the <TD> tag, you would set background="imagedirectory/filename.jpg" or whatever the directory and filename of the image is. Also remember to put a spacer.gif in the cell.
For this particular page, I made the entire background a single image in a size more suited to higher resolutions so that it doesn't appear to tile (see below - scaled down). You can do this by setting the background of the <BODY> tag to the image name. If you are familiar with CSS, you could add the image to the BODY element of your style sheet as "background-image: url (image.file);" and then giving it a "background: no-repeat fixed;" so that is doesn't repeat as a pattern, and stays fixed when the user scrolls the page, for an interesting effect. (And just forget about Netscape 4x altogether with that one.)
So that's about it. Of course, it will take a lot of trial and error before you find a way of exporting your mockups that you feel comfortable with. I recommend experimenting with a variety of programs and techniques to determine this. It is by far, not the most fun or glamourous aspect of web design. But it is pretty important to learn to do it well and do it quickly, because it is so easy to get stuck trying to make things to fit. This is why plotting it out on paper before starting is important. Sometimes when you run into problems, the better strategy is to start over and save the exported HTML as a different version.
Good luck!
About the Author
Jessica VanDusen is a freelance web developer and graphic designer who owns and operates, Visual Stimulus. She is also a contributing partner in Universal Metropolis, a multimedia events collective that specialises in building web-based business and community tools. You can contact Jessica with your questions or suggestions at jessica@visual-stimulus.com
