{"id":15496,"date":"2012-11-20T23:01:14","date_gmt":"2012-11-20T15:01:14","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15496"},"modified":"2022-03-21T20:56:08","modified_gmt":"2022-03-21T12:56:08","slug":"pixel-based-websites","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/","title":{"rendered":"Pixel-Based Websites: Resources, Tutorials, And Examples"},"content":{"rendered":"

Designing a web interface using pixel-style artwork<\/a> is relatively obscure compared to modern trends. You really need to dig through a handful of websites on the Internet to find some good examples; it\u2019s hard but not impossible.<\/p>\n

In this article I\u2019ve collected a mega-compilation of everything you\u2019ll need for pixel-based website design<\/strong>. There are dozens of healthy tutorials for beginners and experts alike. I\u2019ve also included some handy tools and resources which you can play around with to explore the topic further. If you\u2019re at all interested in video game graphics<\/a> or isometric pixel artwork then you will love this collection.<\/p>\n

Resources<\/h2>\n

These are some unique development resources for web scripts and digital graphics. As you delve into creating pixel-website layouts you won\u2019t always feel the need to follow everything to the dot. This collection of web-based resources may very well come in handy time and time again.<\/p>\n

FatPixels<\/a><\/h3>\n

This is a powerful open source sprite script developed by Mat\u00edas Mart\u00ednez<\/strong>. FatPixels only requires the jQuery library to run properly. Although I would say that Spritely is a more complex animation library, FatPixels does have a niche in the market for web developers.<\/p>\n

\"FatPixels<\/figure>\n

You can easily build animated sprites without creating a .gif image. In fact, you\u2019ll be able to export all the images as .jpg, and create a queue of sprites for one long animated effect. The FatPixels homepage<\/a> has an excellent demo along with the block of jQuery code used to build it. If you\u2019re looking for something lightweight to animate your sprites then FatPixels is the way to go.<\/p>\n

Squidfingers BG Patterns<\/h3>\n

Designing a good set of repeating background images is very difficult. It can take days before you can create seamless images. But thankfully there are resources online for downloading free background tiles.<\/p>\n

\"freebie<\/figure>\n

The Squidfingers Patterns gallery is one such resource. It offers over 150 different pixel-style patterns which you can download and use on your projects. The styles are very dynamic and colorful, and for such a variety, it\u2019s an excellent resource to keep handy. The download links are in .zip format which makes them smaller and easier to transfer between computers.<\/p>\n

The Spriters Resource<\/a><\/h3>\n

I cannot say enough great things about The Spriters Resource. It\u2019s a website where you can search through all the various gaming systems for sprite sheets. These can include maps, buildings, menu screens, character sprites, icons, and pretty much anything!<\/p>\n

\"The<\/figure>\n

They have been online since 2001 and the catalog of video games has grown tremendously. There is a whole community behind TSR with graphic designers who can rip these different gaming sprites. If you\u2019re interested in any form of video game design or online fansites, you\u2019ll have to check out this amazing gallery.<\/p>\n

Even more interesting are some of the sister websites which spawned off TSR. Gaming fans also helped with ripping base textures<\/a> and rendering character models<\/a>. Overall it\u2019s a really great community very supportive of working with sprites in digital artwork.<\/p>\n

Tutorials<\/h2>\n

Now that you have the resources, let\u2019s take a look at the tutorials provided by the many education centers and helpful blog posts scattered throughout the Internet. I have put together a small set of really handy pixel art tutorials for beginners and intermediate designers<\/strong>. Many of these tutorials gear focus towards Adobe Photoshop, but you can follow along with nearly any advanced image editor.<\/p>\n

The Pixel Sprite Tutorial by Derek yu<\/a><\/h3>\n

Obviously there are tens of hundreds of pixel-sprite tutorials on Google but this particular tutorial on Derek Yu\u2019s website goes through many different steps in educating how you create pixel sprites. Much of the process has been streamlined and explained in a way that allow beginners to quickly jump into the action.<\/p>\n

\"The<\/figure>\n

Video game fans will love this tutorial since you get a behind-the-scenes peek at creating these specific graphics. I love finding a website layout with video game pixel artwork littered throughout the design. It provides a unique sense of nostalgia, and it\u2019s something you don\u2019t find everywhere. Anybody looking to create their own pixel sprites for whatever reason can start on Derek\u2019s 10-step tutorial series.<\/p>\n

Configuring Photoshop for Pixel Art by Brandon Treb<\/a><\/h3>\n

Here is another perfect tutorial geared towards beginners in the field of pixel artwork. The blog post is written by Brandon Treb<\/a> who is a fantastic designer and mobile developer. You can find all sorts of useful information in this detailed guide to pixel-based Photoshop art.<\/p>\n

\"Configuring<\/figure>\n

You must know how to setup preferences in Photoshop so that your pixel artwork will not appear awkward or lose quality when you export. You may be surprised to learn much customization is required to really get a nice picture quality.<\/p>\n

Drawing Hand-Crafted Pixels by Russell Tate<\/a><\/h3>\n

Here is another amazing tutorial full of techniques for hand-drawn pixel art in Photoshop. This collection of pixel art techniques is simply astonishing. Anybody who skims through the content will most likely find something they hadn\u2019t known before.<\/p>\n

\"Envato<\/figure>\n

There are detailed explanations about creating texture on grass and bark; also on how to clone pixel artwork that you\u2019ve drawn and turn it into an icon design. It all comes down to practice and precision in every area. Those who are truly passionate will stick it through and within a few months find a solid technique for their pixel-style ideas.<\/p>\n

Developing a CSS\/JS Game Portfolio by Daniel Sternlicht<\/a><\/h3>\n

Here\u2019s one tutorial from Smashing Magazine on how to code a gaming portfolio with CSS\/JS which utilized many sprites from the Pokemon game series. The author is Daniel Sternlicht<\/a> who also happens to run his personal portfolio on this gaming-based layout.<\/p>\n

\"CSS\/jQuery<\/figure>\n

The website acts as an RPG world where you control a character sprite with the keyboard. You can enter different buildings which then bring up information such as contact details and portfolio entries.<\/p>\n

I truly love this tutorial, and it\u2019s an exciting way to combine pixel artwork with website development. Even if you don\u2019t know much about JavaScript this is still a super interesting article. I have gone through some of the code and must give tremendous compliments to Dan for such a creative tutorial. Any Pokemon fanatics will surely fall in love with his ideas.<\/p>\n

Isometric Pixel Tutorials By Matriax<\/a><\/h3>\n

This small website gas13.ru<\/a> has some of the most eccentric and professional pixel tutorials I\u2019ve ever seen. In the isometric pool tutorial you\u2019re introduced to creating shiny blocks and water texture. Additionally you\u2019ll find resources for all the other isometric pixel tuts in the sidebar.<\/p>\n

\"gas13.ru<\/figure>\n

There\u2019s so much to learn: you can design a storefront, pixel sprite, or even detailed textures<\/a> for video games and website backgrounds. I\u2019m not sure if this author is still actively publishing content, but the existing articles are more than enough for beginners to learn the basics.<\/p>\n

Studio Purloux Pixel Tutorial By Kevin Chaloux<\/a><\/h3>\n

Now that I\u2019m listing all the best pixel tutorials I would definitely include this right towards the beginning. This whole tutorial on pixel artwork is a great follow-up article to newbies. You\u2019ll be introduced from the very beginning to open source software like GIMP<\/a> or Paint.NET<\/a>.<\/p>\n

\"Purloux<\/figure>\n

You\u2019ll learn how to export images and the many facets of pixel design such as dithering and anti-aliasing. There are so many different techniques to follow along with. You should pick up some design ideas by looking into retro 8-bit and 16-bit video games.<\/p>\n

Author Kevin Chaloux credits Derek Yu\u2019s pixel sprite tutorial (listed earlier) and mentions that this as a source of inspiration when he first got started.<\/p>\n

Create a Better Favicon By Kayla Knight<\/a><\/h3>\n

Web designers often forget that a favicon (favorite icon) image is a huge part of any branding scheme. All the most popular websites can be recognized by their 16\u00d716 favicon. When you are working with such a limited canvas, you are forced to deal with pixel-dense artwork and illustrations. This favicon tutorial from OXP does an excellent job of combining both ideas.<\/p>\n

\"tutorial<\/figure>\n

From this tut, you can understand why pixel art is so beneficial when creating favicons. There are also tools and solid techniques for exporting an .ico file. Also included is a small showcase of popular favicons from around the Web.<\/p>\n

This is another resource which I feel can benefit all web designers. It\u2019s empowering to educate yourself on creating a favicon and working with strict pixel limitations.<\/p>\n

Showcase Gallery<\/h2>\n

I\u2019d like to close up the article with a nice gallery of pixel-styled website designs. I\u2019ve included 40 examples of various layouts with many diverse artistic visions. The trend of pixelated artwork is only just beginning to re-emerge within mainstream websites. I hope this distinct showcase of pixel sites can offer a source of inspiration for web developers all around the world.<\/p>\n

Earthbound Central<\/strong><\/a><\/p>\n

\"Earthbound<\/figure>\n

PixelJam<\/strong><\/a><\/p>\n

\"Pixel<\/figure>\n

Red Rokk Interactive Marketing<\/strong><\/p>\n

\"Redrokk<\/figure>\n

eBoy Blog<\/strong><\/a><\/p>\n

\"eBoy<\/figure>\n

Tamago Pixel<\/strong><\/p>\n

\"Tamago<\/figure>\n

pixelHugger<\/strong><\/a><\/p>\n

\"Pixel<\/figure>\n

Pixel Deviant Graphics<\/strong><\/p>\n

\"pixel<\/figure>\n

8-Bit HTML5 Canvas Cycle<\/strong><\/a><\/p>\n

\"true<\/figure>\n

Daniel Sternlicht<\/strong><\/a><\/p>\n

\"Daniel<\/figure>\n

Army of Trolls<\/strong><\/a><\/p>\n

\"Army<\/figure>\n

BlockHead Pix App<\/strong><\/a><\/p>\n

\"iOS<\/figure>\n

madPXL<\/strong><\/p>\n

\"madPXL<\/figure>\n

supertott 2.0<\/strong><\/a><\/p>\n

\"Super<\/figure>\n

ClassicGaming<\/strong><\/p>\n

\"Classic<\/figure>\n

RPG Toolkit Tutorials<\/strong><\/p>\n

\"RPG<\/figure>\n

City Creator<\/strong><\/a><\/p>\n

\"isometric<\/figure>\n

Final Fantasy XIII-2<\/strong><\/p>\n

\"Final<\/figure>\n

KawaiiHannah Pixel Art<\/strong><\/p>\n

\"Kawaii<\/figure>\n

The Sandbox<\/strong><\/a><\/p>\n

\"The<\/figure>\n

Mr. Wong<\/strong><\/a><\/p>\n

\"Mr.<\/figure>\n

Pixel Freak<\/strong><\/a><\/p>\n

\"pixelfreak.com<\/figure>\n

Nasc Pixel Art<\/strong><\/a><\/p>\n

\"pixel<\/figure>\n

Paxjah<\/strong><\/p>\n

\"Paxjag<\/figure>\n

FoolsTown<\/strong><\/p>\n

\"foolstown<\/figure>\n

Head Over Heels<\/strong><\/p>\n

\"Head<\/figure>\n

LOVEPIXEL<\/strong><\/p>\n

\"Love<\/figure>\n

Henk Nieborg<\/strong><\/p>\n

\"Henk<\/figure>\n

Iriescope<\/strong><\/a><\/p>\n

\"Koruldia<\/figure>\n

iamnotadoll<\/strong><\/a><\/p>\n

\"i<\/figure>\n

SweetPIX<\/strong><\/p>\n

\"SweetPIX<\/figure>\n

Megapont<\/strong><\/a><\/p>\n

\"Megapont<\/figure>\n

Mini Metropolis<\/strong><\/p>\n

\"urban<\/figure>\n

Hayo van Reek<\/strong><\/a><\/p>\n

\"Hayo<\/figure>\n

Pixeltemple Studio<\/strong><\/a><\/p>\n

\"PixelTemple<\/figure>\n

Adept Vormgeving<\/strong><\/p>\n

\"pixel<\/figure>\n

Pixel Museum<\/strong><\/a><\/p>\n

\"website<\/figure>\n

QuickHoney<\/strong><\/a><\/p>\n

\"PixelHoney<\/figure>\n

Polpo.net<\/strong><\/p>\n

\"polpo.net<\/figure>\n

spiv.cz<\/strong><\/a><\/p>\n

\"spiv.cz<\/figure>\n

4 Real Dough<\/strong><\/p>\n

\"isometric<\/figure>","protected":false},"excerpt":{"rendered":"

Designing a web interface using pixel-style artwork is relatively obscure compared to modern trends. You really need to dig through a handful of websites on the Internet to find some good examples; it\u2019s hard but not impossible. In this article I\u2019ve collected a mega-compilation of everything you\u2019ll need for pixel-based website design. There are dozens…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2512],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nPixel-Based Websites: Resources, Tutorials, And Examples - Hongkiat<\/title>\n<meta name=\"description\" content=\"Designing a web interface using pixel-style artwork is relatively obscure compared to modern trends. You really need to dig through a handful of websites\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pixel-Based Websites: Resources, Tutorials, And Examples\" \/>\n<meta property=\"og:description\" content=\"Designing a web interface using pixel-style artwork is relatively obscure compared to modern trends. You really need to dig through a handful of websites\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-11-20T15:01:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-21T12:56:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/pixel-based-websites\/fatpixels-script-animated-sprites.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pixel-based-websites\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pixel-based-websites\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Pixel-Based Websites: Resources, Tutorials, And Examples\",\"datePublished\":\"2012-11-20T15:01:14+00:00\",\"dateModified\":\"2022-03-21T12:56:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pixel-based-websites\\\/\"},\"wordCount\":1543,\"commentCount\":14,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pixel-based-websites\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/pixel-based-websites\\\/fatpixels-script-animated-sprites.jpg\",\"keywords\":[\"Website Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pixel-based-websites\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pixel-based-websites\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pixel-based-websites\\\/\",\"name\":\"Pixel-Based Websites: Resources, Tutorials, And Examples - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pixel-based-websites\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pixel-based-websites\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/pixel-based-websites\\\/fatpixels-script-animated-sprites.jpg\",\"datePublished\":\"2012-11-20T15:01:14+00:00\",\"dateModified\":\"2022-03-21T12:56:08+00:00\",\"description\":\"Designing a web interface using pixel-style artwork is relatively obscure compared to modern trends. You really need to dig through a handful of websites\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pixel-based-websites\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pixel-based-websites\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pixel-based-websites\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/pixel-based-websites\\\/fatpixels-script-animated-sprites.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/pixel-based-websites\\\/fatpixels-script-animated-sprites.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/pixel-based-websites\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pixel-Based Websites: Resources, Tutorials, And Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Pixel-Based Websites: Resources, Tutorials, And Examples - Hongkiat","description":"Designing a web interface using pixel-style artwork is relatively obscure compared to modern trends. You really need to dig through a handful of websites","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/","og_locale":"en_US","og_type":"article","og_title":"Pixel-Based Websites: Resources, Tutorials, And Examples","og_description":"Designing a web interface using pixel-style artwork is relatively obscure compared to modern trends. You really need to dig through a handful of websites","og_url":"https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-11-20T15:01:14+00:00","article_modified_time":"2022-03-21T12:56:08+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/pixel-based-websites\/fatpixels-script-animated-sprites.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Pixel-Based Websites: Resources, Tutorials, And Examples","datePublished":"2012-11-20T15:01:14+00:00","dateModified":"2022-03-21T12:56:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/"},"wordCount":1543,"commentCount":14,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/pixel-based-websites\/fatpixels-script-animated-sprites.jpg","keywords":["Website Design"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/","url":"https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/","name":"Pixel-Based Websites: Resources, Tutorials, And Examples - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/pixel-based-websites\/fatpixels-script-animated-sprites.jpg","datePublished":"2012-11-20T15:01:14+00:00","dateModified":"2022-03-21T12:56:08+00:00","description":"Designing a web interface using pixel-style artwork is relatively obscure compared to modern trends. You really need to dig through a handful of websites","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/pixel-based-websites\/fatpixels-script-animated-sprites.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/pixel-based-websites\/fatpixels-script-animated-sprites.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/pixel-based-websites\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Pixel-Based Websites: Resources, Tutorials, And Examples"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-41W","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=15496"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15496\/revisions"}],"predecessor-version":[{"id":59300,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15496\/revisions\/59300"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15496"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}