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

阴影效果,制作网页常见的图片投影效果(4)

来源:站酷 作者:宋聚安 学习:9940人次

这种萌萌哒的阴影设计常常能看到,特别是最近突然流行起来,今天就跟大家说说,怎么做出这种半透明的投影效果。做完交作业。

www.16xx8.com_0439133538-0.png

 

www.16xx8.com_0439134J7-1.png

 

www.16xx8.com_04391333R-2.png

 

看完后注意到了共同点没有?没错,上面这些图都有个共同点就是点缀了整个界面的精致阴影~

这就是本教程要分享给大家的最近大热的设计技巧:“弥散阴影”。相信大家早就见到过类似这些案例了,但你们真的尝试使用过吗?一个本来60分的古板扁平UI界面,加上这种阴影效果就能作品秒变大神啦~

 

现在开始三步教程,首先拿鄙人最近的一个羞羞案例来做示范(因为是示例,我把阴影加的有些重):

www.16xx8.com_043913CH-3.png

 

第一步、这里以界面中的圆角矩形按钮来做示范,先画个230*60的圆角矩形,色值#ff4683,得到一个圆角矩形

(新手朋友们要记住想用弥散阴影的话,先别用直角,稍微几像素的圆角或直接圆角矩形做出来的效果更好看)

www.16xx8.com_0439131B3-4.png

 

第二步、ctrl+j快捷键复制圆角矩形A得到圆角矩形B,透明度设30%,并向下移动10px(记得把B图层移到A图层下方)

www.16xx8.com_043913N12-5.png

 

第三步、点开PS工具栏中的滤镜-模糊-高斯模糊功能,设置模糊半径为6,哒啦~一个最简单的弥散阴影就做出来啦!!!

www.16xx8.com_0439132O8-6.png

 

依次类推,我们可以发挥创意,运用弥散阴影技巧设计出更多有意思的小部件,并且完美运用~~

www.16xx8.com_0439131304-7.png

 

www.16xx8.com_0439133I3-8.png

 

www.16xx8.com_0439131405-9.png

 

www.16xx8.com_0439132J1-10.png

 

www.16xx8.com_0439132052-11.png

 

本文只是希望带大家入个门,如其中的技巧还有很多的,喜欢上这种弥散阴影的风格后,相信聪明的你还能设计衍变出更多风格的弥散阴影哦!

(文中图片部份是网上找的,部份是我自己的,如果善用了您的作品请联系删除( ^_^ )/~~)

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
秃头小宝贝儿2021-03-10 10:07
COIN

乌克兰拖拉机史2020-05-05 10:47
我的作业:

阿甘是me2020-02-26 11:22
用图层样式更方便,灵活制作。
不可方物.2018-05-12 10:24
学到东西了
霸道温柔2018-03-07 12:22
相关教程~_~!
叶子2016-08-26 10:08
网页阴影
叶子2016-08-26 10:02
网页阴影
摯愛張凱潔2016-03-08 11:53
难不难啊?????
摯愛張凱潔2016-03-08 11:53
难不难啊?????
倾翎碧水心2016-03-08 11:37
又能用了
倾翎碧水心2016-03-08 11:37
又能用了
向日葵的阳光072016-03-08 08:06
想来学习,新手上路
向日葵的阳光072016-03-08 08:06
想来学习,新手上路
起个名真8难2016-03-08 05:53
朩有看明白
起个名真8难2016-03-08 05:53
朩有看明白

关注大神微博加入>>

网友求助,请回答!