Sprite making step-by-step + free PSD sprite

Use this forum to help develop your game-making skills, and get feedback on writing, art, music, or anything else you've created that isn't attached to a game in progress.
Locked
Message
Author
User avatar
Deji
Cheer Idol; Not Great at Secret Identities
Posts: 1592
Joined: Sat Oct 20, 2007 7:38 pm
Projects: http://bit.ly/2lieZsA
Organization: Sakevisual, Apple Cider, Mystery Parfait
Tumblr: DejiNyucu
Deviantart: DejiNyucu
Location: Chile
Contact:

Sprite making step-by-step + free PSD sprite

#1 Post by Deji »

Spawned from this http://lemmasoft.renai.us/forums/viewto ... =26&t=9154
Over the weekend, I thought I could make a somewhat random and 'quick' (though I'm slow at this >>; ) sprite starting from 0 and show you guys how I did it. Maybe it'll help somebody? Or at least be fun or interesting to look at ^^; ?
sprite_tut7.jpg
There are two versions of this character for you to download:

Open step-by-step PSD
I made it in SAI, so there's a chance some of the screen and overlay layers won't look the same in other programs. It has layer folders/groups with each step that you can look at, and you're free to recolor and modify stuff as you please.

Closed/merged PSD
Only last step, with base merged and each face element flattened and organized in folders.

You may want to resize the sprite to use it, it's kind of big to use as it is, but not too big... I never pay much attention to the size I'm working on, to be honest "Orz (it's bad, don't do that)

You can see the images by clicking on the 'Step #' title, I tried to make a post with images, but it was huge, so I left them just as links >>;

Step 1
Yes, my rough sketches are hideous!
I create a new canvas, usually the size of the screen the game is going to be, and then go and upscale it a bit. I was taught that, ideally, you should work 15% bigger than the final size your image is going to be displayed (or printed). I often forget to do this and just work at screen resolution, which is not very wise... so don't do that if you can avoid it ^^;
Then I roughly, VERY roughly, sketch the iea of the pose I have in mind. It's just a rough idea, so can do it quickly and scrap it or change it without much time spent.

Step 2
Still ugly, but taking shape.. at least.
Since my rough sketches are so hideous, I need to make a new layer on top and polish the pose so it looks more like a human being. I try to look at some anatomy references and myself on a mirror so I have an idea of what the pose really should look like, and i end up making some changes from the original rough idea. I still make a lot of mistakes at this point, but at least now it has more shape >>;

Step 3
Oh, it's a character...! I think.
Now that I have a rough template to draw my character on, I make a new layer on top (again) and sketch my character. Since I don't plan this one to have different outfits or anything, I just sketch her fully clothed. I end up making new changes to the pose as I go (and end up using my default 3/4 head. Oh dear...)
I try to get this as... well, not really 'clean', but at least clean enough so I can understand my own messy lines, so I can ink over them later.
Being the messy person I am, sometimes I have to make yet another sketch, a cleaner one, since I can't decipher what the hell is going on with all the messy lines everywhere >>;

Step 4
Lineart time. Have I ever mentioned I have no patience for inking stuff? Dx
So, new layer, hard round small brush, and lots of patience.
I don't do this in just one layer, I use two or three for things that overlap (like the hair over the dress), so I can erase safely the lines that aren't really supposed to be there in the final lines. I merge them together in the end.
At this point, I have to rely on references and my handy mirror to get things right, since I can't half-ass things at this point anymore! I end up making the last changes to the drawing at this point.
Now, since I plan to make several face expressions on his character, I ink the face separately.

Step 5
Flats!
Layers here.
I make a new layer for each element of the drawing and lay the flat color of that element down. You can have all the flats in one layer and then shade on a different layer, but I personally think it's more organized this way.
I check the colors and play with them until I'm satisfied. I may change my mind later on, though (I tend to do that a lot).

Step 6
Shading! Woot!
Layers over here.
Now this is my fav part :D
I shade everything! yay! And... that's pretty much it ^^; Generic ambiguous light source ftw.
I use some overlay, multiply and addition layers for some effects as I go. I add a free stock pattern to the dress and end up changing its color ^^;
I also change the color of the lineart and set it to multiply.

Step 6.5
Extra unnecessary step C:
Layers are here.
This, I don't usually do it, but it's still fun, so.. yeah.
I paint over some parts on a new layer over the lineart (sometimes, if i'm not touching the base anymore, I just flatten/merge it), adding extra hair strands, thinning or softening lines here and there, add even more effect layers on top...

Step 7
Fun with the Face time!
I make folders for each element, grouping mouth positions together, eyes together, etc, and just play around, really. Fun things about keeping face elements separated is that you can combine them and make a lot of different faces C:
You can see the layer folders here.

Now, the finished image looks nothing like the idea I had in mind when I started with the rough sketch, but it's ok, it still looks nice, I think xD;
Image
Tumblr | Twitter
Forever busy :')
When drawing something, anything, USE REFERENCES!! Use your Google-fu!
Don't trust your memory, and don't blindly trust what others teach you either.
Research, observation, analysis, experimentation and practice are the key! (:

Codexus
Regular
Posts: 28
Joined: Fri Mar 06, 2009 3:07 pm
Location: Geneva, Switzerland
Contact:

Re: Sprite making step-by-step + free PSD sprite

#2 Post by Codexus »

Step 3.5
Add Deji-chan fairy dust to make it look awesome ;)

Thanks for the tutorial :D

kinougames
Miko-Class Veteran
Posts: 522
Joined: Tue Jul 13, 2010 1:37 pm
Projects: Working on ミツマタ [Mitsumata (c)].
Contact:

Re: Sprite making step-by-step + free PSD sprite

#3 Post by kinougames »

Not much to say as far as art, but that design is ADORABLE.
Check out the new interactive media project, Mitsumata(c). Follow 8 colorful characters in a story full of drama, horror, all sexualities and exciting gameplay~!

Development blog's up! Visit!

EternalDream
Veteran
Posts: 208
Joined: Sat Nov 27, 2010 6:04 pm
Completed: Secret Santa
Projects: Memory Lane
Contact:

Re: Sprite making step-by-step + free PSD sprite

#4 Post by EternalDream »

omg O: -downloads- XD Love your art~ ^^
BTW I noticed that from step 1-7 her expression gets grumpier and grumpier :P

User avatar
SusanTheCat
Miko-Class Veteran
Posts: 952
Joined: Mon Dec 13, 2010 9:30 am
Location: New Brunswick, Canada
Contact:

Re: Sprite making step-by-step + free PSD sprite

#5 Post by SusanTheCat »

@EternalDream: She must be impatient :)

@Codexus: Do you know where I could get some of that fairy dust? Oh yeah, it's called practice.

Susan
" It's not at all important to get it right the first time. It's vitally important to get it right the last time. "
— Andrew Hunt and David Thomas

mduffor
Newbie
Posts: 11
Joined: Thu Nov 19, 2009 2:56 pm
Location: California, USA
Contact:

Re: Sprite making step-by-step + free PSD sprite

#6 Post by mduffor »

Awesome post, Deji. Thanks!!!
Blog + website = www.mduffor.com

LVUER
King of Lolies
Posts: 4538
Joined: Mon Nov 26, 2007 9:57 pm
Completed: R.S.P
Location: Bandung, West Java, Indonesia
Contact:

Re: Sprite making step-by-step + free PSD sprite

#7 Post by LVUER »

I make the size twice the game resolution. Is it fine? Though right now, I always use the maximum resolution my software (Flash) allowed, 2880x2880, and then adjust it as necessary...

I've used Corel Painter X, Photoshop 7 (Elements 5, CS1, and CS3), Manga Studio EX4, and Paint Tool SAI ver 1.1.0. But all of them, despite being expensive, just couldn't beat the old but trusty Flash (I use MX 2004).

Though one of the reasons why I'm not using some of them (like SAI T-T ) is because my old laptop isn't high-spec enough to properly run them...
"Double the princesses, quadruple the fun!" - Haken Browning (SRW-OG Endless Frontier)

DeviantArt Account
MoeToMecha Blog (under construction)
Lolicondria Blog (under construction) <- NSFW

Veniae
Veteran
Posts: 461
Joined: Sun Mar 06, 2011 9:01 am
Contact:

Re: Sprite making step-by-step + free PSD sprite

#8 Post by Veniae »

Soooooo cute~ I wanna draw like you. *o*


User avatar
MaiMai
Yandere
Posts: 1757
Joined: Sat Mar 21, 2009 6:04 pm
Completed: [Phase Shift]
Projects: [ None ]
Organization: Paper Stars
Tumblr: maiscribbles
Deviantart: maiscribble
Location: USA, Southern California
Contact:

Re: Sprite making step-by-step + free PSD sprite

#10 Post by MaiMai »

Deji is already working on several projects listed here. She is a working artist who takes commissions, but as of now isn't taking on individual ones since she's busy with the five projects listed in the link.
Image COMMISSIONS AVAILABLE (check Tumblr sidebar)

Locked

Who is online

Users browsing this forum: No registered users