关闭

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

2037人阅读 评论(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代码复制过来。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:8123次
    • 积分:185
    • 等级:
    • 排名:千里之外
    • 原创:11篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    最新评论