论切图仔的自我修养

1、Photoshop

Adobe Photoshop 是设计师的必备，因此也是前端切图仔的必备工具。 
Photoshop CC 2015 墙裂推荐安装2015版，有诸多改进，很多新功能是与咱们切图仔息息相关的。

• 工做区

• 经常使用快捷键

• 辅助App和扩展

• 设计社区

工做区

推荐选择“排版规则”，比较适合咱们切图仔。主界面右侧有不少和网页排版相关的工具和信息展现。若是你是在狭小的显示器里工做，你也能够选择收起最右侧的面板组。

设置

性能方面，设计师童鞋广泛用的糕富帅版本的电脑，作出来的稿子有时候块头都好大，让咱们这些切图仔的电脑鸭梨山大。 咱们只好给咱们的PS多喂些奶咯。 打开首选项［Cmd+k］，选择性能面板1. 给PS分配更多的可用内存； 
2. 勾选“使用图形处理器”；

网页设计方面一般用像素做为长度的度量单位，咱们须要和设计师保持一致，因此设置单位与标尺的单位为“像素”；

再唠叨几句：P

像素完美，这应该是值得每个设计师（我厂的制图员）去努力追求的。 当你拿制图员给你的设计稿时，请先花个两三分钟扫一遍稿子。看是否有明显的像素不完美的状况，这样减小没必要要的返工。

经常使用快捷键

如下黄色高亮的功能都是PS CC 2015新增的

• 存储为Web所用格式：Shift+Cmd+Option+s

• 图像大小：Option+Cmd+i

• 画布大小：Option+Cmd+c

• 合并拷贝：Shift+Cmd+c

• 快速导出整图

  ：Shift+Cmd+Option+w

• 快速导出图层

  ：Shift+Cmd+'

Tips：

1. 按住Cmd键，鼠标移到图层上可显示智能参考线； 
   

2. 选择多图层[组]，进行快速对齐调整，如水平居中对齐、垂直居中对齐等。

3. 快速导出为PNG

2、Photoshop 插件推荐

1. DevRocket

加速你的iOS设计工做流。咱们在手机端h5有不少不少页面须要设计，这个工具能帮助设计师的工做更加高效。对于切图仔来讲，也有很多便利的功能，好比一键提取图层[组]到新的文档并裁切空白元素。View Template 
Export Assets 
One Clip 
Preview Design 
传送门：http://devrocket.uiparade.com/ $19

2. GuideGuide

支持多种PS版本（CS5～CC2015），参考线神器。

能够基于文档或选区新建参考线，快速在边缘或中心点生成参考线。还有参考线组，一键生成。最强大的功能还属它的自定义参数生成参考线。

传送门：http://guideguide.me/

3. Device Preview

功能同Skala Preview，但这货是Adobe的亲儿子，功能依赖Adobe ID，手机也要安装app，一样支持iOS和Android。

4. CSS Hat

以前有买过1.x版，支持导出图层样式为css、less、sass等，若是要升级到支持CC2014+版本又要收钱，坑爹～。～已弃坑。

传送门：https://csshat.com/

3、辅助App

用好辅助的App和扩展能使你的切图效率事半功倍哈：），推荐几款给你们～

1. Slicy

比较依赖制图组童鞋的稿子质量了，制图员须要加不少的辅助标注和切图所需的辅助图层

传送门：http://macrabbit.com/slicy/ $29

2. Skala Preview

在手机上预览设计稿的好工具，制图组的小伙伴们好多在用，切图仔们也能够耍耍，须要在手机上安装相应的app，支持iOS和Android；另PS须要开启“远程链接”功能。

传送门：http://bjango.com/mac/skalapreview/ Free

4、我常逛的设计类社区

• Dribbble Show and tell for designers

• Awwwards Best Web Design Trends

• Behance Showcase and discover the latest work from top online portfolios by creative professionals across industries.

• Smashing Magazine For Professional Web Designers and Developers

• Pttrns Mobile design patterns, resources and inspiration

• UI8 Carefully Crafted UI Design Assets

原文：http://tech.youzan.com/cut-boy/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io