[網站制作][转帖]制作立体水晶按钮

水晶按钮的教程看过不少，不过看到这个觉得真的不错，推广下>_<
转自Tutorial Park。。英文版（看图也会的吧= =）
预览


Step 1
Let’s start with creating the background for the navigation bar. The background is going to be bluish; the color will be alike with the color of your oncoming menu. Create a new document sized 800×259px with background color (#8caab8). Select foreground color (#e1e8eb), create a New Layer and draw linear gradient (Foreground to Transparent) from top to the bottom of the canvas.




Step 2
Now, let’s create the foundation for our coming navigation menu. Set foreground color (#7fa1b3) and draw 763×80px shape using Rounded Rectangle Tool in the middle of the canvas. Name it Shape and add Inner Shadow to it.



Step 3
Let’s add some shades for the navigation menu foundation. Create a New Layer; send backwards, Ctrl+Click on the Shape Layer, fill selection with color (#86a6b5). Deselect and apply Gaussian Blur (1.8px), then Motion Blur (90deg, 41px). Now apply Gaussian Blur (1.8px) one more time. Set opacity 85%.



Step 4
Now, let’s add some shades. Create a New Layer; Ctrl+Click on the Shape Layer, fill selection with color (#678a9f). Deselect and apply Gaussian Blur (4.5px).
[/img]

Step 5
Add some more shades on the bottom. Create a New Layer, Ctrl+Click on the Shape Layer, select Marquee Tool and move selection 10px down. Set foreground color (#6d838f) and draw Foreground to Transparent gradient from the bottom to the middle of the canvas. Then add one more gradient from the lower left corner up to middle part of the menu foundation. Afterwards, draw such a gradient on the right.



Step 6
Deselect and apply Gaussian Blur (3.6px).


Step 7
Now you should add some inner glow from the top. Create New Layer, bring it forward. Ctrl+Click on Shape Layer select Marquee Tool and move selection 1px down. Set foreground color (#92c2da) and draw gradient starting with 10px above the upper part of the menu down to 10px beyond the upper part of our menu. Deselect.



Step 8
Now add a light stripe to the upper part of our menu foundation. Create a New Layer. Ctrl+Click on the Shape Layer, move selection 40px up and Ctrl+Alt+Shift+Click on the Shape Layer. Set foreground color (#bcd2db) and draw Foreground to Transparent gradient from the lower part of navigation menu up to the upper. Deselect and apply Gaussian Blur (3.6px).



Step 9
Now you should add some light colors all over the menu foundation. Create a New Layer, choose foreground color (#b8c9d1) and make a couple of strokes on both left and right parts of navigation menu using 45px soft brush. Apply Gaussian Blur filter (4px) and set opacity to 50%.



Step 10
Let’s add some light parts to the upper part of the menu. Create a New Layer. Ctrl+Click on the Shape Layer. Set foreground color (#d3e7f1) and make a couple of strokes in the upper part of navigation menu using 80px soft brush. Make a thick stroke in the upper left part of the menu. Deselect.



Step 11
Let’s add some sparkles on the borders of our menu. Create a New Layer. Ctrl+Click on Shape Layer, Contract 1px, inverse selection and Ctrl+Alt+Shift+Click on the Shape Layer. Set foreground color (#fbfcfd) and draw diagonally Foreground to Transparent gradient from the upper left part of navigation menu down to lower part of this menu. Deselect and move it 1px right and down. Add some accents to the upper right corner using soft brush and Blur Tool. Spread the strokes using a brush, blur them a little and then add more strokes.



Step 12
Make the same in the right part of the menu. Add more effects in both left and right parts of the menu, and also in the upper part.



Step 13
The foundation of navigation menu is done. We have to draw the links now. The links will look like the name of the menu and a brief description. Write “About” using Text Tool and add Drop Shadow and Outer Glow blending options.



Step 14
On the right of the first text add the second title “Us”. Add Outer Glow and Stroke blending options.



Step 15
Add a link description a little lower. Afterwards add Outer Glow blending option.



Step 16
Add the rest of the links using the same blending options. The texts to use are following: "Our Works - Completed Projects", "Our Clients - Professional Support", "Mail & Links – Linkage & Address".



[ 此贴被Fum在2009-05-30 07:17重新编辑 ]

弱弱的问下 这个是用的啥米工具呢

PS。。看界面

全英为版本
看不懂

雖然弱弱可以估計到是怎樣弄的...LZ最好對一些專業名詞作簡單的翻譯會更好...畢竟咱們用的都是中文版PS吧 ...BTW 謝謝LZ的分享撒