3 ms·

Pixel-Based Websites: Resources, Tutorials, And Examples

132 points by jakerocheleau 14y ago

stephengillie 14y ago
These are very pretty examples. I can definitely see them used in the future as videogame backgrounds and textures in HTML5 canvas games!
veneratio 14y ago
I was just looking for something like this. The breadth of uses for pixel art is great to see in this piece, especially when favicons came up right after the gaming tutorials. I'm no artist, but this stuff looks fun.
evoxed 14y ago
Blast from the past, with some new stuff throw in too! I'm not usually a fan of these lists but this one has some good stuff. I was wondering why K10k wasn't there, but sadly it turns out it finally took its last breath a year ago (after years of inactivity): http://kottke.org/11/10/so-long-kaliber10000 http://kottke.org/11/10/so-long-kaliber10000 They had one of the best tiling background collections of all.
kyleashipley 14y ago
Man, this would've been useful a few weeks ago! We posted this as a ShowHN recently, but we built http://www.awesomecontroller.com/ http://www.awesomecontroller.com/ as a side-scrolling pixel site. We used Pixen on OSX for pixel art, and it was really simple to get started. I'd highly recommend it for simple pixel work if you're not a Photoshop guru.
- reiichiroh 14y ago
  Shame your KickStarter doesn't look like it will make it. I haven't seen any press for it anywhere like Kotaku or Destructoid or any of the the major game blogs like Rock Paper Shotgun or 4 Color Rebellion. Any plans on relaunching it with more of a media blast?
  - kyleashipley 14y ago
    We tried reaching out to some gaming blogs, but didn't get a lot of traction. We learned a lot from the Kickstarter process though (blog post?), so if we do relaunch, we'll be smarter about the media coverage. Keep an eye on our Twitter account/mailing list if you want to see what we do with it. We might go completely open source and just provide build instructions, or we might take another crack at it.
- pixelbath 14y ago
  Cool site and product! A small nitpick: You have the NES controller plugging into the power button on the first billboard. The controller ports for the NES are inside the black strip along the right side.
  - kyleashipley 14y ago
    You're totally right. One of my friends helped out with that GIF, and I didn't spot check it closely enough. Thanks for the tip!
dylanrw 14y ago
The essentially left out the two largest/still thriving pixel art communities: - http://www.pixeljoint.com/ http://www.pixeljoint.com/ - http://www.wayofthepixel.net/ http://www.wayofthepixel.net/ Relevant plug: If you use safari, I wrote a small extension that detects if you are on pixeljoint and changes the image smoothing to nearest neighbor so the pixels look 'crispy'. Any other sites you can toggle this on and off from the toolbar. https://github.com/dylan/Crispy https://github.com/dylan/Crispy
- jakerocheleau 14y ago
  Oh damn thanks for sharing! I'm the author of the article and I did try my best to include all the communities & resources I knew about. I have never heard of either but excellent references and that's a nifty extension as well.
roco 14y ago
There are a number of pixel art tutorials on Deviant Art as well. Some seem rather awesome. http://kiwinuptuo.deviantart.com/gallery/27054576 http://kiwinuptuo.deviantart.com/gallery/27054576
Spectral 14y ago
For those who didn't bother going through the list, here is one of the listed sites that caught my attention: http://www.effectgames.com/demos/canvascycle/ http://www.effectgames.com/demos/canvascycle/ The art is extraordinary and the background sounds match perfectly and are very relaxing. Definitely worth taking a look at.

132 points by jakerocheleau 14y ago

These are very pretty examples. I can definitely see them used in the future as videogame backgrounds and textures in HTML5 canvas games!

veneratio 14y ago

I was just looking for something like this. The breadth of uses for pixel art is great to see in this piece, especially when favicons came up right after the gaming tutorials. I'm no artist, but this stuff looks fun.

evoxed 14y ago

Blast from the past, with some new stuff throw in too! I'm not usually a fan of these lists but this one has some good stuff. I was wondering why K10k wasn't there, but sadly it turns out it finally took its last breath a year ago (after years of inactivity): http://kottke.org/11/10/so-long-kaliber10000 http://kottke.org/11/10/so-long-kaliber10000 They had one of the best tiling background collections of all.

kyleashipley 14y ago

Man, this would've been useful a few weeks ago! We posted this as a ShowHN recently, but we built http://www.awesomecontroller.com/ http://www.awesomecontroller.com/ as a side-scrolling pixel site. We used Pixen on OSX for pixel art, and it was really simple to get started. I'd highly recommend it for simple pixel work if you're not a Photoshop guru.

reiichiroh 14y ago
Shame your KickStarter doesn't look like it will make it. I haven't seen any press for it anywhere like Kotaku or Destructoid or any of the the major game blogs like Rock Paper Shotgun or 4 Color Rebellion. Any plans on relaunching it with more of a media blast?
- kyleashipley 14y ago
  We tried reaching out to some gaming blogs, but didn't get a lot of traction. We learned a lot from the Kickstarter process though (blog post?), so if we do relaunch, we'll be smarter about the media coverage. Keep an eye on our Twitter account/mailing list if you want to see what we do with it. We might go completely open source and just provide build instructions, or we might take another crack at it.
pixelbath 14y ago
Cool site and product! A small nitpick: You have the NES controller plugging into the power button on the first billboard. The controller ports for the NES are inside the black strip along the right side.
- kyleashipley 14y ago
  You're totally right. One of my friends helped out with that GIF, and I didn't spot check it closely enough. Thanks for the tip!

dylanrw 14y ago

The essentially left out the two largest/still thriving pixel art communities: - http://www.pixeljoint.com/ http://www.pixeljoint.com/ - http://www.wayofthepixel.net/ http://www.wayofthepixel.net/ Relevant plug: If you use safari, I wrote a small extension that detects if you are on pixeljoint and changes the image smoothing to nearest neighbor so the pixels look 'crispy'. Any other sites you can toggle this on and off from the toolbar. https://github.com/dylan/Crispy https://github.com/dylan/Crispy

jakerocheleau 14y ago
Oh damn thanks for sharing! I'm the author of the article and I did try my best to include all the communities & resources I knew about. I have never heard of either but excellent references and that's a nifty extension as well.

roco 14y ago

There are a number of pixel art tutorials on Deviant Art as well. Some seem rather awesome. http://kiwinuptuo.deviantart.com/gallery/27054576 http://kiwinuptuo.deviantart.com/gallery/27054576

Spectral 14y ago

For those who didn't bother going through the list, here is one of the listed sites that caught my attention: http://www.effectgames.com/demos/canvascycle/ http://www.effectgames.com/demos/canvascycle/ The art is extraordinary and the background sounds match perfectly and are very relaxing. Definitely worth taking a look at.