Using GIMP for learning and working with Pixel-Art

I have been using gimp for pixel-art and it works great with almost everything i needed for pixel-art. Even more than that!

I have written a tutorial how gimp can be used for pixel-art with some techniques to enhance pixel-art work.

Please download the tutorial in PDF format for offline use:

GIMP_for_pixel_art.pdf.7z


Or online version below:

Setup GIMP for pixelart work

1. Start GIMP ( v2.8 recommended )
2. Create new project 32x32 with background transparent.
3. Zoom-in till the working canvas gets screen-fit size.
4. Select pencil tool with black foreground color (default).
5. Choose any brush which doesn't has blur. Simply select the black circle without blur.
6. Now set brush size to 1 pixel in GIMP 2.8 OR minimum scale in GIMP 2.6.

Now the above steps have made a pixel art environment in GIMP.

Setup color palettes

1. Go to any of your favorite TAB ( layers tab at right is recommended ) and click [<| ] button which shows tooltip “configure this tab”. See following image:

2. Click -> Add Tab -> Palettes. Same way add FG/BG color

TIPS:

1. Always work in Greyscale using Greys (32) palette. Click this palette then switch to FG/BG Tab pane. You will get black to white color in order.
2. Why greyscale only? Its because realism doesn't reside in colors but number of colors. Doesn't a black & White image look real? It does. Therefore work in greyscale without caring colors just focus on shading and dithering then after completion give colors using fills or “select by color tool”.
3. Instead of selecting darker OR lighter color from color chooser just change the Opacity of the selected color. E.g. Use black color over lighter backgrounds with varying opacity to get desired black/grey color.
4. Another fast way of getting similar colors to image is to pick colors from the image itself using “color picker tool”.
5. To get dispersed pixel like spray set “Apply Jitter” checked with desired value.

How to get pixelart samples?

This can be done easily using GIMP. Following steps will let you get loads of pixelarts from images/wallpapers we have.

1. Import/Open any camera picture in GIMP.
2. Resize to acceptable size so that image becomes pixelated but clearly recognisable.
3. Now click in menu Image => Mode => Indexed => Generate Optimum palette with maximum 256 colors.
4. This will reduce total colors used by the image. This can make image low-colored but this is exactly what we wanted. Because most of pixelart is done with 256 colors only.
5. Now look at the parts of image how the pixels are organised :)

NOTE:

Indexed image will not offer flexible alpha values, only visible OR invisible pixel are there. To edit indexed image convert it back into RGB format.

Few pixarts i made in GIMP :

HQ2X rescaler, java app

HQnX (hq2x, hq3x, hq4x) algorithm can enhance the quality of a pixelated image. Nice software for pixel artists.


Usage:


java -jar ImageScaler_HQ2X.jar "image_file"


Download link: contains source code (NetBeans project) and binary in dist folder.
ImageScaler_HQ2X.7z



NOTE: The HQ2X code is not mine, it belongs to

http://www.hiend3d.com/hq2x.html
Maxim Steptin

I took hq2x java code from internet and utilized to build this app.

Sprite Frame Designer - animate regions of an Atlas image

I created this app to work with areas/regions of an atlas image to create sprite. This app can let you visualize a sprite sheet by creating frames of desired areas of image. It can export the frames in % size, % position of image. Means resizing image doesn't affect the frame information. However editing positions of framed areas can corrupt the information.

 The package contains a default Sprite sheet i created using my SpriteEditor app.

Tutorial:
1. Open the app by executing "bat" file on Windows, or SH (shell script) file on Linux.
2. Now Open your desired png image with sprites.
3. Select Frame 0, using the Rectangular blinking selection choose your frame area.
4. Create frame 2, do the same.
5. Adjust the animation time by setting value in Delta (ms) field.

The rectangular marker has 2 blinking circles, Left circle moves frame, right circle resizes frame.

You can export the frame information in a text file. This file is specific to the image you opened.

Try the inbuilt animation by executing the app and then opening the walk.conf file from res directory.


Download link:
SpriteFrameDesigner.7z

Software requirements:
1. Linux / BSDs / Windows
2. JRE - java runtime Environment. JDK 5 is used for development.


Example output of frame information in walk.conf present in res directory:
/* start */ 

kull_frames = 4; /* Total frames in walk animation */
Frame_1 = [array] 0.0 0.0 26.171875 93.75 0.0 0.0 100;
Frame_# ...
Frame_4 = [array] 71.09375 0.0 28.125 97.65625 -2.734375 0.0 100;

/* Finish */


Frame_# = [array] X% Y% Width% Height% HotSpotX% HotSpotY% Delta_Milliseconds;

X% = X% of image width. Same for Y%.

Width% = Frame width in % of image width.
Height% = Frame height in % of image height.
HotSpotX,Y = Game Engine dependent thing, ignorable.
Delta = Delta draw time of this frame in milliseconds.

calculated frame pixel positions by example:
Let Image size = 200x100
And Frame_1 is X = 50%, Y = 20%, W = 100%, H = 50%.
X = 100, Y = 20, W = 200, H = 50.  

Search tags:
Sprite sheet visualizer,  sprite sheet area exporter,