Transcripts
1. Intro: If we look at these colors
on the screen right now, you might be forgiven
for thinking that you are looking
at gradients. However, if I
separate the metal, you'll realize actually
they are flat colors. There is no gradients here. Will shortly be talking
about lots of color theory, but it's all very
subjective because colours depend on the context. A colored looks different depending on what
color is next to it. Years if Albert
was an instructor at the Bauhaus School
of Art and Design, and he argued that there is no point in learning
color theory. It's completely unnecessary
because a color is dependent upon the context
that the color is seen in. One color can look completely different
because of where it is. Those colors we just looked at looked like gradients because the color looked different depending on what
it was next to. In a later module, we'll talk about how color
works and how your eye works, and why that happens. Years if believed, we don't
need to talk about that. We don't need to talk
about color theory. But personally, I believe that in modern-day design studios, you need to understand
why you made choices. You need to be able to
justify your color choices. Nobody's going to
trust that you're just better at looking at
colors than them. Even though if you complete
the exercises in this module, you are going to be better at looking at colors than them. And all of the exercises
in this module are taken directly from years of Alberts book
interactions of color.
2. One Colour: Your first exercise
that has been taken from interactions of color is to make one color appear like two
different colors. And we can do this by changing the context of where
that color is. The inner squares here are the
exact same color and I can adjust the two
outer boxes colors to try and make them
look different. You could do this making subtle adjustments in
a graphics program. But Joseph Albo students did originally do it
with colored paper. They had cut out of a newspaper. If you want to be
really old school, like could be kind of fun. I've created these green squares using a graphics program
by simply drawing two smaller boxes
into bigger boxes and positioning the smaller
boxes inside the big ones, the two smaller boxes have to be the same color and the two outs of boxes can be whatever
color you want. And your challenge is
to make it look like the two smaller boxes
are different colors. In this example, I believe
that the box on the left looks a little bit darker
than the one on the right. When if I put them together, you can see that they are the exact same green
in the middle. Let me show you a couple more of my examples before you
go and create your own. Here we have a bluish color. I've put a very dark
blue behind it on one side and a much
lighter teal on the other. I believe the dark blue makes the inner square
appear a bit lighter, whereas the light-blue makes that blue look a little darker. And of course again, they are the same color. In this example we have
quite a bright pink on one side and a very desaturated, darker, reddish pink
on the other side. If you don't understand
the word desaturated, we will look at that later, but essentially the color is less obvious on the
right-hand side. Again, these both affect
the inner color in different ways despite the
fact it is the same color. And finally, this grayish color actually has a little
bit of yellow in it, but you don't notice on the left one because the
background is yellow, whereas on the right one you can see that yellow in the gray. And when I put them together, you will again notice
they are the same color. Your first challenge
is to try and make one color look like
two different colors. You could use the
same layout as me, where you simply just
put one square inside another square and try it with different
colored backgrounds. Or you could put it in
whatever context you wanted. The challenge is to intuitively learn what attributes
in the color. I'm going to affect
the color inside it and next to it
in different ways. So it makes sure that you try that color out in all kinds of different contexts to
see what you can do to adjust your perception
of that central color. The more different you can make that color look the better. So have some fun with it.
3. Two Colours: The second exercise we are
going to play with to improve our intuitive understanding
and perception of color is the opposite of what we did in
the last experiment. This time we're going
to try and make two different colors
appear the same. Now, I've done this using the exact same layout we used
for the last experiment. Only this time the two central
colors are very different. These two smaller
squares appear kind of the same color whilst in the context of
these larger squares. But if I move those out of the way and join them up again, you can see that
actually this time these are drastically
different colors. And by looking at them
with a white background, suddenly it seems weird that
they ever looked the same. Here is just a
second example where the two inner boxes look
kind of the same color. But once we move
everything out of the way, we can see that the one on the left is actually a bit more orange and the one on the
right is a bit more blue. But we didn't notice
those qualities in those colors
because the context, the surrounding colors
were orange and blue. Try and create two
different colors in two different contexts that look like the same color when
you look at them overall, you can play with
other things as well as the surroundings here. You could, for example, make them different shapes
or different sizes. Maybe a color looks a bit less dark just
because it's larger. See if you can try some
things you didn't try with the last experiment and try and make two different
colors appear the same.
4. Transpose Colour: Very, very complicated
skill for musicians is to transpose music from
one key to another. Will you are now a
musician of color. As such, to help
tune your eye to identify the subtle
differences in color, we can try transposing
some colors. Here we have four
subtly different shades of red for this next exercise, it might help to
think of this as one single folded piece of paper with different
qualities and levels of light hitting the
four different areas. Now, imagine there's
a inner square on this piece of paper. Maybe it's this blue teal color. Our challenge is to
try and transpose the qualities of the red colors
onto this new blue color. The exact shade of blue color and the top-left
doesn't really matter. We're just going to try
and copy the changes in quality as we go from the
left to the right square. And then what are the
changes in quality between the top-left red square and
the bottom-left Red Square. Try and adjust that bottom left blue square to have those
same quality changes. Essentially if it was a folded piece of paper
and this bottom left squared just had a
different amount or different qualities of
light shining on it. How would that blue color look? Try and make each of these changes in your
graphics program without even doing
any color sampling or anything like that. You're just going to adjust
the color and see if you can create something
with the same values as the outer colors. And just for reference, I've
created a second example. So there's four
rectangles of purple. I've chosen them almost
completely at random, slightly different
qualities of purple. And then I'm going to put
these four rectangles of yellow and try and
transpose those colors. We're looking at
the quality changes between each square of purple and trying to copy the quality changes on
the yellow squares. Exactly the same as
if we were trying to move a piece of music from
the key of C to the key of a. For this exercise, just
like you saw me do, you're going to create four rectangles of different
shades of a single color. Just choose green maybe, and make four
different shades of green and put them
next to each other. And then add four smaller boxes and choose one color
for the top-left, make it a shade of red perhaps, and try and transpose the color quality changes
of the other four boxes. And this will help train
your eye to identify those quality changes in the color and also
to adjust them.
5. Transparency: For this next exercise, we will be imagining
that these boxes on the screen are semi-transparent. You will need to create a box
with one color and then two smaller boxes of another color and position them
similar to this. Now imagine the
one on the left is in front of the purple
one in the middle, and at the box on the
right is behind it. And the, all three
of these are a little bit transparent without adjusting any opacity in your graphics program
or anything like that. Try and create two new
colors to simulate a, an element of transparency
between these boxes. On the left, I will create a new color that is a bit
more blue than purple. And on the right, I will
create a new color, which is a bit more
purple than blue. As your intuition for
color perception improves, you're gonna be able to
create colors that work here that don't look completely
natural for now, just try and create what the natural color will be
between these two colors. And again, as a second example, here's one with a yellow
box in the middle and two green boxes either side. The green box on the left, we're going to imagine
it's in front of the yellow box and the
green box on the right. We will imagine it is
behind the yellow box. And then I'll create two new colors to
fill in the gaps and make this look like a natural transparencies
in these boxes. It's kind of interesting
to then look at these two new colors
out of context. And as a final example, I'm gonna do one with
orange and green. Let's just again create
two new rectangles showing the transparencies
and then look at how these new colors
look afterwards. Your challenge for this
video is to create a big colored box and to create two smaller
colored boxes. And imagine that they
have an element of transparency and
overlay each other. I want you to create
the new color that will be made in-between
these colored boxes.
6. Transparency Range: This exercise will build on the exercise in the last video, but this time we're
going to have three levels of transparency. Imagine that these three boxes are in front of this beige box, but they have different
levels of transparency. And there is an
incremental difference. However much that difference in opacity between these
colors is it should feel linear across the three
of them to try and re-create the illusion that I've created on the
screen right here. So we will again start
with two colors. I've chosen red and beige here. And you'll notice I've chosen
a navy background because the beige didn't go too
well on a white background. But then we're gonna create these three new colors
as they overlap. And it should feel like an incremental progression
between the three of them. Maybe each one feels a bit less transparent
than the last one. Just as a second example, I've overlaid some blue
boxes over a red box. This time, again, I will
try and increment how the transparency feels by adding completely new
colors over the top. Try and do this
without playing with the opacity in your
graphics program or anything like that, try and just literally create
the new color from scratch. Again, it can be really
interesting to see how these three colors
then look out of the context of the other
colors around them and see how there is a clear incremental
step from red to blue. Very similar to
the last exercise. But this time I
want you to overlay three boxes and create three different blends are
three different levels of transparency
between these colors. Try and get these three
new colors to feel like a linear increments
or to put it another way. The middle one feels about halfway between the
first and the last one.
7. Colour Composition: As a final challenge, I want us to play
with what ratio of colors looks naturally
good together, we're going to create
a design very similar to this famous Paul
Smith InDesign, which is so successful, He's put it on cars
and skateboards and scarfs and perfume
and all sorts of stuff. I want you to sample
a color palette of five colors from
online somewhere. You could copy the colors from this exact image if
you really want it. Or you could use a website like a dope color to just choose
a selection of colors. Then bring them
into your graphics program and try and create a well-balanced composition
where there is no white, everything is covered
by these five colors. So as always, I have two
examples that I have created. And here is my first Paul
Smith design that I've done. So you'll notice that the
lime green was really, really overpowering
in my color palette. I've made it have very, very small area in the
final composition. All I'm worried about here
is does it look good or not? The brown color, I didn't really feel overwhelming at all. So most of the composition is
using the dark brown color. Here is another example of a composition of five
colors I've created where I'm just concerned about trying to make it look
good on the page, make it feel balanced. The yellow and the
orange were both very overpowering in this
color palette wire, whereas the dark green and
the light green less so. And then this gray brown charcoal color much
less so again, I've just balanced
the ratios of colors depending on how
powerful they appeared. As a slightly more
advanced exercise, it could be interesting to do this with a colored background. This is a Damien Hirst painting where he has lots of circles
of different colors. And again, they're
balanced based on how overpowering or how powerful they feel in the composition. Again, I have a color palette, and I've balanced the
number of colored circles to make the overall composition
feel kind of balanced. You'll notice there
are quite a lot of the small beige dots, whereas very, very few of
the dark navy black dots. But for this exercise you can make it a little bit more
interesting Cantonese, because what happens if I
change the background to black? Well now to make this
still look appealing, to make it still feel balanced, I've had to change the
balance of colors completely. Now most of the circles
are the dark color, very few beige colors on that. And actually the balance of
all the colors in-between. I've had to change
a little bit too. You'll notice quite a
lot of purple dots. Now, this exercise isn't just helping us
intuitively see color, but helping us think about
how it balances on a page similar to those
composition exercises we did right at the start. Once you've completed
this module, you could go back to
those early compositions and try adding some color. For this exercise,
I want you to go to Adobe Color and choose
a color palette. Then creates a composition
just using these colors, but try and get that balance
right so that it doesn't feel like one color is more
overwhelming than others. You could create this with
lines like Paul Smith, or you could create it with
circles like Damien Hirst. And then you have the added challenge that you could change the background color and see how the balance would change. Or if you like, why
not have some fun and create a completely
different composition? But just make sure you only use these five colors and that
the balance feels good.
8. Summary: These exercises were
again chosen to improve your intuition
around using color. Color changes in context. We can only improve our use of color by
working with it directly. And it's great that you've done these exercises before you learn too much about how color works and how we
talk about colors. Because all of that
stuff could have a negative effect on how you
see the colors in context. In the next few sections, we do still need to learn
to talk about color, as we will be working with real clients when we
create a color palette. Similar to how we need to
know how to talk about typography to work with a client or just internally
with the design team, we need to know how to
talk about colors to work with each other and
to work with our clients. But now, after doing
these exercises, you'll be able to see
color better and you'll be able to intuitively
work with color better.
Rob Sutcliffe, UI Designer / Developer
