Javascript 
Menus Skin Menu
Menus Skin Menu Menus Skin Menu In this tutorial i show you how tu make a menu with Photoshop and Dreamweaver (html and css).
1. Create a new document in Photoshop, I chose 1024 x 768 px the size!
2.Create a new layer and set the name Background and put wathever color or texture you wish, I chose a texture that simulate the wood.
3. Now let's get to create a button!
4. Press Ctrl+Shift+N and create a new layer and set the name “Home”.
5. With new layer selected key to radius 2px and the color of the first button let’s set #97624A.
6. You must download a brush wich simulate a stitch, the brush you can download from here: http://www.brusheezy.com/Brushes/1637-Stitch.
7. Create a new layer and set the name “Stitch”.
8. Select the Brush Tool by pressing B, load the new brush and chose one you love, set the color #AE9C94, and put the size 8 px.
9. With layer selected, press Shift and make the contur of the button inside. The button must look like this:
10. Selected the layer Stitch then click-right press Blending Option and apply Drop Shadow with the value:
11. Select the text tool (T) and write name of the button, Home in thise case, select the font, I chose the arial and the size of the font, I put 22px.
12. Click-right press Blending Option and apply:
Drop Shadow: Blend mode = Color Dodge (alb), opacity 16%, angle 123grade, distance 2px, size = 2px;
13. Inner Shadow: Blend Mode = multiply (black), opcity 60%, angle 123, distance 1px, size = 4px;
14. Color Overley: Blend Mode = normal, color = #3e3c3d, opacity = 25% .
15. Select the layer Home (the button), right-click, press blending option, tick Inner Shadow with these value:
16.The button should look like:
17. Create a new folder and put the name Home, then drag the 3 leyer (home, stitch and home-text) in to the folder.
18. Select the folder, press Ctrl+T (transform) and then rotate like these:
19. Select the Home layer, right-click select Blending Option tick Drop Shadow and set the next value:
20. Now just remains to duplicate the folder "Home", change the name and the color of the button.
21. Finally, our menu should look like this:
22. If you want can applay a texture, I chose a texture that simulate a snake skin.
23. Select layer Rectangle, right-click, press blending option and put thise value:
23.1 Drop Shadow
23.2 Bevel and Emboss
23.3 Texture, you can download this texture from adobe site: http://www.adobe.com/cfusion/exchange/index.cfm?from=1&o=desc&exc=16&event=productHome&s=5&l=-1&cat=197
23.4 Color Overlay
23.5 Pattern Overlay
24. And this is the finish results:
1. Create a HTML document and put the name index.html
2. In the HEAD section your cod must look like thise:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Skin Menu</title>
<link rel="stylesheet" type="text/css" href="css.css" media="all"/>
</head>
3. In the BODY section create the button with the coords method:
<div class="menuContainer">
<div id="nav_links">
<img src="nav_links.png" alt="" border="0" usemap="#nav_map" height="130">
<map name="nav_map">
<area shape="poly" coords="135,2,123,-1,52,86,90,119,191,3,159,3" href="#" alt="">
<area shape="poly" coords="172,19,125,86,159,116,281,-7,201,-9,193,1,184,9" href="#" alt="">
<area shape="poly" coords="272,1,192,87,224,116,335,-1" href="#" alt="" >
<area shape="poly" coords="342,-2,258,85,291,120,398,-2" href="#" alt="">
<area shape="poly" coords="407,-2,321,86,360,120,473,2" href="#" alt="">
<area shape="poly" coords="107,9" href="#" />
</map>
</div>
</div><!--Menu Container-->
Where is the # you must put your link. If you download and import in dreamweaver the index you can edit very simple the coords of the button. You have the anchor points and simply click and drag!
@charset "utf-8";
/* CSS Document */
body {
background:url(bg.jpg) repeat top center;
margin:0 auto;
}
.menuContainer {
float:left;
width:550px;
height:130px;
margin-left:700px;
}
