编者:我们这里说的“像素画”并不是和矢量图对应的点阵式图像,像素画也属于点阵式图像,但它是一种图标风格的图像,更强调清晰的轮廓、明快的色彩,几乎不用混叠方法来绘制光滑的线条,所以常常采用gif格式,同时它的造型比较卡通,得到很多朋友的喜爱。绘制这种像素画除了须具备相当的耐心之外,造型、绘制方法也很重要。本系列教程将由浅入深介绍绘制像素画的各种绘制方法和技巧,希望大家喜欢。
(注:文本插图中标注PIXEL FOREST字样的由本文作者郎绘制,其余插图由ICONCN的Jill绘制,在此表示感谢。)
当许多不同颜色的点一个个巧妙的组合与排列在一块后便构成了一副完整的图象,这些点便称为像素(pixel),图象称之为Icon(图标)或者称为像素画。其它的点阵式图象虽然也由像素组合而成,但是它们在制图过程中并不是十分强调像素,甚至根本无需去考虑到像素的变化,与之相比像素画对于像素更是逐个描绘,处处见真章。
作为像素画来说应用范围相当广泛,直至今天我才恍然大悟,原来从小时候玩的FC家用红白机的画面直到今天的GBA手掌机;从黑白的手机图片直到今天全彩的掌上电脑;即使我们日以面对的电脑中也无处不充斥着各类软件的像素图标。如今像素画更是成为了一门艺术,深深的震撼着你我。下面我们就来谈谈第一步,工具的选择和使用。
像素画欣赏(建筑)
当以Photoshop作为绘制像素画的工具时,首先当然是要掌握Photoshop的使用,如果你从没有接触过Photoshop,那你可以先用Windons自带的画板工具来代替。
其次是要善于利用Photoshop的功能上的优势:
1、画布大小你可以随意设置(但是分辨率最好保持在72dpi左右);
2、各类工具的快捷键以及便捷的复制粘贴功能;
3、网格、标尺、辅助线功能帮助你正确定位;
4、最最强大的图层功能,让你随心所欲,驰骋画布。
5、双窗口功能,复制出一个内容、名称完全相同的视图,一个放大了绘制用,一个保持100%大小预览用,这对绘制像素画而言是很重要的一个功能。(菜单View/New View)
6、历史记录功能等。
正如组成汉字有基本的点、横、竖、撇、捺等笔划一样,在像素画中也有规范的笔划,我们称之为基本线条。每种特定线条都是根据像素特有的属性排列而成,并且广泛运用于各类像素画的绘制中。很多人画像素画时总感觉边缘粗糙,主要就是由于线条使用不当造成的。
如下图所示,规范的线条所绘制出来的像素画画面细腻、结构清晰;而非规范的线条使用时像素点“并排”“重叠”现象严重。
1、22.6度的斜线
选取铅笔工具并选择1像素的笔刷,以两个像素的方式斜向排列,共分为双点横排、双点竖排两种排列方法。此类线条较常用于建筑的描绘,因此3D建筑的统一透视角度也为22.6度。
2、30度的斜线 选取铅笔工具并选择1像素的笔刷,以两个像素间隔一个像素的方式斜向排列,当竖向排列时则形成了60度的斜线,此类线条使用较为灵活,经常与其它线条配合使用,以便完成一些特殊的造型。
3、45度的斜线 选取铅笔工具并选择1像素的笔刷,以一个像素的方式斜向排列,此类线条掌握比较简单,较常用于平面物体以及建筑斜面的绘制。
4、直线 选取铅笔工具并选择1像素的笔刷,同时按住Shift键,拖动鼠标就可准确的绘制出直线来。
5、弧线 因为弧度大小的关系,因此弧线画法有很多种。选取铅笔工具并选择1像素的笔刷,分别以像素3-2-1-2-3、4-2-2-4、5-1-1-5的弧型排列,其排列具有一定的规律性以及对称性,如图所示。此类线条较常用于人物头像、动物的绘制。
定义成笔刷,可以大大的提高工作效率。
自定义笔刷具体步骤如下:
步骤一:新建一个文档,大小随意,解析度设置为72dpi左右以及RGB色彩模式,选择背景色为白色,前景色为黑色。
步骤二:选取铅笔工具并选择1像素的笔刷,分别绘制线条或者基础图形。
步骤三:绘制完一个线条或者一个基础图形之后,选择Edit—Define Brush(编辑—定义画笔),这时画面上你绘制的线条或者基础图形就会定义成一个新的画笔,画笔控制面板中也会出现。
步骤四:当你自制完自己的所有个笔刷后,你可以把原有的笔刷一个个清除掉,然后点击画笔控制面板上的圆形小三角,选择“存储画笔”,这样一个完全属于你自制笔刷文档(.abr)就完成了。你可以随时根据你的需要,“载入画笔”或者再增添新的笔刷。
等边三角形
选取铅笔工具并选择1像素的笔刷,绘制一条60度的斜线(图示红色部分)然后再绘制一条与之相对称的斜线,最后连接两条斜线,等边三角型就完成。如果把60度的斜线换成45度斜线的话,则能完成直角三角型的绘制。
矩形 众所周知四条直线就能构成一个矩形,但是在像素画中当矩形非水平位置时,画法就有所不同。选取铅笔工具并选择1像素的笔刷,以双点横线与双点竖线的画法构成矩形,如图所示。
圆角 选取铅笔工具并选择1像素的笔刷,任意画一个矩形,选择其中一个直角,在直角线内画弧线,最后删除多余的部分,完成圆角。弧线的弧度决定着圆角大小,弧线的弧度越大则圆角就越大。
圆形
在像素画中四分之圆弧直接决定着整个圆型的大小。选取铅笔工具并选择1像素的笔刷,使用画圆角的方法绘制一段弧线,把握好弧线的对称性,最后通过水平翻转和垂直翻转那短弧线组合成圆形。
在透视学中,透视可分为形体透视(几何形透视)和空气透视。
形体透视是根据光学和数学的原则,在平面上用线条来图示物体的空间位置、轮廓和光暗投影的科学。
空气透视研究和表现空间距离对于物体的色彩及明显度所起的作用。因为透视现象是远小近大,所以也叫“远近法”。
按照灭点的不同,分为平行透视(一个灭点)、成角透视(两个灭点)和斜透视(三个灭点)。而像素画中绘制一点、两点以及三点透视的线条很难有规律可寻循,因此像素画中的透视法简化变通了上述的透视规律。根据像素线条的特有属性,一种没有灭点的俯视平行透视被广泛的运用起来。
1、22.6度透视
因为像素画通常是用来绘制精致小巧的造型,并且我们知道像素画中线条运用十分讲究,因此为了符合人们的视觉印象和便于绘画,这种以22.6度双点线组合而成的俯视平行透视成了像素画透视绘制的最常用透视。
如图所示,正方体的透视就是以22.6度的双点线构成,左右两个面透视角度一样,并且每个面都是平行四边型;整体结构清晰明朗,造型表现直观,并且易于掌握。
2、45度透视
虽然转变了角度,但是每个面都是一个平行四边形这个透视规律是不会改变的。但是由于左右两个面透视角度一不同,所以在实际的绘制中很难把握好,大家应该多观察多动手。
3、圆柱的透视
以顶面的椭圆的圆度来决定俯视角度的高低,如果椭圆越接近圆则俯视角度就越高,反之椭圆越扁则俯视角度就越低,如图所示。
4、锥体的透视
锥体分为四面锥型,圆锥型等等,但是画法是没有区别的,底面决定锥体的大小,斜线控制着锥体的高度。总的来说,还是要多加练习,尝试用不同角度的斜线来绘制各种高度的锥体。
练习示例
造型是体现像素画特征的基本要素。造型的能力一方面来自于平时生活中知识的积累;另一方面则可以借助图片资料作为参照;甚至通过临摹优秀的像素作品以及对素描、速写等艺术学科的参透也能提高我们的造型能力。
通俗一点来说造型就是用来表现作品形态的一种构图概念。学习造型没有捷径可寻,只有通过多看、多记、多学、多练才能有所提高,因此本章学习的并不是教你如何去造一个型,而是引导你有一个正确的造型思维方式去造更多的型。
造型方法之一、把造型复杂的东西简单化
如图所示,这是一个打开的盒子。在构思一个打开的盒子时,首先想到的不是打开的盒子如何难画,而是盒子的整体形态是什么,根据这个形态再去想象出盒子的大体的形状,最后才去考虑把盒盖如何打开。此种方法虽然过程烦琐,但是有利于把整体不至于产生严重的变形,非常适合初学者。
造型方法之二、逐步深入刻画
在鼠标随意绘制出来的草图基础上,一步一步的深入下去。如图所示,海豚的造型过程,粗糙的草图通过一步步调整形态、柔化线条之后出现了精致的造型。此种方法虽然虽然简便,但是对于没有一定美术基础的人来说不易掌握。
造型方法之三、寻找图片资料作为参照
当你为表达不出心中所想而困惑时,不妨试着找找相关的图片资料。如图所示,那是一台笔记本电脑的图片,通过对图片的提炼与加工,很容易一幅像素画就完成了。其实通过图片绘制像素画更有小窍门,比如在Photoshop中打开一个图片实例,缩小并且降低该图片的透明度。随后新建一层,选取铅笔工具并选择1像素的笔刷勾勒出造型的轮廓,这样就把一造型简单绘制出来了。
但是要注意的是这样做虽然有了造型的形,但是还是缺少造型的神。还是那句话多看、多记、多学、多练才是造型的学习方法。
要理解和运用色彩,必须掌握进行色彩归纳整理的原则和方法,其中最主要的是掌握色彩的属性。像素画中色彩运用当然也遵循着这种规律,但是在这里我们并不会去解析这些烦琐的问题。毕竟这只是一篇像素画的教程,如果想要深入这些问题,不仿可以找些关于色彩的明度、色相、彩度以及色彩混合、色彩对比、色彩搭配等文章来读一下。
针对像素画色彩运用,我们大致可以简单的理解成为:平面的纯色填充、中间色的过渡、色彩明暗关系的确立。而其中平面的纯色填充,并没有任何技巧性的东西,只要有足够的耐心就可以了。因此本章着重于像素画颜色过渡规律的学习。
像素画颜色过渡方法之一、均匀过渡
同一色系中把颜色由深至浅或者有浅至深的排列,以起到均匀渐变的效果。此种过渡方法普遍运用于小范围的像素绘画中。如图所示:
像素画颜色过渡方法之二、双色过渡
根据其中一种颜色点的疏密排列,产生过渡效果,此种过渡方法较常用于平面的绘制上。绘制这些点因为具有规律性,所以这时你可以使用一下复制与粘贴功能,将会大大改善你的工作效率。如图所示:
像素画颜色过渡方法之三、圆柱体过渡
同一色系多种颜色的渐变过渡,以至达到一种立体感,此种过渡方法适合于圆柱类物体的上色。如图所示:
像素画颜色过渡方法之四、网点渐变过渡
另一种平面的过渡方法,在一种颜色的基础上再叠加网格,绘制出的物体过渡自然,颜色饱满,但是难度较高,不易掌握。如图所示:
在像素画中仅仅把握住了明快的色调还不够,有时画面的色彩仍然不够生动,这是因为在色彩的运用还缺少明暗的变化。
只有遵循物体与光源之间的变化关系,才能表现出既生动又符合我们视觉印象的像素画来。
当我们准备绘制一幅具有明暗的变化关系的像素作品时,首先要定好光源的所在位置,其次根据光源的照射再在物体上添加亮部、中间色、明暗交界线、反光、投影,如果绘制的像素作品很微小的话,那就只要把握好亮部与暗部就可以了。
物体的明暗刻画
如图所示,在A图的基础上考虑进去光源照射的方向并且把握好物体的受光面与背光面。其中应当注意的是物体无论是受光部分还是背光部分的色调要与整体色调保持一致,亮部可以由主色加白色或浅色提亮,而暗部可以由主色加黑色或深色转暗。
人物的明暗刻画
如图所示,比物体的明暗刻画要来的复杂,虽然受光照射的方向一样,但是人的头发、帽子、皮肤、穿戴的色调以及物体质感皆有所区别,因此我们还是应该根据物体属性分别来刻画它们。如果有背景的画,有时还要考虑一下背景对人物的反光,也就是我们说的环境色。
重叠物体的明暗刻画
如图所示,两个或者更多物体重叠在一起时,除了要遵循明暗的变化规律,而且还要注意物体与物体之间重叠时产生的叠影,这样物体之间将更具真实感。
当我们看见生活中琳琅满目的物品时,可曾想过用像素画的形式把它表现出来。本章将通过一套茶具的绘制来阐述一下物品类ICON的绘制全过程。
首先绘制出茶具的整体轮廓,看似简单的一步,其实是最花工夫的,为了表现出真实的物体形态,最好找到图片或者实物进行参考。绘制轮廓过程中你要考虑到静物的绘制角度,把握好整体的透视关系,因为一些物品都是我们日常生活中常见的,已经在脑海中留下了很深的印象,如果在绘制时稍微有些变形,我们看着就会产生别扭感。
其次为茶具的整体上色,在这里要绘制的是一套白色茶具,所以根据拟订好的光源照射方向以及物件之间的相互影响的关系,为茶具铺上的是一层灰色,确立出茶具的底盘、杯身、杯口几个面来。
接着继续着色,在确立出茶具的底盘、杯身、杯口几个面的基础上根据从右至左光源照射方向的调节三者的明暗关系。如:把杯口的黑线提亮,这样杯口就更显立体感。此时基本的明暗关系已经确立,但是我们应该注意的是确立的只是三者各自的明暗关系,整体的明暗并没有统一。
然后继续刻画茶具,为了把底盘、杯身、杯口的明暗过渡表现的更为细腻和自然,再次刻画三者的明暗关系,并统一整体的明暗。此时为了使茶具的整体布局更为充实,我们再为茶具放置一把小勺。
最后,仔细观察一下整体的明暗关系,调整一下底盘、杯口、杯炳、小勺的高光与暗面部分细节,一副像素画作品就这么完成了。
像素画中绘制动物造型有着写实与卡通之分,但因像素画皆以小巧可爱著称,所以绘制像素动物画时也大都采用卡通造型。
绘制卡通动物,有几个好处,一是不用刻意准确把握现实中动物的形态,适度的夸张变形可以让形象更加生动可爱;二是上色更为简洁明了,容易博得别人的好感;三是图片资料随手可得,想画什么就什么。
本文将通过一只卡通狮子的绘制来阐述一下动物类ICON的绘制全过程。
新建一32×32的文档,绘制出狮子的轮廓。在绘制左右结构对称的作品时,你可以先出绘制一半来,而后再复制粘贴出另一半来,最后水平翻转对齐两半就可以了。这个狮子的造型,我主要参考了迪士尼的狮子造型再加以修改就成了现在的样子了。参考造型时要抓住动物的特点,才能为自己所用,比如狮子显著的特点就是鬃毛、鼻子、脸部等。
因为整个狮子轮廓是对称的,看上去就显的不够真实。所以就要对对鬃毛做些调整,如狮子额头,下巴的毛从新整理之后就显的更为自然了。其次就要为狮子整体铺上颜色,这里无须考虑很多,只要区分出皮肤,毛发这两个块面就足够了。
上完主色,就要考虑明暗了,假设光源是从左至右照射过来的,那么狮子的左侧就应该是受光部分,右侧就背光部分(暗面)。遵循这个原理在原有颜色的基础上加深颜色绘制暗面。同时由于狮子下巴鬃毛对胸口的影响,所以胸口也应该出现阴暗面。
此时狮子的皮肤上已经有了原色与暗面这两种颜色,我们可以继续在这两色之间添加中间色,使其肤色更为饱满生动。
其次刻画细部,调整一下颜色,如狮子的眼睛,鼻子,嘴巴等部分。由于下巴上的毛是往下生长的,适当柔化一下下巴与鬃毛之间的黑线,用深于毛色阴影的颜色描边。
最后,由于左侧头部毛发反光的关系,所以还要在这个部位提亮颜色。一幅像素动物作品就大功告成了。
谁不想在BBS上有一个个性的头像或者在自己的留言本中有一套专用的人物图标呢。因此像素人物绘制受到很多人的追捧。越来越多的人正因为忠爱于这方寸之间的“精灵”,才渐渐走进了像素画的领域。那么本章将通过一个古代MM头像的绘制引导你进入个性头像绘制的世界。
新建一32×32的文档,使用辅助线大致划分好中心线、头顶、眼睛、下巴、身体的各部分。紧更着就是用黑色绘制出人物的轮廓。绘制人物轮廓时人物的轮廓并不是一步就要求画完整,往往是需要反复的修改才能有一个比较合理的雏形。当然在这所有的之前,你首先要脑海里确立一个人物影象或动作,明确自己所要画的是人物风格是Q版的、漫画的、还是写实的。
塑造好基础造型以后(但是这里要提醒大家,人物造型虽然塑造好,但是在接下来的过程中始终还要边画边改,直至完成),可以开始上色了。首先确定MM的肤色,不容质疑MM是炎黄子孙,当然是黄皮肤。其次绘制兰色的褂子与红色内衣。这里衣服的颜色只是起到一个辅佐作用,以便协调整体颜色的布局。
刻画头发的颜色,为了把额头部分的头发与脑后的头发区分出来,我们用灰色填充前面的头发。同时也对头部的装饰物略作修饰。
基础的颜色绘制完毕之后,拟订好从左至右的光照,开始用较深的颜色刻画发部、面部以及衣服处的暗面。绘制时你会发现虽然是左部受光右部背光,右部暗于左部,但是经过光照之后,它们就会产生相互影响的关系。比如,额头的毛发使面部产生阴影,而人物的头部又直接影响脖子与肩膀处的明暗关系。
为了继续充实画面,在有限的空间里营造出古典美女动人的形象,我们考虑给她头部添加饰物。饰物造型可根据发型来决定,总之既要简单又要能出效果用来充实发型的单调平板的地方。最后绘制出一面的饰物之后,在通过复制、粘贴、水平反转出另一面的饰物。
修饰脸部,在皮肤色与暗面这两种颜色的基础上,使用添加中间色的方法使面部颜色过渡更为自然与饱满。同时眼睛四周的颜色也要稍作刻画,使其与面部更为融洽。
为了表现出额头部分的头发的质感,也要做深入的刻画,根据头发垂直的条理,顺着竖向添加亮色烘托头发的质感。在放大与正常显示之间进行比较,可再作修改。
最后就是统一整体和一些小细节的刻画了,比如修饰一下环形发髻,画出亮部;描绘眼睛的颜色,用褐色把本来的蓝色部分替换掉等等。一副像素人物作品就算完成了。如果要使你绘制的作品更传神,那就一定要把握人物性格,同时也要溶入自身的感情,作品才会更精彩。
当一幅幅以像素画构筑的城市出现在电脑屏幕上,那些精致小巧又气势十足的建筑群在吸引我们眼球的同时也深深的震撼着我们的心灵。
通过本文你将初步了解一个建筑物绘制的全过程,并且也希望你能举一反三运用本章所学到的知识构筑出你心中的像素长城来。
新建一文档,文档大小200×200PX左右,虽然实际绘制中并不需要这么大文档,但设置稍大点有助于把握空间感。其次考虑绘制建筑物的角度,一般来说22.6度双点线构成的角度是首选。使用双点线构筑出建筑物最为原始的几何形体,那第一步就算完成了。
在几何形体上继续绘制屋顶,为了表现出屋顶的倾斜面,这里使用了45度线。同时还要注意的是屋顶是扣在房身上的,其面积应该大于房身。
进一步刻画房屋的造型。划分楼层以及房子的门窗。
在造型完成后的基础上简单的为房子上一层颜色,绘制出黄墙红顶的效果来。注意区分明暗面,记住如果左面是暗面的话,那右面就是亮面这个道理。
上完基础颜色之后再继续对每层楼的窗户以及大门绘制出玻璃的蓝色来。
淡化屋顶墙面原本划分区域的黑色线,当黑色线变成淡淡的勾勒线时,此时的房子的效果应该已经出来了。
别急着收工,我们再来加工一下房子的质感,在刚刚勾勒的墙线下面我们在提亮一个线,使墙面更具立体感。然后对屋顶也处理一下,这样才能算完成了。如果想在继续做的完整,可以如图一所示对房子的周围进行装饰,添加草坪、树木、花坛等等来美好你的房子。
像素人物头像的绘制
作者:ilou 来自:点格城市
步骤一:首先用像素点勾勒出人物脸部轮廓,注意对称。
步骤二:添加五官,铺大体色调(上底色)。
步骤三:添上阴影色和亮部色,使头像饱满起来。
注意:掌握头发、眉毛、腮部、眼睛的上色方法。
表现一:使眼色。
表现二:戴上棒球帽。
表现三:戴上眼镜,看上去像球星。
最后效果。
总结:在基本的脸型上有目的地添加,就能有丰富表现。
像素线条的描绘方法
步骤一:在PHOTOSHOP里选取铅笔工具,把笔刷调成 [Square Brushes.abr] First Step:Choose pencil tool in photoshop,brush is [Square Brushes.abr] |
|
步骤二:选取最小的。画的时候可以放大到300%–400% 下绘画,然后恢复100%看效果。 Second Step:Choose 1px pencil, paint in 300%-400% picture then look effect in 100%. |
|
正确一。 Right Way One. |
|
错误一。 Wrong Way One. |
|
正确二。 Right Way Two. |
|
错误二。 Wrong Way Two. |
|
要点:避免像素点之间的并排排列。 KEY:Dont paint pixel point side by side. |
|
线条一:单点线。 Line One:one point line. |
|
线条二:双点线。 Line Two:two points line. |
|
线条三:三点双间线。 Line Three:three points with two points line. |
|
线条三:圆线。 Line Four:circle line. |
|
线条五:纵向双点线。 Line Five:erect two |