: Highlights and Shadows with Equal Weight I'm creating isometric buildings in Inkscape. Each building has a base color. To account for lighting, the top of each building has a highlight, the left
I'm creating isometric buildings in Inkscape. Each building has a base color. To account for lighting, the top of each building has a highlight, the left side has the base color, and the right side has a shadow.
My problem is that whenever I try to pick darker and lighter versions of the base color, one of them always has more contrast with the base color and thus more visual weight. Here's what I mean:
On the left, I create lighting with 20% opacity overlays of black and white. On the right, I simply adjusted the lightness slider on HSL by 20 points (out of 255) in each direction.
The shadow on the yellow example on the left has much more contrast than the highlight. Below it, the highlight on the bluish example has much more contrast. The right side is much better, but I'm wondering what the best way to do things is.
In other words, how can I best make shadows and highlights have equal contrast/ visual weight?
More posts by @Goswami567
2 Comments
Sorted by latest first Latest Oldest Best
Colour models are fine and all. They can do lots of good work and can make colour selection processes a lot easier.
They are not, however, infallible. They are a means, not the end.
My advice would be to start out with a 'mathematically' created set of shades for each colour. If they end up being unsatisfactory, eyeball it and adjust manually.
Don't forget that graphic design is part science, part art.
In paitning there is an old trick to make gradients.
In general you do not use white to make a light red, because you have pink, that looks like contaminated with white. Instead you use a bit of yellow first and then send it to white:
otake.com.mx/Foros/Gradient-Correction-03.png
This happens to all colors in the color wheel, turn them a bit into the lighter section and then into white:
otake.com.mx/Foros/Gradient-Correction-01.png
The same when you darken a bit yellow or light colors:
otake.com.mx/Foros/Gradient-Correction-02.png
This is one reason your second column looks better. The first one is just contaminated with gray. Dark gray and light gray.
I am not sure what is the "best" way. It does not matter at all, because it is a perceptual relative problem. So do not worry too much.
Probably just limit a bit your palette so you do not have too many choices, but a general palette to choose from.
The old answer with aditional info
Our vision is logaritmic. This is that the progression of light percived is not linear.
Take a look at this bar:
It has a linear gradient, and I put a small bar in the left and right extremes.
We can barely see the red bar on the left side, but the white is clear.
The aproach then should be visual, not by coding aritmetic values.
One option
Is that you make a linear gradient and after you modify it with a gamma function. Try round numbers, like Gamma 1.5, 1.8 or 2.0
Gamma 1.5
Gamma 1.8
A conclusion
The first step is to have your monitor calibrated.
After this you probably will find that you can use, for example a 15% on one side and 20% on the other side. No one will qualify your work measuring the exact values of the proportions of the color.
But this will change according to each color.
You can not expect to have the same range of "light yellows" than "light purples" so do not go for a mathematic aproach but a perceptual one.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.