PS网页设计教程XXIV——从头设计一个漂亮的网站万仓一黍

作为编码者,美工基础是偏弱的。我们可以参考一些成熟的网页PS教程,提高自身的设计能力。套用一句话,“熟读唐诗三百首,不会作诗也会吟”。

约定:

1、本文的软件是PhotoshopCS5版本

2、原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图

3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数,以红色的文字显示。有些错误的参数,直接以红色文字显示正确的参数

例如:(90,22,231,77),表示矩形的左上角的坐标是(90,22),宽231,高77

例如:(90,22),表示矩形的左上角的坐标是(90,22),矩形的其他两个参数教程里已经指定

4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。

Haveyoueverwantedtodesignabeautifulwebsitebutjustdidn’tknowhowTobehonest,afewyearsago,thathappenedtometoo.Whilebrowsingtheweb,IsawsomanynicelookingwebsitesandwishedIhadtheskillstocreatesuchdesigns.TodayIcanandI’mgoingtoteachyouhowtodosotoo!Essentially,itrequiresafewPhotoshopskillsandaneyefordetail.Throughthistutorial,Iwillpointoutthesetinydetailswhichmakeawebsitedesignlookbeautiful.FireupPhotoshopandlet’sgetgoing!

你曾否想过设计一个漂亮的网页,但是却不知道如何入手?实话说,以前我也是这样。当我浏览网页的时候我看到这么多好看的网页,我就希望自己有技术创作这样的作品。今天,我将教你怎么做这样的设计!实际上,它需要一点PS技能和把握细节的能力。在本教程中,我将会指出这些细微的细节之处,而这些细节将使你的网页设计看起来很漂亮。打开PS,让我们开始吧!

Step1-Downloadthe960GridSystemTemplate

步骤1:下载960网格布局模版

ThedesignsIcreatearenearlyallbasedonthe960GridSystem.So,beforewebeginweneedtodownloadthegridsystemPhotoshoptemplates.Youcanfindthemonthe960.gsofficialwebsite.SimplyunpackthezipfileandlookforPSDtemplates.Youwillseethattherearetwodifferenttypesoftemplates:oneis12_colandtheotheroneis16_col.Thedifferencebetweenthesetwoare,asthenamesuggests,oneismadewith12columnsandtheotheronewith16columns.Toexplainitabitmore,ifyouhave3boxesinyourdesignyouwouldchoosethe12_colgrid,because12isdivisableby3;orifyouhave4boxesinyourdesign,youwouldchooseeither12_color16_colgridbecause12and16aredivisableby4.Ifyoufollowthistutorial,youwillseethisinaction.

我的设计几乎都是基于960网格系统。所以,在我们开始之前,我们需要下载960网格系统的PS模板。你可以在960.gs官方网站上找到他们。解压zip文件,找到PSD模板。你会看到两种不同类型的模板:一个是12_col的,另一种是16_col的。这两者之间的差异,正如其名所示,一个是12列而另一个16列的。为了更好解释这一点,如果在你的设计中有3个方块,你会选择12_col的,因为12能被3整除的,或者如果你的设计有4个方块,你会选择12_col或16_col的,因为12和16都能被4整除。如果按照本教程中,您将看到这个动作。

Step2-DefiningtheStructure

步骤2:定义网页结构

在我们打开PSD网格模板并开始绘制前,我们首先需要定义我们的网站的布局结构。你可以看到上面的图片显示的例子。这是一个比较复杂的结构,是因为我们每一个布局都还有各自的布局。

Step3

步骤3

Afterwe’vedefinedoursitestructurewe’rereadytomoveon.Openyour16_col.psdtemplate.GotoImage>Canvassize.Setthecanvasto1200pxwideand1700pxhigh.Setthebackgroundcolorto#ffffff.在定义好我们网站的结构之后继续。打开16_col.psd模版。点击:图像>画布大小。设置画布为1200px宽和1700px高。并设置背景颜色:#ffffff

由于本翻译教程不下载960布局系统,故本步改为新建文档,尺寸:1200px*1700px。背景色:#ffffff

Step4

步骤4

NowpicktheRectangleToolanddrawinarectanglethefullcanvaswidthandabout80pxhigh.Fillitwiththecolor#dddddd.

现在用矩形工具画一个矩形(0,0,1200,80),宽度为整个画布,高度为80px。填充的颜色:#dddddd

Step5

步骤5

CreateanewlayerabovetherectangleandsetLayermodetoOverlay.Ctrl+clicktherectanglelayer.Nowtherectanglewillbeselected.Choosea600pxsoftbrush,setthecolortowhite,andclickafewtimeswiththeedgeofthebrushjustabitovertheselection,likeshownontheimage.Thiswayyoucreateanice,subtlelighteffect.Additionallyyoucanlinkthesetwolayers.

在矩形的上方新建图层,图层的混合模式选择叠加。Ctrl+click点击矩形图层。会出现该矩形的选区。选择一个600px的软刷,设置颜色为白色,然后用笔刷的底部贴近选区的上方点击几次。通过这个你画出了一个细微的光亮的效果。现在可以把这两层链接起来了。

Step6

步骤6

Newlayer.ChoosetheRectangletoolagainanddrawinathindarkgreyrectangle,asshownintheimage.

新建图层。再次选择矩形工具,如上图所示画一个瘦长的深灰色矩形(0,0,1200,6),颜色:#454545

Step7

步骤7

WiththeRectangletoolselected,drawinabigboxaround500pxunderneaththetoprectangle.Makeit575pxhighandgiveitaLinearGradientoverlayfrom#d2d2d0to#ffffff,direction-90,Scale100%.

继续选择矩形工具,在距离上端长方形500px处画一个高575px的长方形(0,540,1200,575)。注:原文的尺寸似乎是约数,不是很精细,有误差,故在本文中作了修正。设置渐变叠加图层样式,颜色由#d2d2d0到#ffffff的渐变色,角度为-90,缩放为100%。

Step8

步骤8

NowwearegoingtocreatethesamelighteffectasdescribedinStep5.Wewillbeusingthistechniquealot;sonexttimeIwilljustreferyoutoStep5fortheeffect.

现在我们要象步骤5一样添加相同的光照效果。我们将多次使用这种技术,所以下一次,我将提示使用步骤5的效果。

Createanewlayeraboveallthecurrentlayers.Ctrl+clickthebigrectangle.Choosea600pxsoftbrush,setthecolortowhite,andclickafewtimeswiththeedgeofthebrushjustabitovertheselection,asshownintheimage.

在本层上新建图层。Ctrl+Click这个大的矩形。选择一个600px的软刷,设置颜色为白色,然后用笔刷的底部贴近选区的上方点击几次。如图所示,通过这个你画出了一个细微的光亮的效果。

Step9

步骤9

Createanewlayeranddrawinabigrectangleabout400pxhigh.Thisoneisusedforourheader.Fillitwithanicebluegradientfrom#2787b7to#258fcd.

Seehowsubtlethecolorchangeis

新建一个图层并画一个大的高400px的矩形(0,130,1200,410)。这个将用于我们的页头。用一个漂亮的蓝色渐变去填充它,颜色从#2787b7到#258fcd

以下展示颜色的微妙变化:

Step10

步骤10

Addadarkblue1pxlineonthebottomoftheheaderbox,applytheDropshadoweffect.FordropshadowuseBlendmode:Multiply,Opacity:65%,Angle:-90,Distance:1pxandSize:6px.Next,createanewlayeraboveanddrawanother1pxwhitelineunderthedarkblueone.Thiswaywecreatesharpedgesforourcontentbox.Basicallyyoucanapplythisbordertechniqueoneveryboxinyourdesignjustwithdifferentcolors.

在页首长方块底端画一条1px的暗蓝色(0,539,1200,1)的线,颜色:#0e517e,添加投影效果。混合模式:正片叠底,不透明度:65%,方向:-90,距离:1px,大小:6px。之后再建一个新层,在暗蓝色线下面画一条1px的白线(0,540,1200,1)。通过这种方式,我们就可以创建一个轮廓鲜明的边缘。你可以在你的设计中把这个技巧用于其他色块。

Step11

步骤11

Createanewlayer,andwiththeRectangleTool,drawa50pxhighrectangleinthetoppartofthecanvas,justasshownintheimage.Thiswillbeusedforournavigation.

新建图层,在画布的顶部区域,用矩形工具画一个高50px的矩形(0,80,1200,50),颜色:#e4e4e4,如图所示。这个将用于我们的导航栏。

ApplyaDropshadow.Usethevaluesshownintheimage.

添加投影效果,如图所示设置参数。

Step12

步骤12

Timeforthenavigation.UsetheRoundedRectangleToolandsettheradiusto5px.Drawarectangle,fillitwith#f6a836,andapplythefollowingeffects:InnerShadow–color:#ffffff,Blendmode:overlay,Opacity:60%,Angle:120*,Distance:7px,Size:6px.Innerglow–Blendmode:normal,color:#ffffff,Size:4px.Everythingelseleavedefault.Stroke–Size:1px,Position:inside,color:#ce7e01.

开始制作导航栏。用圆角矩形工具,设置半径为5px,画一个圆角矩形(130,92,70,27),颜色:#f6a836,之后给他添加以下效果:

1、内阴影—颜色:#ffffff,混合模式:叠加,不透明度:60%,角度:120,距离:7px,大小:6px。

2、内发光—混合模式:正常,颜色:#ffffff,大小:4px。其他参数默认设置。

3、描边—大小:1px,位置:内部,颜色:#ce7e01。

NowselecttherectanglewithCtrl+click.GotoSelect>Modify>Contractandenter1px.

按Ctrl+click选择圆角矩形。点击:选择>修改>收缩,输入1px确定

Createanewlayerabove,settheBlendmodetoOverlayandcreatethesameeffectdescribedintheStep5usingasmallerbrushsizethistime.Thenaddthenavigationtext.IusedArialfornavigationlinks,allcapsandAntialiassetto“none”.

在上面新建图层,把混合模式设置成叠加,然后依照步骤5那样加照亮效果,不过这次用的是小笔刷。然后增加导航栏文字.我用Arial字体作为导航的链接字体,所有效果设置为“无”。

字体:Arial,字号:12点,活动链接的文字颜色:#7b3600,非活动链接的文字颜色:#838383

Step13

步骤13

Nowlet’screatethesearchbox.WiththeRoundedRectangleTool,radius5px,createasearchboxpositionedontherightsideofthegridlayoutandinthemiddleofthetopgraystripefromStep4.Addtheselayerstyles:InnerShadow–color:#000000,Blendmode:Multiply,Opacity:9%,Angle:90*,Distance:0px,Size:6px.Stroke–Size:1px,Position:inside,color:#dfdfdf.

现在开始创建搜索框,用圆角矩形工具,半径5px,在网格布局的右侧、步骤4中创建的顶端灰色矩形中部创建一个用于搜索的矩形(925,26,142,30),颜色:#5c6457。添加以下样式:

内阴影—颜色:#000000,混合模式:正片叠底,不透明度:9%,角度:90,距离:0px,大小:6px。

描边—大小:1px,位置:内部,颜色:#dfdfdf。

Iaddedthe“search”textandalightgray“GO”button.Thisishowitshouldlook.

在上面添加search的文本和一个亮灰色的GO按钮。如下图所示:

文字的颜色:#a0a39c。白色的圆角矩形的描边和搜索框的描边一样。

SofarwehavealotoflayersandneedtoorganizethingsabitsowewillcreateanewLayerfolderandnameit“search”.SelectalllayersthatmakethesearchfieldandjustClick+draginsidethenewfolder.Laterwe’regoingtoorganizeothercontentinsidethefolderssowehaveaniceorganizedlayerpalette.

Step14

步骤14

Nowcreateanewlayeranddrawa“SignUp”buttonthesamewaywecreatedthesearchfield–justhalfthewidth.Placeitunderthesearchfieldinthemiddleofthenavigationstripe.

新建图层,用创建搜索框同样的方法画一个SignUp按钮(998,91,73,30),颜色:#258dca——只有一半的宽度。把它摆放在搜索框的下面的导航区域的中部。

用PS新建文档,尺寸:4px*4px,背景透明,用画笔从左上角到右下角点4个白点

然后定义图案,关闭新建的文档。回到主文档,给该按钮添加图案叠加的样式

添加和搜索框一样的描边样式,并按照下图添加内阴影样式

在按钮上添加SIGNUP文字,文字颜色白色。在按钮的左侧添加Login(黑色)or(灰色)的文字

Againwe’recreatingtheeffectfromStep5.

我们再次创建步骤5中的特效

Useasmallersoftbrushsize.Inthiscaseitwas45px.

Step15

步骤15

AfteraddingthelogoandtheTaglinethisishowoursiteshouldlooklikenow.

加了LOGO和网站描述之后,我们的网页就如下所示。

LOGO的制作:

用圆角矩形工具新建一个圆角矩形(132,20,77,43),颜色:#2c2c2c

用步骤5的方法在圆角矩形的上方和下方添加高亮效果

用文字工具添加文字BVD,和导航栏的文字字体、字号相同。文字纵向缩放300%,水平缩放180%,文字颜色:#ffffff。给它添加如下的投影样式

在LOGO的右侧,添加文字Beautifulwebsitedesign。字体:Androgyne,字号:30点,颜色:fdfdfd。添加描边样式:描边的颜色:#8e8e8e

Step16

步骤16

Nowwe’recomingbacktoourlayerorganizationmentionedafewstepsearlier.Createanewemptylayerfolderandnameit“top_bar”.Moveallgraphicsfromthetopofthelayoutinsidethisfolder(logo,tagline,searchfield,signupbutton,navigationandbackgrounds).

现在回到我们之前一些步骤提到的图层结构。创建一个新组top_bar。移动所有的图层到这个组里面(包括LOGO,说明文字,搜索框,SIGNUP按钮,导航栏和背景)。

Createanotheremptylayerfolderandnameit“header”.Thisiswherewewillputourheadergraphics.Thisishowitshouldlook.

创建另外一个组并命名为header。这里用于放置头部图层。如图所示

Step17

步骤17

Ourheaderlooksabitplainrightnowsowe’regoingtoaddthesamelighteffecteverywhereelseonthesite.Selecttheheaderbox(blue).CreateanewemptylayeraboveandsetthemodetoOverlay.

头部看起来有的平淡,因此我们可以在任意位置加相同的亮光效果。选中蓝色的头部区域。在它上面创建一个新层并设置其混合样式为叠加。

Pickalargesoftbrush600px,color#ffffffandclickafewtimesintheareaunderthenavigation.Furthermore,togainmoredepth,wecanswitchthecolortoblackanddothesamethingjustinthebottompartoftheheader.Giveitatry!

选一个600px的大软刷,颜色:#ffffff。然后在导航栏的下方点击几次。如果想更有层次感,你还可以把颜色调为黑色,然后在头部区底部重复同样操作。试一试

Step18

步骤18

InthisstepIwillexplaintoyouhowIcreatedthereflectionfortheheaderimages.Taketwoimagesofyourchoice,IusedSafariscreenshotsofmytwoothertemplates,scaleonedownandplaceitbehindthebiggerone.Copybothlayers,andwiththeFreeTransformTool,flipthefirstimageandthentheotherone.Shiftbothimagesafewpixelsdown.NowmakeaselectionfromoutsidethebottomparttomiddleofthefirstflippedimagewiththeRectangularMarqueeTool.GotoSelect>Modify>Featherandtype30pxormore.Youshouldhaveaselectionsimilartotheshownintheimage.Pressthedeletekeyafewtimesandyouwillcreateanicefadedreflectionfromtheoriginalimage.Repeatthisstepforthesecondimage.

在这步,我将向你展示如何创建头部区域的图像的反光效果。选择你的两张图片,我用的是我的其他模版的Safari的屏幕快照(我这里用之前的两个网页快照),缩放其中一张并摆放在大的图片的后方。复制所有的图层,并用自由变换工具,翻转第一张图片和另一张图片。按住Shift键,并将图片下移一些像素。用矩形选框工具创建一个从第一张翻转图片的底部的外边到图片中部的选区。点击:选择>修改>羽化,输入30px或者更多。你将获得如下图所示的相似选区。按Delete键几次,你会创建一个漂亮的原始图像的淡出反光效果。对第二张图片重复这些步骤。

Nowtomakethosetwoimagesstandoutabit,createanewlayerandsetthemodetoOverlay.CreatetheeffectdescribedinStep5.

为了让两个图片更加突出,可以新建一层,设置该层混合模式为叠加,重复步骤5的添加效果。(这一步是否是必须,还得视情况而定,我用了这两张图片后,反而觉得这一步是多余的)

Thisishowourheadershouldlookafteraddinganicetaglineandsomebuttons.Don’tforgettoputallthesegraphicsinsidethe“header”layer

foldertokeepthingsorganizedhere;)

在添加了一些按钮和漂亮的文字之后,头部区域就是如图所示。不要忘记把图层都放在header组里面。

左侧第一段文字的字体如下设置

左侧第二段文字的字体设置如下

左侧第三段文字的字体设置如下

下面的两个按钮,右侧的按钮(310,455,159,38),颜色:#f6a836,样式复制导航栏的左边按钮的样式。文字的颜色:#ffffff

左侧的按钮(130,455,159,38),颜色:#c8c8c8,样式复制刚才右边的按钮,描边的颜色改为:#7d7d7d。文字的颜色:#5c5c5c

Step19

步骤19

Ifyoulookatthefinalimagepreview,youcanseethatwehavenicetabsinthecontentarea.Inordertocreatethesetabswe’llneedtoperformafewextrasteps,butit’sdefinitelyworthit.First,createalargerectangleshapewiththeRoundedRectangleTool.Makeit70pxhighandaradiusof10pxormoreifyouwish.Nowwehavetogetridofthebottomradiusandmakeaperfectcorneroutofit.PicktheDirectSelectionToolandclickontheshapepath.ClicktheverticalpointanddragitdownwhileholdingtheShiftkeyuntilitreachesthesamelevelwiththehorizontalaxis.Sofarsogoodbutit’sstilldeformed.Youseethelittlehandle.Clickonitandmoveitupwardstothepointofthepath.

如果你看最终效果图,你会看到在内容区域里面有很漂亮的切换页。为了创建这种切换页我们需要一些额外操作,但这是很有必要的。首先用圆角矩形工具创建一个高70px圆角半径为10px的圆角矩形(128,589,944,70),颜色:#e1e1e1。现在我们不要底部圆角,使它形成一个完美的角。用直接选择工具单击这个图形的路径,单击垂直方向的点然后按住shift键往下拉到水平坐标轴的高度。现在看起来不错了,但是还是比较简陋。然后你看见一个小的控制点。单击它并移动到路径上的点。

Nowwehavecreatedaperfectcorner.Thisishowitshouldlook.Repeatthisstepfortherightbottomcorner.

现在我们创建一个完美的角。就像图中所示。在右下角也重复该步骤,并给它添加一个1px的描边,描边的颜色:#b0b0b0

Step20

步骤20

PicktheLinetoolandsetitto1px.选取直线工具,并设置为1px

Step21

步骤21

DrawingrayseparatorswhileholdingtheShiftkey.

按住Shift键画一些分隔符(364,589,1,70)、(600,589,1,70)、(836,589,1,70),颜色:#b0b0b0

Step22

步骤22

Placesomeicons,headings,andadescriptionforeachtab.IusedRayCheungiconsavailablefrom–WebAppers.com.Usuallyonetabisalwaysactiveandtheothersareinactive.Tomakethisclearinourdesign,weneedtofindawaytoaccomplishthis.Idesaturatedtheothericonsandreducedtheopacityfortheheadingsandtextwhilekeepingthefirstactivetabcolorfulandbright.

在每个切换页摆放一些图标、标题、和一些说明文字。我用的是RayCheungicons——来自WebAppers.com(并将其中一个图标放在头部区域的图片处)。通常一个标签页是活动的,而其他活动页是非活动的。要在我们的设计中明确说明这点,我们需要找到方法来实现它。我降低其他图标的饱和度(点击:图像>调整>去色)并且降低标题文字和描述文字的不透明度(60%)以保证活动的切换页处于高亮状态。

Step23

步骤23

Tomaketheactivetabmoreobvious,we’regoingtogiveitafadedwhitebackground.Todothisfirstselectthewholeobjectandthensubtractfromtheselectiontogetonlythefirsttabselected.

为了使活动的切换页更加明显,我们将给它添加渐白的背景。为了达到这样的效果我们把整个对象选中然后裁切选区,最终使选中的范围只有第一个按钮。

Thisiswhatyourselectionshouldlooklike.

你的选区如下图所示

Withasmallersoftbrush,paintinawhitebackground.

新建图层,用一个小的软刷,用白色涂抹背景

Step24

步骤24

Addtheshadow.Createadarkgrayrectanglebehindthetabs,asshownintheimage.

添加投影。在切换页的背后创建一个深灰色的矩形(78,609,1044,50),颜色:#303030,如图所示

Addavectormaskbyclickingthelittleiconinthebottomofthelayerpalette.

点击图层面板底部的小图标创建图层蒙版

Setthecolortoblack,pickalargesoftbrush,andstartdeletingpartsoftherectangle.Asaresult,wegetanicefakeshadoweffectbehindourtabs.

设置颜色为黑色,选区一个大的软刷,然后开始删除矩形的部分。结果,我们创建了一个比较好看的阴影效果

也可以用渐变工具在蒙版内添加一个黑色到透明的渐变,如下图所示

Finalytheattentiontodetail.Drawina1pxgraylineonthebottomofthetabs.Maskthelayeragainlikedescribedearlierandwithabigsoftbrushdeletetheleftandrightendoftheline.Nowwegetanicelyfadedlinethatfollowsourshadowbehindthetabs.

最后我们加点细节。在切换页下方画一个1px的灰线(78,659,1044,1),颜色:#b0b0b0。然后如上一步一样的方式使左右两端产生渐变,也可以用上面所讲的用渐变来实现。现在我们就在切换页的后方紧挨着阴影的地方得到一条比较时尚好看的线。

Thisishowourtabsshouldlook.这就是我们切换页看起来的样子。

Step25

步骤25

It’stimetodesignthecontentforourfirsttab.Weneedafeatureddesignimage,aniceheadingandsometext.Firstwewillcreatethefeaturedimage.Ithoughtthatitwouldbenicetobreaktheedginessofthedesignbycreatinganicestackedphotoseffectforourfeatureddesignimage.Todothis,drawawhiterectanglewitha1pxlightgrayborder,andaverysubtledropshadoweffect.

是时候设计第一个切换页的内容了。我们需要一个有特色的设计图像,有好看的标题和一些文字内容。首先我们得创建这个有特色的图片。我想,这将是很好的打破尖锐棱角的设计的时候,我们为特色设计图像的创造一个好看的叠照片的效果。要做到这一点,绘制一个1px浅灰色(颜色:#b0b0b0)边框的白色矩形(136,714,404,224),和一个非常微妙的阴影效果。

NowcopythatlayerandrotateitslightlywiththeFreeTransformTool.Dothisonemoretime.

复制这一层并用自由变形工具稍微旋转。重复这个操作几次(3次比较好)

Importyourfeaturedimageandplaceitoverthewhiterectangles.Don’tworryiftheimageisflowingoutsidetheboxes,wewillfixthat.Makeaselectionfromthetoprectangle,gotoSelect>Modify>Contractandinsert5px.WiththefeaturedimagelayerselectedclicktheQuickMaskicononthebottomofourlayerpalette.Youwillgetnicelyborderedimageeffectlikeshownintheimagehere.

把你选好的图片导进来,放在白色长方形上面。不用担心图片会超出方块,我们会修复它。按照最上面的矩形新建一个选区,点击:选择>修改>收缩,输入5px,确认。然后在图层管理区下方点击添加图层蒙版,这样图片就只显示选区范围。

Thisishowyourlayerordershouldlooklike.

你现在的图层顺序看起来如下所示

Step26

步骤26

Don’tforgettokeepthingsorganized.Socreatemorelayerfoldersandorganizeyourpalette.ThisishowIhavedoneit.

不要忘记整理图层,这里新建图层夹把图层归类。

Byaddinganiceheading,sometext,andbulletlists,ourwebdesignworkisfinished.Let’smoveon.

增加一个漂亮的标题、一些文本和列表,我们的设计工作又完成一部分。现在继续下一步吧。

标题文字字体:Verdana;字号:30px,加粗;颜色:#227dac

副标题文字字体:Verdana;字号:14px,加粗;颜色:#494949

列表文字字体:Verdana;字号:12px;颜色:#494949

列表前的项目号,由圆和自定义形状中的勾这个形状组合起来的,圆的颜色:#227dac;勾的颜色:#ffffff

列表下的文字字体:Verdana;字号:12px,加粗;颜色:#494949

图片下方的字体:Verdana;字号:12px,倾斜;左侧文字颜色:#227dac,右侧文字颜色:#494949

Andagainsomelayerorganization.再组织一下图层

当前的结果:

Step27:Testimonials

步骤27:感谢信

Ithoughtthisoneshouldbehuge;soI’veputthisinabigboxrightafterthemainsection.Firstdrawabiglightgrayrectangleabout220pxhigh.Giveita1pxgrayborder.

我想这应该是巨大的,所以我把它放在一个在主要部分下方的大方块里。首先画一个大的高220px的亮灰色矩形(130,1016,940,222),颜色:#f2f2f2。给它一个1px的灰色(颜色:#b0b0b0)边框。

Thendrawinanotherbrighterrectangleby10pxsmalleronallsides.Alsoadda1pxlightgrayborder.

然后画另一个各边都缩进10px的亮一点的矩形(140,1116,920,202),颜色:#f7f7f7。也添加1px的灰色的边框

Finallyaddsometextandwe’redone!

最后添加一些文本完成这部分的制作

抬头文字的字体:Verdana;字号:12px,加粗;颜色:#de8d55

正文文字的字体:Androgyne;字号:24px;颜色:#696969

落款文字,左侧文字:Androgyne;字号:14px;颜色:#696969;右侧文字:Verdana;字号:14px,加粗;颜色:#494949

左侧按钮,圆角矩形(257,1190,186,27),圆角半径:3px,颜色:#f5f5f5,描边颜色:#b0b0b0

按钮文字的字体:Verdana,字号:12px;水平缩放80%;颜色:#494949

Step28

步骤28

It’stimeforthefooter.Drawabig400pxhigh,darkgrayrectangle.

现在开始制作页脚。画一个大的高400px深灰色(颜色:#4b4d4a)的矩形(0,1300,1200,400)

Step29

步骤29

AddsomelighteffectthesamewayasdescribedinStep5.

按照步骤5的做法添加一些光亮的效果

Step30

步骤30

Next,drawa10pxhighrectangleabovethefooterandaddsomesubtleeffectbyaddingtwomorelinesontopandbottomlikeshownintheimage.

下来,如图所示,在区域上方画一个10像素高的矩形(0,1290,1200,10),颜色:#dcdcdc,并且通过在顶端和底部各多加两条线增强细节处理。

四条线分别是:(0,1290,1200,1),颜色:#a3a3a3;(0,1291,1200,1),颜色:#ffffff;(0,1299,1200,1),颜色:#ffffff;(0,1300,1200,1),颜色:#3e3e3e

Step31

步骤31

Createtheverybottompartwheretherepeatednavigationwillbeplaced.Youcancopytherectanglefromthetopwherethenavigationisplaced,moveitdownandmakeitabout40pxhigh.Placeitattheverybottomofyourcanvas.Pleasenotethatyoumayneedtoexpandyourcanvasatthispointsothatallyourgraphicsfit.Ifyouneedtodothat,thengotoImage>Canvassizeandsettheheighttofittheentirelayout.

Step32

步骤32

Attentiontodetailagain.Adda1pxwhitelineabovethefooternavigationboxtogiveitanicebordereffect.

再次强化细节。给页脚的导航区顶端加一条1px的白色边,这样有比较好的边框效果。

Step33

步骤33

Addsomefootercontentandseparateitnicelywithinyourgrid.

给页脚增加内容,你可以依据网格合理安置它们。

用直线工具画四条直线(130,1346,220,1)、(370,1346,220,1)、(610,1346,220,1)、(850,1346,220,1),颜色:#acacac

在直线的上方用文字工具添加LATESTBLOGENTRIES、RECENTCOMMENTS、ADVERTISING、TWEETERSTUFF。文字字体:Verdana;字号:12px,垂直缩放150%;颜色:#e6e6e6

在第一列的下方,建立三个博客条目。左侧的按钮是用圆角矩形,半径5px,尺寸:40px*18px,颜色:#da7203。图层的样式复制上面导航栏中黄色按钮的图层样式

按钮文字的字体:VerdanaBold;字号:9px,加粗、倾斜;颜色:#e6e6e6

按钮右侧文字的字体:Verdana;字号:12px,加粗;颜色:#e6e6e6

下方文字的字体:Verdana;字号:12px;颜色:#e6e6e6

置入对话图片

给它添加颜色叠加的图层样式,颜色:#ff8a00

每个列表前有刚才做好的对话图标,右侧的文字字体:Verdana;字号:12px;颜色:#e6e6e6。人名加粗

下面的留言文字字体:Verdana;字号:12px;颜色:#e6e6e6

在第三列的下方,用矩形工具画四个矩形,尺寸:100px*100px,分别是(610,1368)、(730,1368)、(610,1482)、(730,1482)

给他们添加白色的描边

在第四列的下方,用圆角矩形工具新建一个圆角矩形(850,1367,221,135),圆角半径为5px

再用多边形工具创建一个正倒三角形

用路径选择工具选择这个三角形,并拖动到合适的位置

再用直接选择工具选择最下面的点,按住Shift,将点上移到合适的位置

最后给该图层添加如下的图层样式

描边的颜色:#fbfbfb

内发光的颜色:#a3a3a3

再把该形状的填充色改成:#eaeaea

在该形状内添加文字,字体:Androgyne;字号:12px;颜色分别是:#cc580f,#b95cef,#494949

在下方添加文字和图标

文字字体:Androgyne;字号:12px;颜色是:#f3f3f3。在下面添加一条白线,颜色:#f3f3f3

在右侧添加图片

给图片添加如下的图层样式,颜色:#2e0909,并将图层的不透明度改为28%

Step34

步骤34

Finallyorganizeallyourlayersinsidethelayerfolders.ThisishowI’vedoneit.

THE END
1.告别代码小白,网站模板制作大揭秘!你是否曾在网站模板制作的路上跌跌撞撞,感觉像是在没有地图的迷宫里摸索?如果你对设计一窍不通,但又想拥有一个既美观又实用的网站,恭喜你哈,这篇文章就是为你准备的。 今天,我要和大家分享一个神奇的网站制作工具,它不仅能让网站模板制作变得简单快捷,还能让你的创意得到完美展现。 在开始之前,我们先来聊聊那https://zhuanlan.zhihu.com/p/13328184347
2.在线设计免费设计制作搞定平面设计在线设计平台Canva可画根据常见的平面设计类型准备了详尽的设计攻略,灵感文字、视频教程和模板推荐应有尽有。无需掌握设计技巧,也能做出精彩设计。https://www.canva.cn/create/
3.Canva可画下载最新pc版Canva可画电脑版官方免费下载安装今天你想设计什么?使用Canva可画,轻松创建并分享专业设计。这里有海量精美素材、模板,一键下载直接使用,非常方便,还可以上传自己的图片、插画,超多中英文字体,专为平面设计而生,有需要的朋友不要错过哦。 canva可画电脑版软件教程 一、canva可画电脑版怎么建组 1. 启动设计界面,按住Shift键的同时,点击你想要https://m.onlinedown.net/soft/10069318.htm
4.Canva可画在线设计协作平台平面设计作图软件标签:综合其他门户网站 链接直达手机查看 和你的团队一起创作精美设计。使用Canva可画的拖放功能和布局进行设计,分享和打印名片、logo、演示文稿以及更多。 Canva首页内容概览 主要内容 首页 名片 简历 演示文稿 图表 工作证 工作表 公告 简报 报告 海报 https://www.baobaocun.com/thread-358335-1-1.html
5.Web网页绘图教程大全,几种绘图技巧教你画出高级感网站!了解Web 网页绘图设计原则,如对比、重复、对齐、层次等,可以帮助你创建有吸引力和清晰结构的网页设计。掌握基本的设计原则对于创建出具有吸引力和高级感的网页设计至关重要。学习这些原则可以提高你的设计技巧和创作效果,画出高级感网站。 3、学习色彩搭配 https://js.design/special/article/web-page-graphics.html
6.canva可画怎么自定义尺寸,自定义尺寸使用Canva可画教程想要在创意设计的海洋中畅游,却又苦于找不到心仪尺寸的模板?别担心,Canva可画来帮你解决这个烦恼!这篇简明扼要的教程将揭示如何轻松定制你的专属尺寸,让每一份作品都能完美贴合需求。只需几个简单的步骤,无论是宣传海报还是个性化名片,Canva可画的强大功能都能让你随心所欲调整尺寸,释放无限创作灵感。一起来看看吧https://www.duote.com/tech/202406/654024.html
7.PPT绘制小图标教程我校去年迎新晚会入场券正面。 方法五:网站下载 图标下载,ICON(PNG/ICO/ICNS)图标搜索下载 好图网_图标素材下载 Icon Search Engine 不需要梯子。商用的话请看各网站版权声明。 延伸阅读:PPT如何制作矢量图标(来自阿文的无节操教程) 本教程开源于知乎 @凤霄https://www.pptfans.cn/376482.html
8.Canva可画在线设计工具拖放操作:用户只需简单的拖放操作即可完成设计,无需任何专业设计技能,适合设计新手。 批量创建与协作:支持批量创建设计,并允许实时协作,使团队合作更加高效。 Canva可画使用教程与技巧 入门教程:对于新手来说,可以通过观看视频教程或阅读详细的教学文章来快速掌握Canva的基本使用方法。 https://www.bgrdh.com/sites/1783.html
9.不要用阿狸狗画PCB,不专业!用Cadence!–吴川斌的博客老wu今天逛微信群,发现一个比较有趣的话题,群里一位同学问到,在网上看到有用cadence画原理图和PCB布线的,也有用allegro画原理图和PCB布线的,不知选哪个好,比较迷茫。 然后群主指正说,Cadence是公司名,allegro是该公司旗下的设计软件,建议用OrCAD画原理图,用Allegro画PCB。 https://www.mr-wu.cn/?p=12749
10.可画很多时候我们自己也会参与其中,成为一名“设计师”,当然了只能算是一名业余的设计师,那么如何让我们这些业余设计师,设计出来的东西更加专业、更加美观、更加吸引眼球?这个时候就需要用到设计素材。今天搜网通给大家分享一个神奇网站:“在线设计”——【可画】,一个非常不错的在线设计网站,里面包括大量的免费素材,专业https://www.s5t.com/article/acul.html
11.canva可画推广方案通过推广活动,让更多人了解并记住Canva可画品牌。扩大用户群体 吸引更多潜在用户,将Canva可画推广到更广泛的受众群体中。提升用户活跃度 通过推广策略,提高现有用户的活跃度,增加用户黏性。确定目标受众 教师、学生、教育机构等。中小企业、创业公司、市场营销人员等。专业设计师、自由设计师、设计爱好者等。企业用户https://wenku.baidu.com/view/d46ed0a6084c2e3f5727a5e9856a561253d32150.html
12.KLayout教程(五)Pcells(parametriccells)可以画圆1、instance里面,有一个basic layout objects,然后点击下面cell里的cicle就可以画圆,然后旁边pcell可以选圆的半径,图层,由多少点构成(KLayout里没有真正的圆,都是由多边形构成的)。 2、其他的,还有个功能,比如你创建好后一个多边形,然后选中后edit-selection-convert to Pcells,我这个地方选的round-polygon(其他的https://cloud.tencent.com/developer/article/2165940
13.canva怎么共享编辑canva可画怎么共享设计《canva可画》共享编辑教程 canva可画是可以把自己制作的设计分享给别人,甚至还能邀请其他小伙伴一起参与创作哦,并且操作起来也并不复杂。下面小编就将为大家介绍canva可画共享编辑的方法教程,不知道怎么弄的小伙伴可以跟小编一起来看看哦! 《canva可画》共享编辑教程:https://shouyou.3dmgame.com/gl/451155.html
14.AI教程!教你绘制扁平化风格的卡通人物肖像(四人组合篇)编者按:今天@鱼过无声design的教程教大家来绘制四个卡通人物头像,操作不难,但成就感满满,有很多同学已经给自己做了专属头像,木有的赶紧来试试。 系列教程:《AI教程!教你绘制扁平化风格的卡通人物肖像(建筑工人篇)》 这个新的教程是非常独特的,不像其他以前我们已经制作的教程,这个教程更像是一个游戏。首先,我们从https://www.uisdc.com/flat-design-4-cartoon-character
15.protel99se基本教程及使用教程b、View:视图选项,有三种选项可选。分别是设计管理器,状态栏和命令行。用于相应功能的打开与关闭。 1)Design Manager-设计管理器的打开和关闭; ? 2)Status Bar-状态栏打开和关闭; 3)Command Status-命令行打开与关闭。 c、Help:用于打开相应帮助文件。 https://m.elecfans.com/article/639671.html
16.AI技术:分享8个非常实用的AI绘画网站ai模型网站工具都帮大家整理好了,安装就可直接上手! 三、最新AIGC学习笔记 当我学到一定基础,有自己的理解能力的时候,会去阅读一些前辈整理的书籍或者手写的笔记资料,这些笔记详细记载了他们对一些技术点的理解,这些理解是比较独到,可以学到不一样的思路。 四、AIGC视频教程合集 https://blog.csdn.net/mate1357/article/details/138461044
17.超实用全球手工制作网站20、个人商业网站: http://www.hme.ntnu.edu.tw/mode/index-f.htmdeborahmerlo.com(英文) 站长是装饰设计的业内人士。DIY专栏里有不少有趣的教程。 21、泰迪熊的网站: http://www.deborahmerlo.comTeddy Bear Club International(英文) 有不少免费的纸样可供下载。 https://www.360doc.cn/article/5670830_228602454.html
18.设计神器Gallerix!收录17万张世界名画的高清图库!设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 立即点击 教程概述 评论(1) 热门!来优设AI俱乐部,享受1整年365天丰富的AI学习社群服务! 详情戳如上图大家所看到的,网站首页可分为两大区域:左侧侧边栏和右侧内容展示区。 先说左边侧边栏的内容吧,侧边栏的内容主要是网站的功能版块展示。 最主要的还https://uiiiuiii.com/?p=494530
19.原画网站都有哪些作为一个原画师,需要不断提高个人审美,丰富自己的素材库储备,所以有很多比较不错的原画网站可以在我们缺少灵感、缺少素材参考时提供思路。今天小编和大家分享一下自己收藏的宝藏原画网站! 首先是站酷,站酷不止包含了原画还有很多设计,c4d、影视剪辑应有尽有,如果你的画工厉害,更新频繁那么你会被网站推荐,坚持下去就会有https://wap.hxsd.com/content/21779/
20.绘画教程CG资源画师资讯视频教程 免费的CG绘画基础入门教学视频 更多 精选 画技不够,构图真的能凑?四分钟教你画好构图,拯救你的渣图! 插画 二次元 插画设计 绘画创作 绘画就业 2023-04-27 1020 如何寻找游戏原画师的工作机会?如何找到游戏原画工作室的工作? 游戏原画 原画师 http://www.huashibus.com/
21.平面教程影视动画教程办公教程机械设计教程网站设计教程我要自学网-免费视频教程,提供全方位软件学习,有3D教程,平面教程,多媒体制作教程,办公信息化教程,机械设计教程,网站制作教程,电脑培训http://51zxw.net/
22.如何用cdr制作印章?用cdr绘制印章的教程·CDR制作促销字体设计教程 新人如何才能成为一名专业的平面设计师呢?想要成为一名平面设计师首一定要会熟练使用Photoshop,AI,CDR等软件。还要掌握各种设计技能,比如修图,绘图,制作各种图片等,为了帮助有兴趣的小伙伴更快的成为一名专业平面设计师,羽兔网有各种Photoshop、AI、CDR的精品课程,都可以免费试学,想通过自学成https://www.yutu.cn/news_37730.html
23.绘画艺术插画教程人物素材网站图片免费下载插画水彩手绘原创水彩人物绘画过程水彩女生教程 3 那蓝酱 【名动漫绘画教程】如何聪明的临摹?新手人物插画设计技巧! 7 名动漫 水彩插画人物绘画教程分享 4 复古高级感服饰搭配插画教程! 3 每日讲画 q版人物有什么特点?丨板绘插画教程 1 暮云课堂 画画水彩原创手绘插画绘画手绘少女头像水彩教程 1 那蓝酱 https://www.zcool.com.cn/tag/ZNzQxNTc3Mg==.html
24.HTML5创意画板的设计教程人人都是产品经理HTML5创意画板的设计教程 在HTML5备受期待和瞩目的今天,越来越多的人已经感受到它带来的无限魅力与震撼力,许多的技术人员、设计者、互联网爱好者们纷纷加入了HTML5的研究与设计中。 首先我先为大家介绍一下一个功能很强大的HTML5在线绘画应用,它还拥有多种笔刷和滤镜,具有类似于photoshop的图层功能,可调节透明度隐藏https://www.woshipm.com/pd/16754.html
25.PS电子商务在线购物网站美工教程3d溜溜设计问答平台为广大设计师们提供各种PS电子商务在线购物网站美工教程问题解答,3d溜溜素材问答平台汇聚全球各地的设计师、名师名司、设计爱好者等设计灵感和经验,迅速为您解决PS电子商务在线购物网站美工教程的困惑。https://www.3d66.com/answers_relation/relation_1358062_5.html