BobSprite
BobSprite is a browser based free online sprite editor excellent for pixel art.
It also has tools and effects for normal drawing and painting.
You must have a computer (keyboard, mouse, big screen).
And you must use an up to date *Chrome* or *Firefox* browser.
If your browser is in incognito mode, it will not memorize your preferences
(size, grid, colors...).
You need NOT to register.
Warning: Don't let the browser translate the editor or else it may behave bad!
Launch the Editor
Click the red button above to open BobSprite Editor.
BobSprite has two layers: Sprite (main layer) and Mask
(helper layer placed over Sprite).
Both layers have transparent background.
The background color that you may choose in panel other
is about the display screen, NOT about the resulting image.
Clicking this button shows Sprite alone.
Hotkey: S
Clicking this button shows Mask alone.
Hotkey: M
Clicking this button shows Sprite and Mask.
Hotkey: B
Clicking this button exchanges Sprite and Mask.
Hotkey: E
Typing - decreases zoom.
Typing + increases zoom.
You can't change zoom with mouse.
Zooming respects chosen position of image!
Blank:
Blank (0,0,0,255) is not white (255,255,255,255)!
Sprite and Mask start fully transparent (only blank pixels).
Most effects and some tools preserve blank pixels.
Black:
Black (0,0,0,255) is considered the color for oultine.
Most effects avoid change (or consider) black pixels or turn pixels to black.
They change pixels to almost black (1,1,1,255).
Clicking this button paints the whole layer.
It erases the layer before paint it.
If SHIFT is pressed the layer is erased but not painted.
This tool erases the pixels before paint them.
If SHIFT is pressed the pixels are erased but not painted.
The size of this tool is always 1px x 1px.
This tool produces clean trace (no double pixels).
Its undo/redo memory works pixel by pixel. So it wastes much memory if used on big images.
This tool works exactly like Thin Pen but with parallel effect.
This tool erases the pixels before paint them.
It draws straight lines.
MOUSE WHEEL changes its size.
This tool paints the border of the clicked area.
It erases the pixels before paint them.
If SHIFT is pressed the pixels are erased but not painted.
Don't drag this tool.
This tool erases the pixels before paint them.
If SHIFT is pressed the pixels are erased but not painted.
MOUSE WHEEL changes its size.
This tool works like Pen but has no effect on blank or black pixels.
The purpose of this tool is to paint a creature or object without mess its black outline or the blank pixels outside it.
This tool does not erase the pixels before paint.
It merges the old color with the new color.
It does not change the opacity of pixels.
It has no effect on blank or black pixels.
MOUSE WHEEL changes its size.
SHIFT MOUSE WHEEL changes its intensity.
>> Must release MOUSE BUTTON to affect same pixels again!
This tool just lightens the pixels.
It does not change the opacity of pixels.
It has no effect on blank or black pixels.
MOUSE WHEEL changes its size.
SHIFT MOUSE WHEEL changes its intensity.
>> Must release MOUSE BUTTON to affect same pixels again!
This tool just darkens the pixels.
It does not change the opacity of pixels.
It has no effect on blank or black pixels.
MOUSE WHEEL changes its size.
SHIFT MOUSE WHEEL changes its intensity.
>> Must release MOUSE BUTTON to affect same pixels again!
This tool replaces the color of all pixels which color matches the color of the clicked pixel.
If SHIFT is pressed the pixels are erased only.
Don't drag this tool.
This tool replaces the color of all pixels in the clicked area.
If SHIFT is pressed the pixels are erased only.
Don't drag this tool.
This tool draws an empty rectangle.
If SHIFT is pressed the rectangle is filled.
This tool draws an empty ellipse.
If SHIFT is pressed the ellipse is filled.
This tool erases the pixels before paint them.
If SHIFT is pressed the pixels are erased but not painted.
It has no effect on blank or black pixels.
MOUSE WHEEL changes its size.
This tool captures the color of the target pixel.
Hotkey: SPACE
Clicking this button scales up the layer in pixelated mode, doubling its width and its height.
It is not allowed for layer which width and/or height is greater than 1000 pixels.
Micro Tutorial:
1. click the Scale Up button
2. make some changes (easily due to the higher resolution); but do not move the content of the layer
3. click theScale Down button
(pixels that were not changed in step (2) remain intact)
Clicking this button scales down the layer smoothly, halving its width and its height.
It is not allowed for layer which width and/or height has odd number of pixels.
This tool blurs the target pixels (considering their neighbours).
If SHIFT is pressed the effect is the opposite of blur.
It does not change the opacity of pixels.
It has no effect on blank or black pixels.
MOUSE WHEEL changes its size.
SHIFT MOUSE WHEEL changes its intensity.
>> Must release MOUSE BUTTON to affect same pixels again!
This tool blurs the border pixels of the clicked area.
It does not change the opacity of pixels.
It has no effect on blank or black pixels.
SHIFT MOUSE WHEEL changes its intensity.
Don't drag this tool.
Clicking this button swaps the left and right halves of the layer.
If SHIFT is pressed it swaps the top and bottom halves instead.
The purpose of this tool is help to match tile set borders.
This tool selects a rectangular part of the layer.
Mask becomes the selected part.
If SHIFT is pressed the selected part is erased.
This tool selects an irregular part of the layer.
Mask becomes the selected part.
If SHIFT is pressed the selected part is erased.
This tool moves layer(s) on stage.
If SHIFT is pressed only Mask is moved.
If CTRL is pressed the content of layer is moved (part of it is erased!) instead.
Don't press SHIFT and CTRL.
You may use keyboard arrows instead of mouse. It is slower but is more precise.
When this button is pressed, layer(s) or content of layer moves fast.
Only works when moving by keyboard arrow(s).
Hotkey: F
Clicking this button centers layer(s) on stage.
If SHIFT is pressed it centers Mask only.
Hotkey: C
Clicking this button adjusts Mask position to match Sprite position.
If SHIFT is pressed adjusts position and size.
If CTRL is pressed adjusts position and size and erases Mask.
Don't press SHIFT and CTRL.
This tool scales the layer.
It is more precise with great zoom.
This tool rotates the layer.
Drag mouse horizontally over the layer.
If SHIFT is pressed intensity is low.
It is more precise with great zoom.
This tool shears the layer horizontally.
If SHIFT is pressed it shears the layer vertically.
Drag mouse horizontally over the layer.
It is more precise with great zoom.
Clicking this button lightens the layer.
If SHIFT is pressed it darkens the layer.
It has no effect on blank or black pixels.
Clicking this button increases the contrast of the layer.
If SHIFT is pressed it decreases the contrast of the layer.
It has no effect on blank or black pixels.
Clicking this button pastes Mask on Sprite.
If SHIFT is pressed blank pixels in Sprite are preserved.
It warns when opacity (panel effect) of any layer is not 100%.
Hotkeys: CTRL V, CTRL SHIFT V
Special hotkey: CTRL B pastes Mask behind Sprite
Clicking this button creates an image merging Mask on Sprite.
If one layer is off, the image is a copy of the other layer.
It warns when opacity (panel effect) of any layer is not 100%.
Mask becomes this image and its opacity (panel effect) becomes 100%.
Clicking this button creates an image merging Mask on Sprite.
If one layer is off, the image is a copy of the other layer.
It creates a 1200 x 1200 pixels tile set image that is shown in a new tab of browser.
Then you can RIGHTCLICK to save it.
Make sure the browser is not blocking BobSprite pop ups.
Clicking this button loads an image from the computer.
Hotkey: CTRL L
Clicking this button creates an image merging Mask on Sprite.
If one layer is off, the image is a copy of the other layer.
It warns when opacity (panel effect) of any layer is not 100%.
Then it saves the image as a PNG file in the computer, by a pseudo-download.
Hotkey: CTRL S
>> In case the pseudo-download does not work:
Hotkey: SHIFT S opens the image in a new tab of browser; then you can RIGHTCLICK to save it. Make sure the browser is not blocking BobSprite pop ups.
Each layer has its own undo/redo memory.
Each memory has a maximum limit of 50.000.000 pixels.
Examples:
- 50 images of 1000 pixels each side
- 5000 images of 100 pixels each side
With Thin Pen and Mirror Pen, this memory is very precise and lets you retrieve any small change that you make.
Hotkey: CTRL Z or BACKSPACE
Just the opposite effect of Undo.
Hotkey: CTRL Y or SHIFT BACKSPACE
Memorizes image at end of memory slots.
If SHIFT is pressed memorizes image at start of memory slots.
A slot is never duplicated:
- the old slot is automatically deleted
- the new slot may use the name of the deleted slot
BobSprite automatically memorizes loaded and saved images in slots.
A slot can be retrieved as Sprite and as Mask.
Hotkey: ENTER
If SHIFT is pressed shows image of first memory slot.
Hotkey: PAGEUP
If SHIFT is pressed shows image of last memory slot.
Hotkey: PAGEDOWN
Deletes memory slot that matches the image of the layer.
Hotkey: DELETE
Click on color sample inside frame selected in panel color to open color picker.
Set up the frames and frame duration in panel animation:
- MOUSEDRAG swaps frames
- CLICK toggles frame on/off
- SHIFT CLICK clones frame to the layer
- CTRL CLICK clones canvas image to frame
The frame marked as "canvas" is automatically updated with content of Sprite and/or Mask.
Monitor Box in panel main shows the animation (must select option animation ).
No data is sent to server.
After load the page, you may work offline.
Typing CTRL - decreases browser zoom.
Typing CTRL + increases browser zoom.
Typing F11 toggles full sreen mode.
Often you will try to paint or apply some effect and nothing will happen.
This is not a bug:
Maybe you are using Feather ( Brush, Spray... ) on blank or black pixels.
Change the selected color.
Remember that some effects need blank area to work.
Others need homogeneous colored area.
And some need transparent and/or black pixels.
Please state your concern(s) in the comments section of our YouTube videos.