绘制清新的色彩生动的网页布局,Photoshop设计清

作者: 生活启示  发布:2019-09-23

效果

先看看最终效果图图片 1第一步:新建文档1200px * 750px,选择渐变工具(G),对背景图层从上(#792700)到下(#000000)新建渐变,如下图所示:图片 2第二步:添加色彩新建图层,选择笔刷工具(B),选取直径为300px的软笔刷,分别以红(#be4816)、黄(#c0952c)、蓝(#33afc6)三种颜色涂在背景层的上半部,图层命名为颜色。如下图所示:图片 3第三步:添加纹理打开一开始保存好的绿叶图片,使用移动工具(V),移动到当前文档内,右击新图层,选择转换为智能对象,然后转到菜单:滤镜>艺术化>胶片颗粒,滤镜>像素化>马赛克,参照下图的设置,最后设置此图层的混合模式为差值,透明度为30%,图层命名为:纹理。如下图所示:图片 4图片 5第四步:为内容添加黑色背景新建图层,选择圆角矩形工具(U),设置3px的半径,创建一个黑色圆角矩形框,双击图层,弹出图层样式对话框,如下图一样设置阴影,最后设置此图层的透明度为70%,图层命名为:黑色形态,如下图所示:图片 6第五步:添加组管理图层按住ctrl键,选择目前为止创建的所有图层,进行图层编组(ctrl+g),组命名为:背景,如下图所示。图片 7第六步:创建更多组新建组(图层>新建>图层编组),组命名为:主页,在主页内再增加一个组,组命名为logo,如图所示:图片 8第七步:创建logo和网站副标题在logo的组里新建图层,选取字体工具(T),书写您的网站名字,颜色为#f4f4f4。双击图层,按照下图设置图层样式,斜面与浮雕,外发光,渐变叠加。然后再新建图层编辑网站副标题,颜色为#eeeeee。图片 9图片 10第八步:创建注册,登录按钮现在将在布局的右上角创建两个按钮。新建组,命名为注册|登录;选取圆角矩形工具(U),像我一样创建圆角矩形;双击形状图层,弹出图层样式对话框,如下图进行设置。设置前景颜色为白色,用字体工具(T)在按钮上编写注册|登录,设置字体层的透明度为75%。图片 11图片 12第九步:创建1px高的蓝色水平线新建组,命名为导航,新建图层,选取单行选框工具并在文档新建1px高的选区,以颜色#406f94进行填充,使用矩形选框工具(M)删除超出黑色矩形的选区,设置透明度为40%,层命名为横线。图片 13第十步:给导航添加渐变选取矩形选框工具(M)创建选区(提示:你可以使用标尺),然后使用渐变工具(G)从底部到头部画一个从#35423e到透明的渐变。按Ctrl+D撤消选区,右击图层,转换为智能对象,然后再转到菜单 滤镜>杂色>添加杂色,并按照下图进行设置。给此图层命名为渐变,且在渐变与横线之间留出1px的距离。图片 14第十一步:编辑导航菜单选取字体工具(T),并在导航栏上编辑菜单,这里我应用的字体是Adobe仿宋体,然后双击字体图层,按下图一样设置图层样式。图片 15图片 16第十二步:创建分隔线现在我们将在菜单栏中创建分隔线,新建图层,选取单列选框工具,并在菜单的布局上点击一下,选取矩形选框工具(M),并在选项栏上选择交叉选区。图片 17对新的选区以白色填充,最后按ctrl+d,取消选框。最终结果如下图:图片 18第十三步:双击上步新建的图层,命名为竖线1,并进行如下图层样式的设置。图片 19第十四步:按ctrl+j复制图层竖线1,重命名为竖线2。选取移动工具(V),点击键盘上的方向键,向右移动1px,并更改渐变叠加的设置。如下所示:图片 20您的图将会是这样:图片 21按住ctrl,选择竖线1和竖线2,转换为智能对象,新图层命名为分隔线。第十五步:创建蓝色高光1、新建图层,放置在分隔线下,选取矩形选框工具(M)创建像下图一样的选区图片 222、以颜色#35423e填充该选区,按ctrl+d撤消选框,右击,在下拉菜单中选择转换为智能对象3、去往菜单 滤镜>模糊>高斯模糊,并设置半径为4px4、再次 滤镜>杂色>添加杂色,数量为0.7%,属性为第一个选项,像第十步那样设置5、设置图层透明度为60%,命名为高光图片最终为:图片 23第十六步:为图层分隔线创建图层蒙版选定图层分隔线,转到菜单 图层>图层蒙版>显示所有,选择渐变工具(G),新建一个从黑到透明的渐变,方向是从上到中间。图片 24第十七步:复制图层分隔线,高光同时选中分隔线,高光这两个图层,使用移动工具(V),按住alt+shift,拖动两个图层中的对象至另一个菜单与菜单之间,这就相当于复制分隔线,高光的操作,重复拖动动作,根据您的菜单多少来复制图片 25第十八步:为图层分隔线,高光编组选择所有的图层分隔线,高光,按ctrl+g,进行编组,组命名为分隔线。第十九步:为当前页面创建激活按钮现在我们将为当前菜单页面创建一个激活按钮,来区分其它的菜单按钮。选取矩形工具(U)并像下图一样新建矩形,并把这图层放置在菜单图层的下方,双击图层,进行渐变叠加的设置,图层命名为激活按钮,设置透明度为50%。图片 26效果图:图片 27第二十步:创建搜索框新建组,命名为搜索,放置在导航组上面。选取圆角矩形工具(U),设置半径3px,前景色为#104f59,创建圆角矩形,命名新的图层为文本区域,透明度为80%。图片 28选取矩形工具,在文本区域右边创建一矩形,并如下图进行设置图层样式渐变叠加,然后右击图层,在下拉菜单中选择创建快速蒙版,层命名为按钮。图片 29图片 30选取字体工具(T),使用白色,在按钮上书写搜索两字,图层透明度为75%。图片 31选取线条工具(U),使用颜色#123036创建直线,图层命名为直线,并放置在按钮图层下方,把此直线移动在搜索框和按钮之间。图片 32第二十一步:新建蓝色矩形在组导航下新建组(图层>新建>组),组命名为案例,再新建组放置在案例中,并命名为背景选取矩形工具(U),颜色设置为#219aad,创建宽度为983px,高度为273px的蓝色矩形,(提示:打开(按F8)信息面板,查看宽度和高度),设置此图层的透明度为55%,命名为bg4图片 333. 在photoshop中打开在上篇中一开始要保存的第二张图片像素化的蓝色矩形,把图片移动到此文档中,并且覆盖蓝色矩形,同样也设置透明度为55%,命名为bg3。图片 344. 按住ctrl键,点击bg4中的矢量蒙版缩略图以选中此蒙版图片 355. 新建图层,放在bg3上方,命名为bg2,选取渐变工具(G),画一个颜色#56b8e5到透明的渐变,方向是从选区底部到选区头部,然后按ctrl+d撤消选区图片 366、新建图层,放在图层bg2上方,命名为bg1,选取矩形选框工具(M),像下图一样创建选区,宽度为983px,高度43px图片 377、选取渐变工具(G),画一个颜色#0f2b42到颜色#2a607f的渐变,方向是从选区底部到选区头部,然后按ctrl+d撤消选区图片 38第二十二步:注册与了解更多1.新建组注册按钮,放在组背景上方,选取圆角矩形工具(U),设置半径2px,像下图一样新建圆角矩形(82*38),并设置如下图一样的图层样式(注意:shap2图层的透明度是100%)图片 39图片 40图片 41图片 422. 重复步驟1创建了解更多的按鈕,并且增加一层,添加箭头,选取自定义形状工具(U)中的第二个箭头形状,像下图一样创建箭头图片 43第二十三步1. 新建组,命名为左箭头,放在组了解更多按钮 上方,选取椭圆工具(U),新建颜色为#406F94的圆,并设置内阴影和描边的图层样式图片 44图片 452. 新建图层,选取自定义工具(U)中的箭头形状,创建白色箭头,并设置图层样式阴影,透明度为50%图片 463. 重复步骤2,在右边也创建同样的箭头图片 47第二十四步1. 在组案例中新建组,命名为图片,在组里放置一张小图片,双击图层,设置如下图的图层样式外发光图片 482. 新建组,选取字体工具(T),在蓝色矩形左边添加文字说明(这个得自己发挥了),组命名为文字。图片 49第二十五步:创建内容区1. 新建组,放在组案例下面,命名为内容,在此组里再新建一组阴影,选取矩形工具(U),创建一白色矩形(983*181),图层命名为白色形状,透明度为90%。图片 502. 像二十一步中的第4点一样,选中白色形状的图层蒙版,然后新建图层,命名为头部阴影,选取渐变工具(G),画一个颜色为#8f8f8f到透明的渐变,方向为选区的头部到选区的底部,设置图层透明度为50%,然后选取移动工具(V),按键盘上的向下的方向键两次图片 513. 新建图层,选取矩形选框工具(M)像下图一样新建选区(273*180)。选取渐变工具(G)画一个颜色#8f8f8f到透明的渐变,然后取消选区,以下图为参考。图片 524. 添加图层蒙版(图层>图层蒙版>显示全部),使用大一点的黑色软笔刷(我用的是27px),涂在阴影中间部分上面,设置图层透明度为30%,命名为垂直阴影1,复制(ctrl+j)图层垂直阴影1,移动至右边,重命名为垂直阴影2。图片 535. 选取线条工具(U),新建重1px,颜色为#aebcc7的水平线,将图层转换为智能对象(右击图层,在下拉菜单中选择转换为智能对象)图层命名为水平线。图片 546. 选取字体工具(T),编辑网站内容,您也可以使用图片或别的来替换图片 55第二十六步:创建网站底部内容1. 新建组底部,并新建图层,选取矩形选框工具(M),新建选区(982*88)。图片 562. 设置前景色为#555555,选择一大的软笔刷(我选的是100px),沿着选区头部边缘进行涂画,撤消选区,设置图层透明度为50%,并命名为渐变。图片 57最终的渐变将是这个样子:图片 583. 新建图层,选择单行选框工具,新建一选区,并以白色填充。按ctrl+d撤消选区。转到菜单 图层>图层蒙版>显示所有,选取一大点的黑色软笔刷像下图一样遮住图层,以下图为参考。设置图层透明度为15%,命名为直线。图片 594. 添加底部文字说明。图片 60这个大制作终于完功了,里面的字体设置什么的还需要各位看客们多担待!最终效果图:图片 61

新建图层,选择圆角矩形工具(U),设置3px的半径,创建一个黑色圆角矩形框,双击图层,弹出图层样式对话框,如下图一样设置阴影,最后设置此图层的透明度为70%,图层命名为:黑色形态,如下图所示:

图片 62教程:01新建一只文档大小500*200背景透明图片 6302新建空图层用圆角矩形工具在刚才新建的图层上绘制圆角矩形模式为形状圆角半径10个像素图片 6403新建一个3*3的透明画布切换到铅笔工具(注意是铅笔工具)铅笔像素大小调整为1px按X交换前背景色样本在斜对角的3个像素点上轻轻点一下即可完成后执行菜单命令编辑—定义为图案命名为抽丝图片 6504回到之前的文档,双击圆角矩形图层,弹出图层样式设置勾选渐变叠加,选择一个白到透明的渐变,酌情降低透明度这里用的14%勾选图案叠加,选择之前设置的抽丝图案,酌情降低透明度,这里用的9%设置完成后关闭对话框确认设置图片 6605排字:把ID排进去随意发挥技巧:排完字选择所有文字图层ctrl+G进行编组,然后直接设置组的图层样式所有的文字都会在不被格栅化的情况下同时受组图层样式到影响这意味着整体效果定形之后,我们仍然可以随时更改任意一个文字的字符格式和调换位置,Ctrl+J复制圆角矩形图层,得到一个副本文件—置入放入头像,和放头像的方框编组创建剪贴蒙版Ctrl+T调整2个方框位置到合适位置(做了一个令自己满意的调整之后一定要随时ctrl+S一下)图片 6707选择一个画笔,硬度100%,大小合适按Q进入快速蒙版笔刷转换为蒙版笔刷绘制一排小孔技巧:Ctrl+R打开网格辅助定位,线随便拉,差不多均匀即可按住Ctrl键的同时,可以用鼠标拖拉网格线位置放开Ctrl,回到蒙版笔刷继续绘制Ctrl+H如果觉得太乱,隐藏网格和网格线,再按一次恢复显示R、H是ruler、Hide的首字母图片 6808按Q退出快速蒙版,蒙版转换为选区hfit+Ctrl+I翻转选区,得到一排圆形小孔新建图层,使用渐变工具对小孔选区拉出渐变图片 6909Ctrl +放大图像按P切换到钢笔工具,绘制图形Ctrl+enter转换为选区,新建图层填充红色复制连接带,一个小孔放置一个对链接带编组,操作参考前面的排字设置组图层样式:黑色叠加(渐变白拉了-.-)描边,想描什么随意浮雕,参数依自己喜好技巧:按住shift捕捉45度、90度、180度夹角Ctrl+Z撤回上一步重新绘制按a切换到路径选择工具,直接移动路径选中的路径会出现编辑点按住ctrl不放切换到普通选择工具,调整编辑点编辑路径放开crtl恢复到到路径选择工具图片 7010Ctrl+T显示头像方框的边界框右键菜单,斜切,稍微斜切一下下…图片 7111再新建一个图层矩形选区—随意填充颜色打开图层样式—图案叠加从系统的图案预设里面随便选一个岩石纹理什么的-.-再添加一个内阴影,参数随意打上字图片 7212用多边形什么工具,画出如图选区矩形选框也行技巧:Shfit从选区添加Alt从选区减去Shfit+Alt从选区交叉图片 7313再新建一只图层对上面的选区填充颜色图层样式—图案叠加我用的都是系统预设图案,挑个顺眼的图片 7414打开画笔选项,添加随机散布的效果图片 7515新建一只图层用散布笔刷随便划两下,多出了很多小圆点Ctrl+单击,提取框架背景的选区再回到笔刷图层,执行像素化---马赛克马赛克的范围会被限制带刚才的选区里,不会到处都是,参数随意图片 7616右上角用钢笔画出三角形线不要太生硬,稍微柔和一点随便上点颜色打开图层样式—渐变叠加,里细调(啊不好意思,图是后来截的参数居然显示的混合选项-.-)就是默认的黑白渐变,翻转黑白,渐变方式为对称,拉斜即可图片 7717画选区清除露馅的地方图片 7818现在图层堆栈最底部有一个空白图层是第一步就创建好的,如果没有,应该是第二步的时候忘了新建图层我们回到最底部的图层,填充颜色图层样式—图案叠加,填充系统预设的图案颜色叠加—黑,让它变暗一点图片 7919切换到外面那一层框架图层打开图层样式,开启投影把黑色改为蓝色,正片叠底改为变亮适当羽化,营造出发光效果图片 80我知道有人是专门搜集动态素材的,对签不感兴趣我留着最后发20.素材一叠,完成。大家都知道吧..算了..再说一下1.打开动图,低版本要安装QT,更低版本打开外部的IR2.调出动画面板,cs6叫时间轴3.打开动画面板小三角菜单,依次执行选择全部帧、拷贝帧4.回到签名档文档窗口,还是打开面板小三角菜单,粘贴帧粘贴在所选帧之上按shfit选择动图所有图层,ctrl+G编组按sfhit选择签名所有图层,ctlr+G编组组和组之间的混合模式默认为穿透,改为变亮、滤色之类的,搞定.输出时要用GIF的256位色图片 81

  1. 在组导航下新建组(图层>新建>组),组命名为案例,再新建组放置在案例中,并命名为背景
  2. 选取矩形工具(U),颜色设置为#219aad,创建宽度为983px,高度为273px的蓝色矩形,(提示:打开(按F8)信息面板,查看宽度和高度),设置此图层的透明度为55%,命名为bg4

图片 822. 新建组,选取字体工具(T),在蓝色矩形左边添加文字说明(这个得自己发挥了),组命名为文字。图片 83第二十五步:创建内容区1. 新建组,放在组案例下面,命名为内容,在此组里再新建一组阴影,选取矩形工具(U),创建一白色矩形(983*181),图层命名为白色形状,透明度为90%。图片 842. 像二十一步中的第4点一样,选中白色形状的图层蒙版,然后新建图层,命名为头部阴影,选取渐变工具(G),画一个颜色为#8f8f8f到透明的渐变,方向为选区的头部到选区的底部,设置图层透明度为50%,然后选取移动工具(V),按键盘上的向下的方向键两次。图片 853. 新建图层,选取矩形选框工具(M)像下图一样新建选区(273*180)。选取渐变工具(G)画一个颜色#8f8f8f到透明的渐变,然后取消选区,以下图为参考。图片 864. 添加图层蒙版(图层>图层蒙版>显示全部),使用大一点的黑色软笔刷(我用的是27px),涂在阴影中间部分上面,设置图层透明度为30%,命名为垂直阴影1,复制(ctrl+j)图层垂直阴影1,移动至右边,重命名为垂直阴影2。图片 875. 选取线条工具(U),新建重1px,颜色为#aebcc7的水平线,将图层转换为智能对象(右击图层,在下拉菜单中选择转换为智能对象)图层命名为水平线。图片 886. 选取字体工具(T),编辑网站内容,您也可以使用图片或别的来替换图片 89第二十六步:创建网站底部内容1. 新建组底部,并新建图层,选取矩形选框工具(M),新建选区(982*88)。图片 902. 设置前景色为#555555,选择一大的软笔刷(我选的是100px),沿着选区头部边缘进行涂画,撤消选区,设置图层透明度为50%,并命名为渐变。图片 91最终的渐变将是这个样子:图片 923. 新建图层,选择单行选框工具,新建一选区,并以白色填充。按ctrl+d撤消选区。转到菜单 图层>图层蒙版>显示所有,选取一大点的黑色软笔刷像下图一样遮住图层,以下图为参考。设置图层透明度为15%,命名为直线。图片 934. 添加底部文字说明。图片 94这个大制作终于完功了,里面的字体设置什么的还需要各位看客们多担待!最终效果图:图片 95

  新建图层,选择笔刷工具(B),选取直径为300px的软笔刷,分别以红(#be4816)、黄(#c0952c)、蓝(#33afc6)三种颜色涂在背景层的上半部,图层命名为颜色。如下图所示:

  • 绿叶
  • 像素化的蓝色矩形

图片 96图片 97第九步:创建1px高的蓝色水平线

  现在将在布局的右上角创建两个按钮。新建组,命名为注册|登录;选取圆角矩形工具(U),像我一样创建圆角矩形;双击形状图层,弹出图层样式对话框,如下图进行设置。设置前景颜色为白色,用字体工具(T)在按钮上编写注册|登录,设置字体层的透明度为75%。

  打开一开始保存好的绿叶图片,使用移动工具(V),移动到当前文档内,右击新图层,选择转换为智能对象,然后转到菜单:滤镜>艺术化>胶片颗粒,滤镜>像素化>马赛克,参照下图的设置,最后设置此图层的混合模式为差值,透明度为30%,图层命名为:纹理。如下图所示:

 图片 98第三步:添加纹理

  1. 新建组注册按钮,放在组背景上方,选取圆角矩形工具(U),设置半径2px,像下图一样新建圆角矩形(82*38),并设置如下图一样的图层样式(注意:shap2图层的透明度是100%)图片 99图片 100图片 101图片 102

图片 103图片 104第四步:为内容添加黑色背景

  按住ctrl键,选择目前为止创建的所有图层,进行图层编组(ctrl+g),组命名为:背景,如下图所示。

图片 1053. 在photoshop中打开在上篇中一开始要保存的第二张图片像素化的蓝色矩形,把图片移动到此文档中,并且覆盖蓝色矩形,同样也设置透明度为55%,命名为bg3.图片 1064. 按住ctrl键,点击bg4中的矢量蒙版缩略图以选中此蒙版图片 1075. 新建图层,放在bg3上方,命名为bg2,选取渐变工具(G),画一个颜色#56b8e5到透明的渐变,方向是从选区底部到选区头部,然后按ctrl+d撤消选区图片 1086、新建图层,放在图层bg2上方,命名为bg1,选取矩形选框工具(M),像下图一样创建选区,宽度为983px,高度43px图片 1097、选取渐变工具(G),画一个颜色#0f2b42到颜色#2a607f的渐变,方向是从选区底部到选区头部,然后按ctrl+d撤消选区图片 110第二十二步:注册与了解更多

  新建组,命名为导航,新建图层,选取单行选框工具并在文档新建1px高的选区,以颜色#406f94进行填充,使用矩形选框工具(M)删除超出黑色矩形的选区,设置透明度为40%,层命名为横线。

1. 在组案例中新建组,命名为图片,在组里放置一张小图片,双击图层,设置如下图的图层样式外发光

2. 重复步驟1,创建了解更多的按鈕,并且增加一层,添加箭头,选取自定义形状工具(U)中的第二个箭头形状,像下图一样创建箭头图片 111第二十三步:1. 新建组,命名为左箭头,放在组了解更多按钮 上方,选取椭圆工具(U),新建颜色为#406F94的圆,并设置内阴影和描边的图层样式图片 112图片 1132. 新建图层,选取自定义工具(U)中的箭头形状,创建白色箭头,并设置图层样式阴影,透明度为50%图片 1143. 重复步骤2,在右边也创建同样的箭头图片 115第二十四步:

图片 116第二步:添加色彩

图片 117第六步:创建更多组 新建组(图层>新建>图层编组),组命名为:主页,在主页内再增加一个组,组命名为logo,如图所示:图片 118第七步:创建logo和网站副标题  在logo的组里新建图层,选取字体工具(T),书写您的网站名字,颜色为#f4f4f4。双击图层,按照下图设置图层样式,斜面与浮雕,外发光,渐变叠加。然后再新建图层编辑网站副标题,颜色为#eeeeee。图片 119图片 120 第八步:创建注册,登录按钮

第一步:新建文档 

图片 121第十一步:编辑导航菜单  选取字体工具(T),并在导航栏上编辑菜单,这里我应用的字体是Adobe仿宋体,然后双击字体图层,按下图一样设置图层样式。图片 122图片 123第十二步:创建分隔线现在我们将在菜单栏中创建分隔线,新建图层,选取单列选框工具,并在菜单的布局上点击一下,选取矩形选框工具(M),并在选项栏上选择交叉选区。图片 124对新的选区以白色填充,最后按ctrl+d,取消选框。最终结果如下图:图片 125第十三步:双击上步新建的图层,命名为竖线1,并进行如下图层样式的设置。图片 126第十四步:按ctrl+j复制图层竖线1,重命名为竖线2。选取移动工具(V),点击键盘上的方向键,向右移动1px,并更改渐变叠加的设置。如下所示:图片 127您的图将会是这样:图片 128按住ctrl,选择竖线1和竖线2,转换为智能对象,新图层命名为分隔线。第十五步:创建蓝色高光1、新建图层,放置在分隔线下,选取矩形选框工具(M)创建像下图一样的选区图片 1292、以颜色#35423e填充该选区,按ctrl+d撤消选框,右击,在下拉菜单中选择转换为智能对象3、去往菜单 滤镜>模糊>高斯模糊,并设置半径为4px4、再次 滤镜>杂色>添加杂色,数量为0.7%,属性为第一个选项,像第十步那样设置5、设置图层透明度为60%,命名为高光图片最终为:图片 130第十六步:为图层分隔线创建图层蒙版选定图层分隔线,转到菜单 图层>图层蒙版>显示所有,选择渐变工具(G),新建一个从黑到透明的渐变,方向是从上到中间。图片 131第十七步:复制图层分隔线,高光同时选中分隔线,高光这两个图层,使用移动工具(V),按住alt+shift,拖动两个图层中的对象至另一个菜单与菜单之间,这就相当于复制分隔线,高光的操作,重复拖动动作,根据您的菜单多少来复制图片 132第十八步:为图层分隔线,高光编组选择所有的图层分隔线,高光,按ctrl+g,进行编组,组命名为分隔线。第十九步:为当前页面创建激活按钮现在我们将为当前菜单页面创建一个激活按钮,来区分其它的菜单按钮。选取矩形工具(U)并像下图一样新建矩形,并把这图层放置在菜单图层的下方,双击图层,进行渐变叠加的设置,图层命名为激活按钮,设置透明度为50%。图片 133效果图:图片 134第二十步:创建搜索框新建组,命名为搜索,放置在导航组上面。选取圆角矩形工具(U),设置半径3px,前景色为#104f59,创建圆角矩形,命名新的图层为文本区域,透明度为80%。图片 135选取矩形工具,在文本区域右边创建一矩形,并如下图进行设置图层样式渐变叠加,然后右击图层,在下拉菜单中选择创建快速蒙版,层命名为按钮。图片 136图片 137选取字体工具(T),使用白色,在按钮上书写搜索两字,图层透明度为75%。图片 138选取线条工具(U),使用颜色#123036创建直线,图层命名为直线,并放置在按钮图层下方,把此直线移动在搜索框和按钮之间。图片 139最终效果图:图片 140第二十一步:新建蓝色矩形

  新建图层,选取矩形选框工具(M)创建选区(提示:你可以使用标尺),然后使用渐变工具(G)从底部到头部画一个从#35423e到透明的渐变。按Ctrl+D撤消选区,转到滤镜>杂色>添加杂色,并按照下图进行设置。给此图层命名为渐变,且在渐变与横线之间留出1px的距离。

图片 141第十步:给导航添加渐变

1200px * 750px,选择渐变工具(G),对背景图层从上(#792700)到下(#000000)新建渐变,如下图所示:

图片 142 第五步:添加组管理图层

以下是创建过程中所需的图片:

本文由360足球直播发布于生活启示,转载请注明出处:绘制清新的色彩生动的网页布局,Photoshop设计清

关键词: