最美UI

Photoshop绘制复古娱乐图标

1.设置新文档

在我们开始创建实际图标之前,让我们花几秒钟时间来设置我们的项目。

首先,请转至文件>新建或使用Control-N键盘快捷键创建一个新文档,我们将使用以下设置进行调整:

快速提示:通过将文档的配置文件设置为网页可以触发大多数指示的设置; 唯一不会自动设置的是尺寸,您必须手动选择。

2.设置图层

在创建文档后,我们将通过为每个图标创建一组单独的图层来准备我们的项目。如果你想知道为什么,那么让我们说,如果你在每个资产层上都有多个资产,那么使用多个资产就容易多了,这会使你的工作流更直接,因为你将在时间。

假设您知道如何使用“ 图层”面板,请将其展开并创建四个图层,我们将重新命名为:

卡西欧手表

宝丽来相机

索尼walkman

我们将要使用这些图层的方式非常简单。首先,我们通过点击眼睛图标旁边的小空框,确保除了我们当前正在处理的图层之外的所有图层都被锁定。

一旦我们这样做了,我们就可以一次专注于一个图标,并且在其上工作而不会意外地编辑或重新定位其他两个图标。

只要我们创建了图标,我们就会锁定它的图层,然后继续下一个图层。

3.设置自定义网格

由于PS允许我们利用其网格,因此我们将其设置为尽可能最低的值,并且在不处于Pixel Preview模式时使用“ 对齐网格”选项,以确保所有形状完美地贴合到像素网格

我们感兴趣的设置可以在编辑>首选项>指南和网格首选项子菜单下找到, 并且应该按照以下方式进行调整:

网格线:1 px

细分:1

4.调整键盘增量

你可以调整的另一件事是键盘增量 它可以证明是非常方便的,特别是如果你习惯用键盘的方向键移动你的物体。该选项可以在编辑>首选项>常规>键盘增量首选项子菜单下找到,并且应该设置为可能的最小值,在本例中为1 px

5.设置参考网格

参考网格(基地电网)是一组精确的界定参考面,这让我们专注于规模性和一致性,以建立我们的图标。

通常,网格的大小决定了图标的大小,并且它们应该始终是您开始处理项目时首先做出的决定,因为您始终希望从尽可能最小的尺寸开始并基于该尺寸进行构建。

现在,在我们的例子中,我们实际上只会使用一个尺寸创建图标,更确切地说,是96 x 96像素,这是一个相当大的尺寸。

因此,假设您已锁定除参考网格之外的所有其他图层,请抓住矩形工具(M)并绘制一个96 x 96像素的正方形并将其放置在您的画板中心。使用较暗的灰色(#CCCCCC)对该形状着色,然后在其上添加另一个92 x 92像素的正方形(#E6E6E6),这将作为我们的主要绘图区域,从而给我们四周的四个像素填充。

由于我们将创建三个图标,请将两个方块(Control-G)分组,并在两侧创建两个副本(Control-C> Control-V),并将它们放置在距中心点60 px的 距离处。

一旦完成了所有的参考网格,就可以锁定图层,以便不会意外移动它们,然后我们可以开始修改第一个图标。

6.创建卡西欧手表

这花了一段时间,但我们终于开始行动了,比创造标志性的卡西欧smartch更好。对不起,我的意思是手表,是的“看”。还是我?

步骤1

将自己置于第一个参考网格上,然后放大,以便更好地了解您将要执行的操作。

然后,使用矩形工具(M)创建一个54 x 68像素形状(#7F7974)并将其放置在 网格的中心。

快速提示:因为我们的目标,让图标清脆地,确保每个创建的形状对齐到像素网格使用变换面板对齐到像素网格选项,下隐藏的选项中。

如果您不知道,可以通过单击窗口向下的小箭头并启用“ 显示选项”来使这些选项可见。

第2步

通过添加八个新的定位点来调整手表的基本形状,正好与主要的4个点相比。要做到这一点,你应该先切换到  像素预览模式(Alt-Control-Y),然后选择形状,以便更好地查看其主要锚点。

然后,使用添加锚点工具(在钢笔工具下找到),在形成该形状的角点(角点)的每一侧添加一个新的锚点。

第3步

当您最终完成添加新的锚点时,您需要切换到删除锚点工具并删除使其形状为矩形形状的点。

一旦你摆脱了角点,你的新形状应该看起来像这样。

步骤4

选择调整后的形状,然后通过应用偏移路径给它一个很好的粗略轮廓。

如果您不知道偏移量是什么,那么它是通过将像素添加到所选对象的宽度和 高度而创建的原始形状的较大副本,从而将其表面推向外部。

首先,我们必须选择形状,然后我们需要去对象>路径>偏移路径。应出现一个新窗口,让我们可以选择设置偏移量(副本)的大小。由于我们不想过度使用厚度,因此我们会为其指定一个很好的4 px值,这将很容易看到。

快速提示:您可以随时预览结果,我始终建议您这样做,因为您可以使用设置进行游戏,而无需应用,然后还原它们直到找到合适的设置,这会浪费宝贵的时间。

第5步

只要点击确定,Illustrator 将创建偏移量,该偏移量将位于原始形状的下方。现在,由于副本与原始副本具有相同的颜色,因此我们必须将其更改为较暗的(#544F4B),以使其脱颖而出。

快速提示:从这一点开始,当我们创建轮廓时,我不会仔细研究“做到这一点 - 然后”这一部分,因为这个过程并不困难,但是如果碰巧卡住了,通过给他们另一个阅读步骤。

第6步

由于我们现在有了手表的基本形状,所以我们可以开始研究小细节,我们将通过创建小显示屏来实现。

首先,抓住圆角矩形,并创建一个50×28像素的形状,其圆角半径6像素。由于这将作为屏幕的主要轮廓,请使用#544F4B它的颜色,然后将其定位到手表主要形状的顶部,从顶部和侧面留下2 px的间隙 。

第7步

通过创建一个具有2 px圆角半径38 x 16像素形状(我们将使用该颜色)将屏幕截面添加到显示中。然后将新形状放置在我们刚刚创建的轮廓上,确保将其更靠近底部,以便它与轮廓本身之间有一个很好的 4 px间隙。#C6CECA

第8步

接下来,通过创建我们刚刚创建的屏幕的副本(Control-C> Control-F),然后向其应用2 px的负偏移量,添加全方位环状阴影。然后选择副本和偏移量,然后使用PathfinderMinus Front形状模式创建圆环。

快速提示:正如你所看到的,偏移路径 是一个非常灵活的工具,因为它允许你创建更大的副本(使用正值增量),还有更小的副本(使用负值),我们刚刚用它来创建屏幕的影子。

第9步

一旦你创建了阴影,我们需要相应地着色它,因为此时它保持与屏幕本身相同的颜色值。因此,请选择环状,然后使用较暗的颜色(#544F4B)确定颜色,确保将其不透明度降低 至约30%

第10步

既然我们现在有我们的影子,让我们花点时间创造一点点亮点。

首先,将填充颜色设置为white(#FFFFFF),然后抓住钢笔工具(P)并将自己放置在内部阴影旁边,然后按住Shift键开始绘制对角线矩形,以便获得  您的45 度 角线。

创建两个形状,一个大一个4像素一个,另一个小一个2像素,将它们相互  放置4 px,然后通过将它们的混合模式设置为柔光并将其不透明度降低到40%来 调整它们。

最后将两个组合(Control-G),然后将它们对齐到显示屏的中心。

第11步

此时,您可能会想知道为什么我们在构成HUD的实际元素之前添加了高光。那么,原因很简单:因为我只是不想看到突出显示的黑线。称之为疯狂或任何其他,但我不知道,对我来说,它看起来不正确。是的,我知道一个重点通常会覆盖整个设计,但我仍然认为它看起来不太好。

继续......所以我们现在有我们的屏幕,它的影子和亮点,我们如何开始添加诸如金漆和HUD本身的小细节?

首先,选择矩形工具(M),将其设置#CCB376为填充颜色,然后绘制一个8 x 2像素形状,然后再绘制另一个2 x 2像素,将它们  相互放置为2 px,然后将它们放置到顶部屏幕上方的显示屏。然后添加另一个1 x 6像素的一个,并将其放在右侧。

第12步

现在女士们和男士们,我会给你们一些创造性的自由,强迫你们,对不起“让”你们玩HUD的元素。把你的时间,创意,并告诉我你想要什么样的屏幕。完成后,不要忘记选择所有屏幕的元素并将它们组合在一起(Control-G),以免意外移动它们。

同时,我将享用一些新鲜咖啡。

步骤13

完成了?戴恩,好吧,让我们回到正轨,以及如何更好地做到这一点,而不是创造出手表的下半部分。

首先绘制一个42 x 26像素的形状(#68625E),使用2 px的圆角半径,使用偏移路径给它一个漂亮的4像素轮廓(#544F4B),然后定位两者,使它们之间有2 px的间隙,屏幕主要轮廓。

第14步

在我们开始添加实际的按钮之前,我们必须首先向numpad区域添加一点内部阴影。

首先,选择几步前创建的内部形状,复制它(Control-C> Control-F),然后创建-2 px的偏移量。

一旦Illustrator 添加了偏移量,请选择它和重复项,并使用PathfinderMinus Front来获取环形形状。将其颜色更改为较暗(#544F4B),然后确保将其不透明度降低到 40%

第15步

随着添加的影子,我们现在可以开始创建小按钮。

首先,选择圆角矩形工具并创建一个2 x 角半径8 x 4像素形状。使用该按钮进行着色#544F4B,然后创建三个副本,我们将在相互距离为2 px的位置右移它们。

然后,将所有四个按钮组合在一起,并在其下面再创建三个行,保持相同的2 px间隔。

最后将它们全部选中,并将它们组合在一起(Control-G),这样它们就不会意外飞来飞去。

步骤16

创建按钮副本,将其不透明度等级更改为40%,然后将它们放置在下方,确保将它们朝底部推动1 px以使其可见。

步骤17

由于在这一点上我们已经完成了手表的主要部分,我们所需要做的只是为它的身体添加几个垂直高光。

为了达到这个目的,抓住矩形工具(M)并创建一个更小的1 x 68 px矩形,以及另一个稍微更厚的2 x 68 px矩形,我们将从另一个位置  放置1 px。然后,将它们的颜色更改为白色(#FFFFFF),并将它们的混合模式设置为柔光,同时将其不透明度降低到40%

最后,将两个组合(Control-G),并将它们放在手表的主要填充形状(从中心向右数个像素)上,确保所有其他元素与它们重叠。

步骤18

屏幕检查。检查按钮。侧面部分...没有这样检查。

随着手表主体的建成,我们现在应该开始工作。

首先,抓住圆角矩形工具并创建一个角度半径4像素68 x 56像素形状。使用该颜色的形状,给它一个4 px轮廓(),然后将它们放在下面(右键点击>排列>发送到后面),确保将它们对齐到我们手表的中心。#77706B#544F4B

步骤19

使用侧面部分,在手表的每一侧添加4个4 x 8像素的圆角矩形(#544F4B),并使用px圆角半径(彼此相对位置为  4 px)。这些小部分将作为小插入,这将使图标感觉更加细致。

快速提示:您可以将形状切成两半,以便将它们放置在侧面部分的轮廓旁边,或者您可以将它们重叠,因为您将获得相同的结果。

步骤20

为侧面部分添加微妙的阴影,使其更加深入。使用#544F4B的填充颜色,和往常一样,不要忘记将降低不透明度40% 。哦,并确保小插入超过阴影本身。

快速提示:开始对手表的不同部分进行分组是一个不错的主意,这样如果您想要编辑手表,您可以做到这一点,而不必担心已经错误地删除/移动了某些东西。记住Control-G是你最可信赖的朋友。

步骤21

现在我们有了我们的侧面部分,如何在右侧添加一个小按钮。

首先,创建一个4 x 4像素的圆角矩形,并带有1 px的圆角半径。使用金色(#CCB376)对形状进行着色,给它一个很好的厚度为4 px的轮廓(#544F4B)和一个微妙的高光,然后将其组合(Control-G)并将按钮定位到手表的右侧,将其水平对齐到第三次插入。

正如你所看到的,只显示了一小段按钮,所以你需要将它发送到后面(右键点击>排列>发送到后面)并将它向左移动几个像素。

步骤22

在这一点上,我们几乎完成了小小的手表图标,并且为了完成构图,我们需要添加的部分是顶部和底部表带部分。

首先创建一个46 x 8像素矩形(#68625E),我们将在手表本身下面放置一个矩形(),在新形状和主参考网格之间留下4 px的间隙。

步骤23

通过使用直接选择工具(A)选择其顶部定位点,然后使用键盘的方向箭头键将它们向内按4个按钮(一次一个),调整新形状。

步骤24

给出生成的形状轮廓(#544F4B)和几个高光,然后分组(Control-G)并创建一个副本,您将水平反射(右键单击>变换>反射>水平),然后放置到底部看。

步骤25

通过使用Control-G 键盘快捷键选择和分组手表的所有组成部分,结束图标。

由于我们现在已经完成了我们美丽的卡西欧手表,我们可以锁定其图层,然后转到下一个图标,即小宝丽来相机。

7.创建宝丽来相机

步骤1

首先将自己置于第二个参考网格上,然后使用矩形工具(M)创建一个具有2 px圆角半径84 x 18像素形状。使用上色对形状进行着色,然后使用直接选择工具(A)选择它们并调整其左上角和右角,然后转到“ 变形”面板并将其值从2 px更改为 0 px以使其变为锐利。#68625E

快速提示:确保链接角半径值未被选中,否则您将无法单独调整它们。

第2步

给这个形状一个4px的轮廓(#544F4B),然后将它们放到网格的底部。

第3步

通过创建一个带有4 px轮廓()的58 x 2 px矩形(#5C5753),开始在图片出口插槽上工作,您将对齐形成相机底部托盘的较大部分的中心。#544F4B

步骤4

向槽的轮廓顶部 添加稍宽的74 x 4 px矩形,使用相同的#544F4B 值进行着色。

第5步

选择图片托盘的主要轮廓,并通过应用2 px偏移量给它一个微妙的阴影,确保将生成的形状的不透明度降低40%

第6步

通过添加几个亮点(颜色:#FFFFFF; 混合模式柔光 ; 不透明度40%),在顶部放大一个,以及稍微向右放置两个较薄的垂直部分,结束这部分图标。

由于我们已经完成了托盘的大部分工作,您可以选择所有元素并将它们组合在一起(Control-G),以免意外移动它们。

第7步

接下来,我们将开始研究相机的主体,内含镜头,一些按钮和其他东西。

我们将通过绘制三个不同的矩形创建这部分的构图,然后我们将在这里和那里进行调整。

首先,创建一个  84 x 6像素矩形并将其放置在托盘轮廓的正上方。然后,再添加一个84 x 14像素,并将其叠放在上面。最后添加一个76 x 40像素的圆角矩形和4像素圆角半径

使用所有三种形状的颜色#CECABA,然后准备做一些小的调整。

第8步

选择第二个矩形,然后使用直接选择工具(A)和键盘的方向箭头键,将其顶部锚点向内移动4 px

一旦你有了调整后的形状,创建一个它的副本(Control-C),因为我们会在一段时间内需要它。

第9步

一旦完成中间部分的调整,选择最上面的部分,然后使用“ 变换”面板将其底角“ 角半径”设置0像素以获得平滑的方形边。

第10步

选择所有三种形状,并使用Pathfinder的 Unite形状模式将它们组合成一个更大的形状。

第11步

使用偏移路径为新形状提供通常的4像素轮廓(#544F4B)。

第12步

粘贴中间形状的副本,我告诉你保存几步之前,并使用较暗的阴影(#C1BCAA)进行着色,以使图标具有一定的深度。

步骤13

使用矩形工具(M) 创建一个80 x 4像素的形状,使用#544F4B它的颜色,然后将其放置在较暗的一块的顶部。然后,创建一个稍宽的88 x 4 px one(#544F4B)并将其放置在底部。

第14步

开始添加一些高光和阴影以使事情更有趣。

使用白色(#FFFFFF用于高光),确保了设置混合模式强光这段时间(因为使用柔光可能使他们看起来太淘汰),并降低不透明度40% 

对于阴影,使用#544F4B目前常规的40%不透明度水平。

第15步

在开始研究镜头和其他元素之前,我们必须通过添加两条平行线来完成相机的主线,这两条平行线位于上半身的轮廓之后。

要做到这一点,只需选择钢笔工具(P),设置笔画颜色以#544F4B使填充空白,将笔画重量调整为2 px,然后只需单击并画出从顶部轮廓中心开始的一条线并一直运行到底部。

在它与侧轮廓之间 留出1px的间隙,然后创建一个副本(Control-C> Control-F),垂直反射(右键单击>变换>反射>垂直)并将其放在另一侧。

步骤16

我们现在可以开始在相机机身上部添加细节,并且我们将通过创建镜头来实现。

选择椭圆工具(L)并创建一个小的4 x 4像素圆,我们将使用该颜色#544F4B,并将其置于相机的身体顶部,将其对准其中心(1)。

一旦你把所有的部分组合在一起(Control-G),这样他们就不会意外重新定位。

步骤17

使用镜头后,我们可以开始处理左侧的细节,通过添加小模型文本行和红色按钮。

首先,抓住矩形工具(M)并创建一个更高的8 x 4像素形状,并在其下方(2像素距离处)创建一个更宽的12 x 2像素,为它们着色,并将它们放在相机的旁边左边的平行线,确保它们和线之间留有2 px的间隙,而另一个10px则朝向相机的顶部。#544F4B

步骤18

使用文本行,抓住椭圆工具(L)并创建一个6 x 6像素的圆圈,我们将以红色(#D66969)着色。给它一个4 px轮廓(#544F4B)一个内部环形阴影,然后将所有三种形状分组(Control-G),将它们放置在文本行的下方,大约4 px,确保将按钮对齐到它们的左侧。

步骤19

一旦我们完成了左侧的细节,我们可以移到正确的位置并开始在相机的取景器上工作。

如同透镜,通过创建一个开始的2×2像素的正方形(#544F4B)(1)这是我们将应用一个偏置2像素。使用#68625E(2)对产生的形状进行着色,然后给出一个4 px轮廓(#544F4B)(3),只有这一次,请确保通过使用变形面板角半径值字段使其所有拐角变圆来调整所产生的偏移量使用2 px)(4)。 

然后,添加一个4×4像素的玻璃件(颜色:#FFFFFF; 混合模式柔光 ; 不透明度20% )在元件的其余部分,它对准中心(5),和在它的另一半尺寸高亮( 6)。

与往常一样,不要忘记使用Control-G 快捷方式选择并将所有元素分组在一起。一旦这样做,只需将取景器放在相机上,朝右上角,留下全方位2 px的间隙。

步骤20

接下来,使用钢笔工具(P),绘制一个向下的箭头(4 px宽,2 px高),并将其置于取景器的正下方,两者之间留出1 px的间隙。

然后通过绘制一个4 x 4像素圆圈(#544F4B)(1)来创建小拨号,您将在其中添加1像素偏移(#68625E)(2)。一旦你有更大的圆圈,选择它,然后给它一个2像素偏移量,它将作为轮廓(#544F4B)(3)。创建第二个圆的副本(Control-C> Control-F),通过移除其底部锚点将其切成两半,然后将其着色为white(#FFFFFF)并将其混合模式设置为柔光并将其变为高亮其不透明度达到20%(4)。

将所有刻度盘的元素组合在一起(Control-G),然后将其对准取景器的左侧,确保在其与小箭头指示器之间留有间隙。

步骤21

由于我们已经完成了所有机械/移动部件,现在我们可以添加从镜头下方流出的小彩虹,方法是创建六个2 x 28 px矩形,我们将堆叠在一起,然后放置在相机的大部分细节(高光,阴影,轮廓)下。

当着色形状时,请使用以下值:

粉: #C983AB

红: #D66969

橙子: #CC9169

黄色: #CCB376

绿色: #8EAF7E

蓝色: #7F99B2

步骤22

使用带有2 px圆角半径()的34 x 6像素圆角矩形添加小顶部中心部分,结束图标。#544F4B

然后确保选择所有相机的元素并将它们组合在一起(Control-G),以便稍后在需要时轻松操作。

8.创建索尼随身听

现在我们来看我们的第三个也是最后一个图标,它是标志性的随身听,索尼用它来改变我们听音乐的方式。所以,没有任何进一步的延迟,让我们进入它。

步骤1

首先确保您位于正确的图层上,锁定所有其他图层,然后将自己置于第三个参照网格上。

使用矩形工具(M)绘制一个38 x 60像素形状(#7F99B2),然后给它一个4像素轮廓(#544F4B),确保将两个对象放置在主栅格的底部。

第2步

接下来,让我们通过添加一些分隔线和部分,将这个盒子外观变成类似卡式磁带播放器的东西。

首先,绘制一个6 x 60 px的矩形(#E0DBDA),并将其定位在蓝色形状的右侧。然后在它旁边再添加一个略窄的4 x 60 px one(#544F4B),它将作为分隔符。

第3步

使用我们现在钟爱的矩形工具(M),创建一个28 x 4像素分隔符(#544F4B),并将其对准可见蓝色部分的中心,  从顶部6像素

步骤4

通过创建一个10 x 26像素矩形(#68625E),开始在盒式磁带的小窗口上工作,我们将应用一个4像素的偏移量  作为轮廓(#544F4B)。正如我们对取景器所做的那样,我们将使用2 px圆角半径来围绕轮廓的边角。

一旦完成形状调整,将其放置在较大的蓝色部分上,并将两者对准中心。

第5步

接下来,通过创建较浅的灰色矩形的副本并应用一个-2 px偏移量来添加一个小内圈高光,然后用它来创建一个切口。将生成的形状颜色更改为白色(#FFFFFF),然后将其混合模式设置为柔光,确保将不透明度降低 到40%

第6步

花几分钟时间,创建两个磁带,对角线高光和一个2像素的全方位影子。使用我们在前面的步骤中使用的技巧和工具,一旦完成,继续下一步。

快速提示 记住,即使这是一个教程,你的主要目标应该是强迫自己学习新的技能和技巧,不仅通过观察和回溯某些步骤,而且通过自己的实验,因为通过这样做,将开发你自己独特的工作流程。

第7步

开始添加一些高光和阴影,根据不同的区域使用不同的不透明度等级。对于亮点,在所有蓝色表面上使用60,在灰色表面上使用40%

谈到阴影时,请使用更低调的30%

第8步

开始变得富有创意,并使用圆形,圆角矩形和常规矩形添加一些细节,以使设备看起来更有趣。使用在所有轮廓(#544F4B)中找到的相同颜色值,并尝试改变这些线条的粗细。

第9步

一旦完成添加小细节,让我们稍微向“框”外侧移动,然后开始使用它的小按钮。

首先,抓住矩形工具(M)并创建一个6 x 2像素形状(#BC8D69),我们将添加一个更细的2像素轮廓(#544F4B),一个2 x 1像素的高光,以及一个底部6 x 1像素的 阴影。将所有按钮的元素组合在一起(Control-G)并将其放置在播放器的顶部,从左侧留下8 px的间隙。

第10步

接下来,移动到右侧,然后创建一个较高的1 x 10 px矩形,然后是两个较小的1 x 4 px矩形,我们将使用该颜色#B2AFAF。给所有三个形状一个2 px轮廓(#544F4B),一个顶部高光(1 x 2 px)和一个底部阴影(1 x 2 px),然后将它们相互  放置1 px

当你有三个按钮时,将它们分组(Control-G),然后将它们放在播放器的下方(右键点击>排列>发送到后面),从Walkman主要轮廓的顶部留下8 px的间隙。

第11步

这次移到左侧,让我们添加两个允许磁带托架门旋转的小铰链。

选择圆角矩形工具并创建两个具有1 px圆角半径的4 x 8像素形状,使用它们进行着色,然后将两个  26像素相互对齐。#544F4B

将分组的铰链置于播放器主轮廓的下方,以便只能看到它们的左半部分,然后将垂直中心对齐到较大的蓝色部分。

第12步

通过创建连接两个声音驱动程序的小带开始在耳机上工作。

首先,抓住圆角矩形工具,将笔触颜色设置#544F4B 为其重量并将其权重设置2 px,然后绘制一个带有42像素圆角半径84 x 107像素形状,我们将对齐参考栅格的顶部。

然后,使用直接选择工具(A),通过按Delete键选择并移除其底部锚点。通过转到对象>展开>填充和描边来展开结果形状。

步骤13

抓住矩形工具(M)并创建一个4 x 10像素形状(#77706B),给它一个2 px的轮廓(#544F4B),然后将它们都放在头带的左侧,与它的距离为6 px底端点。

第14步

由于关节需要看起来更加细致,我们将不得不添加一个4 x 2 px定界符线(#544F4B)并将其定位到顶部,从而在它和关节的较大轮廓(2)之间留下2 px的间隙。然后在顶部添加一个4 x 1 px突出显示,并在分隔符下添加另一个突出显示。 

使用1 x 1像素的正方形创建垂直高光的顶部,另一个用于底部的1 x 4像素。在关节的填充形状(3)的底部添加一个4 x 1 px的阴影,最后创建一个小的4 x 4 px圆(#544F4B),我们将把它定位到关节的中心,确保将其发送到下方,所以只有右半部分可见(4)。

第15步

通过创建一个2 x 20 px的矩形(#544F4B),开始在左耳机的下部工作,我们将位于关节主轮廓的右侧。

步骤16

随着小扩展到位,我们现在可以添加容纳磁体的耳机的较小部分。

首先,创建一个2 x 4像素的矩形(#7F7974),给它一个2像素的轮廓(#544F4B),一个高光和一些阴影,然后组合(Control-G)并通过将它们对齐到左下角的扩展名。

步骤17

通过绘制一个6 x 16像素的圆角矩形和一个像素圆角半径(我们将使用该颜色)#68625E,然后指定一个2像素轮廓(#544F4B),来创建实际的耳机。

接下来,添加常规高光和阴影,几个小1×1像素正方形给它一些纹理,你就完成了。使用Control-G将这些元素分组在一起,然后转到最后一步。

步骤18

使用Control-G键盘快捷键将左侧耳机的所有元素分组在一起,然后创建一个它的副本(Control-C> Control-F),我们将反映它(右键单击>变换>反射>垂直)和位置直到头带的右侧。

非常棒!我们完成了!

原文链接: http://mp.weixin.qq.com/s/uaSvb6aFzzZCK2WI5cKSig

微信公众号微信公众号:zuimeiui

扫一扫 关注公众号

0

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
APP图标:精选APP图标,看看各大app图标的设计风格提升设计感! → 猛戳这里
最美UI(zuimeiui.com)每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧!
【原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!】

上一篇
Photoshop绘制DJ主题图标
下一篇
PS制作冰冻雪景立体APP图标