020-29815005
预约专线时间:09:00-23:59

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

新闻来源:优漫动游 日期:2022-04-15
这是去年为新员工写的一篇教程,由于公司内部设计师使用的操作系统不一致,为保证设计出图的一致性,加速开发推进。同时把自己的高效率传承下去,高效率来自于两个方面,“全方位的思考与取舍”+“熟练的使用工具”。涉及到的内容包含设计基础及常用软件工具,共分两部分…
  这是去年为新员工写的一篇教程,由于公司内部设计师使用的操作系统不一致,为保证设计出图的一致性,加速开发推进。同时把自己的高效率传承下去,高效率来自于两个方面,“全方位的思考与取舍”+“熟练的使用工具”。涉及到的内容包含设计基础及常用软件工具,共分两部分,第一部分为PC上的设计,第二部分为Mac上的设计。PC上的设计工具,Mac上也可以用,不过既然有Mac,那就用更高效率的软件吧。


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


 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

  以上就是优漫教育小编为大家介绍的“UI设计培训】:如何高效用PhotoShop高效的做UI设计?”相关内容,学习ui设计培训,可以参考优漫教育提供的ui学习路线,该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等,根据优漫提供的ui学习路线图,可以让你对学好ui需要掌握的知识有个清晰的了解!