Our Collection Of Articles
Optimizing Images
Written By:
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.
|