如何用PhotoShop高效率的做UI设计?

这是去年为新员工写的一篇教程,由于公司内部设计师使用的操作系统不一致,为保证设计出图的一致性,加速开发推进。同时把自己的高效率传承下去,高效率来自于两个方面,“全方位的思考与取舍”+“熟练的使用工具”。

涉及到的内容包含设计基础及常用软件工具,共分两部分,第一部分为PC上的设计,第二部分为Mac上的设计。PC上的设计工具,Mac上也可以用,不过既然有Mac,那就用更高效率的软件吧,下一篇讲。

此文为PC部分,目录:

1:基于实时预览的设计;

2:PS图层命名规范

    2.1:直接切图

    2.2:分辨率命名

    2.3:图标尺寸的统一

    2.4:常用的切图格式

    2.5:图片格式规范及注意事项

3:PS尺寸标注插件Specking

4:ps—键切图插件Layercraft

5:PS导出SVG脚本PStoSvg

6:图片压缩技术及工具tinypng.

7:其他辅助设计工具介绍


1:基于实时预览的设计

由于手机跟PC的屏幕显示效果略有差异,为了保证设计稿在实际使用环境中,能有一个优秀的视觉展现,在设计时需要基于目标平台,对设计进行实时的预览,设计时需要以目标平台为准,目标是用于PC的WEB页面,则使用PC来预览设计稿,目标是手机APP界面,则需要使用手机对设计稿进行实时预览,为WEB设计的界面,直接通过屏幕预览即可。但是由于色域的区别,设计稿在还原成Html网页的时候,仍然会产生偏差。这时候需要对设计稿进行灵活的调整,建议设计师了解基本的DIV和CSS,方便对已经web化的设计稠进行调整。

为手机设计的界面,在预览时并不是十分方便,通过辅助工貝,可以轻松实现设计稿的真机实时预览。PC上常用的手机端实时预览工貝是腾讯ISUX出品的一款叫做PsPlay的软件。

Ps Play

关于PSPlay的下载及具体使用请考:https://isux.tencent.com/ps-play-seamless-mobile-ui-design.html


2:PS图层命名规范

设计师需要养成良好的图层命名习惯,不止要自己看的懂,其他设计师也能一下就能理解,才能方便对设计进行管理。以下设计规范基于Mac平台的一款Slicy的规范进行设计,后面单独讲解这个切图神器。

2.1 直接命名并切图

可以直接切图的

如图示:可以直接切图的图层或文件夹,命名规范:命名+后缀;举例:star1.png

还可以为切图进行分类命名,如加前缀“icon/”,代表的就是图标类的切图,“btn/”可以

代表这是一个按钮类型的切图。这么操作还有一个好处,在某些自动化切图软件中,可以直接

将切图结果进行文件夹分类。文件夹会被命名为icon或btn。

如图示的切图结果为:

icon/变成了文件夹


2.2 多分辨率切图

需要提供名分辨率支持的图层文件夹,规范:命名+@2x+后缀。举例:star@2x.png

多分辨率切图命名

2.3 图标尺寸的统一

图标尺寸的统一,有助于开发过程的简化和后期的修改调整。例如有三个图标,尺寸分别为:12*13,12*14,13*15。在切图时,可以将单个图标统一为16*16,图标之外的区域用透明填充。

图标尺寸统一,开发时只要写一个固定尺寸

图标尺寸需要保持一致,为保证统一,可以采用以下方法:

1:建立文件夹,并在文件夹底部增加一个矩形,命名为@bounds,并设置为透明(如图黄色部分);

2:建立文件夹,给文件夹增加一个矢量蒙版位图蒙版,蒙版尺寸设置为需要的尺寸;


2.4 常用的切图格式

对于各平台的不统一性,针对性的整理格式如下,并统一设计的出图格式:

WEB:jpg、png、icon-font、svg;

iOS:jpg、png、icon-font、pdf;

Android:jpg、png、icon-font、svg(5.0以上);

相关文件格式暂定为:@2x.png、@3x.png、hdpi.png、.pdf、.svg

切、切、切

以test文件为例,提供以下文件名及格式:

一倍大小格式:test.pdf、test.svg

两倍大小:test@2x.png、

三倍大小:test@3x.png、test.png


2.5 图片格式规范及使用注意事项

常见图片格式

后綴使用规范:

1:jpg格式,压缩率较高,适用于色彩信息丰富的图片切图,如照片;

2:png格式,无损格式,用于颜色较为单一的图片切图,如单色图标、三种以内颜色的图片;

注意事项:

设计需要以@2x为基础设计,要求精确到像素,图标一律使用钢笔或矢量工具等进行设计;

图层不得出现重复俞名,内容相同的除外。

3:APP端设计尺寸不得低于640*1136,能方便的适配720P、1080P、iPhone5-7Plus.

手机端分辨率统计分析

4:WEB端设计尺寸不低于1024*768,同时需要设定最大尺寸(建议宽度不超过1440,避免在大显示器上因为宽度适配造成的阅读困难)。

电脑分辨率统计分析


3:PS尺寸标注插件Specking

SpecKing官网:http://www.wuwacorp.com/specking/

尺寸标注有相当多的软件可以使用,本节主要介绍Specking。

Specking是款Photoshop插件,可以非常方便的在PS内对尺寸进行标注。标注方式包括宽度高度标注,距离标注,颜色标注和字体标注,还可以为设计稿打标签。自动生成的标注会被整合在一个图层文件夹,你可以根据需要方便的对图层进行显示和隐藏。

帮助文件:http://www.wuwacorp.com/specking/help/

插件可以很程度上提高工作效率,目前这款插件独立授权的售价是19$。


4:PS—键切图插件Layercraft

这款插件可以很方便的把切图导出符合iOS和Android规范的格式,并能自动缩放尺寸,在UI设计时,务必使用矢量设计,配合插件即可做到无损的以格式输出。

官网地址:http://lab.rayps.com/lc/

设计时需要基于1倍大小设计(目前来说一倍大小可以设置为@2x的尺寸),插件提供缩放200%和50%来满足高低分辩率的需求。同时还提供透明像素自动裁剪的功能,以减小图片尺寸。新版还提供出路径的选择。插件完全免费,请配合插件管理器Adobe Extension Manager使用。

下载地址:http://7kts35.com5.z0.glb.clouddn.com/LayerCraft.zxp


5:PS导出SVG脚本PStoSvg

随看技术的发展,iOS、Android、Web基本上都支持矢量格式的切图了。使用矢量格式的好处就是在不同的尺寸和分辮率下都能有一个优秀的视觉展现,

目前比较通用的矢量格式就是svg,以很方便的转换成pdf、字体等。iOS客户端目前可以使用pdf格式的图标,WEB支持svg和字体图标,Android支持字体图标(5.0以上版本支持)

所以在PS中使用矢量绘图和导出svg变得很重要。PS没有自带的导出svg的功能,好在有插件和脚本。下面简单介绍下PS导出SVG格式的脚本:PStoSvg。

http://hackingui.com/design/export-photoshop-layer-to-svg/

安装方法,下载后拖拽到Adobe Photoshop/presets/scripts文件夹下。

使用方法很简单,参考之前的命名方法,将图层者文件夹俞名为svg,保存psd文件,然后点击文件>脚本>Save as SVG即。

导出的文件会被命名为.svg.ai,这是因为没有开启A|造成的,打开Adobe Illustrator后,再次执行脚本,就能看到svg格式的文件了。

缺点:不支持文件夹内的svg导出,不能自行选择导出,需要配合AI使用。


另一款SVG插件Zeick-Photoshop SVG export 4.0,需要付费19.99$,更好用一些,自行了解:

http://zeick.com/

特点:Vectorshapelayers、GroupOfshapes、Multiplelayersexport、ShapeColor、ShapeGradient(beta)、ShapeStroke(beta)、Coloroverlay(beta)、Gradientoverlay


6:图片压缩技术及工具tinypng

下載APP安装包访问网站时,除了网络环境,影响加载速率和用户体验的最关键因素就是文件大小了。减小文件大小的方法有很多,大都是采用有损压(jpg和gif)的方式,压后图片会变得模糊不清,为了解决这些问题,需要使用png的无损格式出图,出图后使用TinyPNG的图片压技术进行压缩。

目前提供压缩图片压缩技术的平台挺多,TinyPNG是目前压缩速度和压率最好的。经过测试试,一张1.1MB(1072KB)的png格式图片,在腾讯智图可以压到1019KB,而TinyPNG可以压到369KB,压率为66%。

在以往的常规使用中,APP使用的图标类切图,压缩率接近90%。比如APP所有切图为10MB,压缩后能达到1MB以内。减少了9MB的大小,从而减小APP的尺寸,加快用户下载速度,同时降低服务器流量支出。

官网:https://tinypng.com/

常规使用流程只需要打开网站(https://tinypng.com/)把要压的图片上传,等待压缩完成后下载即可。

重度使用者,建议购买Photoshop插件($50),安装后可以直接通过文件>导出>TinyPNG and TinyJPG。结合photoshop的动作和批处理功能,对所有图片进行批量压缩和优化,

插件同时支持jpg和png格式的压缩,同时可以对图片的尺寸比例进行放。提供100%、50%、33.33%和25%四个常用固定比例。


7:其他辅助设计工具介绍

此部分工具只做简短介绍,详细文档请参考官方使用说明。

Size Marks:https://github.com/romashamin/Size-Marks-PS

SizeMarks,免费插件。选中选区,按下快捷键(自行设置)即快速标注尺寸。插件会根据宽高自动选择长边进行标注。比如你画了个25*30px的矩形,那么它就以30px来标注,如果是正方形,默认为垂直标注。


CutterMan: http://www.cutterman.cn/

CutterMan:收费的国产软件。操作方式类似Specking。CutterMan同时提供屏幕实时预览、尺寸标注、切图等软件,部分收费。


软件类:

马克鳗:http://www.getmarkman.com/

马克曼:是一款基于AdobeAiR平台的一款方便高效的标注工貝,极大节省设计师在设计稿上添加和修改标注的时间,让设计更有爱。支持以种图片格式、设计稿自动刷新、定制标记样式、支持Retina@2x图。60RMB每年。


http://cdc.tencent.com/?p=3268

Dorado:腾讯CDC出品的尺寸标注软件。无需安装,更加绿色。


7.2:其他图片压缩工具

此部分不做详细介绍,感兴趣的请自行了解。推荐使用Tinypng作为主力压缩工貝。

腾讯智图:http://zhitu.isux.us/


ImageOptim:https://imageoptim.com/


源文档不知道扔哪儿了,只剩下pdf版,重新截屏的图片有点模糊,最后再单独贴上高清pdf下载吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容