How to create sprites in Photoshop?

Join 500,000+ artists on ConceptArt.Org.

Its' free and it takes less than 10 seconds!

Join the #1 Art Workshop - LevelUpJoin Premium Art Workshop

Results 1 to 30 of 30
  1. #1
    Join Date
    Oct 2004
    Location
    Philippines
    Posts
    2,925
    Thanks
    410
    Thanked 273 Times in 205 Posts

    How to create sprites in Photoshop?

    Reply With Quote Reply With Quote  


  2. Hide this ad by registering as a member
  3. #2
    Join Date
    Apr 2009
    Location
    Bay Area, CA
    Posts
    768
    Thanks
    355
    Thanked 583 Times in 203 Posts
    Reply With Quote Reply With Quote  

  4. The Following User Says Thank You to Amber Alexander For This Useful Post:


  5. #3
    Join Date
    May 2005
    Location
    Montreal
    Posts
    3,234
    Thanks
    860
    Thanked 847 Times in 457 Posts
    There are a few easy steps:
    1) Pick a game engine, or at least a rendering engine.
    2) Learn how this engine handles sprites
    3) Learn principles of animation
    4) Learn an animation software, hopefully one that will allow you to export files compatible with your engine.
    5)Make animations
    6)Export animations in compatible format
    7) Fiddle some more with the files if necessary (for exemple, if your animation software exports individual bmp's you might need to assemble them in a strip in Photoshop)
    8 )Integrate into software you are developping.

    Reply With Quote Reply With Quote  

  6. The Following 2 Users Say Thank You to Qitsune For This Useful Post:


  7. #4
    Join Date
    Oct 2005
    Location
    Orlando, Florida
    Posts
    401
    Thanks
    518
    Thanked 231 Times in 86 Posts
    use square brush with 100 hardness and desired pixel width . make your file with the desired width & Height.

    in photoshop open up your animation window. ( window > animation)
    in that animation window switch to frame mode if not already there (square frame icon on the lower right)

    create the number of frames desired and separate your sprites in seperate folders for each frame that way you can turn on and off desired art for each frame (easiest cleanest way i have found)

    thats pretty much it. then it depends on your art skills and animation skills, quite simple really, just like animating on real paper.

    Reply With Quote Reply With Quote  

  8. The Following 2 Users Say Thank You to LuckyDevil For This Useful Post:


  9. #5
    Join Date
    Oct 2004
    Location
    Philippines
    Posts
    2,925
    Thanks
    410
    Thanked 273 Times in 205 Posts
    Thanks guys! Do you have tips on creating 32x32 sprites? I'm doing something like the early Final Fantasy ones but in isometric. I sketched something out, but I find it hard to make a pixelized version of it. Plus my sketch gets all messed up once I resize to 32x32 so it's hard to use as a guide.

    Reply With Quote Reply With Quote  

  10. #6
    Join Date
    Nov 2006
    Location
    Algonquin Land
    Posts
    92
    Thanks
    13
    Thanked 29 Times in 11 Posts
    Hi, Maybe you know this but the pencil tool does not produces anti-aliasing when drawing at the pixel level.

    Marc

    Reply With Quote Reply With Quote  

  11. #7
    Join Date
    Feb 2007
    Posts
    1,819
    Thanks
    1,540
    Thanked 1,837 Times in 521 Posts
    Deviant art is actually a great search engine for excellent tutorials (especially for what you'd expect from dA, sprites, animuu or anything fanart)

    Here, how to make pixel art:

    http://pickspy.deviantart.com/art/Pi...l-Eng-69561436

    How to animate it:

    http://elitesniper177.deviantart.com...n-tut-50587477

    Other varying sprite tutorials:

    http://browse.deviantart.com/#order=9&q=pixel+tutorial

    Reply With Quote Reply With Quote  

  12. #8
    Join Date
    Feb 2006
    Location
    Wisconsin
    Posts
    1,611
    Thanks
    550
    Thanked 1,313 Times in 417 Posts
    There was a weekly sprite competition here about a year ago. You might do a search to see if there are links and tips to help you. I can almost guarantee that there are. Way of the pixel is a good start.

    here is another link I had in the archives.
    http://gas13.ru/v3/tutorials/sywtbap...ame_sprite.php

    Reply With Quote Reply With Quote  

  13. #9
    Join Date
    Oct 2005
    Location
    Orlando, Florida
    Posts
    401
    Thanks
    518
    Thanked 231 Times in 86 Posts
    use a 1 px square pencil brush. sketch out your dude roughly in the small size. create new layer and paint out your guy following your sketch. use 2 -3 tone levels ( shadow, mid tone, highlight) and what helps me usually is creating an isometric tile in a layer so i sorta know the angle I'm supposed to be drawing at. Don't use opacity that will only mess you up.

    Oh and when animating, anything you do to the layer on the first frame will move all other frames so careful with that.

    Reply With Quote Reply With Quote  

  14. #10
    Join Date
    Jul 2002
    Location
    SWE
    Posts
    2,536
    Thanks
    42
    Thanked 1,309 Times in 389 Posts
    One thing which really helps when doing art in general, faces and pixel art in particular, is to create a New Window (under Arrange) and set it at a different zoom. When doing pixel art I set the window I'm not working in to 200%, and the work window to much more.

    I turn on the Grid if I'm working with tiles.

    Pencil tool is good, yeah. Sometimes if I work with a big palette (256) I just paint big, scale down and clean up the pixels. Sometimes I set the pencil tool to 60% opacity if I want to paint and blend at a pixel level.

    It's a pity PS doesn't have some of Deluxe Paint's features. I know there are some new similar programs, but I prefer working in PS.

    Jamen jag tror att han skäms, och har gömt sig. Vårt universum det är en av dom otaliga spermasatser som Herren i sin självhärliga ensamhet har runkat fram för å besudla intet.
    Reply With Quote Reply With Quote  

  15. The Following User Says Thank You to Prometheus|ANJ For This Useful Post:


  16. #11
    Join Date
    Oct 2004
    Location
    Philippines
    Posts
    2,925
    Thanks
    410
    Thanked 273 Times in 205 Posts
    Thanks a lot guys. Lots of good info.

    This is my sketch. As I've mentioned above, I'm having a hard time translating it into 32x32 sprite. I think I need to simplify it even further...What do you think?

    Attached Images Attached Images  
    Reply With Quote Reply With Quote  

  17. #12
    Join Date
    Feb 2007
    Posts
    1,819
    Thanks
    1,540
    Thanked 1,837 Times in 521 Posts
    lookin good, its roughness could be why it doesnt skew at 32x32 so well, try making a linework of it first

    Reply With Quote Reply With Quote  

  18. The Following User Says Thank You to nauvice For This Useful Post:


  19. #13
    Join Date
    Oct 2005
    Location
    Orlando, Florida
    Posts
    401
    Thanks
    518
    Thanked 231 Times in 86 Posts
    if you shrink that to 32x32 it will be too blurry to translate. So just use it as reference and not a tracing device. redraw an outline of him as close as you can to what you want to achieve in the 32x32 square.

    the guy has enough detail i think and he's looking good. Keep at it.

    Reply With Quote Reply With Quote  

  20. The Following User Says Thank You to LuckyDevil For This Useful Post:


  21. #14
    Join Date
    Oct 2004
    Location
    Philippines
    Posts
    2,925
    Thanks
    410
    Thanked 273 Times in 205 Posts
    Quote Originally Posted by zwarrior View Post
    lookin good, its roughness could be why it doesnt skew at 32x32 so well, try making a linework of it first
    What I noticed is that even one block of pixel is just too big for the little details I have there. Maybe I should approach it like the old Final Fantasy sprites. It's surprisingly hard to really simplify it! And I thought my sketch was simple enough.

    Reply With Quote Reply With Quote  

  22. #15
    Join Date
    Apr 2008
    Location
    Slidell, Louisiana
    Posts
    2,459
    Thanks
    424
    Thanked 383 Times in 364 Posts
    Here's a tip: Make a 32*32 size canvas and draw a cube. Now, take that design and work it within that cube's boundaries. I don't know if this technique works for you, but try it anyway.

    The Louisianian Sketchbook You can Comment and Criticize if you want.
    My Newgrounds Profile Warning: Politically Incorrect thoughts, view at your own risk.
    My Facebook Site I normally hate these kinds of websites, but a friend of mine invited me.
    Louisianian artists thread If you're from or live in Louisiana, don't hesitate to post here.
    My Profile Nothing else needs to be said.
    Trillian: Request to be added first.
    Reply With Quote Reply With Quote  

  23. The Following User Says Thank You to FightingSeraph For This Useful Post:


  24. #16
    Join Date
    Feb 2007
    Posts
    1,819
    Thanks
    1,540
    Thanked 1,837 Times in 521 Posts
    yeah actually you dont even need to do anything more, I resized it to 32x32 on photoshop (hope you dont mind, I was just curious) and it seems ready. well first I centered it, and removed the excess space before resizing, so that at least in height the little guy is literally 32px

    I think what's going to be hard to illustrate is the chin cap and eyebrows

    Reply With Quote Reply With Quote  

  25. #17
    Join Date
    Oct 2005
    Location
    Orlando, Florida
    Posts
    401
    Thanks
    518
    Thanked 231 Times in 86 Posts
    Name:  sample.png
Views: 14036
Size:  1.2 KB

    here this is sorta what you want to aim for.

    keep the most important features big. aka (face, colors, weapons hands and feet.)

    all it is really a quick sketch based on your dude. took me just a few secs but you should start with something like this at the beginning and refine from there always looking at it from 100% to make sure all the important features stand out.

    Reply With Quote Reply With Quote  

  26. The Following User Says Thank You to LuckyDevil For This Useful Post:


  27. #18
    Join Date
    May 2004
    Location
    Norway
    Posts
    4,049
    Thanks
    644
    Thanked 1,274 Times in 408 Posts
    when working that small a line sketch like the one you show isn't gonna help you much. Getting the big shapes to read is essential, and it will probably scale down better that way.

    i did a super quick paintover to illustrate my point. There is one step i skipped which is sizing down in steps and clean up every resize to make the resulting shrinkage read clearer.

    Name:  tinyman.jpg
Views: 13989
Size:  14.1 KB

    Name:  tinyman_large.jpg
Views: 13991
Size:  38.1 KB

    Reply With Quote Reply With Quote  

  28. The Following 6 Users Say Thank You to Slash For This Useful Post:


  29. #19
    Join Date
    Oct 2005
    Location
    Orlando, Florida
    Posts
    401
    Thanks
    518
    Thanked 231 Times in 86 Posts
    hmm never looked at it that way sweet, i'm working on a game as a side project and your way seems really simple thanks will give it a try.

    Reply With Quote Reply With Quote  

  30. #20
    Join Date
    Feb 2006
    Location
    Wisconsin
    Posts
    1,611
    Thanks
    550
    Thanked 1,313 Times in 417 Posts
    Quote Originally Posted by Dizon View Post
    What I noticed is that even one block of pixel is just too big for the little details I have there. Maybe I should approach it like the old Final Fantasy sprites. It's surprisingly hard to really simplify it! And I thought my sketch was simple enough.
    Maybe a different method? By your sketch I assume you mean the original Final Fantasy and not something a little further down the road. In any case here's link to show a more fully rendered image being shrunken down creating a Street Fighter 2 kind of sprite

    http://www.conceptart.org/forums/sho...imation+weekly

    Here's a serach link for the other S.A.W. challenges.

    http://www.conceptart.org/forums/sea...archid=8416924

    It would be kind of cool to get a weekly sprite challenge going again if anyone is interested.

    Reply With Quote Reply With Quote  

  31. The Following User Says Thank You to Hookswords For This Useful Post:


  32. #21
    Join Date
    Oct 2004
    Location
    Philippines
    Posts
    2,925
    Thanks
    410
    Thanked 273 Times in 205 Posts
    BIG thanks to all of yah's!!! I was finally able to create one and animate it even.

    Attached Images Attached Images  
    Reply With Quote Reply With Quote  

  33. #22
    Join Date
    Oct 2005
    Location
    Orlando, Florida
    Posts
    401
    Thanks
    518
    Thanked 231 Times in 86 Posts
    haha thats awesome, don't be afraid to hide his feet completely or put the arms further out to push the animation to show that he's walking.

    good job though he looks sweet.

    Reply With Quote Reply With Quote  

  34. #23
    Join Date
    Apr 2009
    Location
    Ontario, Canada
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey, I posted in another place and was directed here.

    Is photoshop my best option for creating sprites?
    Is it necessary to do a "concept drawing" to reference from?
    Also, I was told PNG images are fine, are they really?

    I've been asked to volunteer as an artist for a FF-type video game using XNA. I am supposed to have a meeting with the team this week and start on concepts, so what's the best approach for me considering I'm a total noob? Sorry if I'm hi-jacking the thread a bit; I am on topic however!

    Graphic Designer - Advertising - Wanting into the gaming world.
    Blog: (Abandoned) - http://smalier.blogspot.com/
    Website: Underconstruction.
    Reply With Quote Reply With Quote  

  35. #24
    Join Date
    Feb 2007
    Posts
    1,819
    Thanks
    1,540
    Thanked 1,837 Times in 521 Posts
    Dizon that looks ace!

    Quote Originally Posted by SMalier View Post
    Hey, I posted in another place and was directed here.

    Is photoshop my best option for creating sprites?
    Is it necessary to do a "concept drawing" to reference from?
    Also, I was told PNG images are fine, are they really?
    -If you dont have photoshop, you can use MS Paint
    -not necessarily
    -yes

    Reply With Quote Reply With Quote  

  36. #25
    Join Date
    May 2005
    Location
    Montreal
    Posts
    3,234
    Thanks
    860
    Thanked 847 Times in 457 Posts
    http://www.thefreedictionary.com/sprite
    sprite [spraɪt]
    n
    1. (Myth & Legend / Classical Myth & Legend) (in folklore) a nimble elflike creature, esp one associated with water
    2. a small dainty person
    3. (Group Games / Games, other than specified) an icon in a computer game which can be manoeuvred around the screen by means of a joystick, etc.
    [from Old French esprit, from Latin spīritus spirit1]
    You can make small pixel art animations anyway you want, but that is not a sprite. A sprite is something that moves in an interactive application such as a game. So the formating of the sprite is entirely dependent on the engine the game runs on. For exemple, some games will need all animations of a single character on the same sheet. Some will need one strip per action. Some will need them all on the same line. Some use animated gifs or proprietary formats.
    Same goes for transparency, sometimes an engine will use the first upper left pixel as the transparency color, sometimes it's a specific position on the color index, sometimes they use a separate alpha channel in a tga file, sometimes they use a fixed color (eg 255,0,255) or a png file with transparency, or a grayscale bmp as a mask. This is the kind of question you should be asking your programmer about as we don't know how he's going to code the tools for the game.

    There are tools specific for pixel animations such as Graphics Gale or Pro Motion (I use Pro Motion at work, I wrote about it on my blog and how I lost work with it, but it didn't happen again!) Photoshop CAN do pixel art, but it's not an animation tool and animating with it is far from optimal. Switching frames around and doing alterations is a major pain the the butt and quickly becomes confusing. Flash is not bad but will not result in clean pixel art, it is however appropriate for hi res games, XNA typically doesn't require ultra small sprites like, say, Iphone or DS games.

    Reply With Quote Reply With Quote  

  37. The Following User Says Thank You to Qitsune For This Useful Post:


  38. #26
    Join Date
    Feb 2007
    Posts
    1,819
    Thanks
    1,540
    Thanked 1,837 Times in 521 Posts
    learn something new everyday

    Reply With Quote Reply With Quote  

  39. #27
    Join Date
    Oct 2004
    Location
    Philippines
    Posts
    2,925
    Thanks
    410
    Thanked 273 Times in 205 Posts
    Quote Originally Posted by Qitsune View Post
    http://www.thefreedictionary.com/sprite

    You can make small pixel art animations anyway you want, but that is not a sprite. A sprite is something that moves in an interactive application such as a game. So the formating of the sprite is entirely dependent on the engine the game runs on. For exemple, some games will need all animations of a single character on the same sheet. Some will need one strip per action. Some will need them all on the same line. Some use animated gifs or proprietary formats.
    Same goes for transparency, sometimes an engine will use the first upper left pixel as the transparency color, sometimes it's a specific position on the color index, sometimes they use a separate alpha channel in a tga file, sometimes they use a fixed color (eg 255,0,255) or a png file with transparency, or a grayscale bmp as a mask. This is the kind of question you should be asking your programmer about as we don't know how he's going to code the tools for the game.

    There are tools specific for pixel animations such as Graphics Gale or Pro Motion (I use Pro Motion at work, I wrote about it on my blog and how I lost work with it, but it didn't happen again!) Photoshop CAN do pixel art, but it's not an animation tool and animating with it is far from optimal. Switching frames around and doing alterations is a major pain the the butt and quickly becomes confusing. Flash is not bad but will not result in clean pixel art, it is however appropriate for hi res games, XNA typically doesn't require ultra small sprites like, say, Iphone or DS games.
    I heard about the 2 programs you mentioned, but in my case I used PS to animate my gif. It was a pain in the butt in some parts though. For instance, I was using the lasso tool to move parts around but then some of the colors changed completely for some reason. I had to color pick from my original gif to have it match completely. I don't know why that happened, but I was just using the pencil and eraser( in pencil mode) all the time.

    Reply With Quote Reply With Quote  

  40. #28
    Join Date
    Apr 2006
    Posts
    801
    Thanks
    19
    Thanked 427 Times in 168 Posts
    Quote Originally Posted by Dizon View Post
    I was using the lasso tool to move parts around but then some of the colors changed completely for some reason. .
    You probably just need to uncheck the anti-alias on the lasso, other wise you will end up feathering your selection and messing with the opacity/color.

    Reply With Quote Reply With Quote  

  41. The Following User Says Thank You to DeadlyFreeze For This Useful Post:


  42. #29
    Join Date
    Jan 2006
    Location
    Brazil
    Posts
    553
    Thanks
    201
    Thanked 80 Times in 66 Posts
    Yep! And when you use it in game you will not have a crispy edge...

    My website

    Facebook Page

    New CA Sketchbook

    " The scientific and generally accepted-in-art term for this is "You're fuckin' screwed, dude..." " Ilaekae - May 16th, 2009
    Reply With Quote Reply With Quote  

  43. #30
    Join Date
    May 2005
    Location
    Montreal
    Posts
    3,234
    Thanks
    860
    Thanked 847 Times in 457 Posts
    The advantage of Graphics Gale and Pro Motion is they are really cheap. This is why I didn't mention something like TV paint, it's all kinds of awesome but super expensive. It's also overkill for what you do. I personally prefer to have the possibility of onion skins and layers when animating, even if it's theoritically possible to animate in MSPaint, it's a bit like mowing the lawn with nail clippers.

    Reply With Quote Reply With Quote  

Members who have read this thread: 3

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •