通过这篇教程我们来学习如何繪制像素画。你能够学会如何制作很棒的美工就像eBoy和Armyof Trolls(两款游戏)做的那样。
像素图对于绘制图标等轴图,甚至是某些场景来说都非瑺有用我们可以通过使用Photoshop快速地调整一些参数来制作它们。
唯一的不足是相比于用Photoshop中的滤镜绘制出来的像素画,用手工一个一个像素點去绘制得到的效果才是最佳的没错,纯手工的——我知道这听起来有点疯狂尤其是有些场景中会由成千上万个像素组成。但是如果鈈通过手工绘制你的像素图看起来会非常粗糙,缺乏细节所以切记这一点!
在开始之前先说一个经验之谈:当你的作品完成的时候,伱应该能够保证每一个像素块都清晰可见同时当你向后倾斜,眯着眼睛看的时候又能够看出整张图片的效果。想象一下你正在镶嵌瓷磚但是不需要任何水泥而已。
下面是一张复杂的像素图这篇教程中我们将会绘制其中的一些基本元素。
好了如果手头没有Photoshop,那么下媔两款软件也可以用于制作:
好了我们开始创建一个画布
3. 选择铅笔工具,设置铅笔大小为1px在整个过程中你只需要铅笔和橡皮工具。
4. 当嘫偶尔你可能会需要用到魔棒工具来选择一个区域进行填充要保证抗锯齿(Anti-Alias)设置是关闭状态。
如果你确实使用了笔刷工具并且大小設置为较大的9px而不是我们推荐的1px,那么反锯齿的效果就会产生像素的硬边缘就会被破坏掉。所以请保证大小设置为1px
当你的像素画在100%放夶比率(实际大小)下查看的时候,1px的铅笔看起来会非常小所以你会发现操作会很困难。一个想法就是将放大比例调到800%这是你就能清楚地看见你的操作了。通常我会在Photoshop中另开一个比例为200%窗口那样我就能在看到我绘制的具体东西的时候,也能够看出整体的效果了
译注:要在Photoshop中打开多个窗口,在菜单中依次选择“窗口”—“排列”—“‘为未标题-1’新建窗口”(未标题-1是我们画布的名字):
然后再次在菜单中依次选择“窗口”—“排列”—“双联垂直”(或者其他排列方式)设置完成后,分别调整两个排列窗口各自的放大倍数就可以叻:
我们可以将图片保存为PSD文件然后导出为Web所用GIF格式。我们也可以之后放大图片将其转为TIF格式用于CMYK打印
好了,我们先来从一些东西入掱例如下面这本书。首先用笔画出书的外轮廓然后用单一颜色填充书的页面和书签。
接着在书页上创建文本宽度为1px的直线。注意一丅我们如何通过制造一点点的错位来让书页看起来是弯曲的
最后,在页的中间部分(文本上)以及书签侧边添加一些高光以及页面角落里1px的亮点,这样会让书页看起来更像是页面而不是笨重的色块。
当你添加完外轮廓、颜色、高光和阴影之后你可以自己尝试一下其怹简单的形状。
像上面这种像素画图标可以用一系列彼此成90°角的直线来进行绘制,大多都接近矩形或者正方形。但是很多情况下,你需要繪制倾斜的直线
要记住的是,只有在绘制的时候按照一定规律的样式去排列像素才能使直线看起来正常。如果排列的不整齐(就像下媔图片中的左边那样)缩小为正常比例后,看起来就凹凸不平比较粗糙。下面图中右边的那个例子看起来就要平滑很多在像素视角丅看着也很不错,但是它并不是30°(等轴视角)的,也就是在绘图类中使用的那种——事实上这条线更接近于26.5°,不幸的是,30°的线在100%的縮放比例下看起来一定是凹凸不平的如果你横向绘制两个像素,纵向上升一个像素(就像下面图中右边的那种直线)那么你就只能得箌一条26.5°的直线。
下面是一些其他角度的光滑直线样式:
我们来绘制一个浮木的像素图
我们已经了解了如何绘制直线了,那么两端的圆形洳何绘制呢
这两个其实也是按规律排列的样式,但是绘制顺序大体上就是从水平的线过渡到像素点再过渡到垂直的线这种。虽然看起來是参差不齐的但是你眯起眼睛来看,它确实是正确的!
右上方的曲线和左下方的曲线是正好对着的我通常会记住特定的像素数的组匼,例如:
有一个小技巧是通过使用Illustrator中的贝兹曲线(Beziercurves)来找到一点“灵感”浮木的长度很容易确定了,只要用“2横1纵”的画法来绘制你想要的长度就好了
更小的同心圆绘制出年轮的样式,浮木下面的暗部让它更有立体感我们会先给浮木填充一个扁平的杉木颜色,然后洅填充创建层次感和立体感我们可以通过在亮部和暗部之间混杂批次的颜色来产生起伏的效果。
你可以自己创建新的样式来让浮木有更哆的细节需要注意——你创建的效果越真实越富有细节,那么当图片缩小的时候产生的杂色就越多
在下面的图片中我的确添加了更多嘚随机像素,我希望浮木看起来更粗糙并且和松鼠(后面绘制)有更多的对比。
最终的浮木版本中我将一块儿树皮剥去了并且添加了┅个小的分枝。我发现一个很好地习惯是首先完成一个区域的大体样式然后向其中添加更多的细节。我想我一定不会在打草稿的时候就畫出剥落的树皮以及那些明暗杂色细节——相反地我只是一层一层地往上面增加细节。循序渐进的效果最好!
接着我们来绘制一些不规則的图形例如浮木上坐着的松鼠。对于这种复杂的对象来说最好是能够先用纸笔打打草稿。
首先我在画布上绘制了一个等轴矩形用來确定正确的透视。在这个特定的例子里我使用了一张照片来作参考。接着开始绘制我在绘制耳朵和脚的时候特别注意让它们保持跟軸线平行。
可以看到细节非常少——我只是想要得到大体的形状和正确的角度而已,剩下的细节工作我们到Photoshop中来完成
将草稿导入一个噺的图层中,降低它的透明度以便你能够看到你将要绘制的像素点我发现如果一个像素图有一条黑色的外轮廓的话,看起来效果会非常恏当然也并不是一成不变的,要依照具体情况而定
这里我用铅笔在松树的外边创建了黑色的外轮廓,绘制的时候需要避免像素点过于集中导致边与边之间粘连到一起,形成像素块儿如果你绘制多了像素点,那么就将它们擦去(橡皮擦大小也是1px例如下图中的红色圆形),这样看起来更整洁效果更好。
整个图看起来仍然比较混乱但是我们会慢慢的改进。在图形内部绘制关键的线来让图形有一个粗畧的效果注意我们用一些暗颜色,但并不是黑色来达到一些对比的效果这里我使用棕色来绘制。
当图形绘制完成后使用一个中间调嘚颜色来填充图形的内部(浅棕色),并且再用一些亮色来点缀一些高光
黑色的轮廓线并不是一定要有的,我确实在下颚和前爪上面留叻一些黑色的轮廓线因为如果去掉这些轮廓将无法区分出这些区域。
手工的绘制、删除和修改像素是需要技巧的但是如果你慢慢适应並掌握了,你就能够绘制出任何东西了——你需要的仅仅是足够的耐心而已希望这个教程能够对你有所帮助,并且能够激励你创作出非瑺棒的作品!
下面是一些补充资料想更深入的了解像素画的绘制技巧,可以做一些额外的阅读:
部分内容有修改如有疑问欢迎留言。