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

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

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

步骤1

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

第2步

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

第3步

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

步骤4

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

第5步

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

第6步

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

第7步

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

第8步

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

第9步

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

第10步

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

第11步

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

第12步

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

步骤13

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

第14步

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

第15步

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

步骤16

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

步骤17

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

步骤18

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

步骤19

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

步骤20

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

步骤21

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

步骤22

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

步骤23

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

步骤24

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

步骤25

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

步骤26

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

步骤27

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

步骤28

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

步骤29

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

步骤30

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

步骤31

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

步骤32

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

步骤33

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

步骤34

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

步骤35

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

步骤36

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

步骤37

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

步骤38

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

步骤39

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

步骤40

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

步骤41

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

步骤42

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

步骤43

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

步骤44

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

步骤45

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

步骤46

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

步骤47

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

步骤48

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

步骤49

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

步骤50

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

步骤51

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

步骤52

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

步骤53

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

步骤54

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

步骤55

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

步骤56

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

步骤57

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

步骤58

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

步骤59

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

步骤60

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

步骤61

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

步骤62

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

步骤63

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

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

步骤64

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

步骤65

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

步骤66

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

步骤67

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

步骤68

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

步骤69

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

步骤70

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

步骤71

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

步骤72

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

步骤73

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

步骤74

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

步骤75

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

步骤76

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

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

结论

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,110评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,443评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,474评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,881评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,902评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,698评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,418评论 3 419
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,332评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,796评论 1 316
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,968评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,110评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,792评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,455评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,003评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,130评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,348评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,047评论 2 355

推荐阅读更多精彩内容