像素画基本技法

随着高清移动显示设备的逐渐普及,网页设计者又多了一项繁琐的工作,需要为高清设备单独制作背景图片,去适应Retina(视网膜)显示。虽然对这项技术本人还未完全掌握,但为了追赶潮流,目前正在制作的新主题也集成了Retina显示功能,需要制作两套尺寸不同的小图标,于是乎画了一天的像素画,创意一般,但小图标清晰、简洁,自己还是比较满意。

像素画基本技法

像素图标

转篇 Photoshop像素画基本技法供大家参考学习。

正如组成汉字有基本的点、横、竖、撇、捺等笔划一样,在像素画中也有规范的笔划,我们称之为基本线条。每种特定线条都是根据像素特有的属性排列而成,并且广泛运用于各类像素画的绘制中。很多人画像素画时总感觉边缘粗糙,主要就是由于线条使用不当造成的。如下图所示,规范的线条所绘制出来的像素画画面细腻、结构清晰;而非规范的线条使用时像素点“并排”“重叠”现象严重。

像素画基本技法
像素画基本技法

下面我们一起来看看像素画中常用的几种线条。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是炎黄子孙,当然是黄皮肤。其次绘制兰色的褂子与红色内衣。这里衣服的颜色只是起到一个辅佐作用,以便协调整体颜色的布局。

像素画基本技法

刻画头发的颜色,为了把额头部分的头发与脑后的头发区分出来,我们用灰色填充前面的头发。同时也对头部的装饰物略作修饰。

像素画基本技法

基 础的颜色绘制完毕之后,拟订好从左至右的光照,开始用较深的颜色刻画发部、http://zmingcx.com/wp-content/uploads/2014/07/pixel/。绘制时你会发现虽然是左部受光右部背光,右部暗于左部, 但是经过光照之后,它们就会产生相互影响的关系。比如,额头的毛发使面部产生阴影,而人物的头部又直接影响脖子与肩膀处的明暗关系。

像素画基本技法

为了继续充实画面,在有限的空间里营造出古典美女动人的形象,我们考虑给她头部添加饰物。饰物造型可根据发型来决定,总之既要简单又要能出效果用来充实发型的单调平板的地方。最后绘制出一面的饰物之后,在通过复制、粘贴、水平反转出另一面的饰物。

像素画基本技法

修饰脸部,在皮肤色与暗面这两种颜色的基础上,使用添加中间色的方法使面部颜色过渡更为自然与饱满。同时眼睛四周的颜色也要稍作刻画,使其与面部更为融洽。

像素画基本技法

为了表现出额头部分的头发的质感,也要做深入的刻画,根据头发垂直的条理,顺着竖向添加亮色烘托头发的质感。在放大与正常显示之间进行比较,可再作修改。

像素画基本技法

最后就是统一整体和一些小细节的刻画了,比如修饰一下环形发髻,画出亮部;描绘眼睛的颜色,用褐色把本来的蓝色部分替换掉等等。一副像素人物作品就算完成了。如果要使你绘制的作品更传神,那就一定要把握人物性格,同时也要溶入自身的感情,作品才会更精彩。

像素画基本技法

当一幅幅以像素画构筑的城市出现在电脑屏幕上,那些精致小巧又气势十足的建筑群在吸引我们眼球的同时也深深的震撼着我们的心灵。通过本文你将初步了解一个建筑物绘制的全过程,并且也希望你能举一反三运用本章所学到的知识构筑出你心中的像素长城来。

像素画基本技法

新建一文档,文档大小200×200PX左右,虽然实际绘制中并不需要这么大文档,但设置稍大点有助于把握空间感。其次考虑绘制建筑物的角度,一般来说22.6度双点线构成的角度是首选。使用双点线构筑出建筑物最为原始的几何形体,那第一步就算完成了。

像素画基本技法

在几何形体上继续绘制屋顶,为了表现出屋顶的倾斜面,这里使用了45度线。同时还要注意的是屋顶是扣在房身上的,其面积应该大于房身。

像素画基本技法

进一步刻画房屋的造型。划分楼层以及房子的门窗。

像素画基本技法

在造型完成后的基础上简单的为房子上一层颜色,绘制出黄墙红顶的效果来。注意区分明暗面,记住如果左面是暗面的话,那右面就是亮面这个道理。

像素画基本技法

上完基础颜色之后再继续对每层楼的窗户以及大门绘制出玻璃的蓝色来。

像素画基本技法

淡化屋顶墙面原本划分区域的黑色线,当黑色线变成淡淡的勾勒线时,此时的房子的效果应该已经出来了。

像素画基本技法

别急着收工,我们再来加工一下房子的质感,在刚刚勾勒的墙线下面我们在提亮一个线,使墙面更具立体感。然后对屋顶也处理一下,这样才能算完成了。如果想在继续做的完整,可以如图一所示对房子的周围进行装饰,添加草坪、树木、花坛等等来美好你的房子。

像素画基本技法
像素画基本技法

 

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
avatar
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:17   其中:访客  15   博主:  1   引用   1

    • avatar 老虎 5

      牛逼,鸟哥V5,拜服

      • avatar 我爱上QQ 6

        这个新主题加载很给力的说~

        • avatar 子穹 2

          涨姿势了

          • avatar musk100 4

            前排 支持

              • avatar 创月 1

                @musk100 我也在使用这个主题 但是我菜鸟 我想问一下 您能告诉我 你是怎样给每个页面添加keywords的吗

              • avatar 屠龙 1

                画的还挺不错的。

                  • avatar 都是 0

                    @屠龙 迎 都是 再次光临 修改信息

                  • avatar Jeff 0

                    小图标的话直接用font icon不是更加方便吗?

                      • avatar 知更鸟 Admin

                        @Jeff 好主意
                        不过我更喜欢个性化的图标,看来还得学着作图标字体

                      • avatar JV 2

                        酷啊,我是第一次见到这种教程。可能是平时接触这方面太少了,只知道用矢量字体。

                        • avatar 幻月无名 3

                          老大,你就是神一样的存在啊,全才啊,羡慕啊,什么时候能帮我们做个Logo什么的啊,嘻嘻

                          • avatar php程序员 1

                            以前老的游戏就是这种像素化的界面了,很怀念。

                            • avatar 第五代官网 0

                              画的非常不错哦,支持。

                              • avatar 小萝卜丁 1

                                仙剑98版。玩过的都懂得

                                • avatar 美Win网 4

                                  新版本已经更新了!!CC 2015,感觉还不错!虽然我用的是盗版的

                                  • avatar 软膜天花 4

                                    好专业!

                                  • 来自外部的引用: 1

                                    • 博狗888