前端工程师必备的PS技能——切图篇(笔记)

2686人阅读 评论(1) 收藏 举报
分类:

新建设置

自定义:(可存储为预设)
宽度 1920像素
高度 2000像素(可改)
分辨率 72像素/英寸
颜色模式 RGB颜色
背景内容 透明

视图设置

视图-显示-智能参考线
视图-标尺
窗口-关闭库、颜色
窗口-信息、字符

移动工具

选中某图层后,可用来移动图层。

勾上自动选择,并选中图层,可更加方便移动已有图层。

按住ctrl键,在图层上单击鼠标左键,可直接定位到选中的图层。

选中一个图层后,按住ctrl键,可再选中其它图层,这样,同时选中多个图层,利用属性栏中的设置进行设置。

矩形选框工具

ctrl+shift+alt+e:盖印可见图层。

工具的操作都是针对选区的内部。

选中矩形选框工具后,按住shift键,再点击鼠标进行选区,可使区域变为正方形。
选中椭圆选框工具后,按住shift键,再点击鼠标进行选区,可使区域变为圆形。
(一定要先放开鼠标,再放开shift键才成立。)
鼠标放在一点处,按住alt键可确定圆心再选择椭圆区域或圆形区域。(选中椭圆选框工具+alt+shift,便可得到确定圆心的圆形区域。)

已经选中一个区域之后,按住shift键,再用鼠标进行选区,会自动默认为增加选区。(先放开鼠标,再放开shift键。)
按住alt键,再用鼠标进行选区,便是减掉选区。(通用)

按住shift键,再按m,会在矩形选框工具的扩展中轮流切换。

套索工具

ctrl++:放大
ctrl+-:缩小
按住空格键,鼠标可拖动图片。

可进行不规则形状的选区。

多边形套索工具:通过鼠标单击来确定多边形的每条边。在多边形没有闭合之前双击鼠标,便可自动使其闭合。
磁性套索工具:在选区时,它会根据颜色来进行一定的判断,会尽量把选区的线吸附到颜色的色差之间。(对于抠不规则图形比较方便)

快速选择工具

单击时,它会把相同颜色的部分选择出来(可拖动)。

左右中括号或大括号可缩小放大工具。

选中区域后,右击-填充-使用:内容识别-确定,便可使选中区域消失。

裁剪工具

框中某区域后,点击属性栏中的对勾符号,(或者直接按回车键)便可使界面中只剩下框出来的部分。

用选区工具选中一定区域之后,再单击裁剪工具,会围绕选区选出一个最小的矩形(可包含选区内的所有像素的最小矩形)。

关闭盖印图层,用选择工具选择图层,再用鼠标单击所在图层目录部分,便可直接选中像素,此时已经有选区,再用裁剪工具裁剪完成后,按住alt键,单击图层目录部分的眼睛,会把其他图层全部隐藏,只留下单独一个图层的显影模式。

吸管工具

单击图片某处,便可查看该部分的前景色。

污点修复画笔工具

在盖印图层当中进行。

可直接抹掉不想要的部分。

修复画笔工具:直接点的时候,会要求我们找一个圆。按住alt键,在图片某部分单击之后,再放开alt键,移动鼠标,便会发现在圈内会有刚刚选中的一小部分,将画笔放大,点击鼠标移动便可复制圈内那一小部分所属的图层,但松开鼠标后,会给颜色一个羽化值,与原图并不是完全相同。

修补工具
将要抹掉的部分框起来(可用上面的选区工具),然后按住鼠标左键,往某个地方拖动,便可很融合的将要抹掉的部分用所拖动到的地方的图补掉。

画笔工具

可设置前景色,用画笔涂成所需要的颜色,此时画出的边缘是融合的。
属性栏中可调节画笔的大小的硬度,当硬度调为100%时,画出的边缘就是很生硬的。

仿制图章工具

按住alt键,在想要复制的图层的中心单击,然后在按住鼠标左键画,便可复制成功,这里的复制,松开鼠标后会与原图完全相同。

图案图章工具:图案就是ps中的一个库,在属性栏中可进行选择。

历史记录画笔工具

对一张图进行一定处理之后,历史记录面板当中就会有一个个的历史记录。
将画笔的源记录到处理的某一步,再回到一开始的那一步,然后用历史记录的画笔开始抹,画过的地方都会进入到刚才历史记录画笔源的那一部分,没有画到的地方就会保留之前的那一部分。

橡皮擦工具

顾名思义。
背景橡皮擦工具:可以把背景图擦掉。
魔术橡皮擦工具:可以一下子擦掉一整块。

渐变工具

在属性栏中可以取颜色,修改渐变方式。

渐变的颜色顺序是顺时针的,把反向勾上就可改成逆时针。

模糊工具

将图变模糊,更多用于照片修复。

锐化工具:会将图变得很干燥。

涂抹工具:例如,在睫毛上涂抹,可使睫毛变长。

减淡工具

将颜色减淡。
加深工具:将颜色加深。
海绵工具:相当于把颜料泼在了图上,用海绵去吸。

传统切图

点击裁剪工具下的切片工具,选中一部分,便可使整个画布变成两个切片,可将切片拖动形成新的切片。
灰色部分是被动的切片,蓝色的是我们主动拉出来的切片。
切片选择工具:选择已有切片,拖动切片。可做一些细调。

选中移动工具,可增加参考线,可选中图层,拖动参考线的时候,会自动吸附上去。添加完参考线之后,再选择切片工具,点击属性栏中的,基于参考线的切片,就会自动变成切片,可将不需要的切片删除。

可先用裁剪工具裁剪出来,再进行切片。

切好之后,导出:文件-存储为web应用格式,就会生出一个模型,可选择导出哪种类型的图片(用的比较多的是PNG-24),点击存储,保存,窗口消失就说明已经导出完成。再去查看导出的文件夹,就可以看到导出的所有切片。

精准切图

利用Photoshop的脚本,可进行一种计算机自动运算来切图(自动化切图),尺寸更加精确。

文件-脚本-将图层导出到文件,可选择不同的文件类型,并且勾上透明区域,交错,裁剪图层。单击运行,就可以自动裁剪图层并导出。

打开文件夹可以查看,会保留下阴影,每个裁剪下的图层会自动命名,名字刚好就是图层的名字。

自动切图

编辑-首选项-增项工具,勾上启用生成器(更改在下一次启动Photoshop 时才会生效)。
文件-生成-图像资源,会多出一个文件夹。选中某块图层后,给logo重命名,若要导出jpg格式的图片,就在文字的后面.jpg,(jpg会默认为最佳品质,jpg8是80%的品质,以此类推)此时再去打开刚刚多出的那个文件夹,就会发现我们需要的那一部分已经出现了,而且会把阴影那一部分全部裁剪出来。

抽出资源

首先找到logo。然后文件-抽出资源,可以找到我们所需要的图层,自己选择想要抽出的格式。

复制CSS

外部引用的对象不能被复制。

图层-复制CSS。打开sublime,新建,粘贴,便可将图片的CSS代码复制过来。

查看评论

前端工程师必备的PS技能——切图篇

Photoshop界面设置 移动工具快捷键——v 注意自动选择选项 智能参考线——视图->显示 标尺——Ctrl+R 窗口->信息(面板选项中,第二种颜色信息模式为RGB颜色,标尺单位...
  • lixiaohong2012
  • lixiaohong2012
  • 2016-03-30 11:19:28
  • 1326

前端必备技能之Photosh切图

切图:即从设计稿里面切出网页素材 一、使用Photoshop工具 工具的使用: 1.将文字与标尺的单位的设置为像素   2.打开这五个窗口,关闭其它窗口,保存工作区方便以后使用  ...
  • c2iekqea
  • c2iekqea
  • 2017-02-20 17:40:05
  • 80

写给前端小白的切图技巧(实用)

我一开始是不会切图的,面试的时候心里也没有底气,但是之前也知道一点切图的知识,只是没有那种疯狂的天天做切图,所以一直也不敢说自己会熟练的切图,经过近一个月的切图经历之后,今天来分享一下纯纯的小白切图基...
  • u013778905
  • u013778905
  • 2016-08-21 17:20:33
  • 15382

前端工程师-----一些ps小技巧

1、图象缩小, 用处:当用背景图(background:URL()),需要兼容ie8及以下的时候,由于ie8不支持css3属性background-size,所以如果背景图片大于要展示的区域的话(wi...
  • u012028371
  • u012028371
  • 2016-08-23 17:33:06
  • 571

前端ps切图,图文教程,详细。

写在前面:本文主要内容是目前我所知道的切图技巧结合网上的资料,写出来分享一波。图文教程,多图!! BB:很多人都会说,切图这个活倒底分给UI还是分给前端。虽然好的UI会给我们把图切好,但是他们切的图...
  • OBKoro1
  • OBKoro1
  • 2017-04-09 15:17:09
  • 6841

前端Photoshop切图快速入门

如果你是一个从没用过ps的同学,请打开软件边看边尝试。相信这样可以让你更快的熟悉切图的基本方法,自己多练习应该可以满足前端工作中遇到的切图需求啦。(坚持看完,你会有收获的,当然仅仅是入门一丢丢咯~)P...
  • Admin_yi
  • Admin_yi
  • 2017-03-04 12:05:13
  • 1721

WEB前端之学会用PS很重要

你说有美图秀秀之后PS要over了,NO PS 依旧很重要,当然除了修人像,比如切图什么的...
  • yanwydxf
  • yanwydxf
  • 2017-07-04 15:46:37
  • 785

两种ps切图方法(图层/切片)

两种Ps切图方法一.      基础操作:a)    Ctrl++ 放大图片,ctrl - -缩小图片b)    按住空格键space+,点击鼠标左键,拖动图片。c)    修改单位,点击编辑-à首选...
  • DREAM_XA
  • DREAM_XA
  • 2018-04-09 11:25:58
  • 65

真正的ps切图方法(前端必看)

ps切图,前端必看
  • wenweijiaboke
  • wenweijiaboke
  • 2017-01-05 11:33:37
  • 2741

前端工程师技能之photoshop巧用系列第三篇——切图篇

前端工程师除了使用photoshop进行测量之外,更重要的是要使用该软件进行切图。本文是photoshop巧用系列的第三篇——切图篇   切图信息   在网页制作中有哪些图片是需...
  • yinjing8435
  • yinjing8435
  • 2017-05-02 22:58:05
  • 112
    个人资料
    持之以恒
    等级:
    访问量: 1万+
    积分: 202
    排名: 36万+
    文章存档
    最新评论