- 8,108 views, 3 today
1,818
One of the first things that beginning skinners learn is that pixels should be different colors or shades to make a skin appealing to potential viewers. Almost every beginner has tried "blur" or "noise" techniques thinking that will solve the flat shading problem and produce a world class skin. When that doesn't give the desired results, they look at the creations of top skinners and realize that they are using gradients, a systematic method of varying colors or shades by incremental steps. It is at this intermediate level where many skinners become arrested in their development as a skinner. They find a shading pattern that looks visually pleasing, and then proceed to crank out dozens of different color variations on a basic skin. They do not really understand the underlying reasons why the shading pattern looks pleasing, and therefore don't know how to improve the pattern, or more importantly, when it is beneficial to break the pattern to create visually stunning skins. Advanced skinners know that pixel color variations and gradients aren't random, they are based on understanding the 3D geometry of the real object you are trying to recreate on a 2D surface. In this blog post, I am going to explore the geometrical basis for human head and face design to help those who wish to take their skinning skills to the next level.
As much as we may think otherwise, there really are very few, if any, true blockheads in the world. Human skulls are thinner, more roundish around the edges, and full of protuberances (nose, lips, ears) and indentations (eye sockets). The 8x8x8 Steve head in Minecraft poses a conundrum to those interested in the more realistic shading styles; especially dealing with those pesky edges and corners. Let's ignore facial features and just focus on head shape. There are lots of options for head shape, but here are illustrations of a few of the more likely choices:
Beginners tend to start with the cube, intermediate skinners move onto the cylinder, and more advanced skinners play around with the other options (whether they realize it or not!). The primary advantage of the cube and cylinder is that they fill the entire 8x8 panel of the head cube which is great for accounting for the shading of every pixel. The remaining choices pose the problem of having to shade edges and corners when there is really no material there in real life. Notice how all non-cube shapes are much more interesting to look at. Except for the cube, all the other shapes have obvious gradients - light in the center and darker as you move outward to the "edge" of the shape. While the cylinder has a gradient from left to right, it is uniform from top to bottom (not a bad choice for a simple helmet on a medieval knight). None of the remaining shapes have this blandness. To turn these shapes into potential head designs, I gridded them out like so:
Before moving to the next part of the study, I want to point out that the gradients are not as simple as "one step" per pixel as you move outward from the center. The gradient starts out pretty gentle in the center, with only 1 or 2 shades of gray per grid box. Toward the edges, the gradient is changing really fast with 3+ shades of gray per grid box. From an implementation standpoint, turning these shapes into head skins, means that using the "burn" and "dodge" features of the magic pens in drawing programs is not as simple as +1 in the number of clicks moving outward box by box from the center. This is where many skinners trying to make gradients get stuck and frustrated. The gradients needed are not linear.
The next logical step it to convert each grid box from a gradient of grays into a single gray scale value that can be applied to a pixel on the head template. This can be done in a number of ways. I worked on my figures for this blog in PowerPoint and used the magnifying glass tool to capture a single shade. You could also use Pipette (http://pipette.en.softonic.com/mac) or a variety of other drawing programs to do the same thing. This is where some variability creeps into the process. Since there is a gradient within each box, where in the box, should a sample be taken, so that a single gray scale value can be applied to the box as a whole? One method would be to take a sample from the center of each box and use that. This would create a relatively gentle gradient. I decided to try and take the weighting of the gradient within the box into account and sampled relative to a box's position in the overall grid. I suspect this creates a steeper gradient, that is more reflective of what is actually going on. (Note: I am purposely ignoring off-center lighting effects which add a layer of complexity which would obscure the basic points I am trying to make). Before sampling, I took the step of "rendering" my shapes to help smooth the rougher gradient due to just "shading" the shapes in the Art of Illusion app. My sampling pattern looks roughly like this:
The red dots indicate where a sample point was fairly obvious based on my sampling rule. The yellow dots represent places where the rule broke down and intuition had to take over. Looking at the sampling patterns on the shapes there are several things to consider. First, cylinders and stacked cylinders require relatively few samples whereas complex shapes (the sphere and egg-shaped) require more samples. Second, boxes with curves passing through them are problematic because they could be assigned pretty much any shade of gray from pure black to pure white. Lastly, when the sampling is done and the corresponding head shapes are created will there be a noticeable difference between the sphere, stacked cylinders, and egg-shaped designs? This will be most important on the lower portions of the shapes because the top most rows of the grid are usually masked with hair and/or hats when designing human skins.
The complete process, and the grid free results, of converting the possible head shapes (less the cube and cylinder) into shading patterns appear here:
In my opinion, of the basic head shapes tested, the egg-shaped one appears the most natural when converted to a shading gradient. A finishing touch, is to add a bit of asymmetry down the center of the head to give directionality to the lighting. This is done by slightly lightening each pixel in either the column directly to the right, or to the left, of center. Here is what the finished product looks like if the column to the right of center is lightened:
After that the designer adds the eyes, nose, and mouth of his/her choosing. Hopefully, you have made it this far and see that good head design is not a matter of random pixel choices, but rather of understanding the geometry of the human head.
One question that I have asked myself as I have experimented with the art of skinning is: "Is it possible to recreate the face of a celebrity on a 8x8 head template and have it recognizable to a viewer without giving the identity away in the title or description of the skin?" I've decided to try the experiment in this blog. I am going to include the face of an old-time celebrity that I created from a reference photograph and I am going to let my readers guess the identity. Younger readers won't know this celebrity - you will have to search for old-time movie stars.
The process I followed is this:
1) found a photo of the celeb's face on the internet
2) grabbed the image and stretched it horizontally to fit onto an 8x8 grid (stretching is necessary because real heads are taller than they are wide)
3) used Pipette to grab a color from each block in the grid and turn it into a single pixel on a head template
4) tweaked and finessed the result using the hat layer to build depth and finer detail (see my blogs on skinning illusions for more information)
Here is all I can show you (steps 3 and 4) without giving away the identity of the celebrity:
While you are pondering the identity of the star, notice the similarities between the shading of the egg-shaped computer model and the shades grabbed from the photograph (minus hair, nose, eyes, and mouth). Geometry is pretty cool huh?
Don't forget to post your guesses as to the identity of the celebrity (it helps if you blur your vision). I will eventually release the whole skin...
Addendum
A viewer commented that head designs that use very light pixel shadings in the corners are unpleasing to many skin designers/players because they look unusual during game play. He suggested that a head design be created that uses the full 8x8 area without resorting to faint colors. The "marshmallow" head design shown below addresses this issue (it also looks like a Lego figure head):
The design is essentially a variation of a cylinder but with rounded edges. Depending on a designer's comfort with faint corners the radius of curvature at the corners could be increased to yield more variation in the gradient within the "cylinder" portion of the head. The pixels labeled A, B, C would need be lightened while pixel D would need to be darkened.
I also want to add a few comments about facial features if a realistic style face is desirable in a particular skin design. I will use the pixel mapping of the celebrity's face to point out some things that might interest beginning and intermediate level skinners who would like to try new things. Compare the labeled figure on the right to the reference figure on the left.
Except for the part in the hair, the face is essentially symmetrical around the vertical centerline. Careful observation shows that the equivalent right hand pixels are all darker than their left hand counterparts. This is because the light is shining onto the face from slightly above and to the left of the head. This is casting the right half of the face in shadow. This is particularly evident on opposite sides of the nose. The shadow of the nose also affects the right side cheek and even the right eye socket. Even the "philtrum", the area above the lips and under the nose has shadows in it.
As much as we may think otherwise, there really are very few, if any, true blockheads in the world. Human skulls are thinner, more roundish around the edges, and full of protuberances (nose, lips, ears) and indentations (eye sockets). The 8x8x8 Steve head in Minecraft poses a conundrum to those interested in the more realistic shading styles; especially dealing with those pesky edges and corners. Let's ignore facial features and just focus on head shape. There are lots of options for head shape, but here are illustrations of a few of the more likely choices:
Beginners tend to start with the cube, intermediate skinners move onto the cylinder, and more advanced skinners play around with the other options (whether they realize it or not!). The primary advantage of the cube and cylinder is that they fill the entire 8x8 panel of the head cube which is great for accounting for the shading of every pixel. The remaining choices pose the problem of having to shade edges and corners when there is really no material there in real life. Notice how all non-cube shapes are much more interesting to look at. Except for the cube, all the other shapes have obvious gradients - light in the center and darker as you move outward to the "edge" of the shape. While the cylinder has a gradient from left to right, it is uniform from top to bottom (not a bad choice for a simple helmet on a medieval knight). None of the remaining shapes have this blandness. To turn these shapes into potential head designs, I gridded them out like so:
Before moving to the next part of the study, I want to point out that the gradients are not as simple as "one step" per pixel as you move outward from the center. The gradient starts out pretty gentle in the center, with only 1 or 2 shades of gray per grid box. Toward the edges, the gradient is changing really fast with 3+ shades of gray per grid box. From an implementation standpoint, turning these shapes into head skins, means that using the "burn" and "dodge" features of the magic pens in drawing programs is not as simple as +1 in the number of clicks moving outward box by box from the center. This is where many skinners trying to make gradients get stuck and frustrated. The gradients needed are not linear.
The next logical step it to convert each grid box from a gradient of grays into a single gray scale value that can be applied to a pixel on the head template. This can be done in a number of ways. I worked on my figures for this blog in PowerPoint and used the magnifying glass tool to capture a single shade. You could also use Pipette (http://pipette.en.softonic.com/mac) or a variety of other drawing programs to do the same thing. This is where some variability creeps into the process. Since there is a gradient within each box, where in the box, should a sample be taken, so that a single gray scale value can be applied to the box as a whole? One method would be to take a sample from the center of each box and use that. This would create a relatively gentle gradient. I decided to try and take the weighting of the gradient within the box into account and sampled relative to a box's position in the overall grid. I suspect this creates a steeper gradient, that is more reflective of what is actually going on. (Note: I am purposely ignoring off-center lighting effects which add a layer of complexity which would obscure the basic points I am trying to make). Before sampling, I took the step of "rendering" my shapes to help smooth the rougher gradient due to just "shading" the shapes in the Art of Illusion app. My sampling pattern looks roughly like this:
The red dots indicate where a sample point was fairly obvious based on my sampling rule. The yellow dots represent places where the rule broke down and intuition had to take over. Looking at the sampling patterns on the shapes there are several things to consider. First, cylinders and stacked cylinders require relatively few samples whereas complex shapes (the sphere and egg-shaped) require more samples. Second, boxes with curves passing through them are problematic because they could be assigned pretty much any shade of gray from pure black to pure white. Lastly, when the sampling is done and the corresponding head shapes are created will there be a noticeable difference between the sphere, stacked cylinders, and egg-shaped designs? This will be most important on the lower portions of the shapes because the top most rows of the grid are usually masked with hair and/or hats when designing human skins.
The complete process, and the grid free results, of converting the possible head shapes (less the cube and cylinder) into shading patterns appear here:
In my opinion, of the basic head shapes tested, the egg-shaped one appears the most natural when converted to a shading gradient. A finishing touch, is to add a bit of asymmetry down the center of the head to give directionality to the lighting. This is done by slightly lightening each pixel in either the column directly to the right, or to the left, of center. Here is what the finished product looks like if the column to the right of center is lightened:
After that the designer adds the eyes, nose, and mouth of his/her choosing. Hopefully, you have made it this far and see that good head design is not a matter of random pixel choices, but rather of understanding the geometry of the human head.
One question that I have asked myself as I have experimented with the art of skinning is: "Is it possible to recreate the face of a celebrity on a 8x8 head template and have it recognizable to a viewer without giving the identity away in the title or description of the skin?" I've decided to try the experiment in this blog. I am going to include the face of an old-time celebrity that I created from a reference photograph and I am going to let my readers guess the identity. Younger readers won't know this celebrity - you will have to search for old-time movie stars.
The process I followed is this:
1) found a photo of the celeb's face on the internet
2) grabbed the image and stretched it horizontally to fit onto an 8x8 grid (stretching is necessary because real heads are taller than they are wide)
3) used Pipette to grab a color from each block in the grid and turn it into a single pixel on a head template
4) tweaked and finessed the result using the hat layer to build depth and finer detail (see my blogs on skinning illusions for more information)
Here is all I can show you (steps 3 and 4) without giving away the identity of the celebrity:
While you are pondering the identity of the star, notice the similarities between the shading of the egg-shaped computer model and the shades grabbed from the photograph (minus hair, nose, eyes, and mouth). Geometry is pretty cool huh?
Don't forget to post your guesses as to the identity of the celebrity (it helps if you blur your vision). I will eventually release the whole skin...
Addendum
A viewer commented that head designs that use very light pixel shadings in the corners are unpleasing to many skin designers/players because they look unusual during game play. He suggested that a head design be created that uses the full 8x8 area without resorting to faint colors. The "marshmallow" head design shown below addresses this issue (it also looks like a Lego figure head):
The design is essentially a variation of a cylinder but with rounded edges. Depending on a designer's comfort with faint corners the radius of curvature at the corners could be increased to yield more variation in the gradient within the "cylinder" portion of the head. The pixels labeled A, B, C would need be lightened while pixel D would need to be darkened.
I also want to add a few comments about facial features if a realistic style face is desirable in a particular skin design. I will use the pixel mapping of the celebrity's face to point out some things that might interest beginning and intermediate level skinners who would like to try new things. Compare the labeled figure on the right to the reference figure on the left.
Except for the part in the hair, the face is essentially symmetrical around the vertical centerline. Careful observation shows that the equivalent right hand pixels are all darker than their left hand counterparts. This is because the light is shining onto the face from slightly above and to the left of the head. This is casting the right half of the face in shadow. This is particularly evident on opposite sides of the nose. The shadow of the nose also affects the right side cheek and even the right eye socket. Even the "philtrum", the area above the lips and under the nose has shadows in it.
| Tags |
1 Update Logs
Update #1 : by Roobus 02/11/2013 12:22:01 pmFeb 11th, 2013
Put in an Addendum which includes a less radical head shape and added more information on facial features.
tools/tracking
1897598
6
the-science-of-skinning-head-and-face-design
![°αshℓєy° My Hair Shading Tutorial! [ 70 Subs Special] [ Popreel Witch Was Found After A Life Of Steves Contest Thing :P ]](https://static.planetminecraft.com/files/resource_media/screenshot/1440/small/yutrytuuuustealdisaskmehfurstbefurudownload8187369_thumb.jpg)
Milkshake___
ScotsMiser
soldier_israphel
Hippopotamoss
madamepestilence
SatoshiHikari
Create an account or sign in to comment.