Minecraft Blogs / Tutorial

The Hat Trick - More Skinning Illusions

  • 14,958 views, 3 today
  • 92
  • 54
  • 36
Roobus's Avatar Roobus
Level 68 : High Grandmaster Pixel Painter
1,818
Introduction


Skinners have a love-hate relationship with the "hat" layer. Some consider it a hard to use gimmick that real skinners don't need to use in order to create awesome skins (and there are lots of awesome skins that don't use the hat layer). Others, such as myself, tend to incorporate it into almost every skin and not just for hair, hats, and hoodies. I feel it can add a few details that make a skin stand out when scrolling down the "Latest" listing on PMC. I depend on the unique attributes of the hat layer to help create "skinning illusions". Here are two attributes that make the hat layer special:
  • it is larger than the head layer
  • it allows invisible pixels


I use these attributes to create illusions in several ways:
  • adding volume
  • creating depth
  • increasing resolution


I am sharing some of the illusions I have experimented with in the hope that I will encourage new skinners to play with the hat layer.



Adding Volume


Since the hat layer is slightly larger than the head layer, you can make your skin appear more "top heavy" by using the hat layer instead of the head layer. An example of this is my "Transplant" skin from the Monster in the Closet contest. I wanted to make a nasty eyeball as large and as round-looking as possible because it was going to be the focal point of the skin. This created a problem for me. I wanted to knock off the cube's corners to make the eye look more spherical - which would leave holes in the corner and give me less than a 100% completion rating - a skinning no-no. To solve this problem, I added a head layer (a brain, not a companion cube...) underneath and used it as a marketing hook to get people to view the skin by referring to something hidden underneath the hat layer in the description. It worked. Compare the larger volume of the hat layer eyeball to the head layer brain.


nUlRcLWpng


I designed a Flynn Rider skin for the Book and Movie Character contest. I really wanted it to look like Flynn had Pascal the chameleon standing on his shoulder. The hat layer allowed me to create the 3D effect of Pascal's head and tail wrapping around Flynn's head without being attached to him. Pascal is essentially a stand-alone figure created in another layer.


fbsfMpng


The hat layer provided a great way for me to make realistic tiers of petals on my sunflower skin. The petals made the head seem oversized - an easily recognizable characteristic of sunflowers.


RJSfUpng


Here is one last volume illusion. I did a series featuring rabbits running around with baskets on their heads. I pumped up the volume of the Easter basket by using the hat layer for the basket, the basket handle, and some of the grass hanging over the sides. The head layer was used to create the baby chick, the dyed eggs, and the chocolate bunny.


aCawnpng


Creating Depth


The hat layer is farther out than the head layer. This forms the basis for two useful, connected illusions - depth and pseudo animation. I will start by discussing depth. In my opinion, one of my better illusions, was creating box flaps on my "Finders Creepers" skin (a story I wrote about a poor hunchback martyring himself by fleeing town with a box of creeper kittens on his head). The box flaps are drawn in the hat layer while the kittens, box, and flap shadows are all in the head layer. I thought the flaps looked incredibly 3D (no one noticed - sigh).


wgAfXpng

Now for pseudo-animation. On a whim, I created a "Thomas the Tank Engine" skin. To breathe some life into the character, I used the hat and head layers to create the illusion of puffs of smoke drifting backwards from the smokestack. By interspersing white and gray pixels among clear pixels the smoke appeared to be more 3D than a single color would permit. A real bonus of the hat layer is that it can give the illusion of movement to things like smoke, and eyes, because of the parallax between the separated hat and head pixels when the skin is in motion.


kgUGKqvpng

My platypus skin is a good example of creating animated eyes. If you look at the top two images you will see that the eyeballs apparently shift as the character turns relative to the viewer. This works because the pupils are drawn on the hat layer while the whites of the eyes are drawn in the head layer. The bottom images show what this looks like when the hat layer is turned off in the previewer. If you look at the platypus's bill, you will notice it looks much better because it uses the volume illusion (as well as a gradient designed to look like a curve fading toward the back).


xZysZkpng

Here is one last depth illusion example; the gaping mouth. When I draw open mouths I really like to make them look like you can see right down the esophagus. A red-black gradient provides a good start. Adding teeth, or lips, to the hat layer makes the mouth look extra deep. My orca skin uses this approach. Even more depth is gained by putting the lower jaw on the body. A pseudo-chewing motion occurs when the head moves.


MVZSKpng


Increasing Resolution


As mentioned in the introduction, the hat layer is slightly larger than the head layer even though it has the same number of pixels. Therefore, the pixels in the two layers do not line up. This can be used to a skinner's advantage because a pixel in the hat layer can partially cover a pixel in the head layer creating the illusion of smaller pixels. These partial pixels can be used to smooth gradients and create finer curves (less sawtoothed).


My "Parrot" skin employs the increased resolution illusion as well as the volume, depth, and moving eye illusions. The beak on the left has pixels drawn in the hat layer. Not only does the beak extend out from the head, but it hooks downward. The lower portion of the beak appears to be smaller than the upper portion, like an overbite. Look carefully and you can see that portions of the head layer pixels are covered by their hat layer counterparts around the lower beak. This gives the skinner finer gradient control because he/she is working with sub-pixels.


VkkSvjpng

Kitty Softpaws's facial expression really banks on the overlapping pixel gambit. Carefully examine her eye construction, her pencil thin eyebrows, her cheeks, and the inner parts of her ears (the head layer alone is on the right for comparison purposes). Features like this take some time to design because you are constantly jumping between layers and spinning the figure in the previewer. The payoff is a more expressive face that captures a viewer's attention.


wVVwqupng

The "Satyr" skin's ramhorns show how the hat layers illusions can be combined. The upper images show the combined hat and head layers while the bottom images show the head layer alone. The upper right figure clearly shows the 3D effect. My goal was to create the appearance of an spiral shrinking in radius and cross section. A variegated gradient coupled with pixels strategically placed in the hat and head layers creates the striking illusion of an goat horn that extends to a point out past the character's ear. The horn pixels on the back of the layer are a little darker than their counterparts on the side of the layer to create depth. Likewise the pixels in the head layer are darker than the pixels in the hat layer to create curvature and shadow.


SAocFspng

Concluding Thoughts


Even though I presented three hat layer illusions separately, they come as a package (like a hat trick in sports) when designing a skin. Go out and look at some skins. Use the PMC previewer to turn the hat layer off and on to see how a skin's appearance changes when the illusions are exposed. Try to learn from what you observe and don't be afraid to experiment. The possibilities are almost endless. To those of you for which this is "old hat" thanks for reading. For those of you who are new to skinning and are willing to experiment with the hat layer - I tip my hat.
Tags

Create an account or sign in to comment.

1
09/17/2014 3:04 pm
Level 64 : High Grandmaster Sweetheart
Myra_
Myra_'s Avatar
You, sir, are a freaking dad gum genius.  I love this blog, and your incredible skins :D
1
03/14/2014 5:40 pm
Level 6 : Apprentice Skinner
_ThisIsDaPancakez_
_ThisIsDaPancakez_'s Avatar
Saying for myself, Im getting better at skins (I think) ... I use SkinCraft, which isnt the best, because I cant enter the contests if I make a skin for it. ;-; But, this helps. :) Anyone have any easy, free, no download skin creation websites that are allowed for the comps? I like all your blogs on skins. :D
1
09/12/2016 11:48 am
Level 24 : Expert Fisherman
AlekosKoraki
AlekosKoraki's Avatar
But you can use directly a painting program like microsoft paint (yes, you can) and take the steve in ur mine craft folder, make ur skin, and then SAVE AS your skin name
1
07/08/2013 10:01 am
Level 22 : Expert Architect
Crafty Steve
Crafty Steve's Avatar
I like the Bunny with the easter egg basket the most. Never thought about some of this stuff thanks!
1
04/11/2013 1:26 pm
Level 4 : Apprentice Network
GLaNDYTehBro
GLaNDYTehBro's Avatar
Wow, you are REALLY helping me with my skinning!
''I used to be a skinner like.. uh.. those noobs over there. But then I took a read of this.''
1
04/11/2013 6:37 pm
Level 68 : High Grandmaster Pixel Painter
Roobus
Roobus's Avatar
I look forward to seeing your work.
1
02/26/2013 9:48 pm
Level 38 : Artisan Ninja
HeroGuy426
HeroGuy426's Avatar
I like the companion cube under the eyeball.
The cake is a lie.
1
02/03/2013 1:18 pm
Level 46 : Master Elf
Wulf_Oman
Wulf_Oman's Avatar
This really helps out with skins! Before I even saw this I used a hat trick on my Steampunk Elf skin, the goggles come out in the front as a hat and over the sides a bit, then i made it overlap on the sides to give it the illusion its still behind the ears
1
02/02/2013 10:57 pm
Level 53 : Grandmaster Lad
NubNoobNewb
NubNoobNewb's Avatar
HATRICK!!!
1
02/02/2013 7:44 pm
Level 37 : Artisan Skinner
terreen
terreen's Avatar
You never disapoint.
Planet Minecraft

Website

© 2010 - 2024
www.planetminecraft.com

Welcome