Pixel Art Class - Palettes & Colour
ฝัง
- เผยแพร่เมื่อ 6 มิ.ย. 2024
- Alright, you asked for it so here it is :)
I recorded this full breakdown specifically for youtube, and I'm really pleased with how I was able to explain everything I wanted to say. It's a long video, but I think everything in it is valuable so I hope you don't mind the length (the un-edited version was at least an hour and a half).
Here's a link to that excellent thread I referenced from the Pixel Joint forums: pixeljoint.com/forum/forum_pos...
0:00 Introduction
4:29 Reviewing a palette against the spectrum
7:50 Styles, moods and filters
10:08 Getting past basic intuition
14:55 Creating a palette from scratch
16:53 Creating a ramp
24:38 Bridging ramps
35:24 Navigating tricky spaces
----
This video features clips from my stream. Catch it live: Mon, Tues, Thurs and Fri 1-6pm AEST.
Twitch: / adamcyounis
Twitter: / adamcyounis
Discord: / discord
Become a Patron at / adamcyounis
Check out my game Insignia at uppon-hill.itch.io/insignia
Later, pals!
![Pixel Art Class - Speed Painting Backgrounds [with Commentary]](http://i.ytimg.com/vi/YoB6omdIrYw/mqdefault.jpg)
![Pixel Art Class - Speed Painting Backgrounds [with Commentary]](/img/tr.png)
Why can't the day have 72 hours? I want to make games, learn how to compose, learn how draw pixel art, and I need to spend 60% of my awaken time at work T_T
Incredible video, by the way
Great video, I've summarized it in a few steps and figured out palette for my game this way:
1. Pick a color you like (green for context, can use pictures for reference)
2. Desaturate until it fits the mood of the game
3. Create a ramp (paint on a canvas) where lighter shades shift towards yellow, darker ones towards blue. Leave the saturation for now, only adjust hue and brightness levels
4. Reiterate until it looks good. Remove/merge shades until you have as small as possible palette
5. Sature upper/middle shades of the ramp (if needed), desaturate hihglights and shadows for more blend between other hues
6. Pick the next color accoring to context (ex. fit green grass to blue sky), repeat previous steps for it
7. After you pick most of your hues, adjust whole palette's H, S, B, curves if needed, but don't go overboard here
Good luck!
This is a very intelligent summary!
Perfect Summary!!
for posterity: the program used here is aseprite
This is literally one of the most valuable resources on color theory I have ever seen. This is really valuable even if you aren't interested in pixel art specifically.
THIS THIS THIS THIS THIS
I completely agree
color theory is omnipresent
I agree. I already have seen a lot of many different ways of explaining the colour thoery but this one is definitely one of the best ways of explaining it.
EPIC VID man. As a colourblind pixel artist, I finally kind of am starting to understand things. You explained it so well with fiddling with the relationships with the colours and the curve. I learned a bunch, thanks.
Absolutely great content! I'm learning how to do pixel art myself and I've learnt a ton from your video!!
Hey Ric! nice to see you here. Adam is like my go to guy for pixel art stuff. Its like a master class haha.
Couldnt agree more
@@lucienmontandon8003 x2
wow!Ric!...👍💯
Damn bro, Ric said this 1 year ago and now he posts videos on how to make money with pixel art. Respect the hustle!!!
Wow! I was there during the livestream and it sure didn't feel like 40 minutes at all (or more, thanks video editing). It was such a nice topic, even if most of those things weren't new for me. You're doing an amazing job with all your videos :) Thanks
You posted at he best time! I've been looking into palettes all day today! Thanks for another great upload!!
This is beyond helpful! I have never had the confidence to draw or do pixel art and I feel like I am learning so much from your channel!
You're the best pixel art teacher that I've found! Your tutorials are amazing and made me improve so much in little time!
Wow, watching the example of creating the palette/ramp from scratch really helped me understand the hue shifts and such. Understanding the shifts to yellow and blue/purple from other videos. Seeing that angled shift in the color picker was SO helpful as well.
this is actually a very useful video! i’ve been struggling with colours when it comes to making pixel art for my game. i’ve realised that my drawings are usually very muddy because the colours don’t fit together. this was a really good explaination of how colours in pixel art work. thanks for this!
This is the best video I've seen so far on colour theory with pixel art. I haven't come across this where you show colours have relationships in the palette beyond the obvious.
I LOVE YOUR STUFF! It’s SUPER informative and engaging, and also entertaining! I’ve learned so much!
Hi there, I found your videos when searching for pixel art tutorials and/or guides, and let me say they are straightforward and overall easy to understand. Thanks for putting these up.
This one video taught me more about color palettes than I have learned in 30 years. I'm absolutely floored.
I just started making pixel rt recently and your videos are so extremely helpful. I have never done any kind of visual art before so all of the stuff you are teaching us here is so new to me. I watched your lighting and shading video yesterday and it totally changed (IMPROVED) something I was working on!
This video, like all your videos, will continually grow in views forever. Great content man, I can tell you have a general framework for your explanations but work through the topics in real time which sometimes allows you to have epiphanies while teaching. By far the best teaching method I've both used and learned from. I just got into pixel art the other day and I'm literally flying through the learning process because of your videos. Hopefully I make a lot of money because I will most certainly come back to pay my respects.
This is the first time anybody explained color to me in a simple and understandable way. Thank you!!
I just got interested in pixel art. Never done it before (my friends were really into it though), but I have to say - watching your videos makes me so excited.
Your guidance and explanations are so well spoken and easy to follow and understand.
I efing love your channel. Subbed immediately. Your fantastic.
Keep it up!
Fucking phenomenal!
I imagine the "brighter going towards yellow" is one of those things that just feels right, and probably has roots in brightness being associated with yellow light. If you're going for a colder palette it might be interesting to see the result of instead going towards blue. Either way this has taught me an incredible amount of stuff about pixel art that I was just never able to get right, and now I know why.
I found one of your videos on tilemaps the other day and you're quickly becoming one of my absolute favorite game dev content creators! Looking forward to watching the rest of your stuff. :D
This is really great content, never thought of the palettes this way.
This is a really good lesson, not just for pixel art, but for visual art in general.
I LOVE your channel, great content, you deserve more man!
You should shared his channel on yours, that'll help him I guess :D
You're a really good teacher! You give the "how" someone who start need.
As always Adam, veryy good content, keep up the good work!
aseprite is amazing. you blew my mind when you changed the color pallete and your canvas colors changed accordingly and when you used the hue slider on the pallete.
Hi, this vid was like 2 years ago so I dont know how the Aseprite tools and options were then. I recently discover an easier way to make a linear gradient in the palette.
1- leave empty as many color cells as you need, lets say 8 for example
2- sellect the first cell nº1 and choose a color for it, like dark blue
3- sellect the last cell nº8 and choose another color, like light green
4- sellect all the cells from nº1 to nº8 wich also includes the black empty ones between the two colors
5- go to "Sort and Gradients" in the palette menu, then sellect the "Gradient" option
You will see how the gradient generates automatically.
Its a linnear gradient so, if you need those colour bridges between gradients it has to be edited. But I found it very usefull way.
I'm gonna watch your stream, cause apart from this awesome, helpful content, I just love watching your videos
Amazing video! Really thorough explanation. You’re the best!
Holy shit...Color Theory actually makes sense to me now! Thanks so much for this man You're a legend sir
You don't know how thankful i am for this thank you for making this video you are amazing
Oh hey Saaqib!
@@Ric_93 Hey Ric
Great explanation. Thanks Adam
11:18 is exact my first Paint as i tried to make a Landscape xD ur videos are by far the best explanations i could find out in the void of youtube^^....great stuff....explanation are so detailed...it helped a lot thanks!
thank you for this aseprite tuto Adam it help me so much, cuz I was searching the index mode for my color palette 5:50 to apply the no dithering option you help me so much, good job!!
Cool vid.
Its also helpful to make use of the Gradient option inside the palette sorting menu.
Great content! Just getting into pixel art and this was an excellent explanation of how to create a palette!
loving your videos, specially this one. thanks
The idea of moving toward blue and desaturation as the color darkens makes sense with what I’ve been told about how colors in the physical world shift toward greys and blues when there’s less light (like at night)
I think the single coolest pallette I've ever seen, was one where the artist did everything in black in white, the darkest bits were straight black and the brightest bits were purely white, but all the grey areas were coloured with. . . well, colours. It was a single ramp that went white to bright yellow to medium orange to medium red to dark purple to black, and the artist used this to create a monochrome effect.
thanks for sharing helped me out a ton to come up with some colors that will reflect my artistic perspective
Thank you for posting these!
uuuuhhhnnnggg fantastic thanks for the knowledge, exactly what I was hoping to find
This was super useful! I was thinking with all the curves, do you think there's some sort of "maths curve equation" which you could use to plot which colours you might want to use? Or is it more touchy-feely than that?
I think everything can be described as an equation, but the question of "what you want to describe" will always come down to design / aesthetics. The key takeaway is that if you follow some functional distribution or equation, your eyes can recognise visual flow created by the algorithm.
Yeah there are some fairly basic conventions that are good to know about.
Then there are the more complex techniques.
Beyond that it gets insanely complex with maybe limitless possibilities and combinations of effects that can play off each other.
This is because the human mind is immeasurably complex and we enter realms of perception psychology.
It probably helps to understand a bit about these concepts for example which are all at play at the same time:
1) Gamut mapping
2) Mood lighting
3) Local and global colour
If ur interested to gain a better foundation you’ll get a lot of good info from “colour grading” for film which is basically LUT.
This covers i guess the “surface” level stuff; what effects can be applied to a whole image.
The other side of it is how materials react to light.
For this it really helps to understand the concepts (not the math lol) of Fresnel equations, something I’d encourage you to read up on, observe as u walk around outside (atmosphere, water, leaves on trees, gem cuts etc etc) and also revisit this every once in a while for fresh insights.
Once you grasp this foundation, it makes a lot of sense how PBR materials work.
Playing around with PBR is a great way to get some practical in depth knowledge u can apply to painting with pixels 😊
Mathematics, the practice, is an artform of its own. It does not have the harsh rigidity that everyone assumes after having exposure to the basics of arithmetic and algebra. I'm about to graduate with a bachelors in mathematics. The deeper I've delved into mathematics, the more I've come to appreciate the artists' perspective.
@@jaredjones6570Yeah you get to be a lot more exploratory and creative than people think. What tools should I use to get from point A to B? Is there a relationship between matrices and groups? Can I find any interesting edge cases? Etc.
Awesome video. Thank you very much!
I didn't know that I was using your Apollo palette for my project the whole time 😅 now that I know how it was created I'll try changing them or even creating my own palette for my game 🙏
The reason why shifting into warm/cold hues works in the mind is called Rayleigh scattering. Naturally, the sky appears blue due to this effect where all wavelengths longer than blue get culled while traversing through the Earth's nitrogen-filled atmosphere. Why is this important? Well, because there is an interesting effect the daytime sky produces, known as atmospheric light. If you're observing something that is directly lit by the Sun, it's washed by white light (yes, Sun light is bright white for all practical and physical purposes), but any shadow will be indirectly illuminated by atmospheric scattering, changing its hue to blue. This will give rise to a perception that the lit areas are slightly yellow (this is how contrast appears naturally, through complementary colors, and never through brightness alone). Obviously if you don't want a sunlit summer mood in your art, you need to tone down the effect the scattering has and introduce less vibrant colors. But this is why bright colors like to appear warmer, and shadowy ones play well with the cold tones.
Also psychologically, darker places are normally lit by weak sources of light, at least compared to Sun, and humans can't exactly tell two dark hues apart, because of the massive lack of photons needed (literally information) in our sensory cells. Therefore, dark colors should be desaturated. In general, too dark and too bright colors are essentially the extremes, and are used only to frame the dominant part of the visible spectrum, which is a dynamic thing and human eyes can adapt to a continuum of brightness (though moving from too-dark to too-bright areas can even hurt or damage the eyes), so the relative saturation works wonders with the mid-range colors, and this is where the optical variety should lie.
Hopefully this explains the 'palette tricks' from the physical standpoint.
tks Adam, learning a lot from you
Imo the most important thing is value, if the values are right you can get away with anything hue/saturation. The most important thing tho is that the choices are intentional
This was so helpful. Thank you!
amazing video playlist - just a quick thought about monitor calibration before starting anything like this, do you need to do anything?
this is really helpful, thank you so much!
As someone who's tried to learn color theory for the purpose of making art in games, this finally makes sense to me.
Such a great video. Thanks!
oh my! i saw that post ages ago, thanks for remind me its existance.
Thanks a lot, this video helped me to make a decent palette on my own.
I really love your videos. I recently started to learn pixel art and your content is gold, you explain everything so well and they are surely entertaining! And I learned even things that does not apply to just pixel art, which is amazing, I stury art major and it is very helpful. Can I ask you what program do you use for pixel art?
this program is called aseprite. since somehow, after 2 years, nobody put the name of it in any of the comments. here's to you future watchers!
Great youtuber and streamer
Amazing Video
This is great, i didnt know the index technique ty
In university design glass we did this thing where we had white and black gouche and had to paint 11 distinct evenly distributed values. 11 is flippin hard to differentiate, so I think that kind of sets the upper limit for the practical number of values that might be valuable.
Thanks, this is a very helpful tutorial.
the curve he described at about 22:50 is basically y=a^-x and that gives so much insight as a mathematical person.
Im pretty sure you can also use the scroll wheel to adjust saturation when your mouse is on the color spectrum... I use it to adjust hue easily in my art because i use the color spectrum with the hue slider on the bottom
Thanks for the video! It would be helpful to know how it is possible to see the change of color in the picture while editing the color on the spectrum?
Hey, great videos dude. Keep it up! I'm pretty new to Aseprite and i was wondering, how can i make the colors appear like that on your video ( the bottom left part of the app)? Sorry if it was already shown, i didn't see it :D
I know it's' late but I had to go hunting too so will respond for others to see. It's in the "Color Spectrum" option of the palette window. He does it at 4:52.
pretty chill video
Wow this was so good.
Gran video estoy aprendiendo mucho muchas gracias !
Exelent video I'm a indie Game dev and I also have to do the pixel art for my game. Something with I struggle the most is for making the palette. And I have trouble making the enemies pop up for the tileset background. What you suggest? Using a different saturation? Using another palette? What I'm doing now is using a shadow shader to cast shadows on live objects but I don't know if a just have to remake my color palette. Thanks for the video!!!
Maybe to make them pop out use a different saturation, so low saturation for backgrounds and high saturation for player and enemies, of course you’ll run into the problem of if your game is not supposed to look like nintendo color fun it might not fit so you’re probably going to need to get the saturation of both down while keeping a significant gap between the two. That along with a black outline around your characters and no black for the background should make them pop.
You have inspired me to make a game XD
Man amazing, thank you.
Thanks man great work
Keep Going :)
How do you set up your aseprite color picker to be the full spectrum?
your color pallete looks so pleasing, i was sure there was some kind of math behind it.
you should discuss OKLCH color picker sometime because even with all the knowledge of color (that i could reasonably have) i could not pick great colors before i used OKLCH color picker.
the color pallets that i picked in HSL were always uneven, and it is wayy too tedious for me to correct them (so i used other people's pallets 𝘰𝘯𝘭𝘺 before i found OKLCH color picker).
but in OKLCH i can just pick a new color and be sure that the same mathematical transformation - for example removing 16.67 lightness and 0.0083 s̶a̶t̶u̶r̶a̶t̶i̶o̶n̶ chroma - always results in the same difference.
I'd love to see a video on using the color pallete for environment and character. I.e. how to make the character stand out if ur using the same color palette for chatacter and environment. Can we make the chatavters more saturated? Lighter in value?
30:00 yep desaturated colors are able to bridge the gap between hues well
YOU ARE GREAT
Bro super helpful!
Hey... You created Arrowbound!!!
Congratulations! It's a great game!!!
That's right! Thank you
Something interesting is the peak of dark colors formed on the blue area. I don't know if that's related to the use of blue for shading purposes. In the red area we can see another peak of dark colors, so I supose red can be as well used for shading. The opposite is with yellow and cyan, maybe used for lightening.
Or could be that I'm completely wrong, hahaha
Where is that saturation bar on aseprite? All i have is the grid looking one.
This guy is a best!
That was really helpful. How would you create a palette with a very small amount of colours(like 4-8)? I'm a beginner and I want to really limit myself with the colours.
With a very simple palette, you have a couple of options. You can use a single ramp with hue-shifted values across brightness (think a heat-map of dark blue to bright red, something to that effect) or you can try to pick from a selection of colours that have varying brightness, saturation and hue, such as the DB-8 palette. These are, in my opinion, probably harder because they require such decisiveness (like the one in the video with the knight riding a lion). As always, you can treat it like an experiment and just pick some colours, even at random, and adjust them toward something that works as you're applying them to your canvas.
@@AdamCYounis Thank you :)
Nice palettes tutorial
Is bridge controlled by the saturation? In other words, is having the same saturation what makes the bridge colors similar?
I don't understand two things. 4:53 How you created that spectrum, I tried a lot of times, no luck. 5:42 How you pasted that view without changing the palette on the right. I can't do these things and how much I struggle, it only stucks on unrelated stages. Pls Help.
Really great video! I'm happy that i stumbled upon your channel, this will definitly help me to improve my pixel art :) One question about Aseprite: At around 19:45 you unlock your color palette, shift the selected color in the spectrum view and the corresponding color in the actual image automatically gets updated. When i try to do that, the color in my palette changes but the color in the image stays the same. Would be great to know how you do that.
Ok i just found it out: When creating a new image you have to set the Color Mode to Indexed so that each pixel is a reference to the palette
In my case, I use the EGA/Master System palette for the graphics I'll be using for my project in Unity.
Hi. 20:25 how you change the color at the same time?
Set color mode on new file to indexed
On my aseprite I dont' have the full colors I'm able to modify the hue, but on yours you have all the colors and then you modify the saturation? What option is it to get it to work the way it does on stream?
yup, our eyes see differences in colors (darkes shades) logarithmicaly. its possible to see at some mathematicaly wrote experiments including vision (changes and rection)
Hi, I have a hard time making a palette since I'm colorblind. When I draw on paper I only use black and gray. Would having wrong colors make for an interesting style or would it just look weird?
I have a friend who is colour blind who actually makes very interesting colours. I think it's hard to say, because other people won't see what you see, but I think something minimal would work well. mostly black and white, with a splash of a single colour would be simple enough and effective if used well.
Our eyes perception of brighness vs real brightness is indeed not a linear curve. You are more confronted to that topic in photography, video, and of course 3d. In a way this was exploited by sRGB to encode in analogous or 8 bit digital signals a broader perceptual range. Look up srgb, hdr, lux, light stops, for more litterature. Disclaimer that I am familiar to the subject, but no expert by any extent, just an attempt I confirming your intuition at the beginning of the video when you played around with that green gradient :)
Hi Adam. You shared your palette you use in Asprite in one of your posts or videos long time ago. Possible to share it again please? You have a good balance which I like.
Really great video... I learned a lot about creating a palette... you made things easy for me to start making pixel art ... I have a problem in aseprite when editing a color it doesn't change on the canvas in real time ...is there an option for this?
So, I guess this is to late for you, but I just got this problem, and was searching for an answer.
What you have to do is go to: sprite menu -> color mode -> indexed.
This basically means your canvas can only use the closest color in your palette, so when you modify it, it modifies the canvas.
@@Tyrull thanks for your reply. I searched for an answer after I commented this and found it on reddit.
Thanks!
When using a color palette should you make shading differences on your own using HSV with each color or use the colors provided as different shades, given its like a SNES palette with lots of colors not like a 4 color palette
hi, how do u flip the ramp from dark-light to light-dark and vise versa?
How many colors do you usually put in a palette? it looks like about 50. Is there a specific reason its about that?
The palette I use is one I came up with as a general purpose palette for games, so I use it for all kinds of things across multiple projects. But if we wanted to design a palette for a single image, we could go for as few colours as you like.