贵阳网站建设兼职:如何使用AdobeIlluStrator创建现代音乐播放器UI-极简慕枫

贵阳网站建设兼职:如何使用AdobeIlluStrator创建现代音乐播放器UI

2019-01-14

贵阳网站建设兼职

最近市场上涌现了很多UI套件。有些包括完整的用户界面元素集,有些则只关注一个元素。这些工具包通常作为一个基础和模板的网页设计师在创造精彩的网页。

因为有了这些工具,网页设计师现在不用担心没有创意了。您可以从这些UI工具包中获得灵感,并可能对它们进行改进。希望本教程能给我们带来更多的灵感。

这就是我们将要设计的:

24

您将需要的资源:

  • AdobeIlluStrator软件
  • 拉托字体
  • 这个图标包
  • 一些时间和耐心。(不足30分钟)

无限下载:500,000字体、Web模板、主题和设计资产

19
5

设置图板

首先,您需要打开AdobeIlluStrator。然后,创建一个新文档。对于本教程,我们将使用名为“音乐播放器UI”的文件(或者您可以选择任何您想要的)。

确保您使用的配置文件是为Web贵阳网站建设兼职设置的,因为您将设计一个基于Web的界面。您还需要指出要使用的图板数量。

对于这个特殊的教程,我只使用了一个图板。接下来,输入1280x1280作为大小。设计中的大比例尺,即使你缩小了它,它也会以高质量出现。

7

迷你播放器

1.现在,你有一个空白的正方形图板。您现在可以继续创建迷你播放器。

2.为此,请选择圆角矩形工具,双击图板中的任意区域,然后用244 px圆角矩形绘制598 px。以8 px为半径。给它涂上颜色#EFEF。

27

36

3.现在,创建位于播放器顶部的轨道滑块。为此,请在灰色圆角矩形上绘制矩形工具。涂上#D 35353的颜色。

6

4.接下来,选择这两个形状。您可以按CTRL A,也可以在按CTRL移位时单击形状。

21

5.当您选择了形状,使用形状生成器工具(Shift M)完全适合粉红矩形在灰色的。

33

6.您可以通过单击要删除贵阳网站建设兼职的形状段来完成此操作。单击它之后,您会注意到,您单击的形状的一部分现在变成了一个独立的形状。现在可以删除它了。

7.重复步骤4至6以创建跟踪指示器。你贵阳网站建设兼职的工作现在应该是这样的:

33

8.接下来,将标题放在当前播放的轨道上。还包括在下一首曲目播放之前的剩余时间贵阳网站建设兼职。使用Lato常规字体,20pt,#7C7C7C。

17

9.然后,转到体积指示器。首先单击圆角矩形工具,然后创建一个422 pxx14px形状。使用颜色#CCCC并添加一个15 px半径。

15

10.之后,通过在上一个矩形上绘制一个矩形来创建卷指示符。给它涂上#d 84848的颜色。选择圆角矩形的路径及其上方的矩形,并使用“形状生成器”工具来裁剪矩形的多余部分。

43

11.现在,使用椭圆工具(L)画一个圆圈,并给它着色#d 74948。添加位于图标文件夹中的卷图标,并将其放在卷滑块的末端。

45

为播放器创建控件

12.首先,您需要为控件创建一个占位符。您可以通过在播放机的主背景上绘制一个矩形工具并将其着色#d85656来做到这一点。

1

13.切割矩形的多余部分,并使它看起来更圆使用形状生成器工具。

35

14.接下来,添加这些元素。

47

大玩家(有播放列表)

15.从复制迷你播放器的所有路径开始。

53

16.这样做之后,将主背景扩展大约460 px(您可以扩展到任何您想要的大小)。

音乐播放器Ui

17.接下来,扩展控件占位符,让它超越小型播放器的背景。也可以使用“形状生成器”移除多余的部分。这样做是为了使占位符看起来像角的,而不是原来的圆形。

4

18.接下来,添加播放列表标题。

57

19.使用矩形网格工具,绘制一个由六个水平剖分和零个垂直分配器组成的网格。

54

20.扩大网格并将其安装到玩家中。把它的不透明度提高到20%左右。使用剪刀工具(C)拆下顶部的水平线。

贵阳网站建设兼职:如何使用AdobeIlluStrator创建现代音乐播放器UI

21.要使用该工具,只需单击要删除的路径的部分,双击并按DELETE或Backspace。

22.现在网格已经准备好了,放置元素和标题。

23.若要将组件盖住,请设计一个滚动条。使用圆角矩形工具(#cccccc表示圆角矩形,#262626表示位置指示符)和Shape Builder工具,我们可以轻松地创建它。

24.现在您已经准备好了UI,请保存它。你可以把它保存为AI,PSD,JPG,PDF,甚至SVG。

UI工具包可以帮助您提高您的销售,特别是如果您是一个没有经验的设计师。这就是为什么,你应该继续发展你的工艺,变得更有创意。现在,这些额外的UI工具包应该可以让您开始工作。好好享受吧!

联系电话 400-6065-301

微信咨询 寒总监