前端技能之切图

为何会有此文

Web界面构建过程中，切图是常是必不可少的一步，我认为做好这个工作需要做到：

• 清楚的知道需要切出什么样的图
• 熟悉一款图像处理的工具

剩下的基本就是体力活了。很多团队是没有“页面重构师”这一职位的，有时会把切图任务分配给UI设计师，而由于构建出某种样式界面的方法也多样的、并且大部分设计师没有界面开发经验，所以设计师往往不明确究竟要切出什么样的图，这一点在移动端体现的更为明显。

例如设计稿中有这样一个按钮：背景为有描边的圆角矩形，按钮上有一个icon和文字。大家在构建UI时会如何实现呢。

我想到的几种方法：

• 直接切出包含所有信息的一张图片

• 切出可伸缩的背景图，通过代码自动伸缩，然后切出icon 并打上文字

  背景图和icon:    

  (为了能看清icon 我把透明的背景填充成了灰色)

• 通过代码绘制出背景、圆角、描边样式，icon采用图标字体 （关于图标字体，可以了解一下http://iconfont.cn/ http://fontawesome.io/这两个项目）

暂且不讨论各种方法的优劣，在实际项目中三种方式都会有人使用，恐怕很多设计师是不了解UI构建中这些细节的，这就需要工程师和设计师描述清楚每一张图的需求，增加了沟通成本，切图稍有不慎会影响显示效果。

相比而言，我认为工程师自己学习一下图像工具的使用可以达到事半功倍的效果，于是便有了此文。

第一次写技术博客，受限于本人水平，有写的不如意的地方还请见谅和指正，本文适合不太会切图的工程师们阅读。

PS中相关功能

关于切图的工具，这里我们使用Photoshop(以下以Photoshop CC版本为例，不同版本可能存在一些差异)，因为他更灵活、适用场景更广。
介绍一下使用PS切图时常用到的功能：
首先是图像菜单中的命令

图像>图像大小

这个好理解，就是修改图像的尺寸