介绍

像素艺术 第一部分

像素艺术有很多不同的风格，从写实到早期电脑游戏那样的风格。在这个系列教程里我们将讨论如何创作“isometric像素艺术”。在第二部分我会提到isometric比较类似于基础风格。在第三、四部分你将学会如何使像素在Flash中动起来。

我还想说的是，这些事做起来并不容易。好的，看上去很简单但是没有秘诀或者特殊的滤镜能为你制作出很棒的像素艺术。你需要足够的耐心并且不断的练习才能画出令人满意的像素作品。教程需要你掌握一些photoshop、flash和actionscript语言的基础知识。教程中所有的例子和截图都来自Photoshop CS2 和Flash MX 2004，但是较低版本的软件也不影响使用。

1.技术和历史

在我们开始之前我觉得有必要先介绍一些相关的技术和历史，如果你对此不感兴趣可以直接跳到第2节基本规则。像素艺术（Pixel Art）这个名词从字面上就很好理解了，但什么是Isometric呢？这个词来源于希腊语的Isos（相等）和Morphe（形状，形体），直译的话就 是“等距测量”。它是指在同一空间里的形体如果以等距的形式表现出来的话，比例是保持不变的（举例来说，处于背景的物体不会比前景的物体看起来小）。做为 一种正投影的方式，它在科技绘图上有着广泛的运用，但未免复杂化其概念，你可以把Isometric理解成为一种将三维物体在二维平面上的且不作比例变化 的显示方式。这种形式的电脑图形在1982年一个由Sega发行名为Zaxxon的游戏中首次出现。游戏运行在由3.58 MHz CPU 以及8 KB 内存组成的家用机平台上，令人印象深刻。这款游戏不久之后发布了Atari2600版本，但是硬件配制更低(1.19 MHz CPU 仅仅126 bytes 内存)。

1.1. “Zaxxon” (1982) 是第一款出现isometric像素艺术的游戏

isometric风格现在看来有一点落伍。但是仍旧非常常见，尤其是在电脑游戏中。很多原因在于它使程序编码变的简单并且比其他技术更少的占用CPU，同时效果看起来也真的非常不错。isometric风格被使用在大量成功的游戏中。代表游戏有Civilization文明，SimCity模拟城市还有The Sims模拟人生，历史上卖的最好的PC游戏之一。这使我相信并不是所有的游戏都适合3D图形来制作。

1.2. Isometric "The Sims” (2000) 是历史上卖的最好的PC游戏

2.基本规则

首先Isometric像素艺术最重要规则是如何画基础的线条。Isometric透视有时被称为30度透视，但是你在计算机上看到的常有偏差。看下面的图，30度线产生的是不规则的像素线条，而26.565度则是规整的。这个数字在以后的章节中还将被提到，你只要记住下图告诉我们：完美的像素线条比率是1/2。

1.3. 26.565, 像素艺术中神圣的数字。(译者：难道跟黄金分割有关？)

你当然可以使用任何角度的线条，但是如果你想得到平滑的效果，最好遵循下图所示。

1.4. 完美的像素线条

3.线、面和形状

These lines are then used to construct basic isometric shapes. Once you understand how these are made, Pixel Art is much a matter of duplicating and tweaking shapes into more complex objects. Below you see six basic shapes (five really, but the two pyramids use different kinds of pixel lines to form different heights) and how these can be duplicated into some kind of weird castle building.

1.5. Basic isometric shapes can be used to construct more complex objects

4.明暗

In order to give your objects a three-dimensional look in this two-dimensional space we use shading. It is not rocket science, just a matter of consistency. First we have to decide where our light source is, mine is usually in the top-left corner.

1. Start by putting a simple blue cube on your gray grid.
2. Create a new layer and use the Paint Bucket with Contiguous and All Layers selected to fill surfaces with black color with 20% opacity. Now you have a simple shade.
3. To add a darker shade to the right side surfaces, simple click a second time with the same tool.
4. Create a new layer for the inner lines and trace those with a white 1 pixel pencil.
5. Hide the two top layers and remove the objects black inner lines by making them blue.
6. Now select the top layer with the white lines and set the layer opacity to 50%.

Show everything and you should have an object like in frame 7.

1.6. Seven simple steps to shade your object

There are of course many other ways of shading your objects, this is merely the way I prefer to do it. Just remember that you have to be consistent!

5.图块世界

Tiles are wonderful things if you want to make your Pixel Art interactive. They are what make up the isometric grid our objects are placed on. Because of that they make the coding part a lot easier.

The grid is really just two-dimensional and can be described using a simple two-dimensional array (you will learn all about that in part three). It is then rotated 45° and reduced in height by 50% in order to be transformed into an isometric grid as seen below.

1.7. Making a 2D grid isometric

When working with tiles you have to be careful how you construct your pixel shapes. One pixel too wide can ruin that perfect pixel style we are after. Below you have three examples that can appear identical at first, but they do have some important differences.

(Note: the blue cubes are different from each other. The other colored cubes are identical to the blue in each example)

1.8. 32 pixel wide cubes. Here you get a double line because the outlines do not match on one of the sides

1.9. 34 pixel wide cubes. Here the outlines seem to match but you get a one pixel shift when building on the height

1.10. 33 pixel wide cubes. I find this the best way when working with tiles. The cube itself is one pixel off in the edge but when you combine several cubes you get correct lines

6.文件格式

I would think that most people who read this tutorial already know what different image file formats there are, so the following is just what a Pixel artist need to know. GIF and PNG are the only two alternatives when it is time to publish your work. It does not matter if you are importing your images into Flash or putting them directly on the web. The JPG format however use compression algorithms that will distort your precious pixels, it is also unable to handle transparency.

The main differences between GIF and PNG are the amount of colors supported and the possibility to use opacity. GIF can use only 256 colors while PNG support 24-bit or 16 million colors. PNG is also known as PNG 32 (PNG 24 in Photoshop), where the last 8 bits are reserved for the alpha channel. This is what makes opacity possible, something only PNG has the privilege to use.

7.总结

Well, by now you should know the basics of Pixel Art and isometric projection! In the next part (Workflow) we will use Photoshop together with your knowledge from this tutorial to create a stunning isometric yogurt shop.

BTW, here's a great tip by Peter NRG when you're working on pixel art: You can use two windows displaying the same file: one zoomed in at the level you want and which you use to edit, and the other one displaying the updated content you're working on @ 100%. You can open a second window here: Photoshop Menu > Window > Arrange > New Window for 'filename'. More tips are being discussed in this thread.