(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-05-19)

在网页设计中经常会用到翘角纸条的效果。如:百度空间首页:

pic.1

下面我详细讲解一下这个效果使用PS如何制作。

1、首先创建3个图层,分别是纸条、阴影和白色背景。“白色背景”图层是为了方便观看阴影的效果。生成png时,隐藏掉即可。

pic.2

在“纸条”图层创建你要使用的纸条形状,然后接下来就没有“纸条”图层的事了。

pic.3

pic.4

pic.5

pic.6

ps:想要剪掉两边的角,按着shift拖动选取工具,可以得到正方形选区。

我们要做的阴影效果就是在“阴影”图层实现。

2、阴影的制作

隐藏“纸条”图层,选中“阴影”图层。

使用钢笔工具:

pic.7

在正中间添加一个锚点,向上拖动。

pic.8

得到一个下面是弧形的矩形选区,然后填充一下,(不要使用和纸条一个颜色,填充是为了添加投影。选取本身无法添加投影)

pic.9

添加投影,角度90度,不透明度75%,距离7.

pic.10

3、最后的处理

显示“阴影”图层,按下图说明剪掉灰色部分。

pic.11

隐藏“白色背景”图层,然后存储为web所用图。

pic.12

这里记得要选择png-24。否则生成的图片容易出现锯齿。

pic.13

得到png图片。

pic.14

(你可以在向上拖动锚点的时候,稍微短一点,那样中间也会有一点点阴影的效果)

【原创】[PS技巧]如何制作翘角纸条的阴影效果的更多相关文章

  1. 有哪些「看似复杂,实则简单」的 PS 技巧?

    Mac版ps2019哪里有?本次主要以组合键为主,PS中隐藏功能都是通过这些“组合技”启动的,据统计熟练地使用一系列组合技会让你的效率提升30%(纯属虚构).其中一些比较难理解的我都制作了GIF动态图 ...

  2. 20个最新的照片 PS 技巧,提升摄影水平

    相信很多人都知道 Photoshop 在照片编辑方面的强大,所以几乎每张照片经过 PS 处理后都可以变成一个真正的杰作.这里分享的这组 Photoshop 教程可以帮助你学习到新的照片处理技术.你会发 ...

  3. 前端必备PS技巧

    hai,how is it going?I'm MuQing.I come back.哈哈,最近在英语的路上奋战,小秀一下.又好久没写博客了,实习的生活渐行渐远了,回到学校也终于能够坐下来对很多东西进 ...

  4. ps技巧

    ADOBE PHOTOSHOP 同义词 PS(位图图像处理软件Photoshop)一般指ADOBE PHOTOSHOP 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . Adobe Pho ...

  5. PS技巧:如何优雅的抠公章?

    搞设计的很苦逼,整天面对各种各样任务,除了修图.排版外,还时不时会有些另类需求.这时如果掌握一些小技巧就不用临时抱佛脚啦. 下面献上一计:教大家怎么用PS抠公章.有需要的拿去,PS:不要干坏事吆! 效 ...

  6. 前端人员一定要掌握的PS技巧

    一.PS与前端知多少 一般我们会认为PS是用来修改图片的,这些工作是美工人员做的事不是前端人员做的,其实这样想你就错了,因为在前端人员也是要学会一些简单的关于PS的技巧的,这样就不会应为一点点小小的需 ...

  7. Ps 技巧

    一.动作(批处理) 二.让图片更清晰 三.标尺 四.画面还原 五.内容识别比例(改变身材) 六.移花接木 七.多人头像 八.多重曝光 九.突出肌肉线条或者脸部轮廓 十.给照片换一个天空 十一.制作光束 ...

  8. PS火焰文字制作

    火焰文字制作: 最终效果 第一步: 新建图层,并输入文字(这里不做详细解说)

  9. 懂点PS技巧,你会减少很多痛苦

    UI设计 不像平面设计那样随性, 期间可以用点技巧来减少痛苦. 1. 设置网格线 保持像素完美 不在1:1分辨率下也能保持像素完美,可以通过创建网格线来避免虚边的出现. 编辑 > 首选项 > ...

随机推荐

  1. Android 异步加载神器Loader全解析

    在之前呢,我们经常会有这种需求,比如在某个activity,或者某个fragment里面,我们需要查找某个数据源,并且显示出来,当数据源自己更新的时候,界面也要及时响应. 当然咯,查找数据这个过程可能 ...

  2. 用Jquery Widgets Factory写自己的表格控件——AFGrid(支持增、删、改)

    一,Jquery Widget Factory介绍 官网地址 Demo:http://jqueryui.com/widget/ API:http://api.jqueryui.com/jQuery.w ...

  3. 页面异步加载javascript文件

    昨天听一同事说的异步加载js文件,可以提高页面加载速度.具体方法如下:(function() {  var ga = document.createElement('script'); ga.type ...

  4. linux log4j 使用

    1.首先到Apache官网下载log4j.jar文件http://logging.apache.org/log4j/1.2/download.html 引用到eclipse项目里面 2.在src目录下 ...

  5. XSS 前端防火墙(3):无懈可击的钩子

    昨天尝试了一系列的可疑模块拦截试验,尽管最终的方案还存在着一些兼容性问题,但大体思路已经明确了: 静态模块:使用 MutationObserver 扫描. 动态模块:通过 API 钩子来拦截路径属性. ...

  6. Red and Black ---路线问题

    There is a rectangular room, covered with square tiles. Each tile is colored either red or black. A ...

  7. java中的Switch case语句

    java中的Switch case 语句 在Switch语句中有4个关键字:switch,case break,default. 在switch(变量),变量只能是整型或者字符型,程序先读出这个变量的 ...

  8. layout相关

    大致看了看布局大致有5种(approximately) 1. LinearLayout 2. RelativeLayout 3. FrameLayout 4. TableLayout 5. GridL ...

  9. 2014搜狗前端面经【B事业部】

    本来就投了一份简历,后来又收到了个B事业部的面试电话,今天刚面完一面,总体感觉还是很基础的,其中一名面试官帅到不行啊!另一个也不差,真是幸胡...(sorry,跑题了...) 上来先做了份笔试题,超级 ...

  10. 初识HTTP 1.1与HTTP 1.0

    HTTP 1.1与HTTP 1.0的比较 一个WEB站点每天可能要接收到上百万的用户请求,为了提高系统的效率,HTTP 1.0规定浏览器与服务器只保持短暂的连接,浏览器的每次请求都需要与服务器建立一个 ...