PDA

View Full Version : Guide: Pixel-Overs


Azumao
04-17-2007, 03:28 AM
Pixel-Overs
by Azumao (http://www.pokemonelite2000.com/forum/member.php?u=9317)

I. Introduction

If you have ever seen a pixel over and thought, "Man, I wish I could make that!" then you're in the right place. By the time you've read this guide, you'll be able to make pixel overs without dropping a sweat.

II. The Tutorial

1. Choose Your Image This is probably the easiest step. You need to find an image to make a pixel-over of. I'll choose a Pokemon Anime image, but you can make a PO (pixel-over) for any image. I've chosen Igglybuff. (Click for the Pokemon Sugimori (http://www.pokemonelite2000.com/sugimoripictures.html) and Anime (http://www.pokemonelite2000.com/animepictures.html) images.)

http://www.pokemonelite2000.com/pictures/anime/anime174.jpg

2. Paste and Make a New Layer Now, you need to paste the image into an image-editing program. After you have pasted your image, make a layer above it. MSPaint doesn't allow layers, so you will need a program that does or to do this without them.

3. The Outline Now, on the new layer, you need to outline the image. (Be sure that the image is on the layer below, you need two seperate layers) It is best to use a bright color for the outline, such as red or blue. This is so that you can see it better over the black outline of the sprite. Be sure that your outline is an appropriate pixel outline.

http://i144.photobucket.com/albums/r181/azumao/Other/pixoutline.png

Note that there are no right edges in the appropriate outline. Also, it doesn't go straight from horizontal pixels to vertical pixels. Be sure that you make your outine around the whole image, including details inside of it. Here's the Igglybuff with an outline:

http://i144.photobucket.com/albums/r181/azumao/Other/igglybuffoutline.pnghttp://i144.photobucket.com/albums/r181/azumao/Other/igglyoutline.png
(background image - w/o background image)

3. Delete the Background Now you can delete the background. This just means the background image, not your outline of course. If you had to use MSPaint for this, then now you need to erase the image. Have fun. :D If you used a program with layers, you can now delete the layer with that image on it as well, leaving you with one layer and the pixel outline you just made.

4. Coloring Now, it's time to add the basic colors. You need to choose a sprite of your Pokemon. You may select it from FireRed/LeafGreen (http://www.pokemonelite2000.com/frlgpokemonpics.html), or R/S/E (http://www.pokemonelite2000.com/rsgbapics1.html) sprites if you want the best choices for colors, and in a minute, shading. Using the colors from the sprite you choice, fill in your PO with the correct colors in the correct places. The Igglybuff now:

http://i144.photobucket.com/albums/r181/azumao/Other/igglycolors.png

In case you can't tell, the colors are a bit orange due to the sprite. This only occurs with a few Pokemon, but if it bothers you, you can take the colors from the base image instead, although the sprite is suggested. I'll leave my Igglybuff orange.

5. Shading Now it's time to shade the PO. If you need to, you may use the base image as a reference for where the shading goes. Now, get the darker shade from your sprite/base image, and use that to add the shading where it belongs. If you don't use the base image as a reference, just imagine if the pokemon were standing under a light, and imagine how it's body parts and such would block the light, causing shadows. Igglybuff is becoming 3-D!

http://i144.photobucket.com/albums/r181/azumao/Other/igglyshadows.png


After you've added your shadows, it's time to add the highlights. Go back to visualizing the light shining on your Pokemon. Where the light directly hits the Pokemon (usually on the top of body parts and such) add the highlight shade, which is the lighter shade on the sprite/base image. (some base images for Pokemon don't have highlight shades) Behold:

http://i144.photobucket.com/albums/r181/azumao/Other/igglyhighlight.png

6. Recoloring the Outline Changing the outline is the last step to your pixel over. Now, if you used the base image for colors, there is no outline color. You'll have to make a darker shade of the shadow color on your PO. (For MSPainters, go to the top of the page to Colors > Edit Colors > Define Custom Colors) After you have recolored your outline, you need to shade it. This part is optional, but it makes the PO look more official if it is shaded.

Looking at your PO, notice where the shadow touches the outline. You need to recolor those colors to a dark gray. (not quite black, but very close) Like this:

http://i144.photobucket.com/albums/r181/azumao/Other/igglydarko.png

Lastly, wherever the highlight color touches the outline, change the outline color to the shadow color. If that confuses you, I'll say it a different way. Take the color that you used for shading the darker areas of the image. Wherever the hightlight shade touches the outline, recolor it (the outline) to be that color (the darker shade). Viola, the finished product!

http://i144.photobucket.com/albums/r181/azumao/Other/igglylighto.png

III. Words of Closing

Now that you know how to make a basic pixel-over, take it to the next level. Be creative with what you use as a base image, there are no limits. Don't restrict yourself to Pokemon images, you can use any kind of picture to make a pixel-over. Remember, think outside the pixel. :cool:

Volcanflame
04-17-2007, 03:34 AM
Great Tut, Azumao! :o

Well done ^^

-Volcan-

Xtra
04-17-2007, 03:37 AM
Yes. Good Job!!

There have been many tutorials lately

Azumao
04-17-2007, 03:43 AM
Meh, only about two. Not as bad as the Tutorial Outbreak of December '06. *shivers* Along with the Region Outbreak of November, and the Comic Outbreak of Dec-Jan.

*bad memories*

Xtra
04-17-2007, 03:49 AM
Hmmphh..

Still a nice tut. Very Talented

Matt
04-17-2007, 03:50 AM
For a pixel-over, you may want to use a bit more than three shades, and maybe a bit of dithering. I'm referring to a piece like this (http://img152.imageshack.us/img152/2681/venusaurpixelover01eh5.png) (not mine).

hogsbff
04-17-2007, 03:50 AM
Thank you so much! I just tried doing it on Pikachu and it came out so good! Thank you so much for making this tutorial.:biggrin:

Azumao
04-17-2007, 03:58 AM
For a pixel-over, you may want to use a bit more than three shades, and maybe a bit of dithering. I'm referring to a piece like this (http://img152.imageshack.us/img152/2681/venusaurpixelover01eh5.png) (not mine).

True, but as I stated in the closing, this is just for a basic pixel over, so that you can get the idea of how to do it. Maybe one day I'll make a Pixel Overs - Advanced guide or something. :P

Of course, I should probably improve my talents to that point before I try to improve others'...

@ hogsbff: Glad you liked it. :]

Shady
04-17-2007, 08:55 AM
Meh, only about two. Not as bad as the Tutorial Outbreak of December '06. *shivers* Along with the Region Outbreak of November, and the Comic Outbreak of Dec-Jan.

*bad memories*

Aw, the region outbreak was so fun though. xD

I've never tried doing Pixel Over's in a program using layers. Could be interesting. Great work on the tut.

For my tut's and stuff i've always used Paint. xD

xXGengarXx
04-17-2007, 05:59 PM
For a program using layers, make a new layer and trace the original with black. You should have a black outline and no color!

For example, on MS paint, this Pixel over took 30 minutes, because I had to trace, erase, then color.

http://i139.photobucket.com/albums/q288/xXGengarXx/Pokemon%20Pixel-Overs/CroconawPixel-over.png


On a program like Adobe ImageReady, you can shorten the time by tracing a new layer then get straight to the coloring. Like this one took about 10 minutes.

http://i139.photobucket.com/albums/q288/xXGengarXx/Pokemon%20Pixel-Overs/FroslassPixel-Over.png

The Harris
04-17-2007, 06:27 PM
For a program using layers, make a new layer and trace the original with black. You should have a black outline and no color!

For example, on MS paint, this Pixel over took 30 minutes, because I had to trace, erase, then color.

http://i139.photobucket.com/albums/q288/xXGengarXx/Pokemon%20Pixel-Overs/CroconawPixel-over.png


On a program like Adobe ImageReady, you can shorten the time by tracing a new layer then get straight to the coloring. Like this one took about 10 minutes.

http://i139.photobucket.com/albums/q288/xXGengarXx/Pokemon%20Pixel-Overs/FroslassPixel-Over.png

yeah thats true

Azumao
04-17-2007, 07:29 PM
For a program using layers, make a new layer and trace the original with black. You should have a black outline and no color!

For example, on MS paint, this Pixel over took 30 minutes, because I had to trace, erase, then color.

http://i139.photobucket.com/albums/q288/xXGengarXx/Pokemon%20Pixel-Overs/CroconawPixel-over.png


On a program like Adobe ImageReady, you can shorten the time by tracing a new layer then get straight to the coloring. Like this one took about 10 minutes.

http://i139.photobucket.com/albums/q288/xXGengarXx/Pokemon%20Pixel-Overs/FroslassPixel-Over.png

O.o That's what I said in the tutorial.