前端工程师必备的PS技能-切图篇

Phtoshop切图

界面设置

PS首选项设置:
编辑>首选项>单位与标尺: 将单位(标尺/文字)改成像素。
面板:
在“窗口”菜单下开启:工具/字符/选项/信息(F8)/图层/历史记录
调整面板后,需要保存工作区:窗口>工作区>新建工作区

辅助视图
在“视图”菜单下开启:对齐/标尺(Ctrl+R)/显示>参考线(Ctrl+;)
需要开启视图菜单下的显示额外内容,才能看到画布里的参考线和网格。

Photoshop基本操作

ps界面中有菜单栏、属性栏、工具栏、面板、工作区。
放大快捷键ctrl++,缩小ctrl+-
移动工具快捷键(v)
选框工具:
选框工具快捷键(m),按shift(画正圆),按alt+shirt(以中心画正圆),按shift+m
为选框工具的切换。
裁剪选取:画一个选框后,按右键,变化选取,然后拉动相应位置,对选取进行裁剪。
撤销选框:Ctrl+D

选择页面较大区域方法:在左侧画一个小矩形框,在右侧再画一个小矩形框,在信息视图里显示相关区域的大小。

选区
选中选区:ctrl + 相应图层前的框。
撤销选区:Ctrl+D
填充选区颜色:选中选区后,设置前景色,然后:ALT+Del;Del:为删除选区颜色
删除重叠选区颜色:选择一个选区,点击另一个选区,用选框工具+Alt选择要删除的颜色区域,点击Del即可删除。

图层:
选中图层:移动工具下,Ctrl+ 鼠标点击画板中相应区域
复制图层:选中某一图层,Alt+ 鼠标点击图层,并拖动,即新建一个类似的图层。

参考线:
开启:对齐/标尺(Ctrl+R)/显示>参考线(Ctrl+;)
需要开启视图菜单下的显示额外内容,才能看到画布里的参考线和网格。

关闭:拖动参考线到左侧标尺,顶部标尺,即删除一条参考线。
新建参考线:从左侧或顶部标尺处,按鼠标左键拖动到内容区
新建确定尺寸参考线:快捷键:ALT+V+E
打开视图菜单,点击新建参考线。
参考线隐藏/显示:ctrl+分号(;)

选中图层,然后建立一条参考线,当拖动到图层边缘时,会自动吸附到图层位置。

传统切图

方法1:选择切片工具,点击图层,然后切图,切图边线会吸附到图层位置。
方法2:先绘制图片各部分的参考线,然后选择切片工具,顶部选择“基于参考线的切片”,然后再选择相应切片,进行调整尺寸。

隐藏文字只留背景的切图:

A: 若文字为独立图层,隐藏文字图层

  • 找到文字图层
  • 去掉眼睛图标

B:若文字和背景合并,平铺背景覆盖文字

  • 矩形选框工具
  • 自由变换(Ctrl+T)–(背景图像可以拉伸)
  • 使用移动工具+Alt –(背景图像不能拉伸)

PNG24/PNG8格式的切图方法

PNG24格式
1.单图层:
移动工具选中所需图层;
再右键复制图层到新文件,或直接拖至已有文件(新建:Ctrl+N)
2.多图层:
移动工具选中所需图层(按住Ctrl多选);
右键合并图层(Ctrl+E);
再右键复制图层到新文件,或直接拖至已有文件(新建:Ctrl+N)

PNG8格式
带背景切图:

  • 合并(可见)图层(Shift+Ctrl+E);
  • 矩形选框工具选择内容
  • 魔棒工具去掉多余部分(从选区中减去:按住Alt)
  • 再右键复制图层到新文件,或直接拖至已有文件(新建:Ctrl+N)

可平铺背景的切图

用矩形选框工具选取一块区域
复制粘贴到新文件中(平铺内容充满文件的宽(X轴)或高(Yz轴))

活动页的切图——适用于可以一刀切的活动页

  • 拉参考线
  • 选择切片工具
  • 点击“基于参考线的切片”按钮
  • 为切片命名
  • 保存(全选切片,统一设置存储格式)

精准切图

利用Photoshop的脚本,进行一种更加快捷精准的切图方法,自动化切图
文件 → 脚本 → 将图层导出到文件 → 文件类型选择png24.

扩展知识

新版PS CC2014功能
自动切图:
【配置】配置完成后,PSD 文件所在路径会出现 对应文件名-assets 的文件夹
1、编辑–首选项–增效工具–这里对『启动生成器』打勾√ (注意,更改在下一次启动 PS 后生效)
2、文件–生成–图像资源(将其打勾√ )

【使用】
1、在 PSD 内将图层或图层组的名称修改为.png 或.jpg 结尾,则在assets文件夹内自动生成导出图片(以图层名称及其约定的文件后缀名命名)。
2、Retina优化:
如果需要适配 retina 显示器,可以将图层命名为『200% 图层名字 @2x.后缀名』(注意需要添加空格,如:200% button @2x.jpg)自动导出的文件名不会出现200%的字样,但是文件尺寸变为2倍大小。
3、如果不想要导出的图片资源了,可以取消图层和图层组的文件后缀名,则导出的图片自动在assets文件夹内消失。
4、还可以通过图层和图层组的文件后缀名来控制导出图片质量,例如『.jpg8』则为 导出为80%品质的 jpg文件,如果不设置则默认为最佳品质。
5、SVG生成:改后缀名可自动生成SVG
6、SVG导出:选中资源-文件-抽出资源,抽出SVG图片
7、复制CSS:选中资源-图层-复制CSS
8、图层管理:图层下方可选择类型,进行图层筛选

抽出资源
指定的图层:文件-抽出资源-找对应图层-相应格式svg.
抽出改文件名

复制CSS
点击图层-复制CSS
单击后,代码已经生成了,粘贴下来了会自动命名。需要使用即可。

Fireworks切图

打开图片时:pS首选项选择:
1、维持层的可编辑性优先于外观 (选取这个选项,打开图片后文字等可编辑)
2、维持Photoshop层外观

切片步骤:

1、矩形选框绘制选中区域
2、右键 → 插入切片 → 在右上方”优化”里设置导出属性(图片格式,色板:透明) → 对着图片,右键”导出所选切片”

或者:直接鼠标点击相关图层,然后右键”插入矩形切片”,在”优化”里设置选项 → 导出所选切片。

参考资源:
1、前端工程师必备的PS技能——切图篇 http://www.imooc.com/learn/506
2、Fireworks切图教程 http://v.youku.com/v_show/id_XMTMyNjExMjAzNg==.html

坚持原创技术分享,您的支持将鼓励我继续创作!