前端工程师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/