Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
In this video we will break down the process of adding color to the final logo layout.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now that we have our design laid out,
let's add some color.
0:00
My first step is to pick my power color,
which is a light blue.
0:03
Light blue is vibrant, fun, structured,
and
0:06
tends to be actionable in browsers as the
default hyperlink color is blue.
0:10
I tend to use tints and
0:15
shades when designing a color palette for
just about everything.
0:16
To do this, I simply start off with the
main color, and then add three objects
0:20
below the original color, all with a white
fill and in Overlay Blending mode.
0:24
Then, I alter the Opacity with the top
object at 20%,
0:32
the second one at 40%, and then the last
one at 60%.
0:37
All three of these objects overlay the
original color.
0:41
As for the shade at the top, I do the
same.
0:46
Create an object which overlays the color
with a fill color of black, and
0:49
change the settings to a 50% opacity, with
a Blending Mode of Multiply.
0:54
Essentially, this is a monochromatic
scale.
1:00
Then finally, I will flatten the
Transparency, and merge the object so
1:02
I'm able to get the correct hex values.
1:07
Now, my whole approach with adding color
to this identity,
1:10
is to have the darker color to be the
text.
1:14
Then, in the voids of the o's and d,
1:17
have bright colors to represent the lists
you can create in the app.
1:22
In the Task Manager app, you will be able
to create lists, and
1:27
then add tasks to those lists.
1:31
Since we're able to add colors to lists,
1:34
I then want to represent that in the
identity.
1:37
Also, the app is an actionable app,
1:41
meaning, to use it you have to complete
things.
1:44
I would like to use colors that represent
action, like reds and oranges.
1:47
So the next step is to get our three void
colors and
1:52
create a scale like I did with the blue.
1:56
I'm also going to add a dark value as
well.
1:59
I might need to use it for the text to
make it pop or contrast more.
2:02
The blue I have might not be enough.
2:06
Again, get the hex values.
2:09
Finally, I add my colors to the logo.
2:11
And show it in comparison to the one-color
version.
2:14
There we have it, our finalized odot logo,
using the Logo Sprint process.
2:18
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up