论切图仔的自我修养

编者按:作者糯米是个工具控,让我们来看看他都私藏了哪些好用的工具吧。

不过,据说都挺贵。

一、Photoshop

Adobe Photoshop CC 2015 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

二、Photoshop 插件推荐

1. DevRocket

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

2. GuideGuide

GuideGuide 支持多种PS版本(CS5~CC2015),参考线神器。 可以基于文档或选区新建参考线,快速在边缘或中心点生成参考线。还有参考线组,一键生成。最强大的功能还属它的自定义参数生成参考线。 传送门:http://guideguide.me/

3. Device Preview

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

4. CSS Hat

CSS Hat 之前有买过1.x版,支持导出图层样式为css、less、sass等,如果要升级到支持CC 2014+版本又要收钱,坑爹~。~已弃坑。 传送门:https://csshat.com/

三、辅助App

用好辅助的App和扩展能使你的切图效率事半功倍哈:),推荐几款给大家~

1. Slicy

Slicy 比较依赖制图组童鞋的稿子质量了,制图员需要加很多的辅助标注和切图所需的辅助图层

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

2. Skala Preview

Skala Preview 在手机上预览设计稿的好工具,制图组的小伙伴们好多在用,切图仔们也可以耍耍,需要在手机上安装相应的app,支持iOS和Android;另PS需要开启“远程连接”功能。

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

四、我常逛的设计类社区

  • 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

知识共享许可协议
如无特殊说明,本文版权归 本文作者及有赞技术团队 所有,采用 署名-非商业性使用 4.0 国际许可协议 进行许可。
转载请注明:来自有赞技术团队博客 http://tech.youzan.com/cut-boy/

欢迎关注有赞技术团队微信公众账号
了解更多,保持联系