前端工程师ps学习笔记
此文档记录个人学习ps过程中的笔记。
个人作为前端，学习ps主要是为了更好地衔接设计师，在设计师临时缺席时快速解决问题。
主要解决快速切图和简单抠图、换色的问题。小图标png转svg问题。
1. 入门文档： https://github.com/xiangpaopao/blog/issues/2
非常好的文档，以前我一直想学而不得其门而入。 介绍了3种切图方法，大补。（之前我连2B切图法都没用好）。
2. 零星的操作：
取消： ESC， ctrl-z, ctrl-alt-z
右击左侧按钮（如‘切片选择工具’），可以出现裁剪、切片等子菜单。
拖动一个文档的图层到另一个文档： 1. 确保打开两个窗口：右击另一个文档的头部页签，“移动到新端口”；2. 调整好两个窗口的位置，拖动。
复制一个文档的图层到另一个文档： 右击图层 -》 复制图层 -》设置目标文档
找到某个图片的图层： 选择“移动工具”， 右击图片，就会显示该位置点所有相关的显示图层,其中有一个是图片图层。
上下左右移动图片位置： 选择“移动工具”，按上一步方法找到图层，拖动。
清除所有自定义切片： 顶部菜单“视图“， > "清除切片"
图片大小缩放： 顶部菜单“图像” 》 “图像大小”
重命名图层： 双击图层
3. 有时候设计师没有给出hover效果的图片。需要自己抠图，扣掉单色区域变透明，或者替换颜色。（推荐png格式）
图层解锁： 打开图片，双击背景图层 》 确定，就解锁了。 （解锁后才能抠图和换色）
选取连续或全图单色区域：左侧第二排第二列按钮 右击 > 魔棒工具 > 点击某个像素点，得到选区 （连续选项配置连续区域或全图，容差选项微调选区）
透明抠图：选中区域后 》按delete， 某个选区就变透明了。
选区换颜色： 选中区域后 》“编辑” 》 “填充" 》 切换到 ‘使用： 颜色’
4. 如何转png到svg、font-face。 临时画个简单的图标也是这个步骤。（这部分只是各步骤手动弄弄，没有完整走通，感觉好多都是体力活啊。）
a. 用钢笔工具描出闭合路径。
b. ps 中 ctrl + c 图层, ai 中 ctrl + v 图层。各种小操作参考 PSD小图标变身SVG Sprites/font-face历险记
c. 导出成svg
d. 各种手工修改。icon-font
-------- 如果不要考虑 一定要用ps, 可以尝试下方的工具。
TO LEARN：
蒙版，路径 等等等等。
更多参考：
PS高端教程：在PS中用脚本语言来处理图片 程序员的逆袭，有没有！
把UI图里的小图标制作成icon font 图片多的时候，颜色很丰富的时候可以一试，少的时候还是常规切图。
PSD小图标变身SVG Sprites/font-face历险记 手工将ps中的矢量图层转成 face-font，涉及详细ai操作 （可以直接ctrl-c ps的矢量图层到ai）
icon-font 如何整合多个svg图标到一个文件并嵌入网页。
批量导ps矢量图层为 svg工具 [很多文章推荐，但我还没尝试成功]
http://hackingui.com/design/export-photoshop-layer-to-svg/
http://hackingui.com/design/my-workflow-to-export-svgs-out-of-my-photoshop-design-files/
非ps png转svg工具
convertio ,picsvg 在线免费工具！ 异常强大有没有！！！导出的svg异常干净有没有！！ 得到svg后再结合icon-font 的步骤，很快出效果有没有！
png express 有收费的png转svg的工具，可以试试。windows上也有免费的这种类型的工具。
cssSprite
http://csssprites.com/