Pixel-Art-Maker

This website allows you to make pixel art and export it as a PNG.

Sections

Tools
Features
Usage

Tools

Save as png

Open a popup where you type in a final image size, and then the image appears as a PNG at the bottom of the page.
alt+s

Reset grid

If alert is confirmed, will reset every pixel in the grid to be transparent.
alt+r

Pen tool

This is the default tool, and will be selected if any other tool is deselected. Allows you to draw freely by clicking a pixel, or dragging while with the mouse down.
alt+space

Sample colour

Lets you click on any pixel on the grid to set your brush to that colour.
alt+p

Eraser

Acts like the pen tool, but with a transparent brush.
alt+e

Fill area

Fills in all the pixels in an enclosed area to be the brush colour.
alt+f

Pick colour

Opens up a draggable widget where you can create and delete colour circles. These colour circles are automatically saved between sessions, and any of them can be selected to change the brush colour to its colour. The colour of these circles can be changed either through your computer's native colour selector, through typing in a CSS colour code, or with the RGBAHSL sliders/text boxes.
alt+c

Draw line

Draws a line between the two points that you click, and shows you a preview of the line when you hover over squares after clicking one point.
alt+l

Draw circle

Draws a circle between the two points that you click (first point is midpoint, second point is on circle), and shows you a preview of the circle when you hover over squares after clicking one point.
alt+o

Change view

Switch between the different view modes. There's:

Grid and background dots
Grid and no background dots
No grid and background dots
No grid and no background dots

The default is grid and background dots. The grid shows you the border of the square, and the background dot goes behing the pixel colour, allowing you to see if the pixel is transparent/translucent.
alt+v

Undo last action

Undoes your last move. A move is any of the following:

Grid reset
Fill area
Draw line
Click pixel (including eraser)
Mousedown drag (including eraser)

alt+z

Redo last action

Undoes the last undo. Does not work if any extra pixels are changed between the undo and redo
alt+shift+z

Download file for later editing

Downloads your file as the custom .pxart fomat. This file contains all of the grid data, and can be re-imported in the popup that appears when the site is opened
alt+d

Hides the sidebar with all the tools except for itself. Can be re-clicked to reveal the toolbar. Keyboard shortcuts for tools still work when the bar is hidden.
alt+h

Features

Choose colour with native picker, CSS code, or RGBAHSL sliders / input boxes
Make custom-sized grid - any rectangle from 1x1 up to 100x100
Grid always scaled to fit on screen, ensuring each square is as big as possible while being visible
Export as PNG image, with alpha channel support
Choose how much to scale one grid square into a pixel - you can make a 2x2 grid become a 2x2 - 100x100 image
No loss in image quality
Create new colours and have multiple at a time to choose between. You can delete these, and they are save accross sessions
Colour menu can be dragged and relocated across page
Use the line tool and click on one point, then hover elsewhere to see a preview, and click to apply
Dots behind each grid square to show opacity
Choose between view options of grid and dots, no grid and dots, no dots and grid, or no dots and no grid
Hide the menu to draw without distractions
Download your project as a .pxart file
Upload a .pxart file to continue editing it

Usage

Input the grid width and height in the popup
Use the colour selector to change your brush colour
Hover over a pixel for a preview of what it looks like
Click on a pixel to apply the colour change, or click and hold to colour every pixel your mouse goes over
Use tools to simplify the drawing process
Click the save button
Fill in the pixel scaler popup
Scroll down and your image is there. You can copy it or save it with a right click