Guidance for Artisans

Pixelists are HabitRPG contributors who specialize in designing custom artwork for the site. They create icons for pets, weapons, armor, item drops, monsters, and any other artistic need the site may have.

Art Guide
Below are some rules and tips to help artists quickly produce materials.

In the end all patterns should be at 3x pixel zoom. This can be achieved in two ways: Especially for beginners it will be easier to use the 1x1 pixel version and scale it up in the end. The main stylistic guideline is that it should fit in visually with the other artwork (similar sizes, pixel RPG style) and have a slightly darker border.
 * 1) Create your pixel art with 1x1 pixel units. After completing the piece, scale it up 300%. Keep in mind that the working canvas size would be 1/3 of what is listed below.
 * 2) Create your pixel art with a 3x3 pixel brush. The pencil tool should be used to ensure hard edges without anti-aliasing. The eraser tool should also be adjusted accordingly. Upon completion, you have to make sure that all 3x3 pixels fit into a uniform grid.

Canvas sizes

 * Pets: 81x99px
 * Mounts: 105x123px
 * Eggs, Potions, Food: 48x51px (being discussed)
 * Shop (Item Store, Armory, Costumes): 40x40 - 2x2 pixels (not 3x3 as usual)
 * Bosses: 216x177px (soft limit, you can go over/under a bit)
 * Characters: 90x90px

Pets and Mounts
If anyone needs help with a starting point, Shaners  made these two templates that can serve as the bottom layer when working then hidden before export:

Work at this size and then export at 3x without any anti-aliasing or interpolation.

Mounts need to be submitted in two parts so that it may be layered with the character. The following is an example with the base dragon mount's head and body:



Character Sprites
Currently, the character sprites are on a 90x90 pixel canvas. New items for the character (eg. hair, accessories, armor, weapons) should ideally fit within the same sized canvas. (This is currently under discussion and the dimensions may change.) The image should have a transparent background with the item positioned within the canvas the way it should be placed on the character. The following image may be used as a guide for item alignment:



Layers
The character's final image is compiled by code that places the various item images on top of each other. The order in which the layers are placed would be a good thing to keep in mind for item compatibility.

The order of the layers from bottom to top:
 * 1) mount-body
 * 2) skin
 * 3) back accessory
 * 4) armor
 * 5) head-outline
 * 6) hair-base
 * 7) hair-bangs
 * 8) mustache
 * 9) beard
 * 10) helm
 * 11) head accessory
 * 12) flower
 * 13) shield
 * 14) weapon
 * 15) mount-head
 * pet

GIMP
GIMP-related tips.

Use an existing image
Warning: Please avoid using existing images, and be creative (or at least be 100% sure that the image can be modified and commercially reused, which is not the case in the following video!)



In this video are shown the following tips:


 * Search a reusable image on Google.
 * Scale an image.
 * Add alpha layer to remove the background color.
 * Change colors with posterize and contrast.
 * Pixelize an image.
 * Set half-transparent pixel to black.
 * Draw a border around the image.

Pixel Art Threads
The simplest way to submit art is to place the image on an image hosting service, and then post that link to the Pixel Art Trello board as a comment. Pixelists must have a Trello account to post comments on the Trello boards. In order for pixel art to be integrated into HabitRPG, the pixelist must give HabitRPG legal permission to do so. If you have art that you would like to submit, please follow the directions on the permissions Trello card. When HabitRPG has the art and your permission to use it in hand, a blacksmith will then insert the files to the appropriate place. The trello board is also a good place to get feedback on your art.

Integrate art in repository
The following video explains the new spritesmith system and how one should commit new images to the repository.



Nomenclature
The names of image files need to be consistent within each category. The standard for file names is category-object-descriptor-index.png (using dashes or underscore). Object, descriptor, and index are optional depending on whether the category folder name would make the object name redundant or if there are no variations requiring a descriptor or index (i.e. no colors or multiples). For example, the third blonde beard option is named beard_blonde_3.png.

Keep in mind that all the art files should be zero indexed, but zero means none of that option, so don't use 0 as your file name index.