For this tutorial I'll use nice, clean vertical menu which You can make yourself with this tutorial.
First, we have to hide text layers (we leave only "Menu" text) , then we have to think how to slice this menu. Our goal is minimum graphic and small size. You can use graphic bellow for this tutorial if You don't have PSD file from previous nice, clean vertical menu tutorial.
First, we know, that we want to keep "Menu" text Anti Aliased. That means, that the text will be a graphic. Top rounded corner will stay too. We take first separator line too. That will be our first slice (1).
Next we want our menu to be resizable, we will use 1 px height strip - second slice (2) (CSS have repeat-y value).
We don't need a graphic for "bullets" because we can make them using CSS (border-left)
We do need separator strips, we will use 1 px x 2px rectangle, because CSS have repeat-x value - our third slice (3).
Next thing is bottom part with rounded corner - fourth slice (4).
Last thing is hoover effect. We don't need whole hoover gradient, just 1 px height strip (Again CSS will allow us to repeat-y this strip) - final fifth slice (5)
Now go to File -> Save For Web...
First, we can click right mouse button and select "Hide Auto Slices" ... this will make our image easier to "read".
Now we can name our slices and select format/compression.
First Top part (1 on last picture). Click on it Twice and name it as You want. I will name it menu_1. Next from right menu select GIF, because it seems that this format is best (less size).
Next body strip (2). Zoom on it using Zoom Tool (Z), click twice, give a name (for me menu_2), and select format. Again GIF will be the best one.
Now the separator 1 px x 2px rectangle (3). Zoom on it , click twice, give a name (menu_3) and select format. This time GIF wins too.
Zoom out if You want and click twice on bottom part (4). Give a name (menu_4), and select format... again GIF is the smallest one.
The last thing is hoover gradient strip (5). Zoom in, click twice, name it (menu_5), and select format. This time JPG seems to be a better choice (Quality around 60).
Now hit Save. Than from settings set Slices: to All user slices, and Images Only.
Now You have 5 images
1
2
3
4
5
Whole menu graphic is now only 2kb - that's very nice result.
On my next tutorial I'll show You how to code CSS graphic menu with rollovers.
