6 ms·

Piskel – A simple web-based tool for Spriting and Pixel art

233 points by dolftax 10y ago

exodust 10y ago
Impressive web app! Runs fine in my not-recently-updated browser. Really like the Save options, there's 'save offline to file'; 'save offline in browser' (I presume HTML5 storage); and save online. Save offline to file is really nice, and I wasn't aware could be done. It got my Googling, and I found this: https://github.com/eligrey/FileSaver.js https://github.com/eligrey/FileSaver.js Which I'm guessing is what people use these days when needing 'save as file' from the browser. I wanted this about 3 years ago and gave up, settling on saving the JSON to an Amazon bucket as the only option. I always wanted save as file though, just because I love local storage options in an age of cloud storage. I will now revist my old web app and try to implement this.
- Jasper_ 10y ago
  It was definitely there three years ago. The trick is to create an <a> with the "download" attribute and set the URL to a data URI (or, if supported, use a blob and URL.createObjectURL). That will get you a download prompt.
djsumdog 10y ago
Wow. The UI is pretty easy to learn and the whole thing feels really zippy. I wish I was better at pixel art so I could make something cool. Right now I have a box that just kinda jiggles a bit.
splorg 10y ago
I love this site! I used it to make the graphics for a virtual pet app last year. http://www.piskelapp.com/user/5024502723379200/public http://www.piskelapp.com/user/5024502723379200/public
- ge96 10y ago
  Curious what green usernames mean? I see them periodically, your username to me is green colored.
  - DanBC 10y ago
    Green usernames are new users. This allows people to provide gentle, polite, advice about community norms.
    - ge96 10y ago
      I didn't know that, thanks for the information.
marchenko 10y ago
This is a great project. I was pleasantly surprised to discover that you have a Linux offline build as well.
Sholmesy 10y ago
I really like apps that nail one specific thing well. Bookmarking this for later, good stuff.
clarry 10y ago
The palette tools feel very clunky and primitive. I'd expect there to be a very simple way to add the current color to a palette, but I can't figure out how. More importantly, I expect that modifying a color in the palette would also affect all the pixels that use said palette entry! Instead, they retain their old color. Also, it would really help if I could freely arrange palettes all in their own windows, like this: https://i.imgur.com/UHtBlbk.gif https://i.imgur.com/UHtBlbk.gif https://i.imgur.com/LYbZagv.gif https://i.imgur.com/LYbZagv.gif https://i.imgur.com/oOaR6x5.gif https://i.imgur.com/oOaR6x5.gif Unfortunately a pixel graphics editor that has lackluster palette tools is a non-starter for me so I didn't even bother with looking at the rest of the features...
- feiss 10y ago
  yup, a good palette management is essential for a good pixel art app. Something like what grafx2[1] has, at least. [1] http://pulkomandy.tk/projects/GrafX2 http://pulkomandy.tk/projects/GrafX2
- HugoDaniel 10y ago
  I love this. Amazing work with those gifs and the color palettes. I have been playing with colors and would like to try to implement something like this in my spare time. Do you know about the dawnbringer palettes[0] ? They seem a good default for an initial approach to pixel art. [0] https://github.com/geoffb/dawnbringer-palettes https://github.com/geoffb/dawnbringer-palettes
- j_m_b 10y ago
  In Chrome, clicking the 'manage this palette' button doesn't seem to do anything. Perhaps it is the overlay causing problems. I agree with the above comment, this absolutely MUST be fixed! Even something as basic as what Aseprite has would be nice.
jopacicdev 10y ago
Ah memories! Thanks you for this!
ge96 10y ago
Oh man, I like that UI
makepanic 10y ago
if one wants a fully featured pixelart editor, there's always aseprite[1]. (You can build it from source for free) [1] - https://www.aseprite.org/ https://www.aseprite.org/
tonetheman 10y ago
Did anyone see if there was a way to onion skin the previous frame... I like the interface.
- joemi 10y ago
  There's an onion icon next to the FPS slider... Is that what you're looking for?
thibaut_barrere 10y ago
The purity of the interface reminds me of Deluxe Paint II (https://upload.wikimedia.org/wikipedia/en/6/6c/Snapshot_DeluxePaint_II_MSDOS.png https://upload.wikimedia.org/wikipedia/en/6/6c/Snapshot_Delu...). Great work!
feeboo 10y ago
So nice, when you just made a mistake and a simple ctrl+z just works right out of the box. And great UI. Gonna look more into it later.
thomasfl 10y ago
This is hilarious - the clone icon is a picture of a sheep.
- alvarosevilla95 10y ago
  Maybe I'm a bit thick today, but what's the sheep refering to?
  - jeremy_wiebe 10y ago
    Dolly. https://en.m.wikipedia.org/wiki/Dolly_(sheep) https://en.m.wikipedia.org/wiki/Dolly_(sheep)
firefoxd 10y ago
A friend of mine has been building a similar tool [1] for a year now. When I have brainfog at work, I waste all my time on it [2] [1] http://www.eight-bits.com http://www.eight-bits.com [2] http://www.eight-bits.com/images/journey.png http://www.eight-bits.com/images/journey.png
- bluehazed 10y ago
  Journey! Wonderful game.
joemi 10y ago
I don't need pixel editors a lot, but I've definitely used Piskel a few times in the past for making some simple icons. It's not perfect, but works well enough for me.

233 points by dolftax 10y ago

Impressive web app! Runs fine in my not-recently-updated browser. Really like the Save options, there's 'save offline to file'; 'save offline in browser' (I presume HTML5 storage); and save online. Save offline to file is really nice, and I wasn't aware could be done. It got my Googling, and I found this: https://github.com/eligrey/FileSaver.js https://github.com/eligrey/FileSaver.js Which I'm guessing is what people use these days when needing 'save as file' from the browser. I wanted this about 3 years ago and gave up, settling on saving the JSON to an Amazon bucket as the only option. I always wanted save as file though, just because I love local storage options in an age of cloud storage. I will now revist my old web app and try to implement this.

Jasper_ 10y ago
It was definitely there three years ago. The trick is to create an <a> with the "download" attribute and set the URL to a data URI (or, if supported, use a blob and URL.createObjectURL). That will get you a download prompt.

djsumdog 10y ago

Wow. The UI is pretty easy to learn and the whole thing feels really zippy. I wish I was better at pixel art so I could make something cool. Right now I have a box that just kinda jiggles a bit.

splorg 10y ago

I love this site! I used it to make the graphics for a virtual pet app last year. http://www.piskelapp.com/user/5024502723379200/public http://www.piskelapp.com/user/5024502723379200/public

ge96 10y ago
Curious what green usernames mean? I see them periodically, your username to me is green colored.
- DanBC 10y ago
  Green usernames are new users. This allows people to provide gentle, polite, advice about community norms.
  - ge96 10y ago
    I didn't know that, thanks for the information.

marchenko 10y ago

This is a great project. I was pleasantly surprised to discover that you have a Linux offline build as well.

Sholmesy 10y ago

I really like apps that nail one specific thing well. Bookmarking this for later, good stuff.

clarry 10y ago

The palette tools feel very clunky and primitive. I'd expect there to be a very simple way to add the current color to a palette, but I can't figure out how. More importantly, I expect that modifying a color in the palette would also affect all the pixels that use said palette entry! Instead, they retain their old color. Also, it would really help if I could freely arrange palettes all in their own windows, like this: https://i.imgur.com/UHtBlbk.gif https://i.imgur.com/UHtBlbk.gif https://i.imgur.com/LYbZagv.gif https://i.imgur.com/LYbZagv.gif https://i.imgur.com/oOaR6x5.gif https://i.imgur.com/oOaR6x5.gif Unfortunately a pixel graphics editor that has lackluster palette tools is a non-starter for me so I didn't even bother with looking at the rest of the features...

feiss 10y ago
yup, a good palette management is essential for a good pixel art app. Something like what grafx2[1] has, at least. [1] http://pulkomandy.tk/projects/GrafX2 http://pulkomandy.tk/projects/GrafX2
HugoDaniel 10y ago
I love this. Amazing work with those gifs and the color palettes. I have been playing with colors and would like to try to implement something like this in my spare time. Do you know about the dawnbringer palettes[0] ? They seem a good default for an initial approach to pixel art. [0] https://github.com/geoffb/dawnbringer-palettes https://github.com/geoffb/dawnbringer-palettes
j_m_b 10y ago
In Chrome, clicking the 'manage this palette' button doesn't seem to do anything. Perhaps it is the overlay causing problems. I agree with the above comment, this absolutely MUST be fixed! Even something as basic as what Aseprite has would be nice.

jopacicdev 10y ago

Ah memories! Thanks you for this!

ge96 10y ago

Oh man, I like that UI

makepanic 10y ago

if one wants a fully featured pixelart editor, there's always aseprite[1]. (You can build it from source for free) [1] - https://www.aseprite.org/ https://www.aseprite.org/

tonetheman 10y ago

Did anyone see if there was a way to onion skin the previous frame... I like the interface.

joemi 10y ago
There's an onion icon next to the FPS slider... Is that what you're looking for?

thibaut_barrere 10y ago

The purity of the interface reminds me of Deluxe Paint II (https://upload.wikimedia.org/wikipedia/en/6/6c/Snapshot_DeluxePaint_II_MSDOS.png https://upload.wikimedia.org/wikipedia/en/6/6c/Snapshot_Delu...). Great work!

feeboo 10y ago

So nice, when you just made a mistake and a simple ctrl+z just works right out of the box. And great UI. Gonna look more into it later.

thomasfl 10y ago

This is hilarious - the clone icon is a picture of a sheep.

alvarosevilla95 10y ago
Maybe I'm a bit thick today, but what's the sheep refering to?
- jeremy_wiebe 10y ago
  Dolly. https://en.m.wikipedia.org/wiki/Dolly_(sheep) https://en.m.wikipedia.org/wiki/Dolly_(sheep)

firefoxd 10y ago

A friend of mine has been building a similar tool [1] for a year now. When I have brainfog at work, I waste all my time on it [2] [1] http://www.eight-bits.com http://www.eight-bits.com [2] http://www.eight-bits.com/images/journey.png http://www.eight-bits.com/images/journey.png

bluehazed 10y ago
Journey! Wonderful game.

joemi 10y ago

I don't need pixel editors a lot, but I've definitely used Piskel a few times in the past for making some simple icons. It's not perfect, but works well enough for me.