View Full Version: 3dish

Pixel > Tutorials > 3dish


Title: 3dish
Description: make sprites look like 3d


teej - September 13, 2006 10:15 PM (GMT)
Making things look 3D
(this tut was originated from Class Pixel)


You should already know these
-Ambient Lighting
-Shiny Surfaces

For this lesson, you'll need a good review
of the ambient lighting technique
tutorial (Shiny Surfaces).


Things you need to consider when
making a 3d looking thing is that:

1. It should not have outlines (optional)
2. It is completely affected by light
3. You will use lots of colors on it.
4. Learn the Depth. (Bumping Flat surface.)
5. Make sure you know the physical body structure of the subject.
6. Make sure there is shadows.
7. Always try to draw on another perspective view or angle of view.


1. Why should we not apply outlines on a 3d pixel art?

Actually, as a pixel artist it is upon you if you want to add outlines
to your 3d looking pixel art work. however, considering 3d in its own
world it really shouldn't have to have an outline, take 3d video games
for example (Except 3d games with Cellshaded Graphics) they really dont
have outlines right?. Put it this way... its like pixelling an object to make look
almost real, and real objects do not have outlines.


2. Why Should it be affected by light?

You cannot make 3d appear like 3d without the light, the visualization of being 3d
depends on the lights.


3. Why do i have to use lots of colors?

You need to involve a number of colors, because you will work on different shades
of colors... it helps you to define the depth of certain parts of an object... like
where should the dark spots? where should the lighter parts?

user posted image
the above image shows how the 2nd ball uses many colors, while the flat one only has its base color Red, Green, Blue.

4. Depth?

You need to give an object a feeling of depth if you want it to look 3d. this is
where a flat surface gets bumped. it is important that you know the objects physical
characteristics... how thick is this thing?, how flat is this thing?, etc...
user posted image
the above image shows the level of depth for each rectangle buttons

5. Visualization of the object's physical structure

Same as determining and rendering depth....
You need to be able to understand and visualize how the object looks if it get's rotated
in any angle. Most of beginners will find it hard to do, well its just a matter of how well
you memorize or remember the object's feature; like the anatomy of the body.


6. Shadows

Ofcourse, if there is light, there is dark, and Dark is the shadows. YOu should know well how a light cast on the body and so how the shadow will cast underneath.


7. View perspective

the Angle view reveals the 3d structure of your work. start making a lineart which view is on top (ala-isometric) or orthogonal or any angle.
this is hard though for beginners or those that dont really have it <whisper> the talent </whisper>. but i believe most of these things can be learned.


Sample Pixel: Raposhi (Raphael + Yoshi)

OK this is Raposhi when he was still in 2d mode.
user posted image

and then i decided to make him look 3d
so i followed this procedure:

1. I analyzed Raposhi's body structure, then i carefully shaded all the light area where
i know the sun will reflect on Raposhi's body.

Raposhi's Body Structure Analysis:

-Raposhi's nose is pretty big and round, it will be the biggest light spot in
his entire body.
-Raposhi's back shell is pretty bumpy and shiny.
-The other side of his body such as chest and stomach and his left foot should not be exposed to the light.

this pixelart halfway from being complete
user posted image

2. Then, i started erasing the black outline, replacing it with Raposhi's color. ofcourse i took
consider of the shadow shaded area and the light shaded area and i adapt them as a replacement
to the black outlines.

3. I added further lighting to Raposhi's body, so to make visible the shiny parts of him;
the big nose, the big cheek, the shell decoration...

4. Then i also refined the shadow shaded areas (or the darker spots).

Here we go....

3D looking Raphoshi
user posted image

Lets compare both versions
user posted image

i adjust 3d Raphosi's color a bit here
user posted image

I Am Uh - September 14, 2006 12:39 AM (GMT)
wow... nice tutorial teej. :OK:

mageknight53 - October 14, 2006 11:58 PM (GMT)
Count me in. That looks awesome.

monkeys - October 15, 2006 12:26 AM (GMT)
You talking about pixel lessons? Link to sign up is here. : :P




Hosted for free by InvisionFree