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

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

《如何制作一个惊艳的Vista风格菜单Word格式.docx》由会员分享，可在线阅读，更多相关《如何制作一个惊艳的Vista风格菜单Word格式.docx（8页珍藏版）》请在冰豆网上搜索。

Step1

创建一个600x335px的新画布,打开标尺（View>

Rulers）,然后创建两个类似下图的栏线,一个285px,一个310px.这样在两根栏线之间以及下面那根栏线与底部之间就形成了两段区域,我们将其称为上区域和下区域.

Step2

创建一个矩形（U）,填充下区域,并将其命名为“lowerbar”.打开图层样式菜单,选择渐变叠加（GradientOverlay）属性,将渐变色设为#000000到#0c0c0c,角度设为90度.

接着创建另一个矩形,填充在上区域中,命名为“upperbar”.再次打开图层样式菜单,选择渐变叠加属性,将渐变色设为#35393d到#787b7d,角度设为90度.

选择刚刚创建的两个矩形,将其透明度设为90%.这样当添加了背景的时候,就会展示出良好效果,因为它可以让背景色透出一些来.

Step3

这一步是利用线条工具（LineTool（U））为刚刚制作的菜单添加一些高光效果.

选择线条工具,将weight改为2px.然后在刚刚创建的菜单条顶部画一条线,颜色设为#9fa2a4,将该层命名为“lowerhighlight”.然后在这条线的上面再画一条线,颜色设为#484b4d,命名为“upperhighlight”.把这些层组合（Group）起来,放到一个命名为”bar”的组中去.关于菜单的基本制作阶段就算结束了.

Step4

既然我们的基本菜单栏已经创建好了,现在我们来制作菜单栏中文字与文字之间的分隔线.再次选择线条工具并将weight设为2px.在上区域画一条垂直的短线,注意线的顶端和菜单栏的顶端保持一小段距离,然后同样打开图层样式窗口,将其渐变色设为#676a6d到#4d6672之间,将该层命名为“upperdivider”.

然后在下区域也画一根类似的垂直短线,将颜色设为#43474b,命名为lowerdivider”,将这两个层组合为一个组,命名为“divider”.

Step5

向已经制作好的导航条中加入文字,前景色为白色,然后复制Step4中制作的dividers,调整位置,最后效果如下.

Step6

既然基本的导航菜单已经完成,现在你可以为其添加背景.我这里选择的背景图片是青草的照片,当然,你可以选择你自己喜欢的背景.

把你的背景图图层放置到导航栏层的下面,效果如下.

Step7

Thisstepwillcreatetheblurredroundedrectanglethatisbehindthetext.ThiseffectisquitecommoninVistaandisagoodtechnique.Ittakesthefocusofthebackgroundandplacesitonthetext,butstillshowsthebeautifulscenebehind.

Firstofall,duplicatethebackground.Thislayerisnotpermanent,butwewillbecuttingaselectionoutofit.ThenusingtheRoundedRectangleTool（U）,drawashapethatstartspasttheleftedgeofthecanvas.Thismeansthattheshapeonlyhastworoundededges.

RasterizethelayerandthenusingtheMagicWandTool（W）,selecttherectangleanddeletethecolorwhilekeepingtheoutline.Nowselectthebackgroundcopyandcutfromthatlayer.Deletethebackgroundcopylayerandaddanothernewlayercalled“blur.”

Pastetheshapeinthelayercalled“blur”andthenapplyaGaussianBlurof5px（Filter>

Blur>

GaussianBlur）.ThenapplyaDropShadowasshownbelow.

Step8

Nowaddyourtextinsidetheblur.Usingthesametypefaceasthelinks（SegoeUI）typeyournameandtagline.Selectsomeofthetextandmakeitboldandkeepsomenormal,applyaDropShadow,andaGradient.Thisproducesamodern-lookingtextthathasastrikinglook.

Step9

Thisstepisoptional,asitwillproducethebluehighlightedglowthatwillbecomeourhovereffect.DrawalargeEllipse（U）thatfillstheareabetweenthedividers.Changethecoloroftheellipseto#5c94c5andapplyaGaussianblurof10px.Theshapehasnowbecomearasterlayer,andyoucancleanuptheexcessblurbyusingtheMarqueeTool（M）.

Conclusion

Thismenuproducesastunningeffectwhencoupledwithabrightscenicbackground.Itusestransparencytogreateffectaswellasmoderngradients.Theuseofhighlightsisagreattricktoprovidingacutting-edgemodernlooktopictures.Thismenuwouldbequiteeasytosliceupandturnintoaveryfunctionalweb-basedmenuwithhoverstates.