今天的翻译干货满满，包含了很多实践经验，比如每个尺寸保持元素边界清晰的技巧，切片的专业方法，以及命名规则等，绝对值得每一位UI设计师收藏！从低分辨率开始，对于非Retina显示器，我通常从1x文档大小开始。iPad的app分辨率是1024×768，而Android是mdpi或者dp（density-independentpixels），这是适合常规设备的尺寸。如果它是Mac应用程序，它通常从1280×768开始（13英寸MacBookPro的横向分辨率和11英寸MacBookAir的纵向分辨率的奇怪组合，以确保该应用程序适合最小的Mac显示器）。iPhone应用程序使用320×568或上图中的任何分辨率。以这种方式开始的原因有很多，比如为什么要从框架图开始梳理概念，在1x环境下搭建可以帮助view和elementsize的设置。换句话说，界面中的每个元素都将完全适合1x尺寸的像素网格，这是一种技术操作，但仍然是一个好的开始-这意味着您的设计适合iOS和OSX的网格。工作的另一个优势在1x环境下是不需要一直考虑所有元素必须保持偶数（0、2、4、6、8等），大大减少了Photoshop的内存占用，运算速度是快点。虽然我有一台RetinaMacBookPro，但它不会很快改变我的工作方式。这种方法有很多好处，即使2x和3x在您的设计中更重要，我仍然建议以这种方式开始。同时关注1×、2×和3×。但是，我并不是建议每个人都在非Retina大小的显示设备上工作。毕竟现在和未来的趋势都是高分辨率显示，相信未来的重点会更加青睐高分辨率。建议大家根据自己的需要在多个尺寸之间进行切换（原作者做了一个PS动作，让文件尺寸的切换更加方便，有兴趣的童鞋可以点这里下载文件包）。但是在修改布局时，我通常以1x进行，因为它确实有助于提高效率。如果文档设置正确，则可以在尺寸之间切换而不会降低质量。比如在2x编辑按钮样式，回到1x继续调整布局，再去3x设置图层样式……一个文档解决所有问题。下面介绍一些小方法，让元素在各种尺寸下都保持清晰的边框。渐变边框效果可以尝试将边框效果设置为渐变色，这样做的好处是会自动填充很多细节。正如您在上图中看到的，在Retina尺寸下，它是一个锐利的渐变，边框稍微亮一些，而在非Retina尺寸下，它是一个单一的像素描边。渐变非常有用，尤其是因为它们不仅可以用于色块填充，还可以用于笔触和图层样式笔触。图层样式和轮廓如果您正在寻找更优化的图层样式，您可以尝试轮廓设置。外发光效果非常适合轮廓线条，在1x中使线条成为单个像素，在2x中使线条更柔和2个像素，在3x中使线条更优化3个像素。0.5pt笔划和带小数点的0.5pt笔划在2x中显示为单个像素，在1x中显示为具有更柔和边框的单个像素。矢量描边可以是非整数（图层样式描边不能设置为非整数））也用于3x显示——0.33pt的描边会自动调整为1像素。半像素微调打开Photoshop的对齐像素功能以帮助创建锐利的图形。如果您想恰好移动半个像素，请关闭像素捕捉，将视图缩放到200%，然后按键盘上的箭头键微调半个像素。该方法可以在非Retina设备上模拟Retina设备上的效果。微调单位因视图的比例而异。通过此方法创建的笔划是单个像素，在2x维度中具有100%的透明度，在1x维度中具有50%的透明度。羽毛面具羽毛面具是软化形状层的好方法。羽毛蒙版可以完成图层样式中的大部分效果，只是它更精确，因为形状图层及其羽毛蒙版都可以设置为非整数。不过它也有缺点——羽化遮罩不能随文档大小自动调整比例，这也是为什么DavidJensen写了一系列调整羽化遮罩大小的脚本（原代码发布在GitHub上，PS作者在上一篇文章中提供的动作包文件收录在）。如果使用上面提供的PS动作来切换1x和2x的大小，羽毛蒙版的大小也会自动调整（当然需要在安装David脚本的前提下运行）。如果您创建的文档需要自由变换，那么位图图层和位图蒙版绝对是一场噩梦。大多数面具，包括那些具有柔滑边缘的面具，都可以使用形状图层、组和羽毛面具来完成。在这里，我强烈推荐Photoshop的矢量蒙版功能，它可以完成大部分你能想到的图形，虽然制作过程可能会慢一些。#p#Materials我以两种方式处理材料。当需要根据文档的不同尺寸对大纹理图像进行相应调整时，最好的处理方式是将图像尺寸设置为2x尺寸，然后将图层转换为智能对象。这样做将使材质以2倍大小以1000像素呈现，并按比例缩小为1倍大小的位图。对于噪音等微妙元素，***两种尺寸均保持100%。此时，SmartObjects就不适合了，因为它会使图像根据文档的大小放大或缩小。对于这种效果，我使用图案图层或图层图案样式来实现它。与智能对象一样，图案特征仍然存在随文档大小缩放的问题。例如，如果一个大小为100%的花样在2x中设置，则在1x中它将变为50%。这会使高清噪声纹理变得模糊。这里又不得不提到DavidJensen，他写的另一个脚本“PatternScale100%”解决了这个问题。该脚本也包含在上述动作包文件中，动作运行时会自动应用。把需要按比例调整大小的元素做成智能对象，把需要保持固定大小的素材做成图案，这样文档就可以自动化了。这些设置非常重要，尤其是当您经常需要在1x和2x之间切换时。实时预览如果是iOS或Android应用程序，我使用免费软件SkalaPreview来测试整个过程。如果您的渲染包含iPhone或iPad窗口（设备框架图像），请用两根手指点击以居中并在预览中隐藏设备框架。请注意，这是基于带有设备轮廓的Photoshop文档。切片输出你可能认为我的工作方式有点疯狂。这些年来，我所有的项目都有两套Photoshop文件——一套是模型图，一套是切片输出的元素文件。这样做有很多好处。我确保模型文档中的所有元素都被正确命名，并且应用程序的不同状态接口被组织成组。我构建每个元素时都考虑了对各种情况的适用性，但我偶尔也会使用位图图层。有时位图图层甚至可以更有效地快速试验不同的布局。我只是为每种尺寸的相同方向创建一个Photoshop文档。一个iPhone应用的纵向比例文档会包含多个界面状态，以不同的组来区分。复合图层我用的不多，太脆弱了（当然PhotoshopCC2014还是解决了很多复合图层的问题）。使用组意味着多个副本，即使如此，我仍然发现这是所有方法中最有用的。如果你需要一个元素在不同的组中同步，你可以试试图层标签。这个功能很有意思，但我用的不多。我的输出文档保持平面格式，每个元素单独设置为一个切片。这种方法清楚地显示了每个输出切片的边界和文件名。平面格式意味着文件的透明度很明显，您可以轻松选择所需的矢量节点，而不必担心选择到另一层。我们可以通过窗口中的快速查看来预览PSD元素文件，即使没有安装Photoshop的电脑也可以享受这个功能。这太棒了~如果你正在寻找一个很久以前的项目中的元素，只需几秒钟就可以使用快速查看找到文件，使用Photoshop打开它，并看到元素输出的名称，对齐它编辑，并重新导出。每个切片文档只包含应用程序中使用的一个元素，因此文件小而速度快。切片看似设置起来很麻烦，其实不然，只要上手，就很容易。当然，上述动作文件包中也包含切片动作。ShowMaximumSize操作是从选取框的选定区域创建一个其最小尺寸的位图图层，这对于剪掉多余区域非常有用。逐层切片操作使用所选层创建切片。我通常只选择我刚刚使用Reveal***Dimensions操作创建的图层。实际上我并不总是将文件保存到最小大小。我发现手动控制这个过程很重要，因为我经常想在元素周围留出一些额外的像素空间，以便将来可能进行修改，例如增加元素的大小等。内存有很大影响）。SlicingbySelection也可以在Actions包中使用，这是制作切片的快捷方式。不知道为什么，就是觉得选区工具比直接用切片工具好。切片也可以只保留在文档中而不输出，例如，如果一个元素已被弃用但您还不想删除它。设置好切片后，SaveforWeb将输出所有切片。只导出一组图片是不够的，我们需要1×、2×和3×文件，2x和3x文件要加上@2x和@3x后缀。这里需要淡褐色。Hazel：移动和重命名文件Hazel是一种自动文件组织工具。它可以批量重命名指定文件夹中的文件并将它们移动到其他文件夹。创建图块文件后，我运行一个结合了以下所有脚本和步骤的操作：-将所有图块以Web格式保存在“导出”文件夹中。-将文档放大到200%。-使用脚本将羽毛蒙版放大到200%。-使用脚本将图案比例调整为100%。-以网络使用的格式保存所有切片，并将它们保存在“Auto@2x”文件夹中。这个组合动作完成后，所有1x元素文件都存放在Export文件夹中，所有2x文件都放在Auto@2x文件夹中。Hazel将自动查找Auto@2x文件夹并将@2x附加到该文件夹??中所有文件的名称，然后将它们移动到Export文件夹中。@3x文件也是如此。下面是整个动作的运行过程。因为是录屏，所以有一定的滞后。然而，即使全速运行，这两个脚本也需要一段时间才能完成。Android、Windows和Elements的子文件夹Matt和我的工作流程非常相似，可能也是因为我们经常讨论这个问题。他之前在设计一个Android应用，需要用到这个流程——Android对不同大小的元素使用不同的子文件夹（drawable-hdpi、drawable-xhdpi等），而不是后缀。要将所有图像以用于保存web的格式放入单独的文件夹中，我们需要为Android子文件夹找到一个自动化过程。我们最终决定将井号放在切片名称中——将井号放在文件夹名和文件名之间，这样Hazel就可以在输出后组织切片。Windows8也用子文件夹来区分不同大小的元素文件，所以也可以用词。Hazel规则文件也可以在操作文件包中找到。
