实习之前, 没有过多了解过 PS, 并且对于 pxcook 等工具, 也只是略有耳闻, 并没有实际上手过. 在真正操作的时候, 还是遇到了很多的坑, 故将其一一记录下来, 以供后续的参考.

更新

[2019-12-15]

  • Initial release

[2020-3-13]

Added

  • 新增: [PS]-修改图层文字

[PS]-合并多个图层

按住 Ctrl 键, 选中 n 个图层, 接着按住 Ctrl + E, 可以合并图层, 避免繁杂的 css 样式书写.

[PS]-切取可视区域的图层

有时候可能只需要切取屏幕可见范围的图层, 截取掉图层的其它部分

使用 选区 工具, 再拖动选取需要的图层, 按下 Ctrl + J 复制图层, 最后使用 pxcook 切取.

[PS]-大模块分割

诸如移动端的活动页面, 可以按照 Nav、Banner、Info、Link… 分为多个大的区块.

通过 视图 -> 新建参考线 -> 选区 来借助参考线, 划分模块.

[PS]-大模块分割后, 提示: 当前所选的区域没有图层

设定好参考线之后, 点击 裁剪 工具, 选中 基于参考线的切片 选项卡, 可以看到按照参考线被分为了几个区块, 接着按 Ctrl + Shift + Alt + S 将其保存为 web 格式的多张图片文件夹.

[PS]-使用矩形选区选取后, 提示: 图层不存在

通过 Ctrl + N 创建一个新的 PSD 文件, 接着 Ctrl + V 将选取的图层复制到该文件中.

[PS]-去除所有的参考线

视图 -> 显示 -> 取消勾选参考线

[PS]-去除所有的切片标记

视图 -> 显示 -> 取消勾选切片

[PXCOOK]-不能检测 PS 中参考线定义的区域

在 PS 中定义了多组参考线, 并且按照参考线切片, 但是 pxcook 并不能监听到源文件的变化, 这就导致无法通过 pxcook 来查看每个模块的样式、位置等信息.

解决方式是, 自行查看所切模块图片的宽度和高度.

[PS]-修改图层文字

对于要修改的图层文字, 直接点击该图层选项卡前的 T 状图标即可:

1.png

如果提示当前字体无法识别, 可采取以下两种方式:

  1. 矩形选框工具 -> 选中文字图层 -> 文字 -> 解析缺失字体
  2. 矩形选框工具 -> 鼠标右键 -> 识别缺失字体