如何制作一个惊艳的Vista风格菜单Word格式.docx

1、Step 1创建一个600x335px的新画布,打开标尺（ViewRulers）,然后创建两个类似下图的栏线,一个285px,一个310px.这样在两根栏线之间以及下面那根栏线与底部之间就形成了两段区域,我们将其称为上区域和下区域.Step 2创建一个矩形（U）,填充下区域,并将其命名为“lower bar”.打开图层样式菜单,选择渐变叠加（Gradient Overlay）属性,将渐变色设为#000000到#0c0c0c,角度设为90度.接着创建另一个矩形,填充在上区域中,命名为“upper bar”.再次打开图层样式菜单,选择渐变叠加属性,将渐变色设为#35393d到#787b7d,角度设

2、为90度.选择刚刚创建的两个矩形,将其透明度设为90%.这样当添加了背景的时候,就会展示出良好效果,因为它可以让背景色透出一些来.Step 3这一步是利用线条工具（Line Tool （U）为刚刚制作的菜单添加一些高光效果.选择线条工具,将weight改为2px.然后在刚刚创建的菜单条顶部画一条线,颜色设为#9fa2a4,将该层命名为“lower highlight”.然后在这条线的上面再画一条线,颜色设为#484b4d,命名为“upper highlight”.把这些层组合（Group）起来,放到一个命名为”bar”的组中去.关于菜单的基本制作阶段就算结束了.Step 4既然我们的基本菜单栏

3、已经创建好了,现在我们来制作菜单栏中文字与文字之间的分隔线.再次选择线条工具并将weight设为2px.在上区域画一条垂直的短线,注意线的顶端和菜单栏的顶端保持一小段距离,然后同样打开图层样式窗口,将其渐变色设为#676a6d到#4d6672之间,将该层命名为“upper divider”.然后在下区域也画一根类似的垂直短线,将颜色设为#43474b,命名为lower divider”,将这两个层组合为一个组,命名为“divider”.Step 5向已经制作好的导航条中加入文字,前景色为白色,然后复制Step4中制作的dividers,调整位置,最后效果如下.Step 6既然基本的导航菜单已经

4、完成,现在你可以为其添加背景.我这里选择的背景图片是青草的照片,当然,你可以选择你自己喜欢的背景.把你的背景图图层放置到导航栏层的下面,效果如下.Step 7This step will create the blurred rounded rectangle that is behind the text. This effect is quite common in Vista and is a good technique. It takes the focus of the background and places it on the text, but still shows th

5、e beautiful scene behind.First of all, duplicate the background. This layer is not permanent, but we will be cutting a selection out of it. Then using the Rounded Rectangle Tool （U）, draw a shape that starts past the left edge of the canvas. This means that the shape only has two rounded edges.Raste

6、rize the layer and then using the Magic Wand Tool （W）, select the rectangle and delete the color while keeping the outline. Now select the background copy and cut from that layer. Delete the background copy layer and add another new layer called “blur.”Paste the shape in the layer called “blur” and

7、then apply a Gaussian Blur of 5px （FilterBlurGaussian Blur）. Then apply a Drop Shadow as shown below.Step 8Now add your text inside the blur. Using the same typeface as the links （Segoe UI） type your name and tagline. Select some of the text and make it bold and keep some normal, apply a Drop Shadow

8、, and a Gradient. This produces a modern-looking text that has a striking look.Step 9This step is optional, as it will produce the blue highlighted glow that will become our hover effect. Draw a large Ellipse （U） that fills the area between the dividers. Change the color of the ellipse to #5c94c5 an

9、d apply a Gaussian blur of 10px. The shape has now become a raster layer, and you can clean up the excess blur by using the Marquee Tool （M）.ConclusionThis menu produces a stunning effect when coupled with a bright scenic background. It uses transparency to great effect as well as modern gradients. The use of highlights is a great trick to providing a cutting-edge modern look to pictures. This menu would be quite easy to slice up and turn into a very functional web-based menu with hover states.