Pixel Art Guide: 3 Ways to Create Pixel Art with Photoshop, OS X Zoom, and Pixelfari

Jul 5, 2011 - 6 Comments

Pixel Art

Pixel art of the 8-bit flashback NES variety is all the rage right now, be it in games like The Incident and Sword & Sworcery or just for avatars on the web. If you’re wondering how some of that beautiful pixel art is created and how you to do it yourself, here are some tips for near-instant pixel art. We’ll use OS X’s zoom feature, Pixelfari, and also configure Photoshop to make your own retro pixel art and clean up the results of other methods.

1) Use Mac OS X Zoom to Pixelate Images & Create Instant Pixel Art

You probably know by now that if you hold down the Control key and then two-finger swipe up or down on a trackpad you’ll zoom into the screen (or hold Control and use a scrollwheel on an external mouse). Well, if you disable anti-aliasing in OS X Zoom tool you can use this feature to create pixelated images out of anything. Here’s how:

  • Hit Command+Option+\ to disable anti-aliasing in screen zoom
  • Hover your mouse cursor over whatever image you want to instantly pixelate
  • Control+Zoom into the image and watch the pixels grow
  • Take a screenshot of the entire screen with Command+Shift+3

Using this technique I created this pixel-art MacBook instantly:

Pixelized MacBook Air

If necessary you can then clean up the image in Photoshop using the photoshop techniques mentioned in this article to edit on a precise per-pixel level. A few tips for this method:

  • Smaller base images are better, creating icons out of an image and zooming into those is great
  • More contrast is generally better
  • Try different levels of zoom

It’s also important to take a full screen screenshot so the image is captured in full pixelated glory.

2) Draw Pixel Art in Photoshop with these Configuration Tips

If you have photoshop, you can adjust some settings to make it superior for drawing and editing pixel art:

  • Change the way Photoshop scales images by adjusting “Image Interpolation” preferences to “Nearest Neighbor (preserve hard edges)
  • Enable a Grid via Preferences > Guides, Grid Slices & Count > 1×1
  • Properly configure the Pencil tool to 1px diameter with 100% hardness
  • Use multiple Zoom levels for both an up-close pixel view and the desired end resolution

Your Photoshop setup will look similar to this:

Create pixel art in Photoshop

These Photoshop techniques come from Brandon Trebitowski, an iOS developer, and if you are at all interested in designing pixel art his blogpost on the matter is highly recommended reading, you can read it here on BrandonTreb.com.

3) Make Instant Pixel Art with Pixelfari

Another trick to speed up your creation of pixel art, and even make near-instant pixel art, is by using the 8-bit web browser Pixelfari . Pixelfari comes from developer Nevan Morgan and you can download it instantly here.

Essentially all you need to do is drag any image into Pixelfari and it will automatically render the image as pixel art, then take a screenshot of the Pixelfari window. It’s not perfect but it creates a a good starting point that can then be refined using the above techniques mentioned by Brandon.

Here’s the OSXDaily logo thrown into Pixelfari with no other editing, this is a pretty good example of how this works.

pixelated OSXDaily logo

Again if you want to clean up the output you can use the Photoshop tips mentioned above, or you can even use OS X’s zoom feature to hyper-pixelate the results in Pixelfari.

There’s obviously more ways to do this, but for quick pixelation the Zoom and Pixelfari techniques are great, and the Photoshop configuration is perfect for drawing from scratch or cleaning up your pre-pixelated images. You could also try using Paintbrush, the MSPaint clone but it’s harder to get price with that app. Finally, a nice general reference is Natomic, which has some general tips on shading, lighting, using lines, and more, its old info but pixels have been around a long time, so the techniques are still very relevant.

.

Related articles:

Posted by: William Pearson in Tips & Tricks

6 Comments

» Comments RSS Feed

  1. Kyle says:

    I have found a solution to my problem! If you press Command+Shift+4 it will bring of a cross-hair and with that you can make a box around what you want pixelated. Mac will save the zoomed in parameters in a very pixelated and awesome screen-shot!

  2. Kyle says:

    The zooming technique didn’t work for me. I zoomed into the apple symbol in the top left of my mac and hit command+shift+3 and it just took a picture of my entire screen, not the zoomed in portion. What am I doing wrong?

  3. Sarah Hill says:

    Thanks for the tips and visuals. We’re learning about this in class next week at Santa Fe University and I’m pretty excited to dive into the details.

  4. […] van Gogh's sunflowers, pixellatedThis OSXDaily blog post details a couple of other techniques for creating pixel art in Mac OS, including a neat trick to […]

  5. Interesting feature.

  6. km says:

    I always wondered if these guys used some pixel editor or photoshop.

Leave a Reply

 

Shop on Amazon.com and help support OSXDaily!

Subscribe to OSXDaily

Subscribe to RSS Subscribe to Twitter Feed Follow on Facebook Subscribe to eMail Updates

Tips & Tricks

News

iPhone / iPad

Mac

Troubleshooting

Shop on Amazon to help support this site