当前位置:首页>ps实例教程>ps网页设计>网页图片>教程内容

photoshop教程:设计丝带风格的网页导航

来源:未知 作者:ps狂想曲 学习:799人次
您喜欢这种效果吗?今天否本带大家一起来看看它究竟是如何制作出来的!



首先在photoshop中新建一个文档-约500 × 500大小,并填满#dac8aa 的颜色。



现在,我们找一个类似纸张纹理的素材。 您可以随意寻找自己喜欢的自然纹理,然后执行“去色”快捷键Ctrl+Shift+U :





,之后,改变图层模式为:叠加,改变不透明度为60%。 合并两个图层。



Ok,为了表现纸质的密度,我们再使用“锐化”来加强质感,可以适当多来几次。



现在我们开始创建彩带。 首先用矩形选框工具创建如图的选区,并填充为绿色(#95b900)记得要在新图层完成哦!。



以同样的方式创建黄色(#e9db03)和红色(#b94a00)两个颜色的彩带。








,接下来我们要保证三种颜色的彩带是在同一图层的情况下按Ctrl+J复制出一个新的彩带!并旋转如图角度:



原来的层同样要旋转,使他们之间产生交叉。



现在我们选择底层的彩带,按住CTRL点击图层面板中的此层,得到他的选区,新建一层,使用渐变工具创建出一个阴影。
渐变使用黑色——透明的方式!



接下来我们合并除“纸层”以外的图层,也就是说让彩带变为一体。


,接着使用多边形套索工具,选中如图所示的范围进行删除!



我们使用文字工具为飘带添加一些文字装饰,记得是用“自由变换”命令对文字进行旋转调整!。



同样我们将文字层和彩带层合并,添加如图所示图层样式。



现在,效果应该是这样的,多了一些阴影:





,接下来我们给彩带增添一些布纹的真实感,选用滤镜 “ 纹理”选择纹理化 :



我们可以看到彩带有了凸凹感:



然后到下一个步骤。 为了使我们的彩带更具立体感我们使用颜色减淡工具 (大小:125像素,范围:高光,曝光:20%),我们在需要的位置上进行涂抹,注意不要涂抹过量,我们会得到如下效果:



同样我们相反的使用颜色加深工具 (大小:80像素,范围:阴影,曝光:30%),将彩带旁边进行减暗,这样做的目的是增加亮度对比度,使之更具立体感。





,我们需要添加一些网格,让它看起来更像织布。 创建一个3 × 3像素大小的新文件,用选区画出如下图形。

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
嘻嘻哈哈_Cherry2015-07-08 01:59
这个教程太好了!135829f2r5xc63ap7572u2.jpg
mars__hm2011-05-25 08:38
挺好...
mars__hm2011-05-25 08:38
<给力>
mars__hm2011-05-25 08:38
<给力>
mars__hm2011-05-25 08:37
<给力>
海盗十二郎2011-03-10 11:37
<给力>
strutszyj2010-11-05 03:44
看看...
wangxiaoyu2010-10-29 06:19
<给力>
shunqiziran2010-07-29 01:22
刚刚开始学习~~
听风吹看星星2010-07-18 02:11
看来加深减淡还是很强大~~
farjie2010-07-10 04:38
<给力>
q78252152010-06-24 12:23
五体投地!!
superjunwen2009-11-05 11:23
学习了~~~~~~~~~~~~~~~~~~~~~~~~~

关注大神微博加入>>

网友求助,请回答!