前端web切图技能

PS切图

1. 新建文件

快捷键Ctrl+n

分辨率72像素/英寸,颜色RGB,背景内容为透明,可存储预设

2.查找图层

打开PSD图片,点击左上角的'组'选项,切换成'图层';

按Ctrl+左键点击选中图片中你需要的位置,就会在右边的窗口图层里面快速定位出相对应的图层位置;

按Ctrl+左键点击选中当前图层,你会在图片看到上对应的元素被虚线包裹着

3. 定制窗口

1. 点击菜单栏中'视图',勾选'标尺'和'显示'里面的'智能参考线'

2. 点击菜单栏中'窗口',只需勾选'信息','历史记录','图层','字符',其他多余的可以取消掉,避免占用浪费右边窗口的资源

3. 在'信息'面板里面的'面板选项',将第一颜色和第二颜色改成'RBG颜色',鼠标坐标的单位尺寸改成'像素',状态信息栏勾上'文档尺寸'

4. 点击菜单栏中'编辑',选中'首选项'里面的'单位与标尺',将标尺与文字都改成'像素';

5. 建议:当我们完成上述操作,点击菜单栏中'窗口',选中'工作区'里面的'新建工作区',进行存储当前的模板;以便日后使用;

4. 对齐

'移动工具'快捷键: v

按住Ctrl键选中两个或多个图层,在'移动工具'的功能栏中有左对齐.右对齐.居中对齐等对齐方式;

5. 选取工具

快捷键 : m

按住shift+m键,可以快速切换选取工具

按住shift键,矩形会变成正方形,椭圆会变成正圆形;功能栏有两个选区的加法,减法,乘法;按住shift键是增加选取，alt键是减去选区

按住Alt+shift键,以当前鼠标点为圆心,进行画圆

6. 常规快捷键

图片缩小和放大 : 按键Ctrl+加号或者减号

移动图片: 按住空格变成小手,就可以拖动图片

删除选区 : Ctrl + D

印盖图层 Ctrl + shift + Alt + E

套索工具按住shift加大选区,按住Alt减少选区

后退(撤销) : Ctrl + Alt + Z

前进 : Ctrl + shift + Z

快速填充前景色 : Alt + delete

快速填充背景色 : Ctrl + delete

参考线的水平和垂直切换 : Alt

图片位置快速选定 按住'h'变成小手,移动的时候有个方框,松手就会放大显示当前框框的内容

参考线: Alt + V +E

按住Alt键你会看到菜单栏字母有个下划线,就可以进行操作

隐藏/打开 参考线: Ctrl + ;

7. 快速选择工具

将颜色相似的区域快速选取出来,由于快速生成闭合区域,可以使用Alt减去部分区域

8. 套索工具

当套索区域完成闭合后,在区域内右键点击'填充',里面的'内容'为'内容识别',区域会自动取消

9. 截取工具

快捷键: C

截取你需要的区域,然后在右边的图层中对修改的图层旁边的小眼睛,按住Alt+左键单击,小眼睛就只会显示当前图层

然后按Ctrl+shift+S,即可将当前图层保存并导出

小技巧: 比如要导出文字,选按Ctrl+单击左键选中图层,会出现虚线包围当前图层,然后按C进行截取,按enter确定后,对当前图层

​ 小眼睛按Alt+单击左键,背景会去掉,然后按Ctrl+shift+S保存导出png图片

10. 污点修复画笔工具

快捷键: J

污点修复画笔：周围取素材再融合，选中的区域内有类黑色自动认为是污点，自动去除修复画笔：需要找一个圆心(alt+左键)，放开alt,可以绘制出当前"+"里的内容

11. 历史记录画笔

以去除面部斑点为例:

点击菜单栏中'滤镜',选中'模糊'里面的'高斯模糊',大概设置4像素,生成新的效果;

​ 查看右边窗口面板的历史记录,在当前模糊的图层左边有个小笔,这就是我们要的历史记录画笔

​ 选回之前的图层,点击历史记录画笔,就能生成模糊祛斑的画笔

12. 涂抹工具

可以把眼睫毛画长

13.减淡工具

皮肤变白

14.图层的层级

最上层层级最高,最底层为背景

15.参考线

选中当前图层,当拖住参考线靠近图层时,会自动吸附上去

16.快速精准切图

菜单栏下'文件',选项中的'脚本'里面的'将图层导出到文件',选择文件类型'png-24',里面的选项都勾上

透明区域，交错，裁剪图层勾选
注意：比如说要做一个gif动画，如果是ps导出，半透明效果出不来，我们用ps导出一个一个png序列帧，由于命名是很顺的，我们可以在脚本
当中引入堆栈，那是非常炫的一个功能
1、有阴影会保留下来。
2、命名刚好是图层的名字，如果做网页设计把每个图层命名使用网页中合法的命名，就可以不需要导出后再调整名称。

17.自动切图

1.编辑——首选项—— 增效工具——勾上 启用生成器
2.文件--生成--图像资源
3.直接通过向图层或文件夹添加或删除后缀名 .png / .jpg / .svg ，自动导出或删除图片，此方法可替代手工切图
4.200%xx @2x.jpg
5.保存到svg，可获取前端代码。

 

18. 抽出资源

cc2014版本开始的导出svg的办法

菜单栏'文件',下的'抽出资源',抽出你需要的图层和格式

19 . 复制css

介绍用Photoshop CC自动生成css的办法

菜单栏'图层',选项里的'复制css'

注意一点,外部的文件(智能对象)是不能复制,在编译器粘贴即可获得样式

20. 前端开发学习切图推荐

本文由以下视频网址学习得到的小知识:https://www.imooc.com/video/9812

个人建议看第二,五,六章的视频讲解;