Pixel Art

Pixel art is a form of digital art, created through the use of raster graphics software, where images are edited on the pixel level. Graphics in most old (or relatively limited) computer and video games, graphing calculator games, and many mobile phone games are mostly pixel art.

Pixel art is distinguished from other forms of digital art by an insistence upon manual, pixel-level editing of an image (without the application of image filters, automatic anti-aliasing or special rendering modes), often at close magnification. In this form, it is commonly said that "each pixel was placed carefully" to achieve a desired result.

Pixelling

Pixelling is the creation of pixel art, usually in Microsoft Paint, but sometimes in Adobe Photoshop also. In pixelling, only the basic of drawing tools are used, commonly the pencil and paint bucket tool. Use of the line, polygon, pen and other similar tools are often avoided.

Because of this rule, image filters (such as blurring or alpha-blending) or tools with automatic anti-aliasing are considered not valid tools for pixel art, as such tools calculate new pixel values automatically, contrasting against the precise manual arrangement of pixels that is associated with pixel art.

Drawings usually start with what is called the line art, which is the basic line that defines the character, building or anything else the artist is intending to draw. Linearts are usually traced over scanned drawings and are often shared among other pixel artists. Other techniques, some resembling painting, also exist.


The limited palette often implemented into Pixel Art usually promotes the use of dithering in order to achieve different shades and colors, but due to the nature of this form of art this is done completely by hand. Hand-made anti-aliasing is also used.

Pixel art is often saved in either GIF or PNG format, using lossless data compression so that each pixel is in exact precision and detail.


For further reading, visit http://en.wikipedia.org/wiki/Pixel_art

Samples of Pixel Art:

http://upload.wikimedia.org/wikipedia/commons/9/95/The_Gunk.png
This monster ("The Gunk") is an example of pixel art drawn using Microsoft Paint.

Here are a few parts of the above image of “The Gunk” in detail, depicting a few of the techniques involved:


http://upload.wikimedia.org/wikipedia/en/9/95/The_Gunk_details.png (http://en.wikipedia.org/wiki/Image:The_Gunk_details.png)


1. The basic form of dithering, using two colors in a 2×2 checkerboard pattern. Changing the density of each color will lead to different subtones.
2. Stylized dithering with 2×2 pixel squares randomly scattered can produce interesting textures. Small circles are also frequent.
3. Anti-aliasing can be done, by hand, to smooth curves and transitions. Some artists only do this internally in order to keep crisp outlines that can go over any background. The PNG alpha channel can be used to create external anti-aliasing for any background.

1. http://upload.wikimedia.org/wikipedia/commons/f/f0/Pixelart-tv-iso.png 2. http://upload.wikimedia.org/wikipedia/commons/a/ac/Pixelart-tv-niso.png

1. Sample 64x64 Isometric* Pixel art
2. Sample 64x64 Non-Isometric Pixel art

*The isometric kind is drawn in a near-isometric dimetric projection. This is commonly seen in games to provide a three-dimensional view without using any real three-dimensional processing. Technically, an isometric angle would be of 30 degrees from the horizontal, but this is avoided since the pixels created by a line drawing algorithm would not follow a neat pattern. To fix this, lines with a 1:2 pixel ratio are picked, leading to an angle of, approximately, 26.565 degrees (arctan 0.5).

http://upload.wikimedia.org/wikipedia/commons/e/e9/2xsai_example.png
Sample Isometric Art zoomed 2x

Plus, pixel art is commonly used for game sprites in conjunction with programs like Game Maker (http://www.symbianize.com/showthread.php?t=9632&highlight=Game+Maker+7.0.5.0) and RPG Toolkit. (http://www.symbianize.com/showthread.php?t=9718&highlight=RPG+Toolkit) :thumbsup:

Pixel Tutorial #1

This one is from =neekko of deviantART

http://fc01.deviantart.com/fs10/f/2006/126/c/3/dragpixtut.gif

(Tutorial is in image file. Posted only the link so dial-up users would not be troubled :))

Pixel Tutorial #2

Source: http://www.bouncybubbles.net

In this tutorial, I am using a cute picture of Mashimaro that I found here (http://mashimaro.co.kr/). You can use the same image, click here (http://bouncy-bubbles.net/tuts/pixtut/base.gif) to save it.

» Open the image in adobe photoshop. The image is too big so we will resize it. click the image option from top menu of the program, choose image size and put the size there that you want to work with.

[PS Tip: If the image is in .gif format, resizing it right away will make the image look ugly and uneven. To avoid this, click the image option from top menu, select mode and select RGB mode in it. Now resize the image.]

» Now, in the layer palette, right click the background layer [L1] and select duplicate layer [L2]. Make the [L2]'s opacity 75% for now. Click the layer option in top menu or program and select new layer [WL], it will be transparent by default, keep its opacity 100%.

» Make the background layer invisible/hidden. Please view this image (http://bouncy-bubbles.net/tuts/pixtut/1pt.gif) to understand the abbreviations used for different layers in this tutorial.

» Select the pen tool from the tool box and layer [WL] in the layer palette so its active. In this tutorial, all the drawing will be done only on the top layer i.e.: [WL]. Select the dropper tool and click on the image to find just the right color you want the borders of the image to have.

» Zoom in and start drawing pixel by pixel on the WL tracing the lightly seen image of the underlying layers. I chose a dark gray color for the outline of the image, click here (http://bouncy-bubbles.net/tuts/pixtut/2pt.gif) to see a screenshot.

» Keep tracing the outlines carefully, if you can not see the background image properly, you may click on the L2 and increase its opacity from time to time, but remember to select the WL whenever you draw, do not draw on L1 or L2.

» Now you are actually pixelling, this will be better understood with pictures:


Outlining finished
http://bouncy-bubbles.net/tuts/pixtut/3pt.gif

Started filling color inside
http://bouncy-bubbles.net/tuts/pixtut/4pt.gif

Finished filling color inside
http://bouncy-bubbles.net/tuts/pixtut/5pt.gif

When both L1 & L2 are hidden [step is optional]
http://bouncy-bubbles.net/tuts/pixtut/6pt.gif

Flatten the image [on top menu, click layers > flatten > click ok if something else appears.]
http://bouncy-bubbles.net/tuts/pixtut/7pt.gif

» If you see some color coming out of the outlines, the remains of background layers, use the same color as your background (white here) and with pen tool, color the outside outlines so there are no ugly looking stains anywhere.

» The image above is your actual finished pixel. However, to make it look even better, you have to add shades to it. Save the image first [.jpg] as a backup so if you mess up while shading, you still have the pixel saved.

» Open the saved image, right click the background layer in layer palette and make a new layer. Choose darker shades than you used to fill the image, zoom in and start shading randomly from the corners.

» Zoom out to see if the image looks good, I suggest you make new layers everytime you are adding new shades so if anything goes wrong, you can delete the layer that went wrong.

» To see how I added shading to the image click here (http://bouncy-bubbles.net/tuts/pixtut/8pt.gif).

This is your final pixel, save it as .jpg or make it transparent and save as .gif .....it may not look very good, but remember practice makes the man perfect. Pixelling needs patience and practice. Hope, you like the tutorial. Oh by the way, if you are wondering how my pixel turned out , see below :)

http://bouncy-bubbles.net/tuts/pixtut/final.gif

More Pixelling Tutorials/Informative Links :D

Pixelling tips for budding artists (http://gfxzone.planet-d.net/articles/goblin_pixelling_tutorial-article.html)
Learn about Selective Outlining(Sel-Out) (http://pixel-zone.rpgdx.net/shtml/tut-selout.shtml)
Coloring Techniques (http://pixel-zone.rpgdx.net/shtml/tut-coloring.shtml)

thanks bro! good post... i will try this out...

ok.. good luck and post your pixel art here fil! :D

try ko po ito :D :thanks: sau