ui教程-写实可口可乐图标

UI / UI设计教程 / UI图标教程 /      

uimaker
UI设计师 / 江苏 南京

来源:uimaker.com   作者:Uimaker.com整理

关键词

效果图:

6630460835281354278

步骤1

在Photoshop里新建一个800*800px的画布

2831638265727236381

步骤2

创建一个垂直参考线和一个水平参考线。视图>新建参考线,选择水平和应用50%的位置。做同样的垂直参考线。

6631337146047454511

步骤3

使用一个图片供参考(虽然我没有完全按照真实的形式)。

1163617553739887229

步骤4

用钢笔工具(P),开始画只是一半的红色形状。

32369622339894200

步骤5

Alt+左键,复制,然后按ctrl + T,水平翻转。

6631385524559077560

步骤6

现在用钢笔工具合并两个图层,或者栅格化图层,ctrl+E向下合并,现在是一个整体的易拉罐圆图形。

6630253027583700345

步骤7

选择不同的颜色,重复的顶部和底部部分的步骤。确保形状层顶部和底部的红色形状图层,也就是如图的顶边和底边。(或者用圆角矩形工具和钢笔工具画出来。)

6630652150305058323

步骤8

复制红色形状图层,光标位置之间的两个红色形状图层,在两个图层之间,按住Alt +左键并单击创建剪切蒙版。如下图:

6631200806605609977

步骤9

我们来到了有趣的部分! 我们要让易拉罐看起来很逼真。选择命名为 Main shape的图层,打开混合选项面板(右键单击层>混合选项),渐变叠加,设置如下:

3111987342531206728

(#ca1112、#e7807e、#db3c36 、#d42113、#d72114 、#e88a89 、#e96c69 、#ed261c)

步骤10

用钢笔工具(P),创建一个新的黑色的形状,然后放置如下(图层放在Main shape图层之上):

1106196658490899357

步骤11

右键单击黑色形状图层,将它转换为智能对象,然后执行滤镜>模糊>高斯模糊并输入值为14。最后,使新形状层剪切蒙版,就像你在步骤8。填充更改为70%。

6631407514791632134

步骤12

用钢笔工具画出如下的图形。

6631334947024199162

步骤13

将它转换为智能对象,高斯模糊2,填充改为40%。建立剪切蒙版,设置混合模式为叠加。

6630620264467856961

步骤14

创建一个新的形状,如下图,并命名为:水平div1。

6631388823093959387

步骤15

将它转换为智能对象并设置它与在前面的步骤一样的剪切蒙版。设置混合模式为柔光,高斯模糊值为4。

6630759902444582532

步骤16

Cmd / Ctrl +易拉罐主图,出现选区,选择它的形状,然后创建一个新层,用软边画笔24px,画一条直线在同一地方。如下图:

6630828072165503752

步骤17

将该图层设置为柔光。添加一个图层蒙版,选择黑色作为前景颜色和画笔大小60 px。在图层蒙版中擦去一部分,如下图名字这一层的水平div2。

6630831370700387077

步骤18

与上面步骤相同,Ctrl+易拉罐主图,选出易拉罐的选区,创建一个新层,选择 #eeb946 作为你的前景颜色,选择一个软边画笔,大小为100 px,画直线从顶部到底部。

6631399818210237824

步骤19

设置混合模式为柔光,不透明度到70%。然后添加一个图层蒙版,选择黑色作为你的前景颜色,画笔大小更改为65 px,流量30%。开始画右边一个淡黄色,为了使它可见略低于左侧,但没有完全消除它。如下图:

6631277772419553614

步骤20

用钢笔工具画一个如下图形:

6630675240049247058

步骤21

将它转换为智能对象,高斯模糊值为15。设置混合模式为叠加。

6631298663140481346

步骤22

创建新的形状图层,黑色,并放置如下图的位置。这一层命名“中间阴影”。

6631362434814893536

步骤23

把最新的形状层智能对象,设置混合模式为柔光叠加,高斯模糊值10。按下Ctrl / Cmd + J复制图,图层的不透明度设置为40%

6630524606955762890

步骤24

创建两个新形状图层,将它们像下图。可命名为Brim1,Brim2。

6630243131979051286

步骤25

每个形状转换为智能对象,设置混合模式为柔光叠加,高斯模糊值10。

6630343187537181203

步骤26

用钢笔工具画一个如下图的形状。

6630108991560462510

步骤27

形状转换为智能对象,设置混合模式为叠加,高斯模糊值为7。

6631300862163736967

步骤28

现在让我们集中注意做的前部分红色形状。定位两层负责顶部的水平黑暗线(我们叫他们“水平div1′和“水平div2′)。用黑色作为前景颜色,选择图层蒙版,用软倒圆边刷大小45 px和流量为30%,删除光经过的地方。

6630437745537169583

步骤29

创建一个新层,选择一个软边缘圆刷48像素大小和流量100%。画一个圆圈在顶部(略高于线)。设置混合模式为叠加,复制图层。

6630553194258083915

步骤30

边缘还是有点亮,让我们调整一下。选择两边的黑色边Brim1,Brim2,图层样式以下设置:

内阴影:

cola20150712

步骤31

同时让我们把中间的黑色阴影降低一点。这次,Cmd / Ctrl +易拉罐图形。创建一个新层,选择软软圆边笔刷,大小48 px和流量为30%。在底部画一条直线,图层混合模式为柔光。

6631431704047443421

步骤32

为了增加的逼真感,使用矩形工具(U),创建两个形状如下图。然后,使用钢笔工具(P),合并或者建组,或者栅格化,Ctrl+E。

23925373038618923

步骤33

Ctrl+J复制这一层两次,并放置如下:

6619150159166242387

步骤34

为三个框中的其中任何一个添加图层蒙版,设置前景颜色黑色,选择渐变工具(G),选择渐变工具,如下图:

2777313595222079349

步骤35

与选定的图层蒙版,并拖动鼠标从左边往右拉动,直到它使左侧透明的中间。如下图:

6630564189374838059

步骤36

按住Alt +左键,复制图层蒙版到另外两个上面。(或者重建图层蒙版)然后将所有三层的混合模式为叠加,透明度为18%。

2785757844523406758

步骤37

选择 #eeb946 作为前景色,建立新的形状图层,如下图:

2786039319500117437

步骤38

形状图层转换为智能对象,设置混合模式为叠加,高斯模糊值4,设置透明度为70%。

1102256008816942381

步骤39

定位在两边红色地方。Ctrl / Cmd +易拉罐图形,选出选区,新建图层,用画笔工具,软边画笔,大小30 px和流量为30%,使顶部右和左一点,如下图:

6630520208909251883

步骤40

可以加强中间黑暗的地方。 步骤22中的(名为“中间阴影”)图层,复制它。不透明度设置为25%

6630611468374834976

步骤41

让我们继续的顶部。选择最顶层的图层,也就是白色的边,图层样式参考如下:

1132936781278452370

步骤42

设置前景颜色(#ffffff)和选择一个软画笔100%流量和大小30 px。将白色边选取出来,创建一个新层,开始轻轻地画,每个相隔3px的直线,水平居中。设置混合模式为叠加。试着模仿下面的图片。

6619242518142973338

步骤43

和前面的步骤一样,新建图层,用画笔,然而,这一次一行没有差距,覆盖的最高部分的形状。

639511147104650323

步骤44

现在制作阴影。相同的步骤,前景色黑色,但是用较小的笔刷。加强右和左边缘的黑暗。


6619439330724343606

步骤46

现在制作底部边缘。在混合选项面板应用以下设置:

11329367812784523701

步骤47

相同的方法,1.Cmd / Ctrl +单击底部形状层,并创建一个新层。2.用软圆边笔刷(#ffffff),大小21 px和流量为100%,画顶部形状的一部分。设置混合模式为叠加。3.然后,创建另一个层,做同样的步骤,但这一次做一个垂直线覆盖整个高度的形状。更改最新层的混合模式为柔光。

6630129882281388225

步骤48

同样的方法(也就是选出选区,新建图层,画笔,黑色然后用上一步骤设置好的画笔模式画出如下图的图形),制作阴影,左边和右边底部形状。设置混合模式为叠加,透明度为70%。

2432506748751792836

步骤49

让我们把底部变暗一点。同样步骤,如下图下图。设置混合模式为柔光,不透明度到60%。

6619463519980157863

步骤50

新建一个图层,钢笔工具画一个形状,如下图。给它一个颜色 #311010。

6630704926863194714

步骤51

将形状转换为智能对象,应用高斯模糊值为5。设置层的混合模式为叠加然后设置透明度为20%。

6630840166793409472

步骤52

创建一个新的形状,如下图。添加图层蒙版,使用渐变工具(G),删除顶部和底部区域的形状,如同步骤34和35。

6630785191212021654

步骤53

设置透明度为20%,混合模式为叠加。

6630593876188775867

步骤54

看上去不错,现在 把可口可乐标志,按Cmd / Ctrl + T,旋转来调整到正确的位置。

6630468531862748970

步骤55

让我们添加一些水滴。使用椭圆工具(U),创建一个圆形并应用以下设置,填充为0%:

6631301961675364958

步骤56

复制前一图层样式,然后使用钢笔工具创建几个水滴形状,粘贴图层样式到每个水滴。建组,复制你的水滴。随意放置。完成~

6630444342606936276


 收藏