恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【UI教程】PS中建一个可爱的Twitter鸟图标
0.0°
2018-04-11 自译外文 教程 原作者: 未知 举报 1521 16 10 0

Image title

今天,我们将演示如何在Photoshop中创建一个可爱的Twitter鸟图标。让我们开始吧!

关注公众号liangyuansi1获取最新学习UI资料

步骤1

在一个800x600像素,72 dpi,RGB颜色和白色背景的新PSD文件中,我们将绘制一个圆形图层,颜色为#0099FF。按Shift键可以创建一个完美的圆形,无论在哪个方向拖动鼠标。

Image title

第2步

通过按Alt + Shift我们将复制这个形状来创建角色的头部和身体。这两个向量将保留在一个独特的层内。

Image title

第3步

我们将改变重复圈的比例。按Cmd / Ctrl + T时,该对象的控件将会出现。

Image title

步骤4

使用直接选择工具箭头,我们将把圆的上部曲线带到另一个的边缘,以创建将柔和地连接头部和身体的相反曲线。

Image title



第5步

我们将创建一些形状图层以稍后添加图层样式。对于眼睛,我们将创建一个垂直的椭圆形,将像我们以前那样复制

Image title


第6步

当我们完成了眼睛,我们将使用两个不同大小的相似矢量为角色创建一些头发以获得深度。

Image title

第7步

现在轮到尾羽了。我们将绘制一个带有圆角形状图层的矩形矢量,设置半径为30像素。使用直接选择工具,我们将选择3个上部锚定点并按Cmd / Ctrl + T,方向点将出现。在上方菜单中,我们将点击链接比例工具,并通过水平单击并拖动字母“W”(宽度),我们将从原始尺寸中将这些锚点减少60%

Image title

第8步

我们将复制,缩小并转动这个锚点的4个副本,为我们鸟类的尾部创建羽毛组。

Image title


第9步

我们将通过选择所有这些矢量并按Cmd / Ctrl + T来降低这组矢量的高度。

Image title


第10步

现在我们将创建一个小的水平椭圆形的鸟嘴,我们将以一种简单的方式进行编辑。

Image title


第11步

通过选择上部和下部锚点并将它们的一些像素向上,我们将创建一个悲伤表达。

Image title

第12步

我们将再次使用30像素的圆角矩形在角色的脚上创建手指(3),我们稍后将复制该手指以获得该对。.

Image title

步骤13

使用钢笔工具,我们将绘制一个树枝。使用单击+拖动,您将能够创建具有曲线控制点的锚点,稍后将使用“路径选择”箭头进行调整。

Image title

第14步

复制这个向量,我们将按照上一级菜单修改中使用的相同步骤将其放大20%。

Image title

第15步

在接近树干时调整树枝底部以增加其厚度。然后我们将统一两个线与钢笔工具来获得一个固体向量。

Image title

步骤16

现在我们将在鸟的双手上创建手指。从圆圈开始,您可以修改矢量并创建带有独立方向点的锚点,在尝试更改曲线中的控件时按Alt键。通过这种方式,您可以在这个版本中看到的定位点现在是一个角落,而不是一条曲线,它有两个独立的控件让您随意移动它们。

Image title



步骤17

我们会为每只手画3个手指。他们将被置于祈祷位置,然后手指会看到交织在一起。

Image title


步骤18

一旦我们创建了一只手的手指,我们将通过按住Alt + Shift拖动来复制它们,然后我们将转到Path> Flip Horizontal来翻转复制的手。

Image title



步骤19

使用钢笔工具,我们将创建角色的武器。

Image title


步骤20

现在,一滴眼泪会分三步落在鸟的左脸颊上。我们将绘制一个圆圈,我们将选择上方的锚点并将其拖动。使用转换点工具,我们将点击将其转换为角点。

Image title


步骤21

我们将最终开始添加一些图层样式。通过隐藏头发和手臂图层以更好地形象化我们将在身体上做什么,我们将通过点击使用全局光选项并将角度方向的效果改为-90度来为我们的矢量添加内阴影以获得阴影在角色的劣势地区。

Image title


步骤22

我们将使头发或头部羽毛层再次可见。现在内阴影的边缘色调较暗,我们将双击毛发图层的颜色。当我们打开颜色编辑器时,我们可以提取头部边缘的准确音色,使这些头发可以与身体的其他部分完美融合。

Image title


步骤23

现在轮到眼睛的球形体积了。我们将使用Radial Gradient,点击Align with Layer选项,渐变不会局限于图形的边缘。我们将把它的尺寸缩小50%,这样从一种颜色到另一种颜色的变化就不会那么柔和。

Image title


步骤24

在渐变编辑器中(双击它),我们将把白色放在起点的第三部分,这样我们的渐变可以更加精确和锐利。

Image title


步骤25

现在,我们将使用内阴影,但只是点亮,从场景的一般光线中反射出眼睛。

Image title


步骤26

我们将使用此图像上显示的值在眼睛边缘应用内部发光。

Image title


步骤27

我们将使用Stroke,Bevel和Emboss在眼睛周围创建一个斜角。我们将首先使用与角色#0099FF相同颜色的笔触。

Image title


步骤28

现在,我们将使用斜面和挤出技术在上部区域获得一些阴影(因为光线不会在那里产生影响),并使底部区域更清晰,从而在此斜角上产生3D效果。

Image title



步骤29

在眼睛斜角周围的一些外部光辉会使这个边缘有一个塑料外观发光。

Image title


步骤30

最后是一个柔软的阴影贴图,与鸟身体的相反曲线一起,在颈部褶皱的地方得到一些阴影。

Image title

步骤31

在眼睛虹膜中,我们将包括使用图层样式的学生。我们将使用黑色内发光和倍增混合,检查发光源的源中心选项,从图形中心开始,而不是从通常使用的边缘开始。我们将窒息到100和辉光到10,我们会得到两个完全尖锐的黑色圆圈。

Image title


步骤32

现在我们将使用线性渐变在虹膜内创建音量。任何时候,如果渐变使上部区域变得更暗,您想要添加丙烯酸发光,它总是会更好。

Image title


步骤33

在这里,我们将使用内阴影样式,通过使用与默认出现的轮廓质量不同的轮廓质量来点亮虹膜的下边缘,同时也可以点亮光线的全局角度。

Image title


步骤34

这里使用阴影来点亮虹膜周围的斜角以在眼睛上产生插入效果。

Image title


步骤35

现在丙烯酸发光的眼睛:这种典型的效果给予润滑的外观。有了2个水平椭圆,我们将编辑它的劣质锚点,以在眼睛上创建这个影楼反射。

Image title


步骤36

我们将形状图层的透明度设置为零,并且将使用这些值添加渐变叠加层。请记住,在编辑此渐变时,可以使用单击并拖动图层来移动渐变的位置。

Image title


步骤37

现在我们将添加一个上部发光,以加强高反射表面上的光源外观。

Image title


步骤38

我们现在将照顾头部毛发上的投射阴影。在Layers部分中选择两个形状,我们将进入Paths部分,我们也会在那里看到我们的矢量。我们将使用浮动窗口下方的选项菜单将这些向量转换为选择。

Image title


步骤39

通过这个选择将用作蒙版,我们现在将在新图层上轻轻地绘制阴影。确保按照您在上方菜单中看到的方式设置工具。点击一下,我们就会得到一个微妙的物体阴影。

Image title


步骤40

用橡皮擦和你在这里看到的价值,我们将消除油漆过剩。我们将重复所有步骤来绘制第二缕头发。

Image title


步骤41

现在我们将研究鸟的嘴。首先,我们将添加一个投影向下。

Image title


步骤42

然后,我们将使用一个倒置的内阴影在喙的下部区域创建阴影。

Image title


步骤43

一个内部发光围绕在其周围的光线反射的喙。

Image title


步骤44

有了两个新的圆形图层和30%的透明度,我们将增加一个阴影,但要点亮。有了这些值,您将能够创建一个可以模拟喙表面孔的下斜面。

Image title


步骤45

现在我们将努力工作。应用放射状渐变叠加在其中心创建一个浮雕区域。

Image title


步骤46

一个内在的阴影,点亮全局光线,并将这个效果的极端值变得非常锐利,就好像它是一种丙烯酸发光。

Image title


步骤47

最后,向下投射的阴影会将背景与眼泪分开。

Image title


步骤48

我们将在鸟的脚上工作。使用倒置的内阴影,我们将创建90度以上来自上方的光线。

Image title


步骤49

添加一个内部发光,但让它变暗可以让我们给这些载体更多的3D方面。

Image title


步骤50

现在我们来研究一下尾羽。渐变将允许我们在分支下方和羽毛上方创建阴影。

Image title


步骤51

最后,用一个3像素的笔画在羽毛上做一个斜角,使用比角色身体更暗的色调。

Image title


步骤52

我们将为树枝增添一些安慰。通过斜角和浮雕以及这些值,我们可以获得物体的圆柱形面。

Image title


步骤53

一个内在的阴影,但要点亮分支的下方区域,用来自普通光线的反射来加强阴影区域。

Image title


步骤54

我们将继续使用这里显示的值的武器和斜角和浮雕效果。

Image title


步骤55

不要忘记检查图层蒙版隐藏效果选项,这将允许我们用手绘蒙版隐藏部分手臂。

Image title


步骤56

现在我们将在手臂上创建一个选区,并将其转换为面具。

Image title


步骤57

让我们画上面具。采用黑色,面罩隐藏了手臂和身体之间的接触区域,帮助两个物体更好地结合。

Image title


步骤58

现在我们将为这些武器创建阴影,但不会自动使用图层样式 - 因为我们还需要隐藏阴影中的某些区域。通过选择武器形状,我们将它们转换为路径部分中的选择。

Image title


步骤59

我们将绘制黑色我们已经获得的选择,然后按下Cmd / Ctrl + T并单击上部菜单上的Wrap Tool图标,我们将扭曲这个阴影,因为它不会与手臂形状相同。

Image title


步骤60

现在我们将用2像素的高斯模糊来使阴影变柔和。

Image title


步骤61

我们将掩盖这个阴影,并使用画笔工具,我们将面具涂成黑色。然后,我们将隐藏一个图层,并将这些阴影与角色身体结合起来。

Image title


步骤62

拳头也需要相同的图层风格作业和遮罩。让我们从投影的阴影开始。

Image title


步骤63

借助斜面和浮雕,我们将为这些矢量提供3D形状。

Image title


关注公众号liangyuansi1获取最新学习UI资料

步骤64

我们将用倒影的内阴影加强拳头的劣影。

Image title


步骤65

有一点内心焕发会给双手的上部带来一丝光芒。

Image title


步骤66

我们之前绘制的每根手指都将被转换为选择,并且我们将在不同的层上绘制手指。

Image title


步骤67

将形状图层转换为选区后,我们将在新图层上绘制小指和手掌的阴影区域。使用一个小点刷子和10%的软流量,只在关键区域进行一些触摸,但避免过多。

Image title


步骤68

我们将收缩选择1像素来擦除多余的图像。

Image title


步骤69

让我们画上面具。采用黑色,面罩隐藏了手臂和身体之间的接触区域,帮助两个物体更好地结合。

Image title


步骤70

我们将重复相同的步骤来绘制和擦除每个手指,总是使用不同的图层。当我们完成后,我们将继续擦除多余的部分,使手指看起来相互交织。完成后,选择所有图层并使用Cmd / Ctrl + E链接它们。然后可以通过增加图层透明度来减少这些阴影的强度。

Image title


步骤71

我们只需要一些反射和光线细节来增加鸟的身体。我们将选择它的形状图层,我们会将它转换为选择,就像我们在前面的步骤中学到的那样。

Image title


步骤72

让我们缩小5或6个像素的选择范围。

Image title


步骤73

然后我们将使这个选择更柔和2或3个像素。

Image title


步骤74

通过减少和柔化这个选择,我们将创建一个新图层并使用混合叠加,我们将在角色上方区域绘制角色的两侧和其前部。

Image title


步骤75

现在我们将继续缩小选择范围,以消除多余部分,考虑到侧面反射应该看起来像一条细线,因为眼睛看着的是对象两侧的反射:因为它是一个反射表面,它会切割由这个光源。

Image title



步骤76

现在我们将消除油漆过剩。按Cmd / Ctrl + H可以隐藏选区,以便更好地查看正在处理的区域。

Image title


关注公众号liangyuansi1获取最新学习UI资料

结论

使用任何背景和Call To Action标题,我们的Twitter图标现已完成!

Image title




更新:2018-04-11

收藏

16人已收藏

UI交互设计师Y

学习UI加微信l543597299

  • 30

    作品

  • 37

    粉丝

  • 3

    关注

  • 【UI教程】AI绘制社交媒体图标包教程
  • 所AI初学者都应该学习的10个基本技巧和工具
  • 更好的界面设计的8条黄金法则,想做UI设计师必学
  • AI使用混合工具都能进行刻字?
相关标签

    猜你喜欢

      2018-04-11 自译外文 教程 原作者: 未知 举报 1521 16 10 0

      【UI教程】PS中建一个可爱的Twitter鸟图标

      0.0°

      你确定要举报【UI教程】PS中建一个可爱的Twitter鸟图标

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年04月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      10
      16
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录