I have been playing with css these days. And the experience so far has been amazing. I thought I should share this not-so-secret technique to create CSS menus.
You must have seen those rounded corner CSS based tab system that probably make you jealous. After following this you probably would be able create your own. ;)
Things you need:
Photoshop, any text editor (I used Notepad++), web-browser (please use Firefox and save the developers)
Making rounded corners with photoshop:
Follow these instructions (upto step 6).
Assuming that you have created the rounded corner shape and loaded the selection according to step six, create a new layer in the layers pallete.

Now, select the paint bucket option and take a light foreground color (I used #BFBFBF. This is the color of the tabs) and fill the layer with this color. You can do this by clicking on the selection.

Now, hit CMD/CTRL+D to deselect the layer. Select the Move tool (or just press v). Then hit CMD/CTRL+T. This brings the free transform tool. (You'll see a border around the layer)
Photobucket




Holding down the shift key click on the bottom corner of the layer (where the pointer changes to an inclined arrow) and drag the figure until you want the desired size of the tab. I would recommend to have a size of 180px by 35px. (35px will be the height of the tabs) You can view the size while dragging with the info pallete selected. (The info pallete is situated on the top right of the PS window.)
Once you are done with the size, hit enter/return. Now you have the following figure:

Now, select the move tool (or just hit V). Holding down the ALT key, drag the layer. You'll find a new layer as you drag.

Now, again select the paint bucket and fill the new layer with the color you want as the color of the tab when the mouse is on the tab. I used #5F5F5F.

Select the move tool (or hit V) and drag the new layer just below the other one. (Make sure it's exactly below the other layer. It won't be too tough: when you drag the new layer PS kind of aligns it just below the layer. Call it "magni"-ficent!)

Holding down the CMD/CTRL click on the two layers in the layers pallete to select both the layers.

Now create a new document of 180px by 70px size (the size is such to accommodate the two selected layers). Make sure the background is transparent.
Drag the two selected layers to the new document with the help of the move tool. Fit the layers just inside the new document.

Now select the slice tool (or just hit K). ( if you are not familiar with the slice tool, here is a nice guide) Slice the document on the left with about 5px width.

Now, go to File>Save for web and devices...In the next dialogue box, don't change anything if you don't know what you're doing. Just hit save. And save this with your desired name (I used "nav") and in your desired location.
Now, we are done with the photoshop things. Uff! Long journey. If you open the location you saved the file, you'll find an HTML file with your preferred name and an "images" folder. In the images folder, you'll find the sliced images.
Next we are going to work with the CSS.

Labels:

blog comments powered by Disqus