在早些年大概15年以前，设计师包含了重构的工作，js部分是设计师和后端瓜分写掉了，后来为了更高效的出成果，有了前端岗位，前端被大家所重视，直到现在你去看各招聘网站，前端的工资甚至比后端工资高，足以凸显企业对前端的重视。就因为这样的趋势，各大培训机构疯狂的培养前端人才，然而并不会教怎么切图，所以培训出来的大部分前端不会ps，更不用说sketch了。这无疑增加了设计师的工作量，无疑增加了设计师和前端的沟通成本（前端想这么写，而设计师切的是那么写的，尤其对于不会前端的设计师来讲，切图就是把自己的设计元素挨个拎出来，其实是不对的），就是需要反复改稿，然而设计师们大多很“大度”不会抱怨，总是会说这是自己的问题，然而我认为问题的根源并不在此。现在的公司宁愿裁剪设计，也不会缩减前端，我看到很多企业要求后端会写css等页面，很矛盾的组织架构。这是前端的概括发展史。
这段时间，公司招聘了一位前端实习生，意欲叫我带一带，但想来我本身不在公司常驻(只是在遇到搞不定的页面问题的时候会叫我解决问题而已)，即便是培训出来的前端js方面我也不如人家专业，于是委婉拒绝了。其实我知道公司要的只是叫我教一下人家怎么切图、怎么快速写页面罢了。我认为这东西真的很简单，一篇教程足矣。所以我还是决定梳理一下，写出一篇浅显易懂的教程，万一真要用的话可以快速用得上。
一、工具准备
让公司的慷慨同事给你安装一个高版本ps或者sketch或者其他设计工具并破解。如果设计师用了特殊字体，他会告诉你怎么办的，无须担心。
二、索要源文件
既然设计师很忙或者切的图太过精细不符合你的要求（最多的就是活动页面设计了），你最好索要源文件，自己切图。打开源文件的时候，如果提示字体缺失，没有关系，点击取消或者忽略不管他，因为在你接下来的操作中并不会改到字，只是显示隐藏图层罢了。实在不懂，请教设计师教你一遍就会了。
三、按照自己的写页面习惯和最优解切图
自己企图的最大好处就是，设计一星期，你可能俩小时就能把静态页面出来。几张大图一切，文字一加就行，相信专业写页面的人都懂。如何切图？来看一个简单的例子。
① 打开psd，缺字体了，点击取消或者不要解决。
字体缺失
② ps里“ctrl+1”100%显示设计稿，F7打开图层面板，左上角勾选自动选择图层。快捷键“V”选择工具，点击设计稿的任何地方，就会选择相应的图层。
选择
③ 比如我们要写banner，那就找到设计图对应的banner位置。如果设计师的习惯好，会将每一个图层取好英文名字，并且分文件夹。这里我们找到“banner”图层组。
找到banner
④ 观察设计稿，有复杂大背景，还有很多小元素主元素，大背景可以作为一张背景图插入页面，如果图片压缩了也过大，就要考虑分两半背景插入。左边主元素也是一张图，右边标题文字有无法用css写出来的效果，也可用图片，logo和装饰元素也是图片。logo区域的背景也是一张图。比如我们要切$1那个图，按快捷键v后点击$1那个主元素任何地方，右侧图层会自动选择到你点击的图层。这里我们发现$1图层组已经分好。
$1图层组
⑤ 点击"$1"图层组，右键-》导出为-》右上角选择jpg或者png图片，按需选择压缩。png是无损压缩。
导出图层组
若选png格式，勾选较小文件，是无损压缩
若选jpg格式，品质栏要减小，图片左侧可以看压缩参数，比如39%左侧显示图片大小37.2kb。按需有损压缩
⑥ 选择“全部导出”，导出到你的项目中的img文件夹中即可。
至此图片导出就已全部完成。
如果想要看文字的参数怎么办？
① 点击文字，右侧图层会自动选中该文字图层。
点击文字，右侧图层即选中
② 打开字符面板（如果找不到，就去窗口-字符），字符面板就会出现完整的字体信息。可以点击图层，右键复制css。不过一般用不上。只要看字体：DINPro/Light、大小45.4点（你在写的时候可以是45px/46px）即可。
文字参数
这都是最基本的切图和查看方法了。万变不离其宗。如果“超纲”，要设计师规范作图即可，不用啰嗦。
还是强烈建议前端多少要会一些PS，会到什么程度呢？设计稿拿过来自己会根据自己的写页面习惯切图导出，这是最基本要求，也只要这一个要求就够了。你可能会说，现在企业的设计师都会切好图传到xx上，自己根据需求下载就好了。诚然，对APP等小页面来讲，设计师用sketch或者ps设计切好图上传是可以的，但是对于大型的商城或者活动页面，还是需要前端/重构自己切图比较好，自己想想就明白了。
网友评论