Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[RebelINS]

How to Setup Photoshop for Pixel Art

Introduction
This guide isn't going to tell you how to make pixel art, sprites or even how to draw. It's here to help you learn the ins and outs of a very powerful program, that gets a lot of unnecessary flak for being bad at pixel art (face it guys, ms paint sucks balls).

For all of my examples, I am using Adobe Photoshop CS5. Previous versions should have the same options as far as I know.

Workflow
The absolutely most important thing in workflow is learning the hotkeys to all of your most used tools and options. Here is a reference table listing the most important hotkeys:

(click to show/hide)

There are a few things to note about hotkey usage:

• Almost all of the important hotkeys are reachable with your left hand. This includes all modifier keys (Control, Alt, Shift), brush, eraser, and fill. This lets you keep your right hand on your mouse/tablet pen.
• Don't forget about the basic ones like save (Ctrl+S), and save as (Ctrl+Shift+S). Always back up your work, so you don't rage if anything goes wrong.
• I find that for general spriting, the brush, eraser, eyedropper (alt modifier), move canvas, and history hotkeys are my most used. Mastering these makes spriting so much easier.

Here's a really useful hotkey that I set manually (Edit>Keyboard Shortcuts>Shortcuts for Application Menus>Image>Crop):


Tool Settings
Brush (aka pencil):

Very basic settings here. You'll want to make sure it's a 1 pixel size pencil, or 2 if you're doing GG2-style double resolution sprites (but I'll show you an easier way to achieve that).

If you have a tablet, you'll want to turn off pen pressure on the size control. If it's on, it gets really annoying because you have to press down with a certain force in order to even get anything to come out. It's counter-intuitive to have pen pressure when doing pixel art.

Notes:

• Master the increase and decrease size hotkeys to have greater control
• Master the eyedropper tool; it makes selecting from nearby palettes much easier

Eraser:

Pretty much the same settings as the brush.

Notes:

• The increase/decrease size is even more important here than it is for the brush tool. Typically for drawing, you want 1 pixel control, but often you need larger erasers to take out larger mistakes, etc.

Fill (bucket):

Make sure anti-alias is turned off. Leaving contiguous checked means that only adjacent pixels of the same color are filled in. Here's an example:
Contiguous is on:

I filled in the firebug's mask with purple. It only filled in the surrounding color.

Contiguous is off:

I did the same thing, but it filled in all of that color on the image.

You can use this to quickly recolor (you sick bastards) sprites, or for on-the-fly palette changes (very useful when unifying palettes).

Rectangular Marquee:

You will usually want to leave the style to "Normal" so you can control the size, but I just wanted to note that fixed size has a lot of utility when working with sprite sheets. You can use a fixed size to select the exact sprite size you need (ie. Gang Garrison sprites are 64x64 px).


Program Settings
Image Interpolation:
Basically what image interpolation is, is how the program determines what to put in the spaces where the pixel is undetermined. This occurs when a rasterized bitmap is resized, transformed or rotated. In layman's term, it's the reason why images tend to get blurry or fuzzy when scaled up. For pixel artists, this is very bad, because we do not want any automatic pixel processing (also why anti-aliasing is turned off for all options).
Go to Edit>Preferences>General (or Ctrl+K) to find it:

Set it to nearest neighbor. By default it is on Bicubic. Here's an example of the difference it makes when resizing images:

Here's the source image

Shitty ass Bicubic resizing. Note the blurriness and general pixel muddiness. The program interpolated the color between pixels of two different color and blended them together. The results are less than satisfactory.

Nearest neighbor interpolation. Perfect 1:1 ratio. It works because the program does not interpolate any extra colors (only using the nearest neighbor color), so it creates a uniform rescaling.
This is how you can turn 32x32px GG2 sprites into perfect 64x64 ones with no bitmixing.

Grid:
Edit>Preferences>Guides, Grids & Slices
View>Show>Grid (Ctrl+')

You can adjust the color and style of the grid. Personally I prefer a solid neutral gray line because it is a definitive division and doesn't interfere with the image's palette (color neutrality).

New Window:
Window>Arrange>New window for [name of document]

Very, very useful for displaying real-time edits to a 100% sized version of your image, while you work on the zoomed-in version. You don't have to waste time turning off the grid and zooming all the way out just to get a preview. All edits happen to both images simultaneously, and saving one will save all versions of it.

Conclusion:
I hope this helps any aspiring artists learn this daunting program, and dispel any myths that Photoshop is not fit for pixel editing. Later posts may have stuff on layer manipulation, useful tricks and other shortcuts. Remember that this guide is only to help you learn a tool; it will not guarantee that you will be a better artist. For the latter, all you need is dedication and practice.

[RebelINS]

Spritework/Animation Specifically for GG2 Mods:
Tool Tips:
Slice tool -

For the longest time, I could never figure out what it did. Mostly because I never cared to learn what it did, but also because rarely any tutorial, or photoshop sites talked about it in the field of work I was interested in.

Basically, it splits your image into rectangular sections that you can save separately using 'Save For Web & Devices...' (Alt+Shift+Ctrl+S). How this is relevant to spriting in particular, is that it allows you to save an entire spritesheet as all separate frames. Then you can use UnFreez to create a simple gif animation out of it. It's usually used for web design.

Set your grid to the size of the sprite, as noted in the above tips. Check View > Snap To > Grid. Set your Slice tool to fixed size, and set the size of it to the same as the sprite.

Then just go across and slice up your spritesheet. After you're done you can go to Save For Web & Devices. In there, you want to set it to GIF, and as many colors as you need. Make sure to select all of the slices before changing the details (you'll know if the outline of it is orange instead of blue).


Alternatively, if your spritesheet is uniform (meaning that the size of each sprite is the same), you can use a nifty shortcut to slice it up automatically. Set the Slice tool to 'normal', select the entire image, and then right click the slice. Select 'Divide Slice', and set divide vertically. You can either use the number of sprites in the sheet, or you can input the width of the sprite.

[Teekytots [PC][OG]]

Mmmmm, I love this guide. I think I have photoshop around my house, so I might do some stuff.

[SH James]

This tutorial is nowhere close to what I expected, everything done here can be done in Paint (except for the paint bucket thing). I might suggest you to make a tuto on "How to use the Pen tool for pixel art", but I know you'll decline it.

[a/d]

Draw any of the things he drew in paint and I'll take you seriously.

[RebelINS]

This tutorial is nowhere close to what I expected, everything done here can be done in Paint (except for the paint bucket thing). I might suggest you to make a tuto on "How to use the Pen tool for pixel art", but I know you'll decline it.

Not really sure where you're coming from to "expect anything" out of this tutorial, because you're not obligated to receive anything from me. Any guide that I make for this subforum is charity work.

Paint doesn't have hotkeys or layers. Case closed. Think about productivity, workflow, and user interface considerations next time before you open your mouth. I'm not really offended by anything you have to say about, because you have zero actual pixel artwork to show for all your big talk. It's great to know that you learned how to use the paint bucket tool for your sprite recolors though.

Also, using pen tool for pixel art is a big no-no, even when stroking the path with a 1px pencil. The pen tool is only really usable for high resolution artwork or vector art. Using it for low-res sprites gives you zero control over the curves. The algorithm that it uses creates tons of little jaggies. Creating curves manually (ie. the basic 3-2-2-1-1-1 curve) gives you greater control.

Thanks for the feedback though. I might suggest you to make a tuto on "how to usurp other people's artwork without actually making artwork", but I know you'll decline it.

[SCBG]

I was forced to uninstall Photoshop due to my HDD but once I get my new comp/monitor I'll definitely have a crack at it, I find Paint to be fairly inconvenient and generally uncomfortable.

[RebelINS]

Scale2x is horrible. Scaling up by 2 and then applying that algorithm to smooth out the lines doesn't improve the quality at all. It cheapens the overall look of the pixel art, and makes it looks like a silly emulator effect. You're better off scaling it by 2 then manually updating the sprite resolution to improve the details. Anytime you're using an algorithm to create pixel fidelity (be it scale2x, anti-aliased tools, pen tool, bicubic interpolation, etc) is a lost opportunity.

Really the whole point of me bringing up nearest neighbor interpolation is so people can learn a different way to resize sprites for easier gg2 sprite modifications. It also doesn't affect the palette at all, because it isn't interpolating any extra colors.

Edit: I realize that most good freeware programs are capable of doing this stuff. My main focus of this guide is to help improve workflow using keyboard shortcuts (regardless of the program), and important preference settings.

[SH James]

Not really sure where you're coming from to "expect anything" out of this tutorial, because you're not obligated to receive anything from me. Any guide that I make for this subforum is charity work.

Anyways, why use Photoshop for a pixel art with a low number of colors? Totally pointless.

Paint doesn't have hotkeys or layers. Case closed. Think about productivity, workflow, and user interface considerations next time before you open your mouth. I'm not really offended by anything you have to say about, because you have zero actual pixel artwork to show for all your big talk. It's great to know that you learned how to use the paint bucket tool for your sprite recolors though.

It does have the BASIC hotkeys, and cropping is pretty useless in most cases. Layers in Paint? Why would I need them in Pixel Art? For nothing. And as for pixel art, I have more than you can even imagine. And recolor is different from edit that is different from custom. Custom is created from zero with some or no inspiration, editing is reallocation of pixels to create something using this or that base, recolor is enhancement of the current palette or palette swapping (like that Shaman King guy that simply went to Photoshop, changed the spritesheet to greyscale and posted it). Just recently I have been using Photoshop a little more than usual, but I like to try doing complicated things, unlike your amateurism.

Also, using pen tool for pixel art is a big no-no, even when stroking the path with a 1px pencil. The pen tool is only really usable for high resolution artwork or vector art. Using it for low-res sprites gives you zero control over the curves. The algorithm that it uses creates tons of little jaggies. Creating curves manually (ie. the basic 3-2-2-1-1-1 curve) gives you greater control.

Gives you TOTAL control, if you don't know. Try holding ALT on CTRL while hovering an anchor point, N-E-W-B-I-E!

Thanks for the feedback though. I might suggest you to make a tuto on "how to usurp other people's artwork without actually making artwork", but I know you'll decline it.

Me? Usurp? Look at you! I bet that 90% of the things you have "done" are actually someone else's work! So, please, go back to Paint and learn a little more before speaking to a PS intermediate-pro guy... Like me, an AUTODIDACT.

Inb4:
F.O.E on the signature: made in paint in a minute or few minutes
Brozan and BroLink: photoshopping made for lulz and nothing else

PS.: U MAD!

[tankman]

Anyways, why use Photoshop for a picel art with a low number of colors? Totally pointless.

What the hell are you talking about?

[SH James]

Anyways, why use Photoshop for a picel art with a low number of colors? Totally pointless.

What the hell are you talking about?

Edited the typo out. Happens when I'm sick or sleepy.

[Speed of Dark]

stuff

You dense motherfucker.

[tankman]

Anyways, why use Photoshop for a picel art with a low number of colors? Totally pointless.

What the hell are you talking about?

Edited the typo out. Happens when I'm sick or sleepy.

Not talking about the typo. Are you saying photoshop has a small selection of colors?

[aptanananananator]

stuff

You dense motherfucker.

Also, guides not bad Rebel, though I think people would benefit from some more information on layers.
Windows 7 entirely broke paint, so you really can't use it for pixel art anymore, so it's good they can get some information here on how to use other progams like PS for pixel art.

[aftershockpivot]

I use Gimp for pixel art, because it's preset for aliasing