用ps设计app过程中改进ios设计流程的30个密诀是什么(用ps设计app过程中改进ios设计流程的30个密诀有哪些)

本文主要介绍用ps设计app时改善ios设计流程的30个秘诀是什么(用ps设计app时改善ios设计流程的30个秘诀是什)？，下面跟着东辰网详细了解一下吧。

本文中我(英文原作)总结了自己在photoshop中设计ios软件时遵循的方法。许多技术适用于一般的UI设计。注意:本文提到的快捷键是针对Windows的；Mac用户可以，Cmd对应Crtl键，Opt对应Alt键。

1.保持大小均匀。

你先设计了视网膜屏幕，然后降低了标准分辨率对吧？为了在标准分辨率下保持像素的完美呈现，您需要确保大小和距离均匀。具体是:基于2ps的网格设计。在编辑ampgt；偏)〉gt；参考线、Cuides、网格切片。更改网格线和细分线，使网格线为2px。例如，将网格线间隔设置为64px，将子网格设置为32。

2.混合模式仅使用正常模式

当直接在其他元素上方设置图层效果时，混合模式仅使用法线(例如，混合选项中的投影和外部光)。在Photoshop中使用其他混合模式可能看起来不错，但保存为PNG格式后也可能会有不好的效果。

3.改变渐变颜色更方便

想改变渐变按钮的色相(hu)而不每次都改变渐变的起始颜色值？这里有两种方法，两种方法都能达到完全一样的效果。

方法1:在渐变图层混合选项中使用颜色叠加。

创建一个渐变层。起始颜色设置为浅灰色和深灰色，以后可以调整。

为按钮创建矢量蒙版。

复制矢量蒙版并粘贴到梯度层(选择矢量蒙版ampgt；CTRLLCampgt；选择渐变层ampgt；CTRL)。

设置图层ampgt；矢量蒙版和。gt；电流通路

设置渐变层混合选项ampgt；颜色叠加改变混合模式为彩色。

现在你可以在这里改变颜色来改变渐变。

方法2:在纯层上使用渐变叠加。

用你想要的颜色创建一个纯色层。

与方法1相同。

与方法1相同。

与方法1相同。

纯色模板混合选项ampgt；渐变叠加，设置混合模式为明度。

现在只需改变纯色模板的颜色来改变渐变即可。

翻译和翻译注意:上面用的是矢量蒙版。其实用剪贴蒙版也能达到相应的效果。个人觉得比较简单。

4.多使用径向渐变。

在导航条上叠加一个径向渐变图层，让导航条更有趣。

方法1:径向渐变工具

在导航栏层上面新建一层。

复制导航栏层的矢量蒙版。版本到新创建的层(按住CtrlAlt并按下鼠标左键拖动矢量蒙版到新)。

选择径向渐变工具(设置渐变为在中心白色端完全透)。

在图层中从中心到边缘绘制渐变。

改变图层混合模式为叠加，设置不透明度为25%。

方法2:倒角和浮雕

你也可以在图层混合选项中使用斜面和浮雕。可以如下图所示进行设置。调整设置以获得所需的效果。通常情况下，调整越细微，效果越好。

5.多使用阴影变形。

在Photoshop中，阴影(任何其他图层效)可以从其对应的图层中分离出来。这允许你独立操作阴影。

选择图层ampgt；图层样式ampgt；创建层(翻译s注意:你必须在图层上使用混合选项中的效果才能使用这个命令，这个步骤的目的是将效果从图层中分离出)。

将图层转换为智能对象(选中混合选项中的透明形状图层。右键单击层和。gt；选择“转换为智能对)，以便以后可以编辑效果。

CtrlT选择变形。

单击并拖动手柄来更改形状。控制柄不形成网格，但您可以使用网格作为参考来重复拖动其他控制柄。

轻轻地向上移动图层，直到它看起来像下面的图片。

6.It使用内部发光更容易添加精细纹理。

通过内部照明快速添加纹理，如下所示。

7.隐藏路径

Photoshopcs6中比较烦人的一点是，当你选择一个形状图层时，形状的路径会显示出来，在你操作图层时，比如更改图层混合选项时，它会一直存在。您可以使用CtrlH隐藏所有辅助工具(路径、网格线和参考)。当然，您可以按Ctrl+Shift+H只隐藏路径。

8.使用对齐像素的网格来完善形状像素。

这是cs6中最好的改进之一。按Ctrl+K打开开始个选择面板，并选择“对齐矢量工具”和“转换为像素网格”。在cs5中，只有形状(没有变)与像素网格对齐。检查首选项的底部项目。gt；大致如下图所示。

在cs5中只有形状是对齐的

9.使用电子表格计算缩略图的大小。

想创建一个iPad应用程序来显示大量缩略图？使用电子表格计算缩略图的大小和之间的大小。电子表格计算并显示实时改变尺寸后对其他元素的影响，以及它们是否适合屏幕。下载(iPadGridCalculato)我用的是创建iPadapp时创建的MicrosoftExcel表格(文件包含4个表格，66、55、44和3。)。

10.自动导出资源文件

如果你必须创建一个图片资源，选择文件ampgt；剧本ampgt；将图层导出到文件。

11.复制图层时，避免在图层名称后添加后缀，避免图层效果的扩大。

恼火的是，每复制一层，就加一个复制图层名称后？同时讨厌的是每次复制粘贴图层效果，图层效果都会扩大？您可以在图层面板选项中关闭它们。

12.以15度为步长旋转。

自由旋转时，可以按住Shift，以15的倍数旋转。

13.保存样式

将多次使用的样式保存到样式面板，避免每次复制粘贴的麻烦。

14.在两个打开的文件之间移动图层。

按下垂直选择移动工具ampgt；选择你想移动的层。gt；在当前文件(不是图层面)中单击鼠标左键，然后不要不要松开它。gt；将光标拖到目标文件的名称标签上。gt；文件切换后将光标拖到文件上，然后松开鼠标。

15.将全局灯光设置为90。

当光源处于90时，高光、阴影和其他层看起来最好。若要避免重复设置，请选中“在混合选项中使用全局灯光”(斜面和浮雕、内部发光和阴)。或者选择层ampgt；图层样式ampgt；使用全局灯光。

16.当你创建一个层，你命名它。

在向开发人员发送设计文档之前命名层是一件令人头疼的事情。因此，建议在创建图层时养成命名图层的习惯。

17.使用自定义快捷键

注意哪些工具和任务是你最常用的，并为它们创建快捷键。例如，如果您发现在将文件发送给开发人员进行处理时需要重命名大量图层，我使用功能键F2作为快捷键。

18.使用径向渐变

使用径向渐变有时看起来有点单调。尝试使用径向渐变作为背景，也可以用内部光线来强调。

19.争取无损编辑。

非破坏性的工作流程是通过使用智能对象和调整图层来实现的。当你发现需要反复编辑同一个东西的时候，会帮你减少很多痛苦。

20.在对文件进行重大更改之前，请先备份文件。

当您发现保存了不需要的更改，或者在撤消更改之前意外关闭了文件时，备份文件将大大减轻您的痛苦。

21.使用快捷键给形状层和文本着色。

您可能知道如何使用Alt/CtrlD——投影和内部阴影大小。

还记得关于保证大小和图层效果都是偶数像素的招数1吗？你可能正在安排一切。偶数之后，我还在想为什么按钮的高度还是奇数。罪魁祸首是Photoshop的怪异，投影加大了尺寸。将投影的大小值设置为1px或2px，投影会产生相同的大小，如下图所示。

23.使用智能参考线实现更完美的对齐。

让Photoshop智能对齐您的元素。在视图中打开ampgt；展示ampgt；智能指南。一旦你使用了智能参考线，你将永远不会离开它。

24.使用图层合成在同一文件中显示不同的显示屏。

你是否在PSD中创建应用程序的所有屏幕，然后打开和关闭该层以查看它？这时，图层构图可以帮助解决这个问题。检查窗户ampgt；图层复合打开图层复合面板。创建新的应用程序屏幕时，可以通过单击面板底部的“创建新的复合图层”按钮来创建新的复合图层。这个图层面板包含了所有图层的可见性和位置。现在你可以改变它的可见性和位置在同一层作为下一个屏幕，并保存为另一个层组成。

通过使用相同的工具创建不同的屏幕，文件的数量和大小被保持在最小。此外，您和开发人员只需单击层组合名称前面的框，或者单击面板底部的向前/向后箭头，即可在层组合中循环显示不同的屏幕。

25.在设备上预览您的设计。

你的设计在桌面设备上看起来很好，但当你把它放在真实的设备上时，它可能会泄漏问题，所以请确保经常在显示器上预览你的设计。对于Mac，有LiveView和ScalaPreview这样的工具，对于Windows，有WiFileSync和PhotoshopDisplay。我用的是免费的Polkast，可以让你在IOS设备上通过wifi预览桌面设备上的文件。

26.保持图标设计的一致性。

在图标的选择上，要保证其大小和风格一致。你可以了解为什么一致性很重要。

27.向客户发送全尺寸预览。

客户希望经常查看他们设备上的设计。因此，考虑给他们一个全尺寸的PNG设计组合。

28.避免过度像素的完美线框。

唐不要浪费时间在线框软件上创建一个漂亮的线框。我发现，一旦客户明白这将节省时间，他们更倾向于审查草图，而不是漂亮的线框。向客户解释为什么减少线框将节省项目的总时间，一旦他们同意的话发给他们素描的照片。同时，唐不要忘记让草图尽可能的易读。

29.先设计视网膜屏，然后缩小到标准尺寸。

是从1倍扩大到2倍，还是从2倍缩小到1倍，仍然存在争议。1x大小的手机将在未来几年内被淘汰，未来将只剩下视网膜屏幕。所以最好从视网膜屏开始设计，可以早早在设计中加入针对视网膜屏的特殊细节。

30.创建一个图标库

每当你为工具栏或标签栏创建一个矢量图标时，保存一个单独的PSD文件，这样你就不会下次使用这些图标时，你不必四处张望，这是我ikonic项目的基础。

31.使用批量重命名软件。

使用批量重命名软件添加或删除@2x文件。我使用免费的批量重命名工具。

本文中我(英文原作)总结了自己在photoshop中设计ios软件时遵循的方法。许多技术适用于一般的UI设计。注意:本文提到的快捷键是针对Windows的；Mac用户可以，Cmd对应Crtl键，Opt对应Alt键。

1.保持大小均匀。

你先设计了视网膜屏幕，然后降低了标准分辨率对吧？为了在标准分辨率下保持像素的完美呈现，您需要确保大小和距离均匀。具体是:基于2ps的网格设计。在编辑ampgt；偏)〉gt；参考线、Cuides、网格切片。更改网格线和细分线，使网格线为2px。例如，将网格线间隔设置为64px，将子网格设置为32。

2.混合模式仅使用正常模式

当直接在其他元素上方设置图层效果时，混合模式仅使用法线(例如，混合选项中的投影和外部光)。在Photoshop中使用其他混合模式可能看起来不错，但保存为PNG格式后也可能会有不好的效果。

3.改变渐变颜色更方便

想改变渐变按钮的色相(hu)而不每次都改变渐变的起始颜色值？这里有两种方法，两种方法都能达到完全一样的效果。

方法1:在渐变图层混合选项中使用颜色叠加。

创建一个渐变层。起始颜色设置为浅灰色和深灰色，以后可以调整。

为按钮创建矢量蒙版。

复制矢量蒙版并粘贴到梯度层(选择矢量蒙版ampgt；CTRLLCampgt；选择渐变层ampgt；CTRL)。

设置设置图层ampgt；矢量蒙版和。gt；电流通路

设置渐变层混合选项ampgt；颜色叠加改变混合模式为彩色。

现在你可以在这里改变颜色来改变渐变。

方法2:在纯层上使用渐变叠加。

用你想要的颜色创建一个纯色层。

与方法1相同。

与方法1相同。

与方法1相同。

纯色模板混合选项ampgt；渐变叠加，设置混合模式为明度。

现在只需改变纯色模板的颜色来改变渐变即可。

翻译和翻译注意:上面用的是矢量蒙版。其实用剪贴蒙版也能达到相应的效果。个人觉得比较简单。

4.多使用径向渐变。

在导航条上叠加一个径向渐变图层，让导航条更有趣。

方法1:径向渐变工具

在导航栏层上面新建一层。

将导航栏图层的矢量蒙版复制到新创建的图层(按住CtrlAlt并按下鼠标左键将矢量蒙版拖动到新图)。

选择径向渐变工具(设置渐变为在中心白色端完全透)。

在图层中从中心到边缘绘制渐变。

改变图层混合模式为叠加，设置不透明度为25%。

方法2:倒角和浮雕

你也可以在图层混合选项中使用斜面和浮雕。可以如下图所示进行设置。调整设置以获得所需的效果。通常情况下，调整越细微，效果越好。

5.多使用阴影变形。

在Photoshop中，阴影(任何其他图层效)可以从其对应的图层中分离出来。这允许你独立操作阴影。

选择图层ampgt；图层样式ampgt；创建层(翻译s注意:必须在图层上使用混合选项中的效果才能使用此命令，此步骤的目的是将效果从图层中分离出)。

将图层转换为智能对象(选中混合选项中的透明形状图层。右键单击层和。gt；选择“转换为智能对)，以便以后可以编辑效果。

CtrlT选择变形。

单击并拖动手柄来更改形状。控制柄不形成网格，但您可以使用网格作为参考来重复拖动其他控制柄。

轻轻地向上移动图层，直到它看起来像下面的图片。

6.It使用内部发光更容易添加精细纹理。

通过内部照明快速添加纹理，如下所示。

7.隐藏路径

Photoshopcs6中比较烦人的一点是，当你选择一个形状图层时，形状的路径会显示出来，在你操作图层时，比如更改图层混合选项时，它会一直存在。您可以使用CtrlH隐藏所有辅助工具(路径、网格线和参考)。当然，您可以按Ctrl+Shift+H只隐藏路径。

8.使用对齐像素的网格来完善形状像素。

这是cs6中最好的改进之一。按Ctrl+K打开首选项面板，选择矢量工具和变换和像素网格。检查它(捕捉矢量工具和转换到像素网)。在cs5中，只有形状(没有变)与像素网格对齐。检查首选项的底部项目。gt；大致如下图所示。

在cs5中只有形状是对齐的

9.使用电子表格计算缩略图的大小。

想创建一个iPad应用程序来显示大量缩略图？使用电子表格计算缩略图的大小和之间的大小。电子表格计算并显示实时改变尺寸后对其他元素的影响，以及它们是否适合屏幕。下载(iPadGridCalculato)我用的是创建iPadapp时创建的MicrosoftExcel表格(文件包含4个表格，66、55、44和3)。

10.自动导出资源文件

如果你必须创建一个图片资源，选择文件ampgt；剧本ampgt；将图层导出到文件。

11.复制图层时，避免在图层名称后添加后缀，避免图层效果的扩大。

恼火的是，每复制一层，就加一个复制图层名称后？同时讨厌的是每次复制粘贴图层效果，图层效果都会扩大？您可以在图层面板选项中关闭它们。

12.以15度为步长旋转。

自由旋转时，可以按住Shift，以15的倍数旋转。

13.保存样式

将多次使用的样式保存到样式面板，避免每次复制粘贴的麻烦。

14.在两个打开的文件之间移动图层。

按下垂直选择移动工具ampgt；选择你想移动的层。gt；在当前文件(不是图层面)中单击鼠标左键，然后不要不要松开它。gt；将光标拖到目标文件的名称标签上。gt；文件切换后将光标拖到文件上，然后松开鼠标。

15.将全局灯光设置为90。

当光源处于90时，高光、阴影和其他层看起来最好。若要避免重复设置，请选中“在混合选项中使用全局灯光”(斜面和浮雕、内部发光和阴)。或者选择层ampgt；图层样式ampgt；使用全局灯光。

16.当你创建一个层，你命名它。

在向开发人员发送设计文档之前命名层是一件令人头疼的事情。因此，建议在创建图层时养成命名图层的习惯。

17.使用自定义快捷键

注意哪些工具和任务是你最常用的，并为它们创建快捷键。例如，如果您发现在将文件发送给开发人员进行处理时需要重命名大量图层，我使用功能键F2作为快捷键。

18.使用径向渐变

使用径向渐变有时看起来有点单调。尝试使用径向渐变作为背景，也可以用内部光线来强调。

19.争取无损编辑。

通过制造使用智能对象和调整图层来实现非破坏性的工作流程。当你发现需要反复编辑同一个东西的时候，会帮你减少很多痛苦。

20.在对文件进行重大更改之前，请先备份文件。

当您发现保存了不需要的更改，或者在撤消更改之前意外关闭了文件时，备份文件将大大减轻您的痛苦。

21.使用快捷键给形状层和文本着色。

您可能知道如何使用Alt/CtrlD——投影和内部阴影大小。

还记得关于保证大小和图层效果都是偶数像素的招数1吗？你可能还在疑惑，为什么设置完所有偶数后，按钮的高度还是奇数？罪魁祸首是Photoshop的怪异，投影加大了尺寸。将投影的大小值设置为1px或2px，投影会产生相同的大小，如下图所示。

23.使用智能参考线实现更完美的对齐。

让Photoshop智能对齐您的元素。在视图中打开ampgt；展示ampgt；智能指南。一旦你使用了智能参考线，你将永远不会离开它。

24.使用图层合成在同一文件中显示不同的显示屏。

你是否在PSD中创建应用程序的所有屏幕，然后打开和关闭该层以查看它？这时，图层构图可以帮助解决这个问题。检查窗户ampgt；图层复合打开图层复合面板。创建新的应用程序屏幕时，可以通过单击面板底部的“创建新的复合图层”按钮来创建新的复合图层。这个图层面板包含了所有图层的可见性和位置。现在你可以改变它的可见性和位置在同一层作为下一个屏幕，并保存为另一个层组成。

通过使用相同的工具创建不同的屏幕，文件的数量和大小被保持在最小。此外，您和开发人员只需单击层组合名称前面的框，或者单击面板底部的向前/向后箭头，即可在层组合中循环显示不同的屏幕。

25.在设备上预览您的设计。

你的设计在桌面设备上看起来很好，但当你把它放在真实的设备上时，它可能会泄漏问题，所以请确保经常在显示器上预览你的设计。对于Mac，有LiveView和ScalaPreview这样的工具，对于Windows，有WiFileSync和Photo。商店陈列.我用的是免费的Polkast，可以让你通过IOS设备上的wifi预览桌面设备上的文件。

26.保持图标设计的一致性。

在图标的选择上，要保证其大小和风格一致。你可以了解为什么一致性很重要。

27.向客户发送全尺寸预览。

客户希望经常查看他们设备上的设计。因此，考虑给他们一个全尺寸的PNG设计组合。

28.避免过度像素的完美线框。

唐不要浪费时间在线框软件上创建一个漂亮的线框。我发现，一旦客户明白这将节省时间，他们更倾向于审查草图，而不是漂亮的线框。向客户解释为什么减少线框会节省项目的整体时间，一旦他们同意，就发给他们草图的照片。同时，唐不要忘记让草图尽可能的易读。

29.先设计视网膜屏，然后缩小到标准尺寸。

是从1倍扩大到2倍，还是从2倍缩小到1倍，仍然存在争议。1x大小的手机将在未来几年内被淘汰，未来将只剩下视网膜屏幕。所以最好从视网膜屏开始设计，可以早早在设计中加入针对视网膜屏的特殊细节。

30.创建一个图标库

每当你为工具栏或标签栏创建一个矢量图标时，保存一个单独的PSD文件，这样你就不会下次使用这些图标时，你不必四处张望，这是我ikonic项目的基础。

31.使用批量重命名软件。

使用批量重命名软件添加或删除@2x文件。我使用免费的批量重命名工具。

了解更多用ps设计app时改善ios设计流程的30个秘诀是什么(用ps设计app时改善ios设计流程的30个秘诀是什)？相关内容请关注东辰网。