Creating Repeatable Pixel Textures

creating-repeatable-pixel-textures

While creating the dialogue boxes for our game A Dragon Named Cole, they looked flat and boring. What better than a pixel texture to spruce things up? It can be a little harder than it sounds to design and make a pixel texture from scratch however. So instead I hacked an easy solution we want to share with you. Just a few quick steps to pixelify any texture.

How to Create a Pixel Texture from a Repeatable Paper Texture

We made a repeatable square of paper using this paper texture by bashcorpo on DeviantArt. From there it’s pretty fast.  Save the square of texture as a PNG 8 with only 4 colors and reduced size to 40px square.  This forces it to pixelate, but also makes it tiny and all but useless. To fix that open the new PNG in Illustrator and live trace it altering the settings so that there is no change when you toggle preview mode on. Now you can simply scale the vector to any size you need. Take it a step further and you can create a pattern from it in Photoshop and take it on a test run to see how it looks.

paper-to-pixel-texture

Pixel Texture Results

The result is a tileable texture that keeps with the pixel art style. The same workflow can be used to turn any repeatable texture into a pixelated one.

In creating this pixel texture, we learned that sometimes the best approach to vector pixel art is to start in Photoshop. Even though it may seem like more steps, it’s a lot faster and yields excellent results.

No comments yet.

Leave a Reply