我们都爱像素风

创建于:2016-04-20

创建人: craft

397 信息 1826 成员
与像素画,像素风格游戏有关的讨论都可以发表在这里
小猴耳朵@我们都爱像素风 的内容(查看所有内容
2017年万圣节像素趴!!!感谢18位小伙伴的参与,成员主要来自“自学画像素画”Q群(号码109317321)与“Room114”微信群,Trick or treat!!! ​​​​
小猴耳朵 2017-10-25

2017年万圣节像素趴!!!感谢18位小伙伴的参与,成员主要来自“自学画像素画”Q群(号码109317321)与“Room114”微信群,Trick or treat!!!

Image title

Image title

Image title

Image title

Image title

Image title

又到了万圣前夕,各地像素の魔将聚集一起搞个party,请利用本图片进行创作除了画布尺寸没有任何限制,红线为地平线,以上为地面,以下为地穴,类似超级玛丽横版过关游戏的视角。。。。画布尺寸为200x150(地下200x102),不限制创作主题,例如地面可搭楼房,地下是机甲仓库等,截稿时间万圣节前一晚,文件发我Q179948989

Image title

Image title

上一次的万圣节群活动作品如下:

Image title

自学画像素画-第2章 二维平面像素介绍
小猴耳朵 2017-10-25

第2章 二维平面像素介绍

2.1什么是平面像素

    第1章已简要引入了像素的概念,本章将具体介绍二维平面像素(Pixel),它是视频显示的基本单位,缩写为px,是由英文“Picture”(图像)与“Element”(元素)组成。如常说的1080p,就是指分辨率为1920×1080px,具体指画面的宽为1920个像素点,高为1080个像素点。像素画就是利用“像素点”绘制出的电脑数位影像,属于位图的一种。当放大画面时就会发现图形是由一个个小方块组成,而这些方块就是像素点,填充对应的方块就能绘制出一副像素画。

Image title

这里指的像素画不单单是像素游戏里的画面,因像素画应用范围很广,可用于游戏、Icon、GUI以及纯插画等,这些像素风格的图形应用都可以算作不同类型的像素画。虽然像素画绘制方法并不难,但想要画好却不易,适用场景的不同也导致像素画风分类众多,针对不同类型的画风又需使用完全不同的技法。因此了解像素风的产生、发展、分类以及创作方法等内容,才会更有助于创作像素画。

2.2像素画的产生

像素画早期多应用于像素游戏中,而“画布”就是各类显示设备,为更好展示画面还要遵从游戏平台的系统要求,顾及相关硬件的性能限制,早期像素游戏还要考虑图形所占用内存空间等问题。

Image title

如任天堂公司在1989年发售的第一代便携式游戏机GB,屏幕分辨率为160×144px,仅能显示黑白灰阶四色,且CPU为8位元(8bit),游戏卡最大容量也不过32Mb。在无法突破硬件限制下,游戏的像素图形就要在这些种种限制内进行创作。

  Image title

放大《Super Mario Land (World)》游戏画面,同时对应观察游戏的全部素材图片,就会发现场景画面是由一片片8×8px的砖块(tile)构成,在需要时按照一定的组合进行排列,即可拼出对应的游戏画面,大大节省了占用空间。

 Image title

2.3像素画的进化

随着硬件设备以及游戏平台的不断升级,逐渐弥补着早期性能不足的问题,间接促成不同像素画风、绘制技法的发展。如同一款《马里奥医生》在不同游戏平台的画面质量也是有很大差异。

Image title

GB版仅通过“黑、白、深灰、浅灰”四色表现,使用相对传统的黑色描边技法,颗粒感较强; FC版仅在GB基础上将角色精灵换为彩色版,也多了一些细节,但颜色有限且没有体现出光影;

 Image titleImage title

SFC版(SuperFamilyComputer)角色精灵抛弃黑色描边,虽然造型相差无异,但突出的光影效果显得更加立体; GBA版,虽为掌机但硬件性能不逊色于家用游戏机,因此画面也有了质的飞跃,大量使用了手工抗锯齿AA技术(Anti-Aliasing),使图像边缘看起来更平滑。

 Image titleImage title

2.4像素画的分类

本节将从像素风的游戏与插画两方面来简要介绍几种常见的画风与各自特点,网页设计、GUI、icon等在后面的章节会单独提及。另外,仅根据笔者主观经验进行分类,无法做到绝对精准,或多或少存在多个画风交叉的现象。

2.4.1黑白画风

 Image title Image title

【特点】追求GB一样的画质,颜色控制在2-4色内,大量使用抖动。

【难度】★★☆☆☆,需要掌握抖动的绘制技法。

【应用】多以插画形式出现。

2.4.2复古画风

  Image titleImage title

【特点】追求复古,但有的仅体现色彩明快的色块(类似超级玛丽),而另一类强调实色描边(类似洛克人),但都是此类特点,刻意追求早期像素游戏的画风。

【难度】★☆☆☆☆,几乎没有什么难度,也不用掌握复杂的绘制技法。

【应用】主要出现在追求复古感的游戏中。

2.4.3等距视角画风

 Image titleImage title

【特点】没有任何透视点,也称Isometric风格(简称ISO),最大特点就是所有画面元素以2.5D伪三维的45度视角来展现。

【难度】★★★☆☆,需要使用规律的像素线条来绘制场景,且具备抽象思维。

【应用】大部分角色扮演类游戏、模拟经营类游戏都采用这种风格,如经典名作《仙剑奇侠传》、《皮卡堂》与现在的开罗系列(Kairosoft)游戏,以及前文提到的eBoy团队也是擅长此类风格的插画。

2.4.4极简画风

 Image titleImage title

【特点】颜色、造型极其简化,人物五官多数用几个像素点来代替,甚至可以没有五官。由于这类图形尺寸极小,需要等比放大后进行展示。

【难度】★★☆☆☆,虽看似简单,但需极强的概括能力,才能抓住人物特点。

【应用】一些小众游戏采用过此风格,还有的设计师也钟情于这种画风。

2.4.5极繁画风

Image title

【特点】虽然看似复杂,但也不是无从下手,很多细节可以通过复制方式处理。与极简相反,此类作品在100%视图尺寸下是最佳的观赏比例。

【难度】★★★★★,刻画细节需要有耐心,并且要熟悉掌握像素线条的特点。

【应用】多以大型插画出现,通过大量细节体现画面的宏伟气势。

2.4.6写实画风

 Image titleImage title

【特点】参照正常比例的人物造型,追求现实世界的真实性。

【难度】★★★★☆,需要一定的美术基础,才能把握人物比例与造型。另外大量使用手工抗锯齿AA(anti-aliasing)这种技法来弱化线条的像素感。

【应用】多用于横版动作游戏(ACT,Action)、格斗类游戏(FTG,Fighting Game)以及一些写实的插画,。

2.4.7Q萌画风

Image title

Image title

  

【特点】五官及身体比例以卡通方式夸张呈现,由于素体人物基础造型相对一致,不同的身体器官均可自由替换,方便Diy出个性造型。

【难度】★★★☆☆,要以基础人物模板为标准,把握好细节,确保相对统一。

【应用】早期社交软件中虚拟卡通人物秀、部分卡通风格游戏均采用这类画风。

2.4.8油画式画风

Image title

 

【特点】经典名作《合金弹头》将此类画风运用的登峰造极。其画布尺寸巨大、结构多变、塑造质感,追求油画式的堆积上色方式,但却严格按照像素规范用色,可以说是拥有像素灵魂的厚涂作品。

【难度】★★★★★,需要很深的美术基础,以及色彩把握能力。大量使用手工抗锯齿AA(anti-aliasing)与抖动这两种高级技法使得画面极其细腻。

【应用】多以艺术插画形式呈现,或用于大型游戏场景。

2.4.9光影渲染画风

Image title

【特点】不受传统像素规范制约,借助流行的渲染技术,大量使用光影特效。

【难度】★★★★☆,需要掌握一定的渲染技术。

【应用】近些年较新的游戏多以此类模式制作场景。

2.5常见绘制方法

像素画与其他绘画形式有相同之处也有不同之处,根据以往经验大致总结了三种创作方法。

2.5.1绘制线稿法

直接在画布上按照像素规范绘制好线稿后平涂上色,这是最主流的一种创作方法,常见流程有7步,分别为:绘制线稿草图、修整线稿线条、填充固有色、画出暗面、画出亮面、抖动技法处理过渡色、手工抗锯齿处理边缘。当然不同画风导致部分技法不一定都用到。

 Image title

 

【优势】只要以像素画的技法就可以天马行空进行创作,适用于各类画风。

2.5.2色块构图法

通过涂抹色块方式绘制出大体轮廓造型,然后在逐步添加细节与上色。

 Image title

【优势】适用于各类画风,尤其是绘制大型场景。

2.5.3缩图修改法

将手绘草图或素材图片缩小尺寸后,精简多余颜色,最后按照像素画的规范对细节与线条进行处理。如图所示,字体经过缩小尺寸与去除杂色后,仅需把不规则的线条与像素点简单调整即可。

 Image title

【优势】效率高、速度快,节省构思时间,色彩、造型基本还原素材图片。但不适用于等距视角、极繁、Q版卡通等画风。

2.6常见绘制软件

目前有很多专为像素画打造的软件,有的方便制作GIF动画、有的方便绘制ISO等距视角、有的专门应用于像素周边产品的设计。但归根到底主要还是利用“位图软件”+“点阵原理”的方式绘制,因此笔者推荐Photoshop,它是最知名的位图处理软件之一。

Image title

由于Photoshop版本众多,选择够用的版本即可。如配置不高的电脑推荐使用经典的7.0版本,土豪级配置的电脑推荐使用最新的CC2017版本,配置高但不需要“Creative Cloud”等多余功能的电脑推荐使用CS6版本。另外,不同版本界面菜单及图标存在一定一些差异。

2.6.1 PC端

Image title

Photoshop、Sai、MS Paint、MS Excel、EasyToon、Cosmigo Pro Motion、Graphics Gale、Pixel Studio、Aseprite、mtPaint、aaICo、Pixelart8、AniFX、AWiconsPro、IconLover、Articon Pro、Paint.NET、Fireworks、Microangelo、Iconcool、Articons、PCStitch、Cstitch

2.6.2 MAC端

Image title

Photoshop、Pixen、GIMP、FireAlpaca、MS Excel

2.6.3网页端

Image title

http://make8bitart.com

该站界面比较直观,功能也相对单一。

 Image title

http://pix.domyself.me

该站为中文页面,虽然功能简单,但最大亮点就是能够在线制作GIF动图,同时也有作品分享社区。

 Image titleImage title

http://pixelartmaker.com

该站除了创作页面也有作品分享社区,工具也较专业,包括选区、直线、取色等,并且辅助网格也有三种显示方式。

Image title

http://kandipatterns.com/assets/designer_test

该站主要用于绘制手工串珠的像素图纸。

Image title

http://www.reddit.com/r/place/

该站为Reddit在2017年愚人节期间推出的像素画活动,全程72小时,至少有十万人参与其中,目前绘制功能已关闭。

Image title

http://live.bilibili.com/pages/1702/pixel-drawing

该站为Bilibili在2017年8月推出类似Reddit的像素画活动,目前绘制功能已关闭。

2.6.5移动端

目前主流手机机型仍属于IOS与安卓两大阵营,因此主要介绍这两个平台,也可直接在对应的应用商店搜索“像素、像素画、Pixel、8bit”等关键词查找更多App。

1.苹果iPhone版

 Image title

包括“Dotpict、8bit Painter、Dots、dot ART、bead pictures!、ビーズカメラ、8bit Camera、Pixel Pix、Pixel It、uniQ Pixel Artist Camera、Pixel Art Maker、Pixel Artist、Cross Stitch HD lite、Bead Master、dot ART、Dot Style、BlockCam”等。

2.苹果iPad版

Image title

苹果公司将手机与平板做了市场细分,很多App单独为iPad做了适配,而并未推出iPhone版。包括“Bead It! SD、Perler、NABBI Beads、Kids Canvas、Qixel HD”等。

3.安卓Android版

Image title

包括“Dotpict、8bit Painter、像素画图专业版、Pixel art Painter、IsoPix Pro、Pixly、八位元画家、像素工厂、数图、fusible beads、Bead Studio、Bead Template Creator Premium、Bead It!、Iron bead examples、Fuse bead picture examples”等。

4.微信小程序

Image title

 

如果不考虑安装App也可选择跨平台且免安装的微信小程序,包括“像素涂鸦、你萌好魔法拼豆”等。

2.7常见问题

Q:位图等于像素画吗?

A:电脑图形分矢量图(Vector)和位图(Bitmap),矢量图是用数学方式描述的曲线及曲线围成色块制作的图形。位图虽然是由像素点组成但不等于像素画(Pixel Art),像素画的线条规范,画面细腻、结构清晰,造型精美,与位图的最大区别在于每个像素点都是经过艺术处理过的,并遵循一些技法。

Q:存储为什么格式?

A:Bmp、Ico、Gif、Png等文件格式均适用于像素,但特别注意一定不要存为有损压缩图像很严重的Jpg格式,如不考虑多帧动画只推荐Png格式。

文件格式

Bmp

Ico

Gif

Png

优点

不压缩图像,集成透明的Alpha通道

可用调色板定义透明色和反色

体积小,支持透明色和多帧动画

无损压缩,文件体积小,支持更多颜色,支持透明

缺点

占用空间较大

主要用于显示图标,尺寸相对固定

最多只能处理256种颜色,且压缩图像

不支持多帧动画

Q:没有美术基础可以画吗?

A:由于绘制像素画的技法较特殊,就像用积木搭房子一样,可以不需要了解任何建筑学的基础知识,凭感觉也能完成作品。但如果有一些美术基础,并且掌握了一些绘制技巧,将能搭建出更漂亮的楼房。

Q:所有画风是否都要掌握?

A:像素画各类风格的绘制方法略有区别,难度也不同,选择喜欢的几类风格即可,不用全部掌握。

Q:哪个像素画软件最好用?

A:这个因人而异,有人甚至擅长使用微软公司的表格处理软件“MS Excel”,因此找最熟悉的软件入手,画起来将更容易些。笔者日常仅使用Aseprite与Photoshop两款软件。

Image title

Q:是否需要购买手绘板?

A:看画风,有的时候意义不大。如绘制2.5D角度ISO图形时,鼠标绘制的像素线条会更加精准。但画场景或大尺寸角色精灵时,使用手绘板会便于绘制更加圆润的像素线条。另外,画像素要避免抗锯齿等情况,因此选购手绘板不用注重压感等参数,够用就好。

自学画像素画-第1章什么是像素
小猴耳朵 2017-10-25

第1章 什么是像素

1.1什么是像素

像素即组成图像的元素,而像素画特指利用像素点阵原理绘制的数码图形,它是像素应用中最常见的一种表现形式。

Image title

根据各类像素应用的不同特点可分为“广义、狭义”两种,按空间维度又可以分为“二维、三维”两种,按照创作目的还可分为“偏商业、偏艺术”两种。不论怎样分类,“像素”或多或少都在影响着我们的生活,而现在也逐渐成为一种复古的艺术创作风格,或称之为“像素风”。

1.1.1广义像素

Image title

广义的像素应用,就是利用“点阵原理”创作出的产物,常见的有玩具、手工、以及艺术品等,创作目的多数偏艺术。

Image title

具体形式包括十字绣、拼豆手作、马赛克瓷砖、乐高积木画、图钉画、便利贴拼贴画、魔方画、Led跑马灯等,甚至2008年奥运会开幕式千人击缶的舞蹈也是利用像素理念来表演的,每一个舞者就是一个“像素点”。

Image title

广义的像素可应用在二维或三维空间。如这副积木画《The Scream》的背景墙部分就是平面像素图形,前景人物就是立体像素造型。所以,同样的积木颗粒不仅可以创作平面像素作品,也是可以创作立体像素作品的。

1.1.2狭义像素

Image title

狭义的像素应用,就是利用“位图软件”绘制出的数码图形,创作目的多数偏商业。

Image title

具体形式包括各类街机、家用游戏机、掌机以及电脑的游戏画面;电脑程序、手机App的图标(icon);网页设计、图形用户界面(GUI)以及纯插画等。

Image title

狭义的像素也应用在三维空间。如《超级马里奥》这款游戏通过特殊的渲染处理,可展示出三维空间感,但实际上这都是来自同一款游戏的Rom文件。

Image title

Image title

1.2像素发展史

像素由来已久,有过辉煌也有过衰落,其发展史也是曲折的,经历了三个主要的阶段:从古代镶嵌艺术的产生与一脉相承,到现代像素游戏的鼎盛与像素艺术的衍生,再从平面像素的衰落到立体像素的复兴。

Image title

1.2.1起源—古代马赛克艺术的产生

像素艺术不是凭空出现的,与很多艺术形式有着很深的渊源,最早产生的是镶嵌艺术(音译Mosaic,俗称马赛克)就是其中之一。

Image title

这种艺术最早可追溯到古希腊时代,当时人们使用许多小石块、贝壳等作为镶嵌艺术的原材料,在按照一定规律排列、组合后创作出新的图形,这与像素艺术有很多相同点。下图分别是《Detail of a princess of Skyros》的马赛克版和像素版。

Image title

Image title

    虽然两幅作品均是按照一定规律排列单个元素后构成的图形,但马赛克版的石块颗粒各不相同,而像素版单个方块是完全一样的规格与尺寸,这就是两种艺术形式最大的差异。

Image title

古代镶嵌艺术作品也应用在三维空间,如图《Cone mosaic courtyard》就是在立体圆柱上进行创作的。

Image title

到了19世纪80年代后年期,也产生了新印象主义 (neo-impressionism),这种流派最大特点是采用光学原理将纯粹的色彩用小点块的方法,彼此相邻近地排列在画布上,从而构成色点组成的形象,新印象派又叫点彩派,这与像素艺术有很多相同点。

1.2.2发展—红白机的辉煌与诺基亚的衰落

Image title

现代像素的产生,基于各类显示设备作为载体。以标准RGB排列方式的显示器为例,通过电子枪打在屏幕的“红(R)、绿(G)、蓝(B)”三色发光极上来产生不同的色彩,而每一组“三原色”就是一个像素点。

Image title

像素画的传播依赖于像素游戏平台的发展,早期一直是街机(ARCADE)的天下,但在1986年被一代神机Family Computer(简称FC)终结,在欧美发售时取的新名称Nintendo Entertainment System(简称NES),它是任天堂发行的第三代家用游戏机,由于机身以红色和白色为主,俗称“红白机”,它的出现使电子游戏界产生了十分深远的影响。

Image title

在红白机时代,各类像素游戏风靡大街小巷,这里不得不提它在国内的“山寨版本”---小霸王游戏机,它的出现使得无数经典游戏成为很多70后-90后的儿时记忆。继这类家用游戏机后,以GameBoy (简称GB)为首的一批掌上游戏机也让玩家们可以随时随地玩着像素游戏。

Image title

虽然这些游戏机在当时都算是比较热门的电子产品,但相对于现在而言这一时期硬件设备性能均不够强大,因此很多像素画的技法与规范也是因为这些不足而促成的,如红白机只能使用64个颜色,而GB只有4色。

Image title

80年代苹果公司与微软公司也分别发行了Mac及Windows操作系统,相比以往使用了全新的图形化UI和操作,与此同时也影响着电脑游戏与GUI、Icon、像素表情等一系列的发展。

Image title

随着更高性能的游戏机发布与家用电脑的普及,很多三维游戏也分分面世,但依旧无法撼动像素游戏占据半壁江山的地位,这归功于像素游戏在手机上的发展。早期的手机Java像素游戏就曾经红极一时,后来手机界大佬诺基亚在2003年推出了第一批搭载“塞班系统”(Symbian)的智能手机,再次让像素游戏在移动电话平台大放异彩,也让Gameloft等著名手游厂商在掌上游戏领域开拓了一片天地。

Image title

不过好景不长,就在诺基亚垄断全球手机市场份额的同时,乔布斯于2007年带着第一代iphone彻底打破了塞班智能手机“一机独大”的格局。

Image title

Image title

使用习惯从按键到触屏的体验,视野从小屏到大屏的改善,游戏画面也从满屏像素转为高清质感,曾经的像素手游厂商们也纷纷转行迎合新的游戏时代,像素游戏因此衰败。

Image title

    在之后的移动互联网时代,塞班智能手机、各类游戏掌机相比苹果与安卓系统的硬件性能简直是天壤之别,很多机皇在某些方面甚至超越电脑,尤其是屏幕分辨率等参数,随着游戏画面不断提升,使得“像素风”逐渐成为了复古的代名词,诺基亚王朝正是因为没有跟上这场技术革新而逐渐衰落。

Image title

此外在像素的黄金年代,很多设计师也大量创作了很多“像素风”插画作品,使像素逐渐成为一门独立的艺术。其中最具代表性的像素艺术家就是eBoy了,由四位德国插画师在1997年组成的设计团队,他们被称为像素教父,擅长公共艺术类创作及周边产品设计,代表作品是以2.5D视角城市景观为主的“Pixorama”的系列插画,这些作品在商业领域也获得了极大的成功。

Image title

像素偏艺术化后,很多像素风游戏也不再墨守成规,如《超级兄弟:剑与巫术》(superbrothers Sword & Sworcery)推广了一种新的像素艺术风格,将怀旧与滤镜、镜头照明和其他新技术融合在一起。

1.2.3革新—《我的世界》让体素风靡全球

Image title

Image title

    就在平面像素游戏即将淡出人们视线的时候,三维立体像素游戏《我的世界》(Minecraft)于2009年发行了,它迅速登上了全球游戏销量排行榜第二的宝座。虽然画面十分复古,但游戏世界却高度自由开放,还支持多人联机社交功能,以及无限创造的可能性,甚至有专门基于此游戏举办的建筑搭建比赛。

Image title

紧随其后,出现了很多三维立体像素游戏。其中2012年的像素游戏《Fez》也是打破以往像素游戏的“常规”,利用视角转换来改变游戏世界的场景,结合了二维像素和三维体素的关卡。

Image title

Image title

此外天天过马路、欢聚碰碰车等小体量的休闲游戏游戏也很受玩家青睐。

Image title

Image title


与此同时,不忘怀旧的人们又陆续推出了一些立体像素风影视作品,最知名的就是由克里斯·哥伦布执导的《像素大战》,电影灵感来自众多80年代像素游戏中的经典角色精灵(Sprite),如吃豆人、大金刚、小蜜蜂等。

Image title

此外,Qubicle、MagicaVoxel等软件也日渐成为创作三维体素作品的主流生产力工具,而之前提到的平面像素设计团队eBoy也逐渐转型开始尝试纯三维的体素作品了。

Image title

如果说信息控制技术让人类步入第三次工业革命,那么原本二维的平面像素加以三维视角来展示,也许就促成了像素发展史的第三次革命,而《我的世界》、《像素大战》等作品以及体素软件的百家争鸣,均是推动这场革命的主要力量。

Image title

虽然目前很多人对于体素游戏是否属于像素游戏范畴有着争议,但笔者认为二维平面或三维立体都属于像素在不同空间的表现方式。组成体素游戏场景的画面元素其实也是规格尺寸相对统一的单个像素颗粒。

Image title

如图所示,通过《我的世界》皮肤制作器MCSkin3D软件可以直接在“平面视图”进行二维像素绘制,也可以在“透视视图”进行三维体素建模。本书也将通过大量案例讲解“像素Pixel”(即二维平面像素)与“体素Voxel” (即三维立体像素)两部分,在第2.3章介绍“像素”的绘制,而第4.5章则是“体素” 的建模。

加入 indienova

  • 建立个人/工作室档案
  • 建立开发中的游戏档案
  • 关注个人/工作室动态
  • 寻找合作伙伴共同开发
  • 寻求线上发行
  • 更多服务……
登录/注册