ps鼠绘游戏手柄(5)

第31步 将上面的图层编组,命名为Lower parts.然后建立一个新图层,绘制一个较大的圆圈,将填充值设为0,应用如下所示的样式。 图65 图66 图67 图68 第32步 用一个房子的图标装饰上面绘制的圆圈(这个圆圈实际上是Hom

ps鼠绘游戏手柄(2)

第4步 对所有图层编组,命名为Base.创建新图层,选择椭圆工具(U),画一个小圆形填充颜色#dee0df,然后应用如下图所示的样式。 图08 图09 图10 第5步 复制上面的小圆形两次,将复制图层的填充值都设为0.将复制的第一

第31步

将上面的图层编组,命名为“Lower parts”.然后建立一个新图层,绘制一个较大的圆圈,将填充值设为0,应用如下所示的样式。

ps鼠绘游戏手柄(5)插图

图65

ps鼠绘游戏手柄(5)插图(1)

图66

ps鼠绘游戏手柄(5)插图(2)

图67

ps鼠绘游戏手柄(5)插图(3)

图68

第32步

用一个房子的图标装饰上面绘制的圆圈(这个圆圈实际上是Home键,房子图标可以从网上找到),并在图标下面做标注。

ps鼠绘游戏手柄(5)插图(4)

图69

第33步

复制第三十一步中的圆圈(保持填充值为0),清除已有样式,添加如下所示样式。

ps鼠绘游戏手柄(5)插图(5)

图70

ps鼠绘游戏手柄(5)插图(6)

图71

第34步

将31-33步的图层编组,命名为“Home”.然后创建新图层,绘制一个小的正圆,填充颜色为#deeodf,并应用如下所示的样式。

ps鼠绘游戏手柄(5)插图(7)

图72

ps鼠绘游戏手柄(5)插图(8)

图73

第35步

复制上面的圆圈两次,并将填充值都设为0,清除所有已有样式。然后对复制的第一个图层添加如下第一幅图所示的样式,复制的第二个图层添加下面第二幅图所示样式。

ps鼠绘游戏手柄(5)插图(9)

图74

ps鼠绘游戏手柄(5)插图(10)

图75

第36步

在上面的圆圈中添加I/O图标,颜色为#d1200e.并在下方添加文本。如图。

ps鼠绘游戏手柄(5)插图(11)

图76

第37步

创建新图层,应用圆角矩形工具(圆角半径为6px),绘制一个小的圆角矩形,填充颜色为#dee0df,重复步骤34-35.

ps鼠绘游戏手柄(5)插图(12)

图77

ps鼠绘游戏手柄(5)插图(13)

图78

第38步

添加装饰(TV,颜色:#079389,字体:Arial/Hekvetica,字号:3.5pt)。并在下方添加文本。如图。

ps鼠绘游戏手柄(5)插图(14)

图79

第39步

增加整体高光。打完收工。

ps鼠绘游戏手柄(5)插图(15)

图80

总结

教程至此结束。你可以增加一些很酷的背景让你的游戏手柄看上去更好,希望你会喜欢这篇文章。

 

第21步

在屏幕上添加logo.将19-21步的图层编组,命名为“Screen”.到现在为止,大体的性状已经出来了。

ps鼠绘游戏手柄(5)插图(16)

图45

第22步

绘制一些圆形(一个黑色两个白色),来完成顶部的摄像头(你可以增加一些高亮点)。

ps鼠绘游戏手柄(5)插图(17)

图46

ps鼠绘游戏手柄(5)插图(18)

图47

ps鼠绘游戏手柄(5)插图(19)

图48

ps鼠绘游戏手柄(5)插图(20)

图49

第23步

创建一个新的图层,选择椭圆形工具,绘制一下小圆(颜色#282828),应用如下所示样式。

ps鼠绘游戏手柄(5)插图(21)

图50

ps鼠绘游戏手柄(5)插图(22)

图51

ps鼠绘游戏手柄(5)插图(23)

图52

第24步

复制上面的圆圈,并缩小(如下图所示红色圆圈)。将颜色填充为#84919a,清除已有样式,添加如下所示样式。

ps鼠绘游戏手柄(5)插图(24)

图53

ps鼠绘游戏手柄(5)插图(25)

图54

 

第25步

再次复制该蓝色圆圈,略微缩放该圆圈。清除之前的内阴影样式,替换为如下样式。

ps鼠绘游戏手柄(5)插图(26)

图55

ps鼠绘游戏手柄(5)插图(27)

图56

ps鼠绘游戏手柄(5)插图(28)

图57

第26步

最后,应用soft round brush添加高亮点。将22-26步的图层编组,命名为“Camera”.

ps鼠绘游戏手柄(5)插图(29)

图58

第27步

创建新图层,应用钢笔工具并使用描边(颜色#b7b7b7,画笔大小2px),绘制如下所示图形。

ps鼠绘游戏手柄(5)插图(30)

图59

第28步

创建新图层,选择圆角矩形工具,将圆角半径设置为10px,绘制一个非常小的圆角矩形。填充颜色为#000000,应用如下样式。

ps鼠绘游戏手柄(5)插图(31)

图60

ps鼠绘游戏手柄(5)插图(32)

图61

ps鼠绘游戏手柄(5)插图(33)

图62

第29步

复制上面的小圆角矩形,并将其置于对应的位置。最后,在左边添加logo.如下图所示。

ps鼠绘游戏手柄(5)插图(34)

图63

第30步

应用与上面相同的样式,绘制两个小圆圈(颜色#000000),并做相应的标注。如下图所示。

ps鼠绘游戏手柄(5)插图(35)

图64

本教程主要使用Photoshop绘制逼真的任天堂Wii游戏手柄,本PS教程属于Photoshop中级教程,教程主要通过图层样式来完成手柄界面的设计,游戏迷们可以跟着练习一下,下面让我们一起来学习吧。

最终效果图

ps鼠绘游戏手柄(5)插图(36)

图00

第1步

在Photoshop中建立如下图所示的新文件

ps鼠绘游戏手柄(5)插图(37)

图01

第2步

使用圆角矩形工具(快捷键U),设定圆角半径150-160px.绘制如下面第1图所示的圆角矩形,填充颜色#dee0df.然后添加图层样式(Layer Style)(2步,如下面第2、3图所示)。做完之后,复制图形并清除图层样式(Clear Layer Style),将复制图形的“填充(Fill)”设置为0,然后增加如下面第4图所示的图层样式。重新命名两个图层“Base”和“Base 1”.

ps鼠绘游戏手柄(5)插图(38)

图02

ps鼠绘游戏手柄(5)插图(39)

图03

ps鼠绘游戏手柄(5)插图(40)

图04

第3步

建立新图层并将其置于前两个图层上方。选择钢笔工具(P),绘制手柄的边缘按钮(如下第1图)。应用如下第2、3图所示的样式

ps鼠绘游戏手柄(5)插图(41)

图05

ps鼠绘游戏手柄(5)插图(42)

图06

ps鼠绘游戏手柄(5)插图(43)

图07

第4步

对所有图层编组,命名为“Base”.创建新图层,选择椭圆工具(U),画一个小圆形填充颜色#dee0df,然后应用如下图所示的样式。

ps鼠绘游戏手柄(5)插图(44)

图08

ps鼠绘游戏手柄(5)插图(45)

图09

ps鼠绘游戏手柄(5)插图(46)

图10

第5步

复制上面的小圆形两次,将复制图层的“填充”值都设为0.将复制的第一个图层的样式清除,并应用如下面第1图所示的样式;对复制的第二个图层进行与上面相同的处理,添加样式如下第2图。最后,在圆圈上面写上字母“Y”(颜色:#959595,字体:Arial/Helvetica,字号:4pt)。

ps鼠绘游戏手柄(5)插图(47)

图11

ps鼠绘游戏手柄(5)插图(48)

图12

ps鼠绘游戏手柄(5)插图(49)

图13

第6步

把刚制作的“Y”按钮编组并命名为“Y”,复制该组3次,按下图所示的次序摆放。

ps鼠绘游戏手柄(5)插图(50)

图14

第7步

将上面的“Y”“X”“A”“B”编组,命名为“YXAB”.同样的方法制作组“+-”,如下图所示。

ps鼠绘游戏手柄(5)插图(51)

图15

第8步

创建新图层,使用圆角矩形工具(U)。设置圆角半径为5px,绘制如下两个图形(颜色#dee0df),并添加如下图所示的样式。

ps鼠绘游戏手柄(5)插图(52)

图16

ps鼠绘游戏手柄(5)插图(53)

图17

第9步

画两个圆,合并两个图形并应用以下样式。

ps鼠绘游戏手柄(5)插图(54)

图18

ps鼠绘游戏手柄(5)插图(55)

图19

ps鼠绘游戏手柄(5)插图(56)

图20

ps鼠绘游戏手柄(5)插图(57)

图21

第10步

复制刚刚制作的十字形,将填充设置为0.添加如下图所示样式,并绘制4条短线(颜色#959595)。

ps鼠绘游戏手柄(5)插图(58)

图22

ps鼠绘游戏手柄(5)插图(59)

图23

 

第11步

将上面第8-11步的图层编组,命名为“Cross”.现在开始制作游戏手柄的操纵杆了。创建一个新图层,选择椭圆型工具(U),绘制一个正圆,填充颜色#deeodf,将填充值设置为0,并应用下面所示的图层样式。

ps鼠绘游戏手柄(5)插图(60)

图24

ps鼠绘游戏手柄(5)插图(61)

图25

第12步

复制上面的圆圈,清除已有的样式,将填充值设为0,并应用下面的样式。

ps鼠绘游戏手柄(5)插图(62)

图26

ps鼠绘游戏手柄(5)插图(63)

图27

ps鼠绘游戏手柄(5)插图(64)

图28

ps鼠绘游戏手柄(5)插图(65)

图29

第13步

再次复制该圆圈,将填充值设为0,清除已有样式,替换为如下所示样式。

ps鼠绘游戏手柄(5)插图(66)

图30

ps鼠绘游戏手柄(5)插图(67)

图31

ps鼠绘游戏手柄(5)插图(68)

图32

第14步

再次复制该圆圈,将填充值设为0,应用如下所示样式。

ps鼠绘游戏手柄(5)插图(69)

图33

第15步

最后一次复制该圆圈,将填充值设为0,应用如下所示样式。

ps鼠绘游戏手柄(5)插图(70)

图34

第16步

创建新图层,选择钢笔工具,绘制圆形并应用画笔描边(2px,颜色#dbdddc),然后添加如下所示样式。

ps鼠绘游戏手柄(5)插图(71)

图35

ps鼠绘游戏手柄(5)插图(72)

图36

ps鼠绘游戏手柄(5)插图(73)

图37

第17步

创建新图层,使用“soft round brush”,增加一些高亮点。将第11-17步的图层编组,命名为“Right analogue stick”.

ps鼠绘游戏手柄(5)插图(74)

图38

第18步

复制“Right analogue stick”组,放置于图片的另一边,重新命名为“Left analogue stick”.

ps鼠绘游戏手柄(5)插图(75)

图39

第19步

现在开始绘制屏幕了。选择矩形工具(U),绘制一个大的矩形(如下第1图所示)。然后将填充值设为0,应用下面的样式。

ps鼠绘游戏手柄(5)插图(76)

图40

ps鼠绘游戏手柄(5)插图(77)

图41

第20步

绘制另外一个矩形(颜色#ffffff),比上面的矩形略小,添加如下所示的样式。

ps鼠绘游戏手柄(5)插图(78)

图42

ps鼠绘游戏手柄(5)插图(79)

图43

ps鼠绘游戏手柄(5)插图(80)

图44

本教程主要使用Photoshop绘制逼真的任天堂Wii游戏手柄,本PS教程属于Photoshop中级教程,教程主要通过图层样式来完成手柄界面的设计,游戏迷们可以跟着练习一下,下面让我们一起来学习吧。

最终效果图

ps鼠绘游戏手柄(5)插图(36)

图00

第1步

在Photoshop中建立如下图所示的新文件

ps鼠绘游戏手柄(5)插图(37)

图01

第2步

使用圆角矩形工具(快捷键U),设定圆角半径150-160px.绘制如下面第1图所示的圆角矩形,填充颜色#dee0df.然后添加图层样式(Layer Style)(2步,如下面第2、3图所示)。做完之后,复制图形并清除图层样式(Clear Layer Style),将复制图形的“填充(Fill)”设置为0,然后增加如下面第4图所示的图层样式。重新命名两个图层“Base”和“Base 1”.

ps鼠绘游戏手柄(5)插图(38)

图02

ps鼠绘游戏手柄(5)插图(39)

图03

ps鼠绘游戏手柄(5)插图(40)

图04

第3步

建立新图层并将其置于前两个图层上方。选择钢笔工具(P),绘制手柄的边缘按钮(如下第1图)。应用如下第2、3图所示的样式

ps鼠绘游戏手柄(5)插图(41)

图05

ps鼠绘游戏手柄(5)插图(42)

图06

ps鼠绘游戏手柄(5)插图(43)

图07

第4步

对所有图层编组,命名为“Base”.创建新图层,选择椭圆工具(U),画一个小圆形填充颜色#dee0df,然后应用如下图所示的样式。

ps鼠绘游戏手柄(5)插图(44)

图08

ps鼠绘游戏手柄(5)插图(45)

图09

ps鼠绘游戏手柄(5)插图(46)

图10

第5步

复制上面的小圆形两次,将复制图层的“填充”值都设为0.将复制的第一个图层的样式清除,并应用如下面第1图所示的样式;对复制的第二个图层进行与上面相同的处理,添加样式如下第2图。最后,在圆圈上面写上字母“Y”(颜色:#959595,字体:Arial/Helvetica,字号:4pt)。

ps鼠绘游戏手柄(5)插图(47)

图11

ps鼠绘游戏手柄(5)插图(48)

图12

ps鼠绘游戏手柄(5)插图(49)

图13

第6步

把刚制作的“Y”按钮编组并命名为“Y”,复制该组3次,按下图所示的次序摆放。

ps鼠绘游戏手柄(5)插图(50)

图14

第7步

将上面的“Y”“X”“A”“B”编组,命名为“YXAB”.同样的方法制作组“+-”,如下图所示。

ps鼠绘游戏手柄(5)插图(51)

图15

第8步

创建新图层,使用圆角矩形工具(U)。设置圆角半径为5px,绘制如下两个图形(颜色#dee0df),并添加如下图所示的样式。

ps鼠绘游戏手柄(5)插图(52)

图16

ps鼠绘游戏手柄(5)插图(53)

图17

第9步

画两个圆,合并两个图形并应用以下样式。

ps鼠绘游戏手柄(5)插图(54)

图18

ps鼠绘游戏手柄(5)插图(55)

图19

ps鼠绘游戏手柄(5)插图(56)

图20

ps鼠绘游戏手柄(5)插图(57)

图21

第10步

复制刚刚制作的十字形,将填充设置为0.添加如下图所示样式,并绘制4条短线(颜色#959595)。

ps鼠绘游戏手柄(5)插图(58)

图22

ps鼠绘游戏手柄(5)插图(59)

图23

 

第11步

将上面第8-11步的图层编组,命名为“Cross”.现在开始制作游戏手柄的操纵杆了。创建一个新图层,选择椭圆型工具(U),绘制一个正圆,填充颜色#deeodf,将填充值设置为0,并应用下面所示的图层样式。

ps鼠绘游戏手柄(5)插图(60)

图24

ps鼠绘游戏手柄(5)插图(61)

图25

第12步

复制上面的圆圈,清除已有的样式,将填充值设为0,并应用下面的样式。

ps鼠绘游戏手柄(5)插图(62)

图26

ps鼠绘游戏手柄(5)插图(63)

图27

ps鼠绘游戏手柄(5)插图(64)

图28

ps鼠绘游戏手柄(5)插图(65)

图29

第13步

再次复制该圆圈,将填充值设为0,清除已有样式,替换为如下所示样式。

ps鼠绘游戏手柄(5)插图(66)

图30

ps鼠绘游戏手柄(5)插图(67)

图31

ps鼠绘游戏手柄(5)插图(68)

图32

第14步

再次复制该圆圈,将填充值设为0,应用如下所示样式。

ps鼠绘游戏手柄(5)插图(69)

图33

第15步

最后一次复制该圆圈,将填充值设为0,应用如下所示样式。

ps鼠绘游戏手柄(5)插图(70)

图34

第16步

创建新图层,选择钢笔工具,绘制圆形并应用画笔描边(2px,颜色#dbdddc),然后添加如下所示样式。

ps鼠绘游戏手柄(5)插图(71)

图35

ps鼠绘游戏手柄(5)插图(72)

图36

ps鼠绘游戏手柄(5)插图(73)

图37

第17步

创建新图层,使用“soft round brush”,增加一些高亮点。将第11-17步的图层编组,命名为“Right analogue stick”.

ps鼠绘游戏手柄(5)插图(74)

图38

第18步

复制“Right analogue stick”组,放置于图片的另一边,重新命名为“Left analogue stick”.

ps鼠绘游戏手柄(5)插图(75)

图39

第19步

现在开始绘制屏幕了。选择矩形工具(U),绘制一个大的矩形(如下第1图所示)。然后将填充值设为0,应用下面的样式。

ps鼠绘游戏手柄(5)插图(76)

图40

ps鼠绘游戏手柄(5)插图(77)

图41

第20步

绘制另外一个矩形(颜色#ffffff),比上面的矩形略小,添加如下所示的样式。

ps鼠绘游戏手柄(5)插图(78)

图42

ps鼠绘游戏手柄(5)插图(79)

图43

ps鼠绘游戏手柄(5)插图(80)

图44

第21步

在屏幕上添加logo.将19-21步的图层编组,命名为“Screen”.到现在为止,大体的性状已经出来了。

ps鼠绘游戏手柄(5)插图(16)

图45

第22步

绘制一些圆形(一个黑色两个白色),来完成顶部的摄像头(你可以增加一些高亮点)。

ps鼠绘游戏手柄(5)插图(17)

图46

ps鼠绘游戏手柄(5)插图(18)

图47

ps鼠绘游戏手柄(5)插图(19)

图48

ps鼠绘游戏手柄(5)插图(20)

图49

第23步

创建一个新的图层,选择椭圆形工具,绘制一下小圆(颜色#282828),应用如下所示样式。

ps鼠绘游戏手柄(5)插图(21)

图50

ps鼠绘游戏手柄(5)插图(22)

图51

ps鼠绘游戏手柄(5)插图(23)

图52

第24步

复制上面的圆圈,并缩小(如下图所示红色圆圈)。将颜色填充为#84919a,清除已有样式,添加如下所示样式。

ps鼠绘游戏手柄(5)插图(24)

图53

ps鼠绘游戏手柄(5)插图(25)

图54

 

第25步

再次复制该蓝色圆圈,略微缩放该圆圈。清除之前的内阴影样式,替换为如下样式。

ps鼠绘游戏手柄(5)插图(26)

图55

ps鼠绘游戏手柄(5)插图(27)

图56

ps鼠绘游戏手柄(5)插图(28)

图57

第26步

最后,应用soft round brush添加高亮点。将22-26步的图层编组,命名为“Camera”.

ps鼠绘游戏手柄(5)插图(29)

图58

第27步

创建新图层,应用钢笔工具并使用描边(颜色#b7b7b7,画笔大小2px),绘制如下所示图形。

ps鼠绘游戏手柄(5)插图(30)

图59

第28步

创建新图层,选择圆角矩形工具,将圆角半径设置为10px,绘制一个非常小的圆角矩形。填充颜色为#000000,应用如下样式。

ps鼠绘游戏手柄(5)插图(31)

图60

ps鼠绘游戏手柄(5)插图(32)

图61

ps鼠绘游戏手柄(5)插图(33)

图62

第29步

复制上面的小圆角矩形,并将其置于对应的位置。最后,在左边添加logo.如下图所示。

ps鼠绘游戏手柄(5)插图(34)

图63

第30步

应用与上面相同的样式,绘制两个小圆圈(颜色#000000),并做相应的标注。如下图所示。

ps鼠绘游戏手柄(5)插图(35)

图64

第31步

将上面的图层编组,命名为“Lower parts”.然后建立一个新图层,绘制一个较大的圆圈,将填充值设为0,应用如下所示的样式。

ps鼠绘游戏手柄(5)插图

图65

ps鼠绘游戏手柄(5)插图(1)

图66

ps鼠绘游戏手柄(5)插图(2)

图67

ps鼠绘游戏手柄(5)插图(3)

图68

第32步

用一个房子的图标装饰上面绘制的圆圈(这个圆圈实际上是Home键,房子图标可以从网上找到),并在图标下面做标注。

ps鼠绘游戏手柄(5)插图(4)

图69

第33步

复制第三十一步中的圆圈(保持填充值为0),清除已有样式,添加如下所示样式。

ps鼠绘游戏手柄(5)插图(5)

图70

ps鼠绘游戏手柄(5)插图(6)

图71

第34步

将31-33步的图层编组,命名为“Home”.然后创建新图层,绘制一个小的正圆,填充颜色为#deeodf,并应用如下所示的样式。

ps鼠绘游戏手柄(5)插图(7)

图72

ps鼠绘游戏手柄(5)插图(8)

图73

第35步

复制上面的圆圈两次,并将填充值都设为0,清除所有已有样式。然后对复制的第一个图层添加如下第一幅图所示的样式,复制的第二个图层添加下面第二幅图所示样式。

ps鼠绘游戏手柄(5)插图(9)

图74

ps鼠绘游戏手柄(5)插图(10)

图75

第36步

在上面的圆圈中添加I/O图标,颜色为#d1200e.并在下方添加文本。如图。

ps鼠绘游戏手柄(5)插图(11)

图76

第37步

创建新图层,应用圆角矩形工具(圆角半径为6px),绘制一个小的圆角矩形,填充颜色为#dee0df,重复步骤34-35.

ps鼠绘游戏手柄(5)插图(12)

图77

ps鼠绘游戏手柄(5)插图(13)

图78

第38步

添加装饰(TV,颜色:#079389,字体:Arial/Hekvetica,字号:3.5pt)。并在下方添加文本。如图。

ps鼠绘游戏手柄(5)插图(14)

图79

第39步

增加整体高光。打完收工。

ps鼠绘游戏手柄(5)插图(15)

图80

总结

教程至此结束。你可以增加一些很酷的背景让你的游戏手柄看上去更好,希望你会喜欢这篇文章。

 

作者: 791650988

为您推荐

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@wangzhan.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部