Minecraft Blogs

1000+ Subscriber Special [Color Theory 101, Hue Shifting, Palettes, and STUFF!]

  • 583
  • 431
  • 283
avatar KnobleKnives
Retired Moderator
Level 69 : High Grandmaster Lad
3,324
Wow. Just...wow. 1000+ subscribers. Unfortunately, being struck dumb with excitement and all that, I can't really think of anything poetic to say at all, dang it. All I can really say is thank you. Thank you all for being there, providing the support and feedback that I needed to make it where I am today. :)


Moving on from all that sentimentality, I made this tutorial mainly for the purpose of teaching those who struggle with stuff like hue shifting and all that. It's also a 'thank you' to all you awesome subscribers ;3. I also put in how I pick colors (sorta).

Some time in the near future I'll make a short tutorial on how I SHADE my skins, but for the time being, we'll let that be another story for another time.


nncMWJpng


Click to reveal


Click to reveal


Click to reveal




The 'Arc Method': A tip on how I hue shift
Welcome to the jungle...muahahahah.
So far you've learned that, traditionally, you're gonna want to increase the saturation as you hue shift towards the darker colors. But that isn't always the case. That method tends to be a little less than realistic. Usually, this style is preferred by skinning artists who like a more cartoony, high-saturation color scheme.
Super dark, saturated shadows are actually very unnatural in real life.

I'm going to teach you a method of hue shifting that I call the 'Arc Method'.
Look at the diagram below. The pink dot on the arrow signifies point of highest saturation.

gGBrSVbpng
On the left, we have the traditional method: High-sat lows, mid-tone base, and low-sat highlights. On the right we have the Arc Method: Low-sat lows, high-saturation base, and low-sat highlights. The thing is, each of those colors are exactly the same as their counterparts. The darkest tone on the Arc Method is set at 0 in hue, the same as it's high-saturation counterpart on the lefthand side of it's diagram. Pretty cool, huh?
Let's compare the palettes that we had in the hue shifting section. The top side hue shifted with the traditional method, the bottom half with the Arc Method. OQsSYWpng
The difference is profound, isn't it? This style of hue shifting can look cartoony and still retain realism at the same time. That's why I love the Arc Method.
When I'm picking colors for skins, I begin with a base tone at a level of saturation around 60-75. I try not to go above that unless I'm working on something ultra cartoony. As the colors get darker, I decrease saturation and value by increments of 5-10.
When I'm doing the highlights, I decrease the saturation and value by increments of 5-7. Sometimes I even increase the saturation by 2-3 when I want the highlights to look more cartoony. Here's a gif of my hue shifting process:

Hue shifting the shadows for my Bill the Cat skin (skipped one or two colors for conciseness):

gKQAdSmgif

Hue shifting the highlights for Bill the Cat (skipped one or two colors for same reason as last):

UatXWOgif

SKIN TONES:

With skin tones, I usually to start off with a base tone of around 40-50 saturation ( I consider anything above that in saturation values cartoony) and within the 30's in hue. With brightness, start around 85-95.



EXAMPLE:

AXTuDMnpng


As it gets darker, decrease saturation and move toward 0 on the H slide thingy. Personally, I like drastically decreasing the saturation between darker shades because I like the effect that it gives off.

For brown skin tones, I start with a hue base of somewhere within the 20's, a saturation value of 50-65, and a brightness level of 25-35.

EXAMPLE:

tDWDpng

---------------------------------
UPDATE MOTHERFRAGGLEROCKERS:

Observe an object. Any object. Stare at it, take in every detail, and make sure to note the colors of the object. Notice, if you're looking at a green object, that the object isn't just solid green shades. It is made up of purples, reds, blues, yellows, browns. The whole spectrum is mixed into the object thanks to light, which is made up of all color.

PALETTE UNITY

---------------------
The Pattern (or lack there of)



This update is going to serve as a tidbit for the time being. I'm working on a new tutorial that covers EVERYTHING. It'll come along sometime this week hopefully and will cover each little thing, from complimentary colors to shading methods. Until then, hope this new chunk was helpful!




Foxxeyy's Hue Shifting - An informative method on hue shifting!




So that's it! I hope it helped somewhat. I'm very unsure of my writing abilities so give me feedback if you have it and if you have any questions, don't hesitate to ask!


THANKS FOR 1000+ subscribers!!!!
hEgJPlpng
Tags

4 Update Logs

Update #4 : 03/21/2016 4:45:21 pmMar 21st, 2016

Added an amazing and informative section written by Foxxeyy! Thanks! :)
LOAD MORE LOGS

1
08/04/2019 8:53 pm
Level 5 : Apprentice Network
DGAE0018
I love your arc method and I've been using it for just about every skin I've made! Thank you so much! <3 Diamonds to you.
2
08/07/2019 9:32 pm
Level 69 : High Grandmaster Lad
KnobleKnives
Hey man, I'm so glad to hear it works well for you! I'm pretty happy to see that my tutorials are still visited and liked these days :).
1
04/16/2017 6:56 pm
Level 4 : Apprentice Network
Endeavoration
yeah the cake reference really got me because my mom is one of the older moms and she has a bunch of simple recipes (quite a few) memorized and it just comes naturally but for harder ones she needs a recipe so that relates
1
11/06/2016 10:14 am
Level 24 : Expert Zombie
yaoyorose
yes, i have a question.

when you're doing that thing where you shift the hue to a certain color and increasing saturation for shadows, are you supposed to touch the value at all? also, what are the recommended intervals for doing that?
1
11/06/2016 11:30 am
Level 69 : High Grandmaster Lad
KnobleKnives
I do indeed. Depending on which style of hue shifting we're referring to, the amount of change in value can vary.

First, let's say we're doing the Arc Method, or the PNG method. The value would increase by an approximate increment of 10, sometimes taking a couple digits less than that. I'd say the scale of change is around 6-10. You can see this change in the gif I have here near the end of this tutorial.


For the JPEG method, it's a little different. Seeing as we're jumping between various hues and saturation levels, controlling the value is a lot more fluid. It adapts to the palette in a much less linear fashion.

I whipped up a quick video for you to see how it jumps around, as it's hard to describe properly.

- Video -

Note how it's very fluid and doesn't have much of a structured pattern. When I am adjusting value, I do so according to two parameters: Visual appeal and palette unity. The first is more along the lines of personal taste, so it's unique to each person. The second is more universal. Palette unity is important, so I adjust the value so that it all ends up as a nice, flowing ramp without any jaggy bumps or sudden and unnerving contrasts.

I hope this wall of text helped! Good luck and feel free to ask if you need any more help.
1
11/06/2016 12:07 pm
Level 24 : Expert Zombie
yaoyorose
ah, i see what you mean on the change of value. i did watch the video and i did notice that as the colors got darker, the saturation and value started to meet a bit. that made a lot of sense to me!

so on the method that i mentioned before (that's the arc method, right?) when i increase the saturation, i'd also have to increase the value, and vice versa?

also, would this be a correct way to hue shift in general?
1
11/06/2016 12:10 pm
Level 69 : High Grandmaster Lad
KnobleKnives
Yep! That's pretty much what you have to do for the arc method.
1
11/06/2016 12:21 pm
Level 24 : Expert Zombie
yaoyorose
ok. thank you so much for helping me out!
1
10/12/2016 7:46 am
Level 15 : Journeyman Archer
arxerfyre
Welp, I'm actually studying color theory in school, and maybe this can help in my school, and also making skins. :)
1
07/22/2016 3:35 am
Level 12 : Journeyman Skinner
StingrayTristan
"After all, these aren't strict follow-or-suffer-eternal-humiliation-and-pain tips that I'm giving. "

This was the best part of the guide in my opinion
1
05/30/2016 1:50 am
Level 5 : Apprentice Crafter
MES LOVE CAKE
*Furiously writing notes*
1
03/23/2016 4:58 pm
Level 26 : Expert Archer
Katalisa
My grandchild looks great. You did a nice job sonny.
1
03/23/2016 5:22 pm
Level 69 : High Grandmaster Lad
KnobleKnives
Heheheh, this is your firstborn grandchild. The other one is coming up. I'm currently halfway through finishing it...sorta. Lots of diagrams and examples to whip up.
1
03/23/2016 5:35 pm
Level 26 : Expert Archer
Katalisa
Don't forget to add a section for Lennies.
1
03/22/2016 10:02 pm
Level 67 : High Grandmaster Waffle
hoshizora
my migraines are dead and i'm going to ***pathetically*** try your color tree branch thing hehe

nice guide btw!! this was the one that helped me the most when i started out ;o

edit: i feel like i did something wrong???? give me advice senpai qq (the color under the black is what i started with)
https://i.gyazo.com/a2773424b258d5dfc60f32b6438bf056.png
1
03/23/2016 5:23 pm
Level 69 : High Grandmaster Lad
KnobleKnives
Sorry for my late response. The palette actually looks fantastic! You did a great job with the whole leap-frog-ing hues thing.
1
03/22/2016 4:33 pm
Level 26 : Expert Unicorn
lulubelle7
Very instructive and complete! Colour expert! ;)
1
03/23/2016 5:23 pm
Level 69 : High Grandmaster Lad
KnobleKnives
Thanks! There'll be a larger, more informative tutorial coming out at the end of this week or the beginning of next week! :D
1
03/22/2016 3:53 pm
Level 42 : Master Architect
tobbestark
I am colorblind, so matching colors is really hard for me x)
1
03/21/2016 8:53 pm
Level 28 : Expert Toast
Estel
Thank you for the new edits, this has been my favorite tutorial since I started making skins
1
03/21/2016 9:03 pm
Level 69 : High Grandmaster Lad
KnobleKnives
That's awesome! Glad to hear it's been so helpful! :)
1
03/21/2016 7:02 pm
Level 48 : Master Artist
DaddyLogic
Ye
1
03/21/2016 9:03 pm
Level 69 : High Grandmaster Lad
KnobleKnives
Ey
1
03/21/2016 4:59 pm
Level 52 : Grandmaster Dragon
Abandon3dRain
My favorite blog on color has been updated yesss
1
03/21/2016 9:03 pm
Level 69 : High Grandmaster Lad
KnobleKnives
1
03/21/2016 9:03 am
Level 72 : Legendary Gent
Zitzabis
The Holy Grail of palette making blogs has been updated. Praise be to Knoble!
1
03/21/2016 10:38 am
Level 69 : High Grandmaster Lad
KnobleKnives
*Praise chanting intensifies*
1
03/21/2016 1:49 am
Level 43 : Master Theorist
Averli
omw somethin' new to learn jusT GRAND

time to read then *puts on reading glasses*

waitidon'tusereadingglasses

oh no wONDER I COULDN'T UNDERSTAND IT #IHAVEBEENENLIGHTENED

nice addition m8 =)
1
03/21/2016 7:21 am
Level 69 : High Grandmaster Lad
KnobleKnives
Enlightenness achieved! WOLOLOLOLOLO
Youre welcome, m8!
1
03/22/2016 2:09 am
Level 43 : Master Theorist
Averli
omw do you play age of empires that's what the monk dudes say WOLOLOLO
1
03/21/2016 12:05 am
Level 53 : Grandmaster Fox
Foxxeyy
Am I the only one that thinks palettes are restraining? They're good as guide-lines, just not good for shading, IMO.
1
03/21/2016 7:17 am
Level 69 : High Grandmaster Lad
KnobleKnives
It really comes down to personal comfort and preferences. I like using palettes because of my adoration of making color mixtures, and the palettes are usually very large to allow smooth shading.
However, as you said, they are good as guidelines too. Some of halucid's old skins had palettes, but he used a special tool or brush to blend it all together to create his unique shading.

Now that you mention it, I'll try and include a Freedom From the Palette section in my upcoming titan of a Tutorial!
1
03/21/2016 4:34 pm
Level 53 : Grandmaster Fox
Foxxeyy
Oh, also, there is a lot of doubt in hue-shifting, so here is my rendition. If you wanna share it or not, its fine:

Hue-shifting: Hue: Color— Shifting: Changing. Hue-shifting: color changing.
Hue-shifting is not related to color theories such as RBG or CMYK, or the primary colors.
With these clarifications, the explanation is easier to do.

The definition of hue-shifting is vague. All we can do is decompose the word and assimilate to terms we're more comfortable with, like all we can do is simply know its purpose, rather than see the pretty aftermath it leaves. The purpose of hue-shifting is— Ever seen a picture, per say? Seen how, for example, light hits hair and it changes color? That's the purpose of hue-shifting, to capture these effects. If hair were to be light brown, it would change under the sun to a blonde-ish color. The changing from light brown to blonde: That's hue-shifting, or as we said since the beggining, color changing.

However, why does it change colors? Not only because of the chemical composition, but because the light of the sun isn't pure white either. In a skin, naturally, you should hue-shift all colors to the direction where yellow is in the chromatic circle. Doesn't means to actually hit yellow, but to be near its direction, else the effects are not what we all want. But what if the predominating light isn't the sun? Say, you're at a party and take a photo and the photo has this cool blue effect? That is the light affecting all the colors surrounding you, changing them, and that action we call it is hue-shifting.

That would be the pure explanation, signifying the way someone uses colors is free. However, when designing a skin you have to know what you're doing, just simply trying to hue-shift and call it a "picnic with my friends" when the skin was hue-shifting to a completely different color not looking at all like a picnic day. Lets keep the thematic of picnic with my friends. Lets say you start with the skin color. https://gyazo.com/bcc7bcd6f7e80aa353367c6bc9776ef0 That would be the color, in this case marked with a P (for pigment), and you'd have your light, in this case marked with L (for light). However, this is still missing shadows.
How does one choose shadows? it all has to do with the chromatic circle. In this case our light is yellow, a warm light. So our shadows naturally would be cool, or blue shadows. However, doing such hue-shift, because of the range, that it would be complicated to do in such small canvas and options, in this case a skin, so what we do is abstract the idea and choose a color that is close to our pigment and will still look appealing while serving the purpose of the effect.

Now, here's the "PSL"(pumpkin spice latte) of color: https://gyazo.com/fcf55d105445ac767a3e52b1b7f99312
As you can see, that shows the shadow color, marked with S (for shadow), which would be closest to the natural color, since we're focusing on a more appealing execution than natural with this tutorial—or so I believe Knobles is. It also shows the other marks, L and P, making the pumpkin spice latte of color. lol. Just kidding, but I'm sure it'll be an easy way to remember.
However, how did I choose those colors? Did I only change the hue? I will explain. The reason why I'm calling the color pigment is because, as Knobles introduced this guide, light is colors. All objects are made out of light, or in this case that would look like a bleak white. However, objects have pigmentation and color properties, defining a certain effect. Your pigment may have whichever value, saturation and hue, as long as it's the hue you're looking for. However, since all color is affected by light, and light is pigmented, that the superposition of pigments makes each other blend and create the effect that we're trying to mimic with hue-shifting. And same thing with shadows, however shadows are the aftermath of light. However, now known what pigmentation is and how hue-shifting is carried because of the mix of pigments, that here is how to make a palette put of the three guidelines we have (the PSL): Light is not very pigmented, and obviously is not dark, so the saturation of it, the pigmentation, will always be closer to white. as for the value, since light is not dark, the value will be around the 100%, 0% being pitch-black. However the saturation and value are always congruent to the pigmentation you're looking for. In this case the color we want is a skin tone. In here I wanted a lighter skin tone and this is how the color looks in the color-picker: https://gyazo.com/7f0d0f2481e31099c215023331d44c98
As you can see the color has 33 of saturation and 94 of value. Then our light color would have to ascend in value and decrease in saturation, which now the color-picker for the light color will be shown: https://gyazo.com/4ca1f408dd928efab4c5311ddb4af520
As you can see, just like I said, the L color would ascend in value and decrease in saturation. And now, for choosing your dark color, you shadow color, we have to start from our pigment. Our pigment is 33 of saturation and 94 of value. Our shadow should have more saturation since it's more pigmented, and should have a darker value, since its a shadow. And, this is the color-picker to the shadow color I used: https://gyazo.com/235daaa6fe37e2517ef04082fd55f8ba
So now that we've done that, we can extent our palette. Some people don't, they leave it like that. though. the simple way to do is is by using the dropper tool and checking the chromatic circle. Color pick the S color and the P color quickly and choose the color in between them and modify the saturation and value to blend seamlessly. And do the same with the L color and P color, finding the middle and editing it. And this is the end result: https://gyazo.com/0e5bccb3d24b5d2c8dd632ef49d58e34 Yes, this was done with the Arc method Knobles describes, however it is the most rational method of doing it. Once you understand this method, you can do the method Knobles describes as natural, which is the same, just starting from the dark color to the light color.
1
03/21/2016 4:57 pm
Level 69 : High Grandmaster Lad
KnobleKnives
Yowza, that's incredible! I just added it to the tutorial!
That's one heck of a cool method. If you don't mind, I'd love to demonstrate that along with my arc method in the upcoming tutorial. I plan to cover numerous methods of picking hues.
1
03/21/2016 5:16 pm
Level 53 : Grandmaster Fox
Foxxeyy
Totally, go ahead! Thanks for adding, btw c:
1
03/21/2016 5:17 pm
Level 69 : High Grandmaster Lad
KnobleKnives
No problem! Currently I'm writing out a large Index as a sort of rough guideline for how the whole thing will be written out. There'll be a large section devoted to different styles of color picking.
1
03/21/2016 3:38 pm
Level 53 : Grandmaster Fox
Foxxeyy
I agree with all you said. Also have an affinity for colors—I think its obvious, haha, if you look at my profile. But, I'm resourceful since if I did all this eye-candy then each skin would take ages. So I've learn to be efficient and get things done in a day or two—Literally my most complex skins like Muerte or Lana Del Rey where done in less than 10 hours.
1
03/20/2016 10:25 pm
Level 54 : Grandmaster Meme
Allergy_Man
I love what you added.
Palettes are great.
1
03/20/2016 10:44 pm
Level 69 : High Grandmaster Lad
KnobleKnives
Aren't they, tho?
1
03/20/2016 9:12 pm
Level 46 : Master Answer
Chaotikal
How do I skin like Halucid, tho
1
03/20/2016 9:15 pm
Level 69 : High Grandmaster Lad
KnobleKnives
Gimp's smudge tool and a diverse palette, brotein shake.
1
03/20/2016 7:51 pm
Level 60 : High Grandmaster Meme
FennecFox
A tutorial that covers.. EVERYTHING?? Wow, I will definitely stay tuned. I could use the help
1
03/20/2016 7:56 pm
Level 69 : High Grandmaster Lad
KnobleKnives
I have a lot of spare time this week xD. COLLEGE BREAK WOOO- ahem, anyway, yeah. It's gonna be gargantuan.
1
03/20/2016 8:04 pm
Level 60 : High Grandmaster Meme
FennecFox
I feel overwhelmed already!
1
03/20/2016 7:44 pm
Level 8 : Apprentice Artist
WarmOrangeJuice
tfw u finally managed to get hue shifting down and now u have to get color theory down
*sweats*
1
03/20/2016 7:52 pm
Level 69 : High Grandmaster Lad
KnobleKnives
*sweating intensifies*
1
03/20/2016 7:35 pm
Level 50 : Grandmaster Answer
BIO
I need to learn this new saturation technique
1
03/20/2016 7:53 pm
Level 69 : High Grandmaster Lad
KnobleKnives
Good luck xD. I still have trouble explaining it coherently enough xD.
1
03/20/2016 8:24 pm
Level 50 : Grandmaster Answer
BIO
Fluctuation was a good descriptor. Makes it seem as though saturation has to follow the palette, not the other way around.
1
03/20/2016 7:13 pm
Level 66 : High Grandmaster Senpai
Ludicrous
i c
Planet Minecraft Logo

Website

© 2010 - 2020
www.planetminecraft.com

Welcome