ps做ui界面设计教程：创建iPhone音乐播放器应用程序界面-

哈喽大家好，今天分享的是ps做ui界面设计教程：创建iPhone音乐播放器应用程序界面。今天的过程稍长一点，大家仔细阅读。下面就是ps做ui界面设计教程：创建iPhone音乐播放器应用程序界面的具体步骤。一起来看看。

在原始的iPhone分辨率和视网膜分辨率下创建iPhone音乐播放器应用程序界面，而无需对两种设计重复相同的过程。让我们开始吧！

步骤1

创建新文件。将宽度设置为320像素，高度设置为480像素。

步骤2

在这一步中，我们将创建背景。在Photoshop CS6中有一种新的更简单的创建矢量形状的方法，我们将在整个教程中使用这种方法。

创建一个新组，并将其命名为“背景”选择矩形工具(R)，并在选项栏中将工具模式设置为形状，然后单击其旁边的按钮选择形状填充类型。从填充类型列表中选择渐变按钮。将所有值设置为与下图中突出显示的值相同。使用#3F4042和#303133颜色作为渐变。

单击画布上的任意位置。当“创建矩形”窗口弹出时，只需单击“确定”，并确保尺寸设置为700x700px像素。将新创建的图层命名为“背景”

按Cmd/Ctrl + A键选择整个画布，选择移动工具(V)，然后在选项栏中单击对齐水平中心和对齐底部边缘按钮。

双击图层“背景”上的图层缩略图，并确保选中“抖动”复选框。这样你就可以得到一个没有条纹的平滑渐变。

步骤3

在Photoshop中打开状态栏psd，并将状态栏组导入到您的工作PSD中。使用上面提到的方法来对齐组“状态栏”-按下Cmd/Ctrl + A来选择整个画布，并在使用移动工具(V)时，单击对齐水平中心和对齐顶部边缘按钮。

步骤4

在“状态栏”组下创建一个新组，并将其命名为“导航栏”选择圆角矩形工具(U)，并设置如下图所示的属性。使用#5F8F1D和#99B83D作为渐变。单击画布上的任意位置，并在弹出创建圆角矩形窗口时单击确定。将新创建的图层命名为“导航Bg”。

将图层水平对齐中心，垂直对齐状态栏下方，如下所示。

选择矩形工具(U)并画一个类似于下图的矩形，但是要确保这个形状只覆盖图层“导航”的底部我对形状填充类型使用了无颜色选项。

使用路径选择工具(A)选择新创建的形状。按下Cmd/Ctrl + C将形状复制到剪贴板。现在选择图层面板中的图层“导航”并点击鼠标左键，现在形状被粘贴到图层“导航”上

在路径选择工具(A)仍然打开的情况下，单击选项栏中的路径操作按钮，然后选择减去前形状。

现在再次单击路径操作按钮，然后选择合并形状组件。

使用直接选择工具(A)选择两个底部点并移动它们，直到形状的高度为43px。

将以下图层样式应用于图层“导航Bg”:

步骤5

使用圆角矩形工具(U)绘制一个具有如下所示属性的形状。对形状填充类型使用纯色。将新创建的图层命名为“设置”

应用以下图层样式:

移动“设置Bg”，使其垂直对齐“导航Bg”的中心，并从画布的右边缘水平对齐6px。

打开图标，将图层“设置”移动到你的psd。将图标水平和垂直对齐“设置”的中心

应用以下图层样式:

步骤6

使用圆角矩形工具(U)绘制一个具有如下所示属性的形状。对形状填充类型使用纯色。将新创建的图层命名为“背景”

使用添加锚点工具在矩形的左侧添加一个锚点，并在顶部边缘下方添加14px。

使用转换点工具单击同一锚点。

现在选择直接选择工具(A)，并将点向左移动10px。

在直接选择工具(A)仍然打开的情况下，选择下图中突出显示的两个锚点，并将它们向左移动1px。然后选择转换点工具并单击两个锚点中的每一个。

将形状垂直对齐“Nav Bg”的中心，从画布的左边缘水平对齐6px。

步骤7

现在我们已经完成了形状的绘制，我们可以为它添加样式了。右键单击图层“设置”并选择复制图层样式，然后右键单击图层“背景”并选择粘贴图层样式。

使用下图中的参数向按钮添加文本。我用了字体Helvetica纽。将文本与形状的中心对齐，并从图层“设置”中复制图层样式

使用下图中的参数添加标题文本，并将其与导航栏的中心对齐。

步骤8

在“导航栏”组下创建一个新组，并将其命名为“位置”选择矩形工具(U)并设置如下图所示的属性，然后点击画布上的某个地方。梯度使用#2E2F30和#494A4C。将层命名为“位置Bg”

将形状放在导航栏下面，但确保它们之间有一个像素的间隙。将形状水平对齐画布的中心。

将以下图层样式应用于形状:

步骤9

选择圆角矩形工具(U)并设置如下图所示的属性，然后单击画布上的某处。将半径设置为更高的值。我用了50px。

将图层命名为“空位置”，并将其水平和垂直对齐图层的中心“位置”

应用以下图层样式:

选择圆角矩形工具(U)并设置如下图所示的属性，然后单击画布上的某处。梯度使用#85AD2A、#A0D028和#B6D028。再次，将半径设置为更高的值。将该层命名为“位置满”

如下图所示对齐形状，但确保在形状和图层“空位置”之间的所有边上都有两个像素的间隙

将以下图层样式应用于形状:

步骤10

选择椭圆工具(U)并设置如下图所示的属性，然后单击画布上的某处。梯度使用#444547和#5C5E61。将该层命名为“句柄”

对齐此形状，使其覆盖层的右边缘“位置完整”

应用以下图层样式:

再次选择椭圆工具(U)并设置如下图所示的属性，然后点击画布上的某个地方。梯度使用#636669和#38393B。将该层命名为“手柄圆”

将形状与层“手柄”的中心对齐

添加时间文本。用Helvetica·诺伊，大胆。尺寸为10pt，颜色#B2B2B2。如下图所示对齐文本。

步骤11

创建一个新组，并将其命名为“回放控制”使用椭圆工具(U)画一个尺寸为50x50px像素的圆。不要注意其他参数。将新图层命名为“播放背景”

展开组“位置”，右键单击层“句柄”，并从菜单中选择复制形状属性。

回到“回放控制”组，右键单击图层“播放背景”，然后从菜单中选择粘贴形状属性。这是Photoshop CS6中的一个新功能。这种方式取代了为形状填充类型设置所有属性，如渐变颜色、角度等。我们从“句柄”层复制这些属性，因为我们对新创建的层使用相同的值。

将图层水平对齐画布中心，垂直对齐“位置”下20px

应用以下图层样式:

步骤12

右键单击图层“播放背景”，然后选择复制图层。将新图层命名为“快速后退”

使用路径选择工具(A)点击图层“快速后退”并将选项栏中的尺寸更改为34x34px。

将图层垂直对准“播放背景”的中心，水平对准左侧8px。

复制“快进快退”并将新图层命名为“快进快退”将图层与前一个图层对齐，但这次是在右侧。

步骤13

使用下图中的参数创建一个新的圆形。梯度使用#46484A和#2C2D2E。确保新创建的层位于“回放控制”组中所有其他层的下方

将图层命名为“播放背景”，并将其水平和垂直对齐到“播放背景”的中心

使用我们在步骤12中使用的方法，复制“回放Bg”并将大小减少到48x48px。将图层与“快速后退”的中心对齐

现在再次复制图层，并将其对齐到“快进”的中心

从图标中导入图层“快进”、“播放”和“快进”。如下图所示对齐图标。

按住键盘上的Cmd/Ctrl键并相应地单击每一层，选择三个图标层。将不透明度设置为85%。

从图标中导入图层“扬声器”和“重复”。如下所示对齐图标。

导入的图标用纯色填充，但是我们将对它们应用渐变。使用路径选择工具(A)选择图层“扬声器”，并从下图中设置参数。使用#6B6C70和#797B80颜色作为渐变。

使用复制形状属性选项从扬声器图标复制属性，并将其粘贴到重复图标。

将以下图层样式应用于扬声器和重复图标:

步骤14

在这一步，我们将把专辑封面放在我们的设计中。导入后，我们将把它们转换成智能对象，并将智能对象的大小减少50%。我们这样做是因为在最后的教程步骤中，文件将被调整到视网膜分辨率。这样，在调整到视网膜大小后，我们不会失去光栅图像的质量。

打开albumcover-02.jpg，将图像导入到你的PSD中。

通过转到图层%3E智能对象%3E转换为智能对象，将图层转换为智能对象。按键盘上的Cmd/Ctrl + T键来变换图层。将尺寸减小到50%。将这一层命名为“专辑封面中心”

将图层水平对齐画布中心，垂直对齐图层“播放背景”下的20px

使用圆角矩形工具(U)用下面显示的参数绘制一个形状。将大小设置为180x180px。对形状填充类型使用无颜色，并将半径设置为3px。

将形状与相册封面图像完全对齐。

现在将鼠标光标从圆角矩形图层的缩略图拖动到图层“相册封面中心”的缩略图，同时按住键盘上的Cmd/Ctrl + Alt键，将形状应用到相册封面图像。完成复制后，删除带有圆角矩形的图层，因为我们不再需要它了。

步骤15

打开albumcover-01.jpg，将图像导入到你的PSD中，将其转换为智能对象，并调整大小为50%。将封面垂直对齐“相册封面中心”层的中心，水平对齐左侧40px。将图层命名为“左专辑封面”

使用圆角矩形工具(U)用下面显示的参数绘制一个形状。这次将大小设置为160x160px。对形状填充类型使用无颜色，并将半径设置为3px。

使用与中间封面相同的方法，将圆角矩形复制到图层“相册封面左侧”。完成后，删除带有圆角矩形的图层。

打开albumcover-03.jpg并将其导入到您的PSD中。重复与左盖相同的步骤，但这次将图像在右侧对齐，如下所示。

步骤16

将以下图层样式应用于中央保护层:

从中心封面复制图层样式，并粘贴到其他两个封面。现在选择左右覆盖层，并将填充设置为50%。

为播放的歌曲标题插入文本。把它放在中间盖子下面几个像素的地方。

为正在播放的歌曲作者插入另一行文本。将两条线对准中心。

步骤18

使用矩形工具(U)用下面显示的参数绘制一个形状。梯度使用#292A2B和#38393B。

将形状对齐画布的左下角。

使用添加锚点工具添加两个锚点，并设置图像上显示的距离。

选择图像上突出显示的两个锚点，并将它们向上移动6px。

使用直接选择工具(A)拖动方向线，使它们看起来与下面预览的方向线相似。

步骤19

在这一步中，我们将通过复制和镜像我们在上一步中创建的路径来完成标签栏背景。

复制图层并通过进入编辑%3E变换路径%3E水平翻转来水平翻转它。

将复制的图层精确移动到画布的右下角。一个重要的注意事项:确保两个形状之间没有间隙。

现在选择图像上显示的两个层，右键单击并选择合并形状。

这应该是最终的形状。如你所见，在形状的中间有一条垂直线。这意味着我们在一个层中有两个没有完全合并的形状。

使用路径选择工具(A)单击形状层，单击选项栏中的路径操作按钮，然后选择合并形状组件。现在，这两个形状完全合并了。将该层命名为“标签栏”

如果我们选择直接选择(A)，我们会注意到在合并形状的过程中创建了一些不必要的锚点。总是试图保持你的路径没有不需要的点。

要删除这些锚点，请选择删除锚点工具，然后分别单击两个锚点。

将以下图层样式应用到“标签栏”中:

步骤20

在这一步中，我们将创建指南，帮助我们更容易地对齐标签栏图标。

使用矩形选框工具(M)从画布的左侧开始做一个60像素宽的选择。

现在，从左侧标尺拖动一个参考线，并将其放置在所选内容的右侧。确保对齐参考线的选项已打开。您可以通过查看%3E快照到%3E指南找到它。

重复前面的步骤放置其他导轨。如下图所示设置距离。

从顶部标尺拖动两条水平参考线，并设置图像上显示的距离。

步骤21

从图标文件中拖动图层“主页”。

使用矩形选框工具(M)进行选择，使其与下面的参考线对齐。

使用移动工具(V)单击选项栏中的对齐垂直中心和对齐水平中心按钮。

用以下参数键入文本“主页”:

在底部参考线附近垂直对齐文本，并水平对齐图标的中心。

步骤22

对其他图标和文本(收藏夹、播放列表和搜索)重复步骤21。请参考下图。

步骤23

使用矩形工具(U)用下图中的参数绘制一个形状。使用#5F8F1D和#99B83D作为渐变。

对齐形状，使其顶部边缘与上部水平导轨接触，并与定位条的中心保持水平。将图层命名为“正在播放背景”

应用以下图层样式:

从图标文件中拖动图层“正在播放”，并将图层的填充颜色更改为#000000。

应用以下图层样式:

将图标水平对齐“正在播放”的中心，垂直对齐其顶部边缘以下几个像素。

使用以下参数键入文本“正在播放”:

再次将文本水平对齐按钮中心，并在图标下方垂直对齐几个像素。从“正在播放”图标复制图层样式。

步骤24

我们完成了设计所有元素的创造。但是我们还有最后一步，那就是将文件缩放到视网膜。

缩放到视网膜分辨率非常容易，只需一步。转到图像%3E图像大小，并设置如下所示的值。确保所有高亮显示的参数设置与图像上的参数完全相同。

这应该是将图像调整到视网膜分辨率后的结果。

提示:总是尝试用矢量形状在你的设计中画出元素，就像我们在本教程中所做的那样。这样，您可以轻松定制它们，并且在缩放到视网膜时不会降低质量。

我们向您展示了如何使用新的矢量编辑功能在Photoshop中创建iPhone应用程序界面。此外，我们还展示了如何使用这些技术来创建一个与原始分辨率设备及其视网膜分辨率对应设备兼容的iPhone应用程序。

今天的分享ps做ui界面设计教程：创建iPhone音乐播放器应用程序界面到这里就结束了，希望对大家有所帮助。大家操作过程中如果遇到什么问题，可以随时留言评论，看见就会回复。qq交流学习群：852470656（软件下载、教程资料、字体包、素材，都在持续更新中……）

我将不定时分享一些ps使用的小技巧，如果您想了解更多关于ps使用、平面设计、UI设计相关信息，请持续关注庞姿姿。