Roefl's pixel guide

From Fallen Evolution
Jump to: navigation, search

Contents

Roefl's Pixeling guide!

Seeing allot of people are asking what program to use for editing sprites. I decided to make a short guide about a few programs I have used in the past. I will only explain the basic knowledge you need to start "editing or pixeling".


Microsoft paint (Windows Vista/7) - Standard

(Ignore the dutch)

Pro's - Very Organized. - Standard on Windows. - Fast starting up (the program). - Free

Con's - Bad selection tool. - Might be a bitch by choosing 16bitmap instead 24. - Very limited.

http://i46.tinypic.com/2mzy3yq.png <--- click here to view.

I will just mention the standard things as I said above. I've put borders around the things im going explain.

Red border: Cut & crop tools, used to slice the sprites, although I recommend using another programs for that. Also it has the simple rotation option, This is only usefull for sheeting a weapon (in my opinion). Make sure you only rotate 90' or 180' so it won't lose any detail!

Blue border: The standard tools like Pencil/brush,Paint bucket,eraser etc. Most of you people know all these options ofcourse, I don't have to explain that I guess. (Just mentioning it anyway).

Green border: The button on the left is about selecting the thickness (range w/e) of ur tool. Then you have the color selections, you can choose two colors to work with (Left mouse click & right). But if you use more colors then two you should make ur own palette by clicking on "edit colours".

Other information, well you can undo ur actions by clicking on the "return looking button" above the "start" menu. Also you could simply press "Ctrl + z".

Paint is usefull if ur just doing to standard editing, replacing or saving. If ur going to "pixel" urself and doing whole sheet's I suggest using one of the following programs.

Graphic Gale - Opensource

Pro's - Also very organized. - Best color "picking" option. - Fast starting up (the program). - Color selection tool! - Layers. - Free.

Con's - Bad selection tool. (slicing)

http://i46.tinypic.com/23j302f.png <--- click here to view

Well this is the "interface" of Graphic Gale, it looks quite old but it's very organized. Let's start by checking the menu's on the top.

File: Just like all the other programs, it's about "save/load/open" import/export etc. Edit: This is mostly about the layers, personally I haven't used it so I guess you won't either. View: I haven't used this either, and about the grid I'll get back on that later. Image: Here you can "flip/rotate" the image also count the color's and add some effects. (flip/rotation is usefull). All frames: This has kinda the same options as "image" but I havent really used this. Capture: Let's forget this one. Window: Well nothing interessting, mess with it how you want to. Help: Help.

Green border: Those are the Undo and the Redo action buttons, this will Undo or Redo ur actions (How smart :3). But ofcourse you can simply press "Ctrl + Z" to undo ur actions to.

Yellow border: This is usefull if you don't fully zoom into the picture, this way you won't click the wrong pixel. You can toggle it by clicking on the grid button. (on/off).

Red border (from left to right): Magnifier: Aka Zoom. (great zoom!). Image mover: Moves image if selected. Selection tools: Selects area you select.... Selection by color: The all mighty selection tool you must have, Photoshop has this option too. Pen/Pencil: Draw with it. 1x1. Line/curved line/retangle: Makes lines how you want it. Paint bucket: Fills whole area's with the same color.

Purple border (under the palette): You can choose RGB and HSL, Personally I like to work with HSL choosing the colors is easier. You have to experiment with it a bit. ^ A.K.A Different colour palettes.

Blue border: I will explain later what the layers are for and how to use it. I will post it under the Photoshop explanation.

Other Information: This is in my opinion the best program to use if ur going to "pixel" and full sheet ur armor/weapons. I don't really have anything else to say about this one xD.


GIMP - Opensource

Pro's - Good color "picking" option. - Color selection tool! (Ctr + O). - Layers. - Free. - Downloadable plugins.

Con's - Slow start-up. - Unorganized (Is 3 different tabs/windows really nessesary?).


http://i48.tinypic.com/1pfaqp.png <--- click here to view

First I'd like to say it crashed the first time I started it xD, I don't suggest using this if you have a slow pc. Well I haven't used this program much, infact I especially downloaded it for this guide (yes I've used it before). Like I said I'm going to say the basic things, good that it's all in the same "toolbox"

Red border: First row are all selection tools, the last one is the color selection tool (ctrl + O) really usefull. Second row are all things you should use for EO sprites, you can zoom by pressing "Z" and choose color by pressing Ctrl. Third row, same as the second row exept you could use the rotation tool. Last 3 rows, I only suggest using the pencil and paintbucket tool, I'm serious the rest are all pointless. (Blur/smudge = bad).

Blue border: I will explain later what the layers are for and how to use it. I will post it under the Photoshop explanation.

Other information, I only suggest using this if ur actually going to use it more then once a week. There's no point in trying this if ur not going to do anything with it, it's also used to make the "gui" with effects like glow etc. It's opensource so you can simply download it.


Photoshop (Cs3) - Paid

Pro's - Best selection tool (slicing) - Downloadable pluggins. - PDF read/save format. - Long undo memory.

Con's - NOT Opensource - Slow start-up

First I do not advice you to ilegally download photoshop (I just don't no questions asked). And if you have the school Key and/or work key, make sure you aren't selling any products or you could get a problem. But for the people that have this software legal or not, I will make a tiny/short explanation.

http://i45.tinypic.com/2hrzb0k.png <---

Red border: This is ur toolbox/bar:

Select/move tool. Selection tools (right mouseclick to change). Crop/cut tool. Ignore the spot healing tool and stamp etc. Pencil tool and paintbucket should only be used while editing sprites. The reason would be to much colors (might make a slightly difference in kbs).

A simple hotkey to zoom in or out = Ctrl + or Ctrl -. Then to move ur view over the picture press space and click/drag. Ctrl + T is the warp/rotate or resize hotkey. Ctrl + Z and Ctrl + shift + Z = undo and redo actions.

Blue border: I will explain later what the layers are for and how to use it. I will post it under this one :)


Layers.

Layers is like an invisible piece of paper. As example I have my sprite sheet on the table, and I want to draw an armor on it. Ofcourse you don't want to erase the spritesheet if you do something wrong. Then you have to put an "invisible piece of paper on it" and draw on that. (This way it looks like ur drawing on the spritesheet). If you did something wrong you can just remove the layer, or erase different parts of the layer.

To use the layer option, you have to put ur base (in this case sprite sheet) as first layer. Then make a new layer (looks like a piece of paper with a fold) and select it. you can now draw freely on it without touching the base layer.


Outlines - Pixeling guide V.1

Well hai people, I decided to edit this post and add some new stuff to it. I will start off by telling you how to make the outlines for the Endless Online sprites.

Maybe you've noticed the sprites in Endless Online (or any private server) are "isometric". Isometric is that the sprites are like "diagonal" on ur screen, like it has been rotated by 120 degrees. Anyway, the reason why it's isometric because it will look more like a 3 Dimensional environment. Just take a look at this sprite.

http://i47.tinypic.com/24v7lf7.jpg

I've seen allot people making armors and/or robes/skirts, but they don't realize that they don't make it isometric. Let me show you an example.

http://i47.tinypic.com/ta57q9.png

Oyesh, look what I made sexy uh. Well you should notice it isn't shaded properly, we'll get that later. Also it doesn't really look good either, I critism on that would be it's not isometric. Now let me show you the isometric one.

http://i45.tinypic.com/6iu2c8.png

Aaah! that's better don't you agree? Guess I got to show you how and what I did exactly. Well I simply followed the body lines, even though it's a sprite you have to look at it as it is real.

http://i50.tinypic.com/9pnr42.png

No, WHAT!? Im not a perv... seriously... Anyway, I colored the leg infront blue and the one in the back red. Let's say ur the female standing there, and you would wear a skirt. How would it look if you make it on a sprite? yes Indeed it would look like that. and not in one line like ________ because if you look at the feet (position) on the floor, one feet is placed higher then the other.

Another thing, outlines should be darker then the inside so it would blend in the background. Some people don't notice that you can use the outline to shade too, I mean don't use it to much though.

Next will be shading.


Shading

Let me show you the basics of the shading in pixel art. First off you've probably heard that "pillow" shading is the bad way to shade ur armors/weapons. It's true! (NOOOoOOoo) It'll make ur creation like a pillow just like shown bellow.

http://i49.tinypic.com/11b80hj.png

A way to prevent that, is to picture a sun or a light source in the left corner of ur screen. And picture that the light is shining on ur creation from that spot. Means you should get something like this.

http://i48.tinypic.com/qzokkh.png

Event though that doesn't really look good, we should make the sun/lightsource a bit brighter. And add more contrast between the colours, check picture bellow.

http://i46.tinypic.com/2uop4ll.png

Ok now we're getting to the hard part, this is about the "dithering" yes dithering. This is probably one of the hardest part of shading, you shouldnt over abuse the dithering technique. Now let me explain what dithering does. Pixel art is known as art with just a few colours, you can create an illusion to the eye by putting 2 different colors next to eachother like a checkboard. It will look like a gradient and create a 3rd color, look image bellow:

http://i46.tinypic.com/syxnkj.png

Ok, the last thing I want to say about the shading is that EVERYTHING has glossiness. This means you should really think about the contrast of the objects. Like Polished metal really has to shine! Look Image bellow, 1st = Metal and the 2nd = Snowball.

Next part in next post (due to max pictures).

Making a plated armor.

Now we've had the basics of outlining and the right way of shading we should make something. Ok, let's make a simple armor for the male character. First we need a sprite sheet, which can be found here.

Female - http://i578.photobucket.com/albums/ss230...mour-F.png Male - http://i578.photobucket.com/albums/ss230...mour-M.png

Now we should draw the outlines, make sure it looks isometric and personally I like making them red or blue. The reason I do that, is that I don't mix the outlines with the background and/or character. Ok here's my outline.

http://i46.tinypic.com/2rrmj3p.png

Ok, now we have that down we should start by coloring the armors inside. I always do the shoulder plates first, Notice where the light source is shining from. (I put arrows there to make sure you'll notice).

http://i49.tinypic.com/2nq713l.png

Ok now the coloring the rest, and add the light abit.

http://i46.tinypic.com/1265wyt.png

After we got the basic shading down, we can add the darker shade and ofcourse fix the rest. Make sure you'll shade it as a real armor, it has to be shiny!

http://i49.tinypic.com/30cwsn5.png

It looks hard, but if you practice a bit it's very easy. (I rushed the plate) Still I don't really like it, let's add a trim and maybe a cape.

http://i45.tinypic.com/e8lnaa.png

There we go, if I'd count the colours used.. It would be around 13 unique colours. NOTE: This is a tutorial plate I made, used to show how to make it. This is not my best work or w/e <- just wanted to say that xD.

Oh, maybe you noticed the character sprite I used is different then you got. That's because that was my custom shaded sprite I made for FE.

Making NPCs

Next I'm going to show you how to make a npc. First off we start with the outlines again, BEWARE! the hardest thing is to make it ISOMETRIC. In the past I've had allot of failures with the isometricness of the npc. Well to help you should draw 2 lines like this. After you did that, you should make the npc (make sure that the right side is higher then the left).

http://i49.tinypic.com/a287y9.png

Ok now we got that down, this is always the hardest part of npc-ing. After that we should highlight where the shades should be, kinda like we did at the armour.

http://i50.tinypic.com/icoe51.png

I also added the legs this time, Oh you noticed it's an ant! Not just an ant It's DA QUEEN. Anyway, while we got that down we should choose the correct colours to shade it. Let's google an ant, and look at those colours. Aaah here we go.

http://i48.tinypic.com/29xhnbp.png

Ahh, yes it looks good don't you think so? Well let's make the outlines of the back part a bit lighter and shade the legs properly. Make sure you shade like I taught you before. Oh, also dither it a bit, notice how it looks before and after. It's just slightly different but it looks better in my opinion.

http://i48.tinypic.com/k3wtgi.png

Tadaaa, done is our ant queen.

Next part in the next post (due to the max pictures again -_-)

Making an Inventory sword view.

This is like my 100st edit Smile, well anyway let's make a sword. Like you know a sword isn't completely flat. So let's draw the outlines, and keep in mind it isnt flat! (Look right corner).

http://i47.tinypic.com/2m33bk5.png

Ok,like you see I drew a line in the middle, this is the point where we have to shade. So the next thing we'll do is highlight the shading area's. It'll be easy shading and adding detail after, ok let's do it.

http://i48.tinypic.com/29kw4kx.png

This was just using the paintbucket tool, nothing hard about it. Notice how you can shade the outline, It's really neccesary to do that with a weapon to make it look sharp. Let's add the rest of the shading.

http://i48.tinypic.com/2dvo595.png

) that looks better doesn't it?

I added some slightly lighter shadings to add the "metal effect". This is what you really should remember, it could also be used for armours/shields etc. Well that was our sword, I suggest you copy/paste it to look from close Wink.


Choosing your colors and general tips & tricks.

So, now we got that down, I'll show you some "materials" or a "palette" you could use.

I made it circles so I'll be able to show what material should be, like dithered or not.

http://i46.tinypic.com/f02l2d.png

1st row:

Iron

Copper

Gold

Silver

Old iron/steel (notice the colour difference, It's not as glossy).


2nd row:

Red plastic

Blue plastic

White fabric material (cloth)

Black fabric material (cloth)

Purple/blue plastic


3rd row:

Desert sand/rock

Snow

Grass

Ice

Lava


Those are one of the basic colours you should use, but you should learn urself how to choose/pick colours. As example I'll show you how I used to shade yellow and ofcourse the new one.

http://i45.tinypic.com/20i97ox.png

The yellow-> green one was just by sliding the black-white bar darker which makes it green. While you should add a bit red to make it orange and make the yellow shading look way better. (unless you want it to be green).

Other thing's you should watch is that you don't make the colors to bright like some people like to do with green/red/yellow/blue. It makes it unrealistic and bad so you have to mess around with the grey-scale a bit to fix that.

Other things you should remember: Always save as PNG/GIF/BMP, but Png is the standard. (JPG IS BAD BAD BAD BAD). You can also shade the outlines (but that is for ur own taste). Take ur time and don't rush it like me Smile. Take reference pictures, but do NOT copy & paste or RECOLOR, this is not considered as UR art.

That's about it. Ok ty for reading, good luck.


~Written by Roefl~~

Personal tools
Editors