这是去年为新员工写的教程。由于公司内部设计师使用的操作系统不一致，为了保证设计图纸的一致性，加快了发展。同时，高效率来自“全方位思考与选择”+“熟练使用工具”两个方面，传承自己的高效率。涉及的内容包括设计基础和常用软件工具，分为两部分，第一部分是PC设计，第二部分是Mac设计。Mac上也可以使用PC上的设计工具，但既然有Mac，就使用更高效的软件。
1：基于实时预览的设计
由于手机和个人电脑屏幕显示效果略有差异，为了确保设计草案在实际使用环境中，可以有优秀的视觉显示，在设计中需要基于目标平台，实时预览设计，设计需要以目标平台为准，目标是个人电脑网页，使用个人电脑预览设计草案，目标是移动应用界面，需要用手机实时预览设计稿，直接通过屏幕预览为WEB设计的界面。但由于色域的差异，设计稿在还原成HTML网页时仍会产生偏差。然而，由于色域的不同，设计草案在恢复到Html网页时仍然会产生偏差。此时，有必要灵活调整设计草案。建议设计师了解基本的DIV和CSS，以便于调整网络设计的稠度。
为手机设计的界面在预览时不是很方便。通过辅助工贝，可以轻松实现设计稿的实时预览。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*136，可方便适应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
以上是优漫教育小编为您介绍的“如何高效地设计PhotoShop？“相关内容，学习UI设计培训，可参考优曼教育提供的UI学习路线，包括PS软件介绍、人工智能和品牌设计、视觉表达技术、网络视觉设计、图标设计、产品交互、移动终端设计等。根据优曼提供的UI学习路线图，您可以清楚地了解学习UI需要掌握的知识！
湘公网安备43019002002199
