当前位置:首页 >> 时尚

实操案例!游戏界面主形象绘制完整思路和过程复盘

实操案例!实操游戏界面主形象绘制完整思路和过程复盘

今天分享的案例是个游戏界面的主形象绘制 ,落地效果如下:

实操案例
!游戏<strong></strong>游戏界面主形象绘制完整思路和过程复盘

这是界面主体的飞碟部分 :

实操案例�!游戏界面主形象绘制完整思路和过程复盘

主体形象是主形制完整思一个飞碟加 IP 形象结合的造型 ,会不会有很多同学好奇这是象绘怎么制作出来的呢 ?今天就给大家分享下绘制步骤和一些实操技法 ,希望大家有所收获 !过程

一 、复盘用图形绘制矢量轮廓

这种形象呢 ,实操为满足后期制作的案例要求 ,放大缩小都不会影响到它的游戏清晰度 ,所以一般都是界面采用矢量的方法来制作,所以我们要用矢量的主形制完整思图形堆叠出造型的轮廓  :

实操案例!游戏界面主形象绘制完整思路和过程复盘

其实很简单,象绘我们只要采用部件拆解的过程方式 ,把主体拆成几个几何图形,然后再去衔接组成就可以得到这个效果:

实操案例!游戏界面主形象绘制完整思路和过程复盘

二、铺设基础颜色

把每一个部件上色,注意上色的时候要注意颜色不宜超过 3 种 ,并且要注意配色节奏有呼应不要显得杂乱:

实操案例
!游戏界面主形象绘制完整思路和过程复盘

飞碟身体其实就只有一个色,然后是点缀其上的灯光采用对比色的黄色去点缀:

实操案例
!游戏界面主形象绘制完整思路和过程复盘

其中的形象采用亮蓝色,以在飞碟中凸显出来,底部的灯光也选用相通的蓝色,以求和中间的人物颜色形成呼应 :

实操案例!游戏界面主形象绘制完整思路和过程复盘

三 、飞碟光影质感

基础的颜色铺设好勒,下一步就是改给它加上光影质感了 ,现在它显得很平,不立体 !所以我们要有一个统一的光源方向 ,比如顶光源 ,以 UFO 的身体为例,上半部分整体增加一圈白色,身体就立体起来了 :

实操案例

!游戏界面主形象绘制完整思路和过程复盘

然后单一颜色是不是显得很单调呢?我们可以增加一些颜色,让它显得丰富一些 ,这里可以套用一个简单的设计逻辑方法,我们可以挑选两个对比色 ,一个粉色 ,一个蓝色 ,左边给他染上红色 ,右边给他染上蓝色:

实操案例!游戏界面主形象绘制完整思路和过程复盘

实操案例�!游戏界面主形象绘制完整思路和过程复盘

是不是就丰富多了?接下来我们绘制中间的玻璃罩

①使用内阴影效果绘制玻璃罩的轮廓光 ,让它立体一些 :

实操案例!游戏界面主形象绘制完整思路和过程复盘

②用同样的染色逻辑给玻璃罩丰富一下颜色 :

实操案例!游戏界面主形象绘制完整思路和过程复盘

③强化玻璃轮廓 :复制一层玻璃罩,填充调到0% ,缩小10% ,给玻璃罩绘制一层内边缘 ,这样我们的玻璃就是有厚度的,不会显得很单薄 。

实操案例!游戏界面主形象绘制完整思路和过程复盘

外轮廓也可以强调一下,多复制一层让它明显一些 :

实操案例
!游戏界面主形象绘制完整思路和过程复盘

④绘制玻璃反光玻璃之所以像玻璃就是因为它是有反光的,我们沿着内部的轮廓绘制几个色条,用蒙版擦除色条两端就会得到这种效果 :

实操案例!游戏界面主形象绘制完整思路和过程复盘

现在左边的反光呈现紫色 ,右边的呈现蓝色,我们可以再绘制一个白色的强调它 ,不同的是我们可以给白色的发光增加一个外发光效果 :

实操案例!游戏界面主形象绘制完整思路和过程复盘

这样我们的飞碟的身体就差不多了 ,质感和光影都满满的细节!

四、IP 形象的质感细节

实操案例!游戏界面主形象绘制完整思路和过程复盘

画完了飞碟, 把目光挪到咱们的 IP 形象上 ,可以发现质感明显跟不上了,整个显得很平淡,一点都不立体对吧。我们来看看怎么处理 !先用渐变的方式,选用深蓝色从下到上来一个渐变 :

实操案例	!游戏界面主形象绘制完整思路和过程复盘

使用内发光的效果 ,但是模式选的是正面叠底 ,蓝色 。这样在轮廓边缘形成一圈暗色渐变 :

实操案例!游戏界面主形象绘制完整思路和过程复盘

仔细观察 ,虽然不是特别明显,但是很重要 :

实操案例�!游戏界面主形象绘制完整思路和过程复盘

然后选用更亮的蓝色 ,把额头中心的位置打亮 !

实操案例�!游戏界面主形象绘制完整思路和过程复盘

明显变得立体了很多  ,但是别急 ,还能更立体 !把形象的轮廓复制一层,添加内发光效果 ,填充 0%:

实操案例
!游戏界面主形象绘制完整思路和过程复盘

用来充当形象的轮廓光:

实操案例�	!游戏界面主形象绘制完整思路和过程复盘

一个立体且丰富的造型就完成啦 !把他放到我们的飞碟中去:

实操案例!游戏界面主形象绘制完整思路和过程复盘

一个细节拉满的飞碟就绘制完成啦!过程比较复杂 ,但是分享的都是别人不会告诉你的细节干货  。希望对大家有所帮助!

作者:菜心设计铺

休闲

实操案例!实操游戏界面主形象绘制完整思路和过程复盘

今天分享的案例是个游戏界面的主形象绘制 ,落地效果如下:

实操案例
!游戏<strong></strong>游戏界面主形象绘制完整思路和过程复盘

这是界面主体的飞碟部分 :

实操案例�!游戏界面主形象绘制完整思路和过程复盘

主体形象是主形制完整思一个飞碟加 IP 形象结合的造型 ,会不会有很多同学好奇这是象绘怎么制作出来的呢 ?今天就给大家分享下绘制步骤和一些实操技法 ,希望大家有所收获 !过程

一 、复盘用图形绘制矢量轮廓

这种形象呢 ,实操为满足后期制作的案例要求 ,放大缩小都不会影响到它的游戏清晰度 ,所以一般都是界面采用矢量的方法来制作,所以我们要用矢量的主形制完整思图形堆叠出造型的轮廓  :

实操案例!游戏界面主形象绘制完整思路和过程复盘

其实很简单,象绘我们只要采用部件拆解的过程方式 ,把主体拆成几个几何图形,然后再去衔接组成就可以得到这个效果:

实操案例!游戏界面主形象绘制完整思路和过程复盘

二、铺设基础颜色

把每一个部件上色,注意上色的时候要注意颜色不宜超过 3 种 ,并且要注意配色节奏有呼应不要显得杂乱:

实操案例
!游戏界面主形象绘制完整思路和过程复盘

飞碟身体其实就只有一个色,然后是点缀其上的灯光采用对比色的黄色去点缀:

实操案例
!游戏界面主形象绘制完整思路和过程复盘

其中的形象采用亮蓝色,以在飞碟中凸显出来,底部的灯光也选用相通的蓝色,以求和中间的人物颜色形成呼应 :

实操案例!游戏界面主形象绘制完整思路和过程复盘

三 、飞碟光影质感

基础的颜色铺设好勒,下一步就是改给它加上光影质感了 ,现在它显得很平,不立体 !所以我们要有一个统一的光源方向 ,比如顶光源 ,以 UFO 的身体为例,上半部分整体增加一圈白色,身体就立体起来了 :

实操案例

!游戏界面主形象绘制完整思路和过程复盘

然后单一颜色是不是显得很单调呢?我们可以增加一些颜色,让它显得丰富一些 ,这里可以套用一个简单的设计逻辑方法,我们可以挑选两个对比色 ,一个粉色 ,一个蓝色 ,左边给他染上红色 ,右边给他染上蓝色:

实操案例!游戏界面主形象绘制完整思路和过程复盘

实操案例�!游戏界面主形象绘制完整思路和过程复盘

是不是就丰富多了?接下来我们绘制中间的玻璃罩

①使用内阴影效果绘制玻璃罩的轮廓光 ,让它立体一些 :

实操案例!游戏界面主形象绘制完整思路和过程复盘

②用同样的染色逻辑给玻璃罩丰富一下颜色 :

实操案例!游戏界面主形象绘制完整思路和过程复盘

③强化玻璃轮廓 :复制一层玻璃罩,填充调到0% ,缩小10% ,给玻璃罩绘制一层内边缘 ,这样我们的玻璃就是有厚度的,不会显得很单薄 。

实操案例!游戏界面主形象绘制完整思路和过程复盘

外轮廓也可以强调一下,多复制一层让它明显一些 :

实操案例
!游戏界面主形象绘制完整思路和过程复盘

④绘制玻璃反光玻璃之所以像玻璃就是因为它是有反光的,我们沿着内部的轮廓绘制几个色条,用蒙版擦除色条两端就会得到这种效果 :

实操案例!游戏界面主形象绘制完整思路和过程复盘

现在左边的反光呈现紫色 ,右边的呈现蓝色,我们可以再绘制一个白色的强调它 ,不同的是我们可以给白色的发光增加一个外发光效果 :

实操案例!游戏界面主形象绘制完整思路和过程复盘

这样我们的飞碟的身体就差不多了 ,质感和光影都满满的细节!

四、IP 形象的质感细节

实操案例!游戏界面主形象绘制完整思路和过程复盘

画完了飞碟, 把目光挪到咱们的 IP 形象上 ,可以发现质感明显跟不上了,整个显得很平淡,一点都不立体对吧。我们来看看怎么处理 !先用渐变的方式,选用深蓝色从下到上来一个渐变 :

实操案例	!游戏界面主形象绘制完整思路和过程复盘

使用内发光的效果 ,但是模式选的是正面叠底 ,蓝色 。这样在轮廓边缘形成一圈暗色渐变 :

实操案例!游戏界面主形象绘制完整思路和过程复盘

仔细观察 ,虽然不是特别明显,但是很重要 :

实操案例�!游戏界面主形象绘制完整思路和过程复盘

然后选用更亮的蓝色 ,把额头中心的位置打亮 !

实操案例�!游戏界面主形象绘制完整思路和过程复盘

明显变得立体了很多  ,但是别急 ,还能更立体 !把形象的轮廓复制一层,添加内发光效果 ,填充 0%:

实操案例
!游戏界面主形象绘制完整思路和过程复盘

用来充当形象的轮廓光:

实操案例�	!游戏界面主形象绘制完整思路和过程复盘

一个立体且丰富的造型就完成啦 !把他放到我们的飞碟中去:

实操案例!游戏界面主形象绘制完整思路和过程复盘

一个细节拉满的飞碟就绘制完成啦!过程比较复杂 ,但是分享的都是别人不会告诉你的细节干货  。希望对大家有所帮助!

作者:菜心设计铺


{dede:include filename="menu.htm"/}