Pixel-Based Websites: Resources, Tutorials, And Examples

http://www.hongkiat.com/blog/pixel-based-websites/

by jakerocheleau • 14 years ago

132 12 14 years 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• 14 years 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• 14 years 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 They had one of the best tiling background collections of all.

kyleashipley3• 14 years 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/ 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• 14 years 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?

kyleashipley3• 14 years 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• 14 years 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.

kyleashipley3• 14 years 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• 14 years ago

The essentially left out the two largest/still thriving pixel art communities:

- http://www.pixeljoint.com/

- 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

jakerocheleau• 14 years 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• 14 years ago

There are a number of pixel art tutorials on Deviant Art as well. Some seem rather awesome.

http://kiwinuptuo.deviantart.com/gallery/27054576

Spectral• 14 years 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/

The art is extraordinary and the background sounds match perfectly and are very relaxing. Definitely worth taking a look at.

Pixel-Based Websites: Resources, Tutorials, And Examples

Related Stories