荷兰像素画家 Arjan Westerdiep:ISO像素画基础教程

打开网易新闻 查看精彩图片

文本概览:全文约 2,056 字,阅读约 6 分钟。

荷兰像素画家 Arjan Westerdiep 在 drububu 的入门教程里,把等距像素画拆成一条可复制的路线:先接受位图不能无损缩放,再画对 2:1 斜线,最后用一个带明暗的立方体当积木,复制粘贴搭立体。帮你建立“为什么等距看起来立体、为什么老游戏爱用这种视角”的底层直觉。

等距像素画的可读性,来自 2:1 像素斜线 + 可堆叠的着色立方体,而不是一上来就抠复杂建筑。

  • 核心观点:2:1 斜线是等距的地基;画好一个着色立方体,就能像乐高一样搭物体。
  • 关键步骤:理解位图 vs 矢量 → 等距 vs 透视 → 2:1 角度取舍 → 八步画立方体 → 复制方块搭简单物体 → 去内线、加高光阴影。
  • 易踩坑:用真 30° 画斜线会锯齿错位;立方体竖边对不齐就堆不起来;位图放大后边缘发糊。
一、位图像素:放大就会糊

像素画本质是位图——用有色小方块描述图像。矢量图靠数学曲线描述,缩放几乎不损画质;位图缩放时要重采样,像素变多或变少都会丢信息。做像素插画时,画布尺寸一开始就要定对,否则后期放大只会糊成一片。

打开网易新闻 查看精彩图片

左图是矢量、右图是位图的对比:浏览器里看到的矢量,最终也要栅格化成像素显示。

打开网易新闻 查看精彩图片

二、等距投影:没有消失点的“假 3D”

等距投影从斜上方看物体,顶面、左面、右面同时可见。远处和近处物体大小不变——没有透视里的消失点。老游戏和不少当代像素作品爱用它:不用按距离重画尺寸,也不用算透视畸变,叠层和拼块都省事。

代价是:旋转视角后,精确的方向键操作会变难——适合策略、建造、回合类,不太适合需要精确跳跃距离的平台动作。

打开网易新闻 查看精彩图片

三、2:1 斜线:26.56° 比真 30° 更“像素友好”

理论上的等距地面线与水平面夹 30°。但在像素网格上,真 30° 的斜线步进不规则,看起来锯齿节奏乱。像素圈常用2:1 像素步进(水平走 2 格、垂直走 1 格),角度约 26.56°,线条规律、可平铺。

打开网易新闻 查看精彩图片

记住:等距像素画的地基不是三角函数表,而是“两格横、一格纵”的重复节奏。画建筑、地块、道具,都从这根斜线尺子出发。

四、八步画一个等距立方体

立方体是等距里最小的“乐高砖”。教程用动图拆成八步:

  1. 画一条竖边定高度。
  2. 从竖边端点沿 z 轴方向(2:1 斜线)画边。
  3. 再画竖边,闭合左侧面。
  4. 补 z 轴方向线,左侧面成形。
  5. 复制左侧面,水平翻转,贴到右侧——比手画对称快。
  6. 复制顶面对角线,垂直翻转,贴到顶部。
  7. 轮廓闭合。
  8. 给三个面填不同明暗:顶最亮、左中等、右最暗(或按统一光源调整)。

打开网易新闻 查看精彩图片

阻力常在这里:想一次画完带颜色的立体,结果边线对不齐。先线稿闭合,再一次上色,会稳很多。

五、选对“砖型”:竖边必须能咬合

不是任意形状的“方块”都能垂直堆叠。左边那种竖线错位的立方体,往上叠会接缝裂开;右边规律 2:1 的砖,竖边对齐,复制粘贴就能搭墙、搭台。

打开网易新闻 查看精彩图片

六、从砖到物体:复制、去内线、加体积

用一块已着色的立方体当模具:

  1. 复制多块,拼出大致体积(基础版)。
  2. 删掉物体内部多余的轮廓线(简化版)——外表仍可读,但不显“一块块乐高露馅”。
  3. 高光(受光面更亮)。
  4. 阴影(背光面更暗)。

四步对比见动图:从方块堆砌到像一件完整的等距道具。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

七、什么时候不用等距

等距适合地块、建筑、策略地图;角色立绘、横幅插画多数不用 ISO透视。教程里的曲线示例说明:即使用 2:1 网格,曲线也要靠像素节奏微调,别死卡公式。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

八、时间与位深:别被规模吓到

大插画耗时长:案例约160×104 万像素格,作者累计 110 个版本、跨度近十个月。时间轴缩略图能一眼看出“从灰块到成稿”的漫长迭代。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

画布规模示意——像素数一乘,工作量指数上去:

打开网易新闻 查看精彩图片

另一幅 splash 级作品:

打开网易新闻 查看精彩图片

保存格式也有讲究:PNG / GIF 无损适合发表;JPG 有损压缩会吃掉像素边缘细节。1-bit 到 24-bit 色深对比——做复古风可以主动限色,但别用 JPG 糊掉辛苦抠的边。

打开网易新闻 查看精彩图片

九、为什么还值得画像素

像素画慢,但改一个像素的位置或颜色,整幅画的气韵会变——这种“分子级”控制,正是很多人沉迷的原因。

从灰块起步、怀疑能不能成稿,到局部细化、最后超出预期——教程用四格过程动图概括这种心流。

打开网易新闻 查看精彩图片

参考资料

Pixel Art Tutorial — drububu.com: https://drububu.com/tutorial/index.html