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

Geek · July 5, 2011

<p>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 <a href="http://osxdaily.com/category/retro/">retro</a> pixel art and clean up the results of other methods.</p>

<h2 style="font-size:1.2em;">1) Use Mac OS X Zoom to Pixelate Images & Create Instant Pixel Art</h2>

<p>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 <a href="http://osxdaily.com/2010/12/31/disable-anti-aliasing-in-mac-os-x-zoom/">disable anti-aliasing in OS X Zoom tool</a> you can use this feature to create pixelated images out of anything. Here’s how:</p>

<ul>

<li>Hit <strong>Command+Option+</strong> to disable anti-aliasing in screen zoom</li>

<li>Hover your mouse cursor over whatever image you want to instantly pixelate</li>

<li>Control+Zoom into the image and watch the pixels grow</li>

<li>Take a <a href="http://osxdaily.com/2006/12/08/taking-screenshots-in-mac-os-x-and-changing-the-default-filetype-from-png-to-whatever/">screenshot</a> of the entire screen with Command+Shift+3</li>

</ul>

<p>Using this technique I created this pixel-art MacBook instantly:</p>

<p>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: </p>

<ul>

<li>Smaller base images are better, creating icons out of an image and zooming into those is great</li>

<li>More contrast is generally better</li>

<li>Try different levels of zoom</li>

</ul>

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

<h2 style="font-size:1.2em;">2) Draw Pixel Art in Photoshop with these Configuration Tips</h2>

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

<ul>

<li>Change the way Photoshop scales images by adjusting “Image Interpolation” preferences to “Nearest Neighbor (preserve hard edges)</li>

<li>Enable a Grid via Preferences > Guides, Grid Slices & Count > 1×1</li>

<li>Properly configure the Pencil tool to 1px diameter with 100% hardness</li>

<li>Use multiple Zoom levels for both an up-close pixel view and the desired end resolution</li>

</ul>

<p>Your Photoshop setup will look similar to this:</p>

<p>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, <a href="http://brandontreb.com/Configuring-Photoshop-For-Pixel-Art/">you can read it here on BrandonTreb.com</a>.</p>

<h2 style="font-size:1.2em;">3) Make Instant Pixel Art with Pixelfari</h2>

<p>Another trick to speed up your creation of pixel art, and even make near-instant pixel art, is by using the <a href="http://osxdaily.com/2011/02/17/8-bit-web-browser-pixelsafari/">8-bit web browser Pixelfari </a>. </p>

<p>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. </p>

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

<p>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.</p>

<p>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 <a href="http://osxdaily.com/2007/12/14/paintbrush-a-microsoft-paint-clone-for-mac-os-x/">Paintbrush, the MSPaint clone</a> but it’s harder to get price with that app. Finally, a nice general reference is <a href="http://www.natomic.com/hosted/marks/mpat/">Natomic</a>, 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.</p>

</div>

</div><img src="http://feeds.feedburner.com/~r/osxdaily/~4/eV4KkuJbsfg" height="1" width="1"/>

View the full article

Sign In

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

Recommended Posts

Geek

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Browse

Activity

Site Info