您好!欢迎您光临[像素画][教程]Isometric图形_温馨花园!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>网页素材>>>FireWorks专栏>>>[像素画][教程]Isometric图形
[像素画][教程]Isometric图形
发表日期:2009/4/11 22:14:00 出处:插图中国 作者:imick 发布人:xjhbj 已被访问 1231
注解:

本教程的目的是介绍什么是Isometric视角,它是如何被展示的和如何在这种视角下创建图形。

目录:

Isometrics的数学
两种创建方法
创建网格
基本形创建
2D图形到Isometric的转化
雕刻方法
上色和明暗渲染
其他例子

Isometrics的数学

Isometric视角是基于从高处俯视下水平面的网格产生扭曲而产生的视角。如下图所示,正方格在这个视角下变成菱形。 它产生一种“伪”3D感,是一种没有灭点的特殊透视(事实上没有灭点就不是透视了,但还是用这个词比较容易说明问题。-imick),在工程模型上经常使用。

插画中国原创插画 http://bbs.chahua.org

传统的,Isometric视角是基于30° 角的,但是因为这个角度在电脑里显得很不规范且难看,看看下面的示意图就知道了。而取而代之的是一个大概等于26.565°的直线,在电脑显示里这种线条显得很干净整洁。

插画中国原创插画 http://bbs.chahua.org

当然这些关于26.565的数学运算在像素作画时完全没用。你需要关心的只是一个原则:Isometric的线条的构成是横行2像素上提1像素,继续横行2像素,继续上提1像素,如此重复下去。如果你只是将图片转变为Isometric视角(经过扭曲变形)而不是全部像素化时,这个原则则变得更加重要。

两种创建方法

如下图所示,有两种构建Isometric图形的方法。类型A(红)在转角处用了3个像素,而类型B(绿)则用的是2个。

插画中国原创插画 http://bbs.chahua.org

如果你仅仅是画单个物体,两个方法都适用,而且我倾向与类型A,因为它的高光看起来更清楚和整洁,也使每个面都保持一样的尺寸和形状。但是如果你是要制作tiles或者准备将他们放置在网格里,那么就一定要选用类型B,如果不是,你就会得到如下图所示一条齿轮化很严重的外边线。

插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

3个箭头所指的地方就是造成毛病的地方。而如果用的是类型B,这个问题就可以解决了,你就会得到一条平滑的边线。

插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

当然,上色,高光提亮和外边线修饰的选择也是多样的。下面的动画展示了一些基本的方法组合。决定采用哪种方法取决于你将要创建什么样的图形风格。

插画中国原创插画 http://bbs.chahua.org插画中国原创插画 http://bbs.chahua.org

创建网格

如前所述,类型B是最适合用来构建以网格为基础或tile类Isometric图形的方法。现在大家都知道怎么用正确的角度画两条对角相连的线段,但关于怎么铺tiles还是需要解释一下。

插画中国原创插画 http://bbs.chahua.org

为了正确的排列一个tile,黑线应只被用在每个方块(正确的是每个菱形)的两边。希望上面的动画可以说明一下网格的每个组成的tile的实际形状。下面的动画显示了这些形体怎么被组合起来的。非常重要的是要注意到tile的左边缘和右边缘是2像素高的。

插画中国原创插画 http://bbs.chahua.org

这个极度放大的图应该可以让你了解到左右边缘的双像素高度的意义在哪。

插画中国原创插画 http://bbs.chahua.org

下面是两个可能对你有帮助的图形。一个是基本的Isometric网格,另外一个是可以用来填充(PS的fill)完成一个Isometric网格的方形图案。

插画中国原创插画 http://bbs.chahua.org
插画中国原创插画 http://bbs.chahua.org 插画中国原创插画 http://bbs.chahua.org

基本形创建

下面是一些多样的形体和方块的构建:

插画中国原创插画 http://bbs.chahua.org
插画中国原创插画 http://bbs.chahua.org
插画中国原创插画 http://bbs.chahua.org
插画中国原创插画 http://bbs.chahua.org
插画中国原创插画 http://bbs.chahua.org
插画中国原创插画 http://bbs.chahua.org
插画中国原创插画 http://bbs.chahua.org
插画中国原创插画 http://bbs.chahua.org

圆形是最考技术的Isometric图形。但是相对来说平行的或Isometric视角下的扁圆简单一些,那些轮子和中轴倾向右上的圆形就难多了。

插画中国原创插画 http://bbs.chahua.org
插画中国原创插画 http://bbs.chahua.org

顶上的圆形只要画一个正圆做为指导然后压扁就可。但侧面的圆形则需要先画好圆再扭曲变形,就好像上面的动画一样。

2D图形到Isometric的转化

有一点需要着重注意的是你不能单靠变形来将2D图像转换为isometric视角,因为一个2D的图像没有透视上的深度,单纯的靠将图形变形后向后拉伸并不能达到预期的效果。

插画中国原创插画 http://bbs.chahua.org
插画中国原创插画 http://bbs.chahua.org

以上两个图形都可作为旁边小一点的2D视角图形的代表。

单纯的将一个图形变形到26.565°不会给你一个真正的isometric效果。它会显得有点被拉长的感觉。

插画中国原创插画 http://bbs.chahua.org
插画中国原创插画 http://bbs.chahua.org

就像上面的图形所示,单纯的将一个图形变形会使形体显得被拉长。中间的图显示2D视角下和Isometric视角下图形底部的比较:x1 > x2。右边的例子是符合数学原理的正确版本。实际绘画时,图像在变形前先被水平地压扁,但其实通常只创建一些辅助线然后根据辅助线重新绘画会更容易些。变形通常也容易但来不必要的抗锯齿。

如果你仍想运用变形的方法,你需要首先知道需要将你的2D图像压扁到怎样的程度。要计算这个数量,“x”的长度(如下图所示)需要先被计算。

插画中国原创插画 http://bbs.chahua.org

现在计算你需要水平压扁的百分率:将这个x的值除以原始宽度(2)然后再乘以100。

1.7889 ÷ 2 x 100 = 89.443%

雕刻方法

有一个方法,有时被认为是较简易的方法,就是将大的形体切割,像雕刻般把不要的部分切除。请看下面桌子的例子。

插画中国原创插画 http://bbs.chahua.org

首先,标出桌子的四脚。

插画中国原创插画 http://bbs.chahua.org

不要的部分抹掉。

插画中国原创插画 http://bbs.chahua.org

现在的成图看起来很平板。桌脚没有厚度,看起来很薄的样子。这是因为实际上你还会看到每只脚的另外一边,这些面需要被加上。

插画中国原创插画 http://bbs.chahua.org

最后,红色指示线被外边线取代,高光也被加上。

插画中国原创插画 http://bbs.chahua.org

上色和明暗渲染

到现在为止,我只展示了Isometric的数学和基础型构建,而没有提到上色和明暗渲染。但以上的例子提供了形体如何被上色的一些提示。特别是上面桌子的例子。

对Isometric这种独特的“漫画”风格,在形体的最外一层有一条黑色或深色的外边线。(不是在形体的内边线上)

对于一个上色很棒的物体来说,需要有4重明度色彩(还需要有1重外边线色彩)。最浅的一重是高光色。第二重是作为被光照射到的底部色,其他的两重分别作为背光的另外两个面的颜色。在上面的桌子例子里,我还将第二重色彩作为桌脚的边缘的高光色。如果把最亮的颜色用在一个阴影的区域里会显得过亮了。

作为一个简单的例子,我弄好了一个有着奇怪形状的物体的线稿。

插画中国原创插画 http://bbs.chahua.org

然后,我把大色块上好。

插画中国原创插画 http://bbs.chahua.org

下一步,我将内部的黑线条移除并以高光色或暗色代替。这里需要注意的是我仅把高光上在凸角的边缘上。而关于凹角的边缘我则是在两个色部的任意一边上涂上比两色均暗的颜色。

插画中国原创插画 http://bbs.chahua.org

接着我添加了一些窗户(只是色块而已),同样的,朝右的面颜色较暗。

插画中国原创插画 http://bbs.chahua.org

然后在窗户的边缘上涂上了高光,把立体感塑造出来。

插画中国原创插画 http://bbs.chahua.org

最后我在旁边加了些青草增加效果,给草也加了点阴影。

插画中国原创插画 http://bbs.chahua.org

实际大小:

插画中国原创插画 http://bbs.chahua.org

其他例子

下面的图像,来源于
www.eboy.com,展示了一些高光和颜色渲染的技巧(有一点不一致)。注意到小货车的右手边是暗部,但人的暗部却是左手边。但是,货车的其余部分用了最少的颜色来达到最佳的高光和明暗效果。

插画中国原创插画 http://bbs.chahua.org

下面的图像,来源于Habbo Hotel网站(
www.habbohotel.com)

插画中国原创插画 http://bbs.chahua.org

将这副图的局部放大,我们可以更近的观察到细节部分。

插画中国原创插画 http://bbs.chahua.org

以上展示了在内边线上运用细高光线。

插画中国原创插画 http://bbs.chahua.org

这个展示了在不同的物体外部添加黑色外边线来强调他们的效果。注意在大多数情况下,黑色只用在外边线上。

插画中国原创插画 http://bbs.chahua.org

下面这个例子,也是来源于
www.eboy.com,你可以看到运用其他角度的线条来建造不规则图形的技巧。

插画中国原创插画 http://bbs.chahua.org



imick的插画画廊: http://cg.chahua.org/?imick
双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

关闭

琼icp备09005167



温馨花园 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:QQ:365708094 Email:bjxjhyg@sina.com 联系人:简爱

琼icp备09005167