Hello everyone, I'm a programmer and not an artist but I'm finding myself trying to learn how to use Photoshop and pixel art and I have to say, in all honesty, that I'm having a lot of fun. I've never been very good at drawing manually, but I know a lot of artistic concepts and techniques (thanks to my art/design classes at high school... ._.' ) so, as soon as I approached pixel art, I found myself with new artistic skills that I am actually enjoying at the moment.

However I decided, after finding the need for more complex stuff, to ditch MS paint (windows 7's paint looks way worse than the old school one.. :( ) and start with Photoshop. I tried to use the GIMP and I like it, however it's a bit too complex for me (even though it works pretty nice with pixel art, I spend at least 10 minutes everytime I need to find a new layer >_>). I played a bit with Photoshop and I like it way more, however I found out that doing pixel art (as in, real pixel by pixel drawing) is a pain in the ass. The pixel detection is not perfect and I don't know if it's a bug in my version or what, but when I zoom at 800% (or whatever allows me to select a single pixel) and click on one, it more often than not select the pixel immediately close and not the one I selected.

Does anyone know if this is normal? How can I do pixel art with Photoshop? Is it possible at all or should I go back to the GIMP? Do you guys have any tips&tricks or any nice tutorial about pixel art for photoshop? (not photoshop tutorial, detailed pixel art techniques on photoshop, I couldn't find them).


Thanks for the help fellas.
Cheers

Hi.  I'm not sure how your brush setup is, but Photoshop tends to want to do everything with smooth brushes and generous anti-aliasing by default.

To achieve an aliased look (pixel art), you want to make sure you are using the right brushes.  I usually delete all the default brushes right off the bat and import a custom library.  You can make your own brushes which will make pixel art easier.  Creating brushes with hard edges is ideal.

Regarding the pixel selection, I'm not exactly sure what's going on there.  It could be the antialiasing kicking in like I mentioned above, or it might be that you are zoomed in at something that isn't a power of two.  When you are zoomed in between powers of two, Photoshop does kind of a nasty job of 'antialiasing' the work space, but again, I'm just guessing that's what's causing your problems here.

I did a quick search for some pixel art tutorials and found this page.  A variety of tools are being used, but I do see Photoshop mentioned.  Hopefully that gets you started.

Personally I don't like using Photoshop for pixel art, Paint.NET is my preferred choice when it comes to that kind of stuff(its free too btw.)

Photoshop isn't really a tool designed for creating pixel art, but if you are really set on using it then the first thing you should do is switch from using the Paintbrush to the Pencil tool (In CS2 I hold down the mouse on the Paintbrush icon and it comes up with some more options, one of them being the Pencil). The pencil will only ever paint entire pixels, and it's hit detection is greatly improved over the paintbrush, which is designed for softer more organic effects.

Noogy:

Hi.  I'm not sure how your brush setup is, but Photoshop tends to want to do everything with smooth brushes and generous anti-aliasing by default.

To achieve an aliased look (pixel art), you want to make sure you are using the right brushes.  I usually delete all the default brushes right off the bat and import a custom library.  You can make your own brushes which will make pixel art easier.  Creating brushes with hard edges is ideal.

Regarding the pixel selection, I'm not exactly sure what's going on there.  It could be the antialiasing kicking in like I mentioned above, or it might be that you are zoomed in at something that isn't a power of two.  When you are zoomed in between powers of two, Photoshop does kind of a nasty job of 'antialiasing' the work space, but again, I'm just guessing that's what's causing your problems here.

I did a quick search for some pixel art tutorials and found this page.  A variety of tools are being used, but I do see Photoshop mentioned.  Hopefully that gets you started.

Thank you for your help... About the pixel selection problem, I found out that zooming did fix it.. or so I thought, however today it started doing it again at any zoom ratio. I tried zooming in all the way, zooming out all the way, and still I couldn't draw on one line of pixels. It's really annoying and I don't know how to get rid of this. I find it absurd that Photoshop doesn't allow certain row of pixels to be selected. I'm 100% sure I have no antialiasing, 1px pencil (no brush) and the squared one.

I actually just recorded a video of me trying to draw one line of my pixelated house for my game (still an initial draft) showing what my problem is. I can't draw the roof horizontal line because it is on the undrawable line of pixels. Please if anyone wants to try and help me, watch the video and give me some backup... I didn't post the video on youtube because I don't really want to... it's a meaningless video, I have it hosted on my website as it's just 8mb. Please help me out, I'd be really grateful because I'm really hating this annoying bug.

Link to the video: http://www.morgames.comyr.com/Extras/cannotDrawPhotoshop.avi

You can see I'm clicking like mad in that video, trying to get that line drawn. I'm 100% sure I'm selecting the right pixels (though the cursor in the video is not the one in photoshop, in photoshop it's squared and it's over the right pixel, I can assure you). You can see the tip of the cursor selecting one pixel but the one below (or over) gets drawn.

ps: If the file doesn't work it may still be uploading, if it still doesn't work after a while let me know and I'll post another one...

This may be a silly question, but do you have "Snapping" on?  Try hitting ctrl-shift-; to toggle snapping and draw again.  If you have guide lines and snapping enabled, it will prefer one side of the grid line to another, which isn't always ideal.  What version of Photoshop are you using?

Oh, and don't let anyone tell you photoshop isn't good for pixel work.  It's the BEST for pixel work (maybe I'm just biased, but it does have EVERYTHING you need for awesome sprite work).

Also, if you want to draw a straight line, click on the beginning pixel, then hold shift and click on the last pixel.  I line will be drawn between the two points.  (Maybe you already knew that).

Anyway, let me know if that works.

Pixelated Pope:

This may be a silly question, but do you have "Snapping" on?  Try hitting ctrl-shift-; to toggle snapping and draw again.  If you have guide lines and snapping enabled, it will prefer one side of the grid line to another, which isn't always ideal.

Also, if you want to draw a straight line, click on the beginning pixel, then hold shift and click on the last pixel.  I line will be drawn between the two points.  (Maybe you already knew that).

Anyway, let me know if that works.

I knew about the straight line trick, thanks.. and yeah, I tried with ctrl + shift + - but still it doesn't work.. I tried many combinations (ctrl+shift, alt+shift, etc etc) and tried in the preferences menu. Tried fiddling with the performances but still I get nothing... It won't work, it won't draw on that line. Also it gives problem when drawing on the borders. A temporary solution I found was to make the pencil 2px big and draw a "double pixeled" line, this way it draws over the line I want to draw and in the one below it, then change back to 1px and delete the one below. It's a tricky solution and in more precise works I won't be able to pull out such tricks... there is no solution? Nobody ever had a problem like mine?

Sorry, that's Ctrl Shift SemiColon (or you can make sure it is unchecked in the "View" drop down.

What version of Photoshop is this again?  CS4?  CS3? 5?  I've got mine open seeing if I can recreate it.

Could you do something else for me?

Go to edit>Preferences>Guides, Grid & Slices  and change your gridline to every 1 pixel.  Then back in your image, hit ctrl - Apostrophe which should turn on the grid which is now a 1 pixel by 1 pixel grid.  Does it look different than you would expect?  Out of curiosity would you mind hosting your PSD so I can play with it?

Pixelated Pope:

Sorry, that's Ctrl Shift SemiColon (or you can make sure it is unchecked in the "View" drop down.

What version of Photoshop is this again?  CS4?  CS3? 5?  I've got mine open seeing if I can recreate it.

Could you do something else for me?

Go to edit>Preferences>Guides, Grid & Slices  and change your gridline to every 1 pixel.  Then back in your image, hit ctrl - Apostrophe which should turn on the grid which is now a 1 pixel by 1 pixel grid.  Does it look different than you would expect?  Out of curiosity would you mind hosting your PSD so I can play with it?

In the view dropdown menu I was able to turn off the snap feature and now it works perfectly!! Wow man, thanks a lot for your help, Photoshop now seems to be way better than it was before. Having fixed this little problem will speed up my work by a lot, thank you very much! That was the problem.

No problem!  I'm glad I was able to help.  If you have any other photoshop questions I've done a fair amount of pixel art and should be able to answer anything for you.  (Not sure if there are any Private Messages on this forum, but if there is a way to pm me, you could do that).

To solve the "problem" with the selection on photoshop you have to make sure "anti-aliased" option is not checked. You can see it in the top menu of the tool your using.