pinkobjectgalaxy

[pinkobjectgalaxy]

Announcing “Ask For The Key”,  the first Lost In Maze episode featuring fight. Play it at www.lostinmaze.com

[pinkobjectgalaxy]

BobSprite - Free Online Sprite Editor

Note: Using gray scale and reduced color step is not mandatory.

[pinkobjectgalaxy]

How to make abstract mosaics from photographs

300 x 300 pixels image:

1200 x 1200 pixels image:

Direct your browser to BobSprite and press the red button to open the editor.

Then press CTRL L to load a photograph or any other image.

Everything happens inside your computer. No image goes to the server.

Select option “mosaic” in the monitor box.

Use arrow keys to move the loaded image, creating new mosaics.

Right-click the mosaic to save it.

This produces a 300x300 pixels mosaic. If you want a big one, load the produced mosaic and then click the “tile set” icon (the one that looks like a chess board).

[pinkobjectgalaxy]

How to shrink a sprite without mess its outline

Painting a small image pixel by pixel is called Pixel Art. Even when we use the ‘bucket’ tool to paint many pixels at once, we still have CONTROL over each pixel. The problem with Pixel Art is that often a single pixel or a pair of pixels has to express many things, requiring the artist to be very, very skilled and spend a lot of time experimenting. So, sometimes people paint a bigger picture to shrink it later. Which is not a Pixel Art technique, but it does the job easily. In this small article we are going to examine this technique a bit.

Note: This article considers only shrinking algorithms that merge pixels. So, this is not applicable to the Nearest Neighbour algorithm, for example.

Above we see a simple 200 x 200 pixels image. Below we see that image scaled down to 100 x 100 pixels.

Let’s take a closer look.

The orange rectangle was perfectly reduced. But the blue rectangle got blurry borders. Why? Except for the colors, the blue rectangle is identical to the orange rectangle. The difference in their positions causes different results! Let’s see 2 tiny rectangles being reduced.

Example A

Take a tiny rectangle: 4 pixels wide and 1 pixel high (4 x 1 pixels): [ white white black black ] Now, shrink it to 2 x 1 pixels rectangle. The algorithm combines the value of the first pair of pixels: white + white → white Then the algorithm combines the values of the second pair of pixels: black + black → black The new rectangle is [ white black ] We have a perfect reduction!

Example B

Now, take a tiny rectangle: 4 pixels wide and 1 pixel high (4 x 1 pixels): [ white black black white ] Shrink it to 2 x 1 pixels rectangle. The algorithm combines the value of the first pair of pixels: white + black → grey Then the algorithm combines the values of the second pair of pixels: black + white → grey The new rectangle is [ grey grey ] The reduced rectangle does not match the original one!

In Practice

Enough theory!

The purpose of this article is to show the trick to reduce images that have blank areas (completely transparent); usually any video game creature sprite. In this case (sprite with blank areas) we don’t care about merge or blur inner pixels.

Blur inner pixels is exactly what we expect

(assuming we could not achieve a better result just by using Pixel Art on the sprite at normal size). Anyway we can always apply small corrections using Pixel Art later.

Our problem is

avoid mess the (external) outline, often black, with the blank area around

. This weakens the outline and also creates ugly translucent pixels in the neighbourhood.

Repositioning the creature inside the sprite is not a solution because the outline uses to be so irregular that we can’t protect all parts while shrinking.

The Solution

So… what’s the trick?

create the outline in the final size (before scale up)

scale up the image, doubling width and height, in pixelated mode

edit the image, without displacing its content

scale down to the previous size in smooth mode

That’s it. It is easier to do than to read the instructions!

P.S.: In case you are editing with BobSprite: there are two buttons that do just that for you.

[pinkobjectgalaxy]

Free online Pixel Art editor.

[pinkobjectgalaxy]

[pinkobjectgalaxy]

Best Pixel Art Tutorials

Articles and Videos

Introduction

In 2010 JackKane wrote a post in Stack Overflow with a nice synopsis of history of digital art in games. Before I start showing links to the best Pixel Art tutorials I have found, I would like to quote him. Because it is very instructive and because I completely agree that the old 2,5D art was nicer than the 3D art that came to succeed it.

In the old days, sprites were hand-drawn pixel by pixel. This works well for flat 2D games (side-scrollers, cartoon adventure games, Z-axis top-down, and such), particularly if they are in the 320x200 resolution. Some examples of gorgeous hand-drawn sprite games are the Sierra and Lucas Arts adventure games, Disney's jump&runs, Capcom's fighter games, the Tyrian/Raptor-style top-down scrollers, and the early RTS games (C&C, WC1). Some games, like Prince of Persia and Mortal Combat, used sprites from animated actors. That produced fluid motion, but looked 'flat'.

Between the mid-90s and the early-00s, character/item sprite-drawing was done by taking stills of 3D objects. Practically every 2D RTS game since around Age of Empires 1 did that. AFAIK Diablo, Baldur's Gate, Divine Divinity, and other such RPG games did the same. This is the reason those games came on so many CDs - they were chock-full of content. This approach looks great (not flat, but "2.5D") but takes a lot of hard-drive space. Also, whereas you could produce hand-drawn sprites in Paint, the 2.5D ones require 3Ds Max (or equivalent). One problem that arises with this approach is the combinatorial explosion in costume design (i.e. if you want animate a character in three different coats with three different hats and three different pairs of pants, you need 27 distinct animation). The solution to this, as seen in Diablo II and Baldur's Gate, is rag-dolling - you produce different sprites for every part of the body. This takes a lot of work. Blizzard made their own tools to produce their sprites, but I'm not sure there are sprite rag-dolling tools in the open.

More recently, most games are 3D. Many actually look worse than the old 2.5D ones, because a simple 3D model can animate well in sprites, but poorly in real-time 3D. The difference is that between a glamour shot of a celebrity, taken from a certain distance in certain lighting and then worked-over in photoshop, and the appearance of the same celebrity in real-life (which may not be as glamorous).

ARTICLES 

How To Paint An Android

This is not a pure Pixel Art tutorial but it is included in the list because it is amazing how easy and fast is painting this android!

Introduction To Pixel Art For Games

Glauber Kotaki Sprite wrote a very nice introduction to pixel art for games.

How to draw Pixel Art clouds quickly

Oscar Rodriguez wrote a cool tutorial about Pixel Art clouds. The resulting cloud is very nice and he shows how to make it in a few easy steps, using a 5 color palette for cloud plus 1 color for sky.

Creating An Isometric Circle

Rodder at PixelJoint steps us through how to create an isometric circle. Neat.

Making An Isometric Cube

This tutorial from Pixelblink at PixelJoint describes how to make a handy building block of isometric pixel art -- the beloved cube.

Making A Isometric Building

PixelJoint: Pixelblink steps us through how to make our own isometric building. No spackle needed!

Anti-Aliasing

Another article on Pixel Art anti-aliasing, this time on Open Game Art.

Creating Pixel Art

This is a hot general Pixel Art tutorial. It starts telling what Pixel Art is and what it is not. Then it covers a lot of aspects like dithering, shading, palette, color ramp...

Pixel Art Outlines

I suggest you read this nice tutorial about outlines by Sam Keddy. And the second part too.

Isometric Pixel Art Grid In PhotoShop

Again by Sam Keddy a lesson on how create isometric Pixel Art grid in PhotoShop.

Lines And Curves

From this article at Open Game Art: "There is only one rule to follow to achieve a smooth curve: the length of the segments will vary in a progressive manner.".

Pixel Art Brickwork Tutorial

You really should see this Pixel Art tutorial about brickwork by crackpot.

Pixel Art Rocks And Stones

This tutorial by DJ Fenix features how create rocks and stones in Pixel Art.

Shading A Rock

Pixel Art tutorial about shading a rock by kiwinuptuo from Deviant Art.

Shadow And Light

From Open Game Art, nice article that covers Pixel Art shading.

Color Palettes

A good tutorial about constructing the color palette by Raymond Schlitter.

The Magic Of HSL

Another good article about the color palette, from Open Game Art.

Best Colors For Your Sprite

From 2D Will Never Die, this article presents how to pick the best colors for your sprite, exposing an intriguing fact: colors that are nice on a sprite, may not be as nice when this sprite is scaled down.

Pixel Art Main Mistakes

This article by Arne Niklas Jansson, featuring common mistakes in Pixel Art you really should read.

Pixel Art Character

Here we have a comprehensive tutorial about a Pixel Art character.

Pixel Art Character (2)

Another comprehensive tutorial that covers making a Pixel Art character.

Sub-Pixel Animation

This article on sub-pixel animation features how change few pixels inside a sprite to animate it. From 2D Will Never Die. This is hot!

Animation Of A Flag

By kiwinuptuo, a tutorial on how draw an animated flag.

Isometric Roof

Pixel artist zi, at PixelJoint provides a very thorough tutorial on how to build a pixel art roof.

Log And Squirrel

Log and squirrel Pixel Art examples.

How To Make A Pixel Nightstand

By vanmall from Deviant Art, this cool tutorial teaches how to make a pixel nightstand.

And there is more by the same artist:

how to make a pixel lamp

how to make a pixel chair

how to make a pixel table

how to make a pixel tile

how to make a pixel house

how to start with Pixel Art

Pixel Art Tree

This tutorial by D-e-n-a from Deviant Art teaches how to make a Pixel Art tree

Pixel Art Sword And Shield

From vbGore, this tutorial features nice Pixel Art swords and shield.

Pixel Art Isometric Cake

From Deviant Art, a tasty tutorial: how to make a isometric cake. Check the corners outline.

TENS Of Pixel Art Tutorials

Studio Miniboss, you must visit this website!

Pixel Art Scaling Comparision

This well constructed web page compares different algorithms to scale Pixel Art.

Pixel Mixing

Here we have an article about another scaling algorithm.

Pixel Art Freelance: Best Practices & Guidelines

This interesting post in Gamasutra by Adam Saltsman in 2009 tells about Pixel Art from a professional point of view, answering the question "Why Pixel Art?". As an additional benefit, it shows very nice Pixel Art images!.

Retronator Magazine & Pixel Art Academy

Well, Retronator Magazine is not just a tutorial page but a digital magazine dedicated to Pixel Art with a lot of cool stuff inside. Including news, reviews, tutorials and the Pixel Art Academy.

VIDEOS

Shield

Armor

Armor (2)

Armors

Weapons

Other YouTube Videos

characters dragon an outfit another outfit werewolf centaur house building color harmony techniques shooter colossus mushroom