网站建设

全网流行的像素风插画怎么做?看这篇教程就够了!(上)

发布时间 :2020/08/20

大家好,我是好久不见的韩别扭。在姐妹的不懈努力下(扛起了写教程的重任),我成功胖了6斤。

为了减肥,我吐血为大家整理了一篇全网方法最齐全的保姆级像素风插画教程~PS,AI,包括一个专用的像素风软件「Aseprite」统统教给你,让你成为全网最会画像素风插画的小能手~


一提到像素风,大家应该马上就能想到超级玛丽,魂斗罗,以及我最喜欢的雪人兄弟等红白游戏机的游戏了。

说起像素风,就不能不提他的前身——法国新印象派(点彩派)的创始人之一画家Paul Signac。


像素风真正进入我们的生活,是因为任天堂开发的游戏机,也就是80后90后的童年记忆了。1970年代晚期和1980年代早期的电脑试用的是8位元处理器,受制于内存大小,显示色彩单一,只能使用最原始的计算机图像表现形式。受制于颜色数量和颜色种类,游戏开发只能使用有限资源。早期的像素风就这么形成了。

发展至今,像素画并没有被逐渐替代,而是演变成了一种独立的数位艺术创作风格。很多优秀的插画师用他们的插画告诉我们,像素风插画的魅力之处。俄罗斯插画师:waneella


日本插画师:1041uuu (豊井祐太)

当然,除了记录生活及风景外,像素风也可以与类似于2.5D插画,UI图标制作,人像插画等结合,形成更有趣的像素风插画,简直是万物皆可像素画~

说了这么多想必你对像素风也有一个大致的了解了,在别的00后小伙伴不太理解这种风格的时候,也可以拿出来和他说道说道。那现在让我们正式进入今天的主题吧~

知识重点:三种软件的不同操作方式操作工具:根据喜爱程度自选PS或AI或Aseprite操作难度:软件小白插画小白都友好


在开始前,我们需要确定主题并根据主题搜索图片。这一part在我们前面的很多教程都提到过,这里就不着重说了。大家可以自行点击标题链接再看一遍相关的教程,包括下面的线稿步骤也是一样的,只是用像素风的方式去完成,毕竟万物皆可像素化嘛~例如:你要画的是2.5D的像素风,可以点击查看:《一键解锁时下流行的2.5D商业插画》人像插画:《如何用插画低调而又装逼的拍老板马屁?》

贴纸图标:《不会画画怎么了?手残照样画出一套自己的贴纸!》风景建筑插画:《 一篇文章学会三种画风!!》卡通形象:《一个被偶像翻牌的机会:巧用Ai创作影视剧卡通形象!》


经过几个词条的搜索,我得到了下面几张图片,用于本次的教程讲解。


在正式开始前,我要和大家说一说像素风中最重要的线条处理,即轮廓边缘的处理。

像素风的线条分为直线,斜线和曲线。其中斜线和曲线容易画出断裂或者锯齿,使画面不够干净。

很多作者为了让画面更加干净,边缘轮廓大多为45°斜线和直线。


那断裂是什么呢?以斜线和曲线为例。


斜线:可以分为45°斜线和其他斜线。其中红色的部分称为锯齿。


曲线:确保曲率在下降或上升时保持递增或递减的状态,使边缘轮廓更加整齐有序,避免锯齿。

下面这个作者的画面看起来既干净又保留了像素风的特点,就是对线条的把控比较准确。


* 图片来自网络

但是,如果画面复杂,锯齿是几乎不可避免的,我们能做的是在画的时候尽量避免,多去尝试。



首先,我们先说说AI软件。这就到了我的主场了。AI画像素的优点是不受画布的限制,操作难度比较低。但是由于AI绘制像素风是用「矩形网格工具」点出来的,个人觉得还是用在比较小的插画绘制上,例如像素风图标,像素风卡通形象。


新建文档新建一个1000*1000像素的画布,颜色模式为RGB。


绘制网格找到「直线工具」,将鼠标光标放置在上面,鼠标右键,在弹出的窗口中选择「矩形网格工具」。


将鼠标光标移动到画布并单击鼠标,会弹出一个弹窗:「默认大小」1000px*1000px,「水平分隔线」数量:20,「垂直分隔线」数量:20,并勾选第一个选项。(网格数千万不要贪心建多了,不然玩久了眼睛真的很疼)

网格建好之后,将它与画布水平+垂直居中。

准备色板为了更方便上色,我们可以先绘制一个自己的色板。用矩形画出需要用到的颜色,颜色可以在照片的基础上吸色并调高饱和度,也可以调整为你想要的色调。由于我的底色是紫色,所以整体的颜色都往紫色调偏。

绘制描边接下来就开始进入正题了。首先说一下我们接下来要使用的工具——「实时上色工具」。

将照片拖进ai,透明度降低并「ctrl+2」锁定。

选中网格,点击实时上色工具,按住alt吸提前做的色板颜色,并在每个方框内进行点击,就得到了一个色块,滑动鼠标就得到了一条轨迹。

如果一时画错了想要删除,在实时上色工选择具下,选中方块,点击delet删除即可。

我们先从描边开始。描边要注意对照片进行概括,尽量用直线去表达,并且尽量保持对称。

TIPS:针对不规则的图形,可以提前用钢笔工具在照片上将大致的形勾出来,穿过的部分(超过半格)就是要填格子的部分。刚好半格的部分需要同学们根据具体情况去定,以最大化将形态表现出来为目标。

填充颜色接下来我们就可以把底图删除了。可以先填充一个底色,再开始上色。

我将可乐分为三块层次,并将相应的颜色填充进去,同样使用实时上色工具。如果没有把握,也是一样使用钢笔工具先勾出大致轮廓再去填充。

柠檬使用两个颜色。在填充的时候要分清上下顺序,记得把相交的部分填上。

可乐剩余部分使用白色填充。

增加细节增加高光和阴影。加入一些玻璃的高光和阴影,阴影在底部,高光用一个小点去表示即可。

接下来给图标加入厚度感。在外轮廓描1-2层白边。

接着在底部加入厚度和阴影。

删除网格接下来,我们把网格删除。如果有同学觉得加细节的时候网格会影响你的感官,可以把这一步提前。选中网格,「对象」—「扩展」,默认勾选,按确定。接着取消编组,把网格删除即得到我们最终的成品。得到的图标可以根据需求水平翻转并调节大小。

最终成品

最后的最后,我们的小图标就完成啦。


文章来源:胡晓波工作室公众号,网址:https://mp.weixin.qq.com/s/MjWBhghnHL5ReYxL0qmktA

相关新闻
标签: 网页设计  

Contact

地址:呼和浩特市金川开发区宽城小区#A6-4

电话:18698468112

0471-4599590

15947112866