Allow me to introduce myself, my name is Alex Hanson-White, and I primarily create pixel-art for a living. In my free time I like to code video games, but recently I've been developing this pixel-art editor out of my love for the medium and all the amazing artists that work with it. My hope is that by developing this editor I will be helping give back to the community a resource that will enable a new fun and rewarding way to create pixel-art. I've briefly outlined below a few main features that set this editor apart from the rest.

Pixel with others simultaneously! This is the main reason why I created this editor. With all my years of pixeling, I've never came across a tool with this ability that is geared towards pixel artists. I believe it will be useful for game projects with multiple artists or for quick gamejam asset creation between collaborators. It can also be great for tutoring sessions, or other fun collaborations. You can record the entire process and also replay it. This allows everyone to share and relive each other's work step by step, offering an exciting way to appreciate a work of art. You can also branch off anywhere in the replay and pixel it a new direction. The Colordex system that makes it easy to apply multiple colors intelligently with a single brush stroke while maintaining order of any specific color ramping you've defined. I was inspired by the HD Index Painting technique my friend Dan Fessler popularized, however I found that technique a hassle to manage, and the software expensive. The Colordex system I created solves these issues, allowing you to focus on pixeling. The best way to understand how it works is to experience it yourself.

Animation Each frame acts as a cell in an animation. Turning a frame's visibility off by clicking its' eye icon will exclude it from the animation. You can set a frame's duration, and also link frames together. Linked frames are combined into one frame when animating. To play the animation, click the play button in the header of the Frames window. Click the same button again to stop the animation. Crop Image After making a selection via a selection tool, selecting Crop in the selection menu will resize the canvas around the selection. Due to possible networking scenarios, any previous crop/image resize/canvas resize won't be able to be undone if this operation is made as this operation will clear the History. You will still be able to undo this operation, unless you make another resize in the future. Export/Import Gifs To import a gif, choose import from the File menu and select a gif file. It will begin processing each frame into a new project. Exporting a gif is simple, when you have an animation that is ready to be exported, go to export under the File menu and select Gif. A box will display that contains a property for the transparency color. Clicking this property will allow you to select which color you'd want to be transparent in the gif. Clicking submit will begin processing the gif which you can then save. Export/Import Spritesheets To import a spritesheet, first import the image file by selecting import from under the File menu. After it has loaded, select Spritesheet from under the edit menu. A box will display that contains properties pertaining to the columsn and rows in the spritesheet and the direction the animations are organized. When you click submit, the spritesheet will get sliced up according to your settings and create frames for each cell. To export a spritesheet, go to export under File menu and select Png. A box will display that contains a dropdown menu with the option for a spritesheet. Selecting this option will reveal settings for columns and rows along with the direction the animations are organized. Clicking submit will create the spritesheet and allow you to save it. Flip/Rotate Selection After making a selection, it can be flipped hoizontally and vertically by choosing the corresponding item under the Selection menu. You can also rotate it 90 degrees clockwise or counter-clockwise. Alternatively, there is a round handle next to any selection you make, that you can click and drag to rotate it an arbitrary angle. Frames Each frame has a thumbnail, and a handle. Clicking and dragging the handle to the left of the thumbnail allows reordering of the frames. You can select multiple frames by clicking and dragging the thumbnails, which will become highlighted to signify their selected state. You can reorder multiple frames, and also set their duration by clicking the lower right number in a thumbnail. Clicking a frame's eye icon will toggle its visibility on and off. Invisible frames are skipped when playing an animation. Frames have a transparency value which you can set by dragging the bar above the thumbnails. Grid snapping Holding shift down while dragging a selection will snap it to the grid. You can also change the grid size in the settings. History Each action you make that applies a change to the canvas will be saved in the history, allowing you to revert to previous steps either by clicking an action in the history list, selecting undo/redo from the edit menu, or pressing ctrl+z or ctrl+y. Crop, canvas resize, and image resize actions share one undo. So if you make two crop/image resize/canvas resize, you'll only be able to undo the last one. They also clear the History. The only way to revert further back is to save your work, then play it back to the moment before that action is made, and then branch off a new project from that point. Hotkeys & Shortcuts These are key combinations you can press that allow you to control the editor easily. You can find a list of these in the Hotkeys tab. Layers/Frames Frames act like layers. The lower layers in the list will be displayed below the others while the higher layers in the list will be displayed above. Linked Layers/Frames Resize Selection/Image/Canvas Rotation Algorithm Selection Tools After selecting a portion of the image with the lasso, marquee or magic wand tool, you can hold Ctrl while you click and drag the selection to clip it from the image and reposition it. Holding Ctrl and Alt when you click and drag will clone it instead of clipping it completely from the image. Holding down the Ctrl key while you move a selection will snap it to the grid. You can click outside of the selection deselect and set the clipped portion into the image, or press Ctrl+D to deselect. Pressing Delete key will clear the clipped selection, or the portion of the canvas if nothing was clipped. The arrow keys can be used to help position the selection pixel by pixel. You can also hold Shift while you use a selection tool to add to any current selection, or hold Alt to subtract from the selection, or press both to XOR the selection. After clipping a selection, handles will appear that allow you to resize and rotate the clipped selection. Tileset/Map Tools Tool customization Wacom web plugin Zoom

Click here for a video demonstration on how to use the Colordex.
The Colordex is a system that integrates color ramps into your brush strokes so that the color you paint isn't simply a single color, but rather multiple colors of a color ramp. You can have multiple color ramps interacting together while you apply or remove colors. Steps for quickly setting up your brush is outlined below.

1. Click the Colordex button to open your palette, or press the C key. This is where you will organize your colors.
2. With either the pencil or brush tool, draw your color ramps with each consecutive color touching the previous color drawn. It might make it easier to draw if you increase your brush size.
3. Once you're satisfied with your colors, hold Ctrl key and Left click a color that will act as your target color(the color your brush will draw towards). A circle icon will appear over the location you clicked.
4. With the Ctrl key held, Right click this time on another color that you'll want to erase towards, but make sure it is a color on the same color ramp as the target color(There must be a sequence of colors connected between them if they aren't neighboring each other).
5. At this point, the Colordex will be set to erase towards your chosen color and stop there, but if you want it to continue erasing to the transparent canvas you can right click a blank part of the canvas instead of a color, but you'll need to mark where on a color ramp the Colordex should step on and off from. When you right click, you hold the mouse button down and drag the small square onto a color to solve this decision. If you don't do this, the system won't know which color to create if it's drawing from transparency therefor preventing any color to be drawn from a transparent section of the image.
6. You're now ready to draw. Choose the Brush tool to utilize the colordex with your strokes, and choose the Magic Eraser to utilize the colordex while you erase. Tip: You can hold Alt to sample colors you've drawn, which will shift your target color in your colordex. You also can have multiple color ramps connected together, or separate. It's up to your imagination how you want to organize your Colordex.

Eraser/Magic Eraser (E) hold key to swap between. Pencil/Brush (B) hold key to swap between. Flood Fill (G) Marquee (M) Lasso (L) Magic Wand (W) Eyedropper (I) Hand (H)

Zoom (Z) Tile (T) Remove Tile (R) Collision Undo (Ctrl+Z) Redo (Ctrl+Y) Copy (Ctrl+C) Paste (Ctrl+V) Deselect (Ctrl+D)

Swap Colors (X) Colordex (C) Zoom in (Ctrl+=) Zoom out (Ctrl+-) Grid Snap (Ctrl+Leftmouse) Remove Selection (Delete) Draw Straight Line (Shift) Eyedrop canvas (Alt) Size Increase (]) Size Decrease ([) Tool preset (0-9)

Move Selection (Arrows) Cut Selection (Ctrl+Click) Copy Selection (Ctrl+Alt+Click) Add Selection (Shift+Click) Subtract Selection (Alt+Click) Xor Selection (Shift+Alt+Click) Zoom out (Spacebar+Alt) Zoom in (Spacebar+Ctrl) Secondary Viewport (V)

How to use the Colordex