1、Photoshop详解制作漂亮的绿色首页模板，第一，对于一些做网站的爱好者，下面真的是个好例子;第二，设计出来的效果也很不错;第三，内容齐全，很值的学习。在这篇教程中，你将学会如何在photoshop中制作一个漂亮的绿色的干净的网页效果图。你将学会一些很时髦的设计技巧，像是如何制作3D丝带，或者是如何设置看上去很专业的渐变色。这是教程的第一部分。最终效果图看一看我们最终的效果图吧，看上去还不错:在photoshop中新建文档1在photoshop中新建一个文档，尺寸为980pxx830px.2如果你在photoshop软件界面中，没有看到在画布的周围看到标尺，点击试图标尺（Ctrl+R）可以显
2、示标尺。3在画布的四个边，分别拖拽四条标尺线。在这四条线中间，我们将绘制我们的页面。创建页面背景4选择圆角矩形工具(U),设置圆角半径为10px,设置颜色为#E0E0AC,在你的整个画布中拖拽一个圆角矩形。设置这个图层名字为“bg“.5好了，现在，我们将扩大我们的画布。首先，缩小我们的画布视图(ctrl+-),然后点击图像画布尺寸(Alt+Ctrl+C)，然后根据下面的截图设置参数。930New5ie:2.6IMCanvasSizeCirnerirt;Sizie：2.33MWidth：9S0pirateHaight:83DpixelsAnchor:ftel甜帕Width:9S0CanvasS
3、Ktensioncalor:VhiteCance)6再一次选择图像画布尺寸(Alt+Ctrl+C)，然后根据下面的截图设置参数。ERelativeCurrentSiee:吉咛9MNewSie:5.你:CfthVdsSizeQUsuSasuta.cem專u九sufewmWidth；1920pixelsHeight:1000pixelsCanvasextensiorcolor:OK1Anchor:VstiitepixelsWidth:Cancel7在图层面板中点击背景图层，设置前景色为#6C821C，用油漆桶(G)填充背景。里6Bi8在背景图层上面创建一个新图层，命名为”gradient“.9在工
4、具栏中选择渐变工具(G)，从画布头部开始向下拖拽出一个从白色到黑色的渐变。10设置该图层渲染模式为颜色加深,然后设置图层图层透明度为10%.11保持该图层仍为选定状态，点击图层图层蒙版显示全部。12在工具栏中选择渐变工具(G)，从你的画布底部向上拖拽一个从黑色到透明的渐变。可以根据下面的截图进行拖拽。13右键单击图层“gradien在弹，出的菜单中，设定转换为智能元件。14点击滤镜杂点添加杂点。根据下图设置参数。LASERSjEHftNNEL*|Pp砂;|OnerfeyMSi啊耨Amoint：1.8%istrtiLitiOn0LfciifcffmGsussisriMonocliromatlc匚
5、孤100%1M%vOpacity；lock;j-4*SFiH：5J0ZD旳15新建一个图层，用画笔工具（B）,选择白色的软笔刷，直径为300px，在你的画布顶端，画一条白线。16设置这个图层的透明度为50%,并命名该图层为“highlight“.17在bg图层上面，新建图层。点击键盘上的D,设置成默认的前景背景色（前景白色，背景黑色），然后点击滤镜渲染云彩。18在图层面板上，右键单击该图层，在弹出的菜单中，设置该图层为智能元件。命名该图层为“texture“.19保持图层”texture”仍未选定状态。点击滤镜模糊动感模糊，根据截图进行参数设定。20然后点击滤镜锐化锐化。21给图层textur
6、e”蒙版，点击图层图层蒙版显示全部。22选择渐变工具(G),从画布底部到顶端，拖拽一个黑色到透明的渐变。23设置图层渲染模式为叠加，设置图层透明度为40%。设置主要内容的背景24双击“bg，图层，打开图层属性面板。根据下图进行外发光的参数设定。25新建图层，设置前景色为#2A2009,选择画笔工具(B)，用一个比较硬的直径为25px的画笔，在你的圆角矩形的下边缘，画一个圆。26在图层面板中右键单击该图层，设置图层为智能对象。27然后点击编辑自由变化(Ctrl+T),根据下图进行变形。susu九28点击滤镜模糊高斯模糊，按照下图进行参数设定。CHANNELSPAiHSj29设置该图层的渲染模式为
7、整片叠底，透明度为30%。最后，给该图层命名为”shadow“，把这个图层放在bg图层的上面。创建导航条30好了，接下来，我们来做导航条。选择矩形工具(U),设置颜色为#D8D8A5.31在你之前创建的那个大的圆角矩形中，创建一个高为60px的矩形，命名该图层为“navigationbar.Note:打开信息面板(F8),这样你就会看到你所创建的矩形的高度。100%ALedJ32双击图层“navigationbar”打开图层属性面板，按照下图设置参数。Qpadtr：CjrdtentOverlayGradientOverlay档ISBlendMode:Opicily:jRjeveneGraden
8、t:33你可能注意到，我们刚刚创建的矩形并没有圆角。为了纠正这个小的细节，我们应用剪辑蒙板(clippingmask)这个概念。右键点击图层“navigationbar”l选择创I建剪切蒙版。34好了，我们接下来要做的是，创建当前页的按钮。选择矩形工具（U）,设置颜色为#A6A43F,创建一个高为60px的矩形。35设置透明度为15%，命名该图层为currentpagebutton.36然后向下设置剪辑蒙板。Ail:100%currentpaebuttonA心rwvigationbar逆EDs羽匚泾shadowLAYERSCHANNELSPATHS,L/XYERSCHANNELSPATHSNo
9、rmal2；Opacity:100%(Lock:4*filAll:100%111$|currentpgebutton，%ruvigationbarAQga了shadow91尽Stexture11時册gradientLocksflAH：100%動|以|currentpagebutton口jjrwvigationbaraimgshadow37选择刚刚的四个图层，点中Ctrl然后分别在图层面板中点击这四个图层，然后点击Ctrl+G群组。设置这个群组名为“bg&navigationbar“.1.PAT11&|Through1MHL.1Lock:JibgSrnavigationbar匚冬haigatl
10、dnbarjftfTl憾mifa*丁冨shidow口TH昨：9FrghligH,旬祈WUnt38选择文字工具（T），给导航添加一些文字，用颜色#A6A43F.在这次的设计中，我用的字体是AvenirLT65Medium。如果你没有这个字体，可以用你喜欢的字体代替。给“特色项目”部分，自定义一个图案39好了，我们要创建一个图案。新建一个文档，文件新建(Ctrl+N),尺寸是5px*5px,透明背景。40设置前景色为#2A2009,在工具栏中选择铅笔工具(B)，在你的画布中间，画一个lpx大小的方框。41点击编辑定义图案。命名这个图案，然后点击ok。好了，你可以关闭这个文件了。1pl-tern.p
11、nq十_DX应D2L严AIPIMm*KQb：Di*tKBWOKUJTM上匚gm，Jalr：B1:呻辭:n_站vl320tT%PdsttliLijquamco筈-育-Husme7一fflntesqljgkuhem二石十uHKIUe莒鬻Eszrwtussma-lewki&-fames買gtpfseges宵AlklwTllqubxdrojMhlErEnaw官写nr斗一鸭蛊犷岳巨qga-AhflEfnsrisus-X匸fk甘fanwrmbh-.C7.Lwrl-丄sagsF背真/r&e-口抵i1-Tug娶57g苗g&855“4PElAYEK*clzblzNELQ-prt五twGdQdiofill岛ny
12、*I览#Erwts1T石A甕liTL_feijredprcjeGt_buttoRZ_“bgtloH)_IekI1iii油gi丄|_ibiagfi血.I|遗卜11|Featuredprojectby迤辰曰IpMtrnAtfr*二bg&ri*vig4lieribarIasuta.cem创建3D丝带59选择矩形（U）创建一个高为130px的颜色为#A6A43F的矩形，如下图。命名该图层为“ribbonbackground“._Jbutton2HonwMxHrtBkgCorrtmrotopaaa一.“_r.”jUiOtqrfpriirp-.r丫盯LAYERSCHANSEISpathsI-=Normal
13、XOpacity:IM%button1suSasuitQ.cem选择圆角矩形(U),设置半径为10px，在你刚刚创建的矩形的左边的位置，拖拽一个矩形。在这一步你可以拖拽一些标尺线作为辅助。thecreativeecosystem5r.rwbotwi*X*Q(4rXCM*MCE(仃.E、ggppMarketphcesTut$OtherServicesgg7Opacity:100%Lock:y4*M：100%_LAYERS|CHANNELS|PATHS,NormalISmgifeqsusu点击你之前创建的圆角矩形的矢量蒙版，让它被选中。然后选择圆角矩形(U),在属性栏中点击从形状减去区的按钮，创
14、建一个圆角矩形。按照下面的截图进行操作。、QA25：10PXsuJ|帀S4yte:氏suQsuta.corr)suasuta.cem创建一个新的图层，右键点击设置为创建剪贴蒙版。63选择渐变工具(G),按照下面的截图拖拽一个白色到透明的渐变。64设置该图层渲染模式为叠加，透明度为30%，命名为“highlight“.65选择矩形工具(U),设置颜色为#878533，在图层”ribbonbackground”上创建一个矩形。66选择矩形工具(U),在属性栏中点击从形状减去区按钮，然后创建一个矩形。如图。剪切掉我们不要的那部分。67双击图层，打开图层属性面板。按照下面的截图进行参数设置。Multi
15、plyOpacity：J1200lheGlobalLightInnerShadowStructureBlendMode:Lock:匚|/中QLAYEFRchannelsPATHS:Norglv:Opacy:100%|_ibutton2Fill:100%IsuBAngle:53：二Chok:二Size:JQualityAnF%odContour:Nois:2PX0Px68重复以上步骤，不过这一次是在丝带的右边。69群组所有关于丝带的图层，命名该群组为”ribbon.L;.Iw治丰*|Liyr10copy/mvotanw战乂的IAVERS|匚HANSELSPATJ-I&三PassThroughVO
16、pacity1MWSh-apcEQcop11=31rlbbenbackground计_IfeaturedprojectsuSdsutQ.cem70在图层”ribbonbackground”上创建一个新图层。然后按照之前的操作，创建一个阴影。71选择圆角矩形工具（U）,设置半径为8px,颜色为#E1EOC1,创建四个圆角矩形，大小为220px*llOpx.72设置透明度为50%，然后群组他们。命名该群组为”images.sasuta.cemimagesLIShaft7cophighlight厂-ShpePaisThroughVsT|_JribbonOpatiJy:1W%L.AVFRij尹j机TM呂|73在工具栏中选择文字工具(T)，在你的布局下面添加一些文字。也可以添加一些图标。Whatareclient!盟亦。Mauriswi.Welconteto!hedudioInhach氛FoS*wusonTwi