- [Instructor] In this movie,
I want to take you through the entire creative process
on one logo design direction from thumbnail sketch
to the final design.
We'll leverage various build methods and art direct ourself
along the way, so let's dive into it.
Like every project I work on, it starts in drawing,
it starts in analog, this was the thumbnail sketch
that I drew to encapsulate the idea
of the Cascade Lakes region.
I wanted to create something that frame
that idea really well, so this is where it started,
my rough thumbnail and of course I need to refine it,
so I know what I'm going to be building more precisely
in vector form.
So this is where the refined sketch came in.
And I drew this with my mechanical pencil
and it's as tight as I need it to be
because these are all geometric shapes essentially
I'm going to be creating.
So Illustrator does that perfectly.
So the first thing I'm going to do is just select this,
and adjust the opacity so we can build on it,
I'll lock this layer.
Now, all the shapes we're going to be building
are simple shapes, we're not dealing with any Bezier curves,
they're all straight edge shapes.
So we can use shape tools such as the rectangle tool,
you might even use the ellipse tool,
but these are easy shapes to build, they're not hard.
What you see right here, let's go ahead and zoom in
so you can see what we're doing as we create this,
but anybody can build these shapes here.
All I did is I created a first mountain
and then I just scaled that same triangle
to get the rest of the shapes and I should point out
as I go along here,
I draw this as perfectly as I can before I jump
on the computer and start building it.
So if you look at this mountain, it's at the wrong angle
so all of these angles are the same, so on this I would
just select the triangles here,
and I'm just going to go to Pathfinder and unite it,
so now they're all together.
As I build, I tend to select areas
that create extra anchor points and I just clean those up
and remove 'em using the remove anchor point tool up
here in the toolbar.
And I'll remove those and that works great
on a 90 degree angle.
So that's pretty easy to create elements like this,
in this case the mountain range, I have this kind of area here
that implies trees and little hills in front
of the mountain.
And again, if I just think in shape,
it's going to help me in this case once again,
it's all triangles and I don't worry about if I didn't draw
it exactly at the angle.
The reason I didn't use the same angle here as here
is because I wanted this to match the mountain angle
that we have there so I'm going to select these now
and I'll go ahead and unite 'em.
And this is where a throwaway shape comes in,
So I have this shape it's sitting on top
and I'll just slide it over and I'm just going to use this
to clean up the base of this shape
and trim it off once again using minus front on Pathfinder.
So it's pretty easy to compose an element like this.
So when it's all said and done,
the base geometry for this design will look like this.
And I built the interior here much the same way.
It's once again, if I select any of these anchor points,
there is no Bezier handles on here.
It's all strictly just anchor points and straight paths.
And that's the easiest type of building in Illustrator.
Once you start getting into free flow curves,
that's where it gets a little tricky to make
the artwork look precise and have those angles
and those curves look really nice,
but we don't need to worry about that.
So what I do when I build something like this,
since I have elements over the top of other elements,
I tend to organize my layers so I can turn off a layer
and turn on another layer and focus on a specific element
or a specific part of an overall design
and that's what we're going to do here.
We're going to build the branches,
which are just simple strokes.
I usually use the Line Tool when I'm doing this.
So the Line Tool works, you can just drag and draw
and if you hold shift down, it'll lock it into a 90 degrees,
whether it's horizontal or it's vertical,
or you can do it at an angle so it's a lot quicker
when you're doing line work like this,
to use the Line Tool rather than just building it
from scratch with the Pen Tool,
so that's how I created these.
This will represent where the first branches,
if I clone this command C, command F,
I'm going to hover over this anchor point
and I have Smart Guides turned on, command U,
and I'll just drag this down to there.
And then I'm going to copy that spacing,
by going command C, command D, command F.
Now, that tends to confuse people who
are new to Illustrator, because in my opinion
it's kind of ridiculous, I have to do three commands
to get it to repeat like this.
I used Macromedia FreeHand for 15 years
and their repeat was a lot easier.
And I struggled with that when I moved to Illustrator
going on 18 years now.
So let's go to stroke, we want to beef these up
because these are ultimately going to be expanded
into shapes and we're going to punch 'em through
or Minus Front as the name is for Pathfinder,
through the base of the tree.
But we want these to be a lot fatter,
so we're going to go to a three point line
and that's going to be the aesthetic
or the negative space tolerance we're going to
be using on these and I think that's going to work fine.
Let's go to the tree branches themselves,
and turn this on so you can see, I did the exact same thing
on all the other ones
and so this is how I like to build though,
I isolate it, so if I want to move on to something else
in this case, we're going to be working on the sky here,
so I'm going to turn off these elements,
the trees and the branches, we'll turn on this for the sky.
And I'm going to turn our base geometric back on,
because this is how it's going to relate to the sky
with the mountain range and I just want to pay attention
to that, so I establish using the Line Tool once again,
I established the angle of the top one and I just copied
and moved this one down here and I'm just going to use lines
to imply that atmosphere, or if you want to think of it
as the clouds, that's fine,
but I want even gaps, even though I didn't draw it even
you can see this one's thicker, or it has more space here
between these two lines and this,
I want this spacing on these lines to be exact.
So that's another good example is I draw it to capture
the essence, but it's never going to be perfect
since I'm just eyeballing it when I'm drawing it.
So what we're going to do is we're going to use
the shape blending tool here,
and we'll select these two strokes
and with the shape blending tool,
we'll click on one end, one stroke,
and the other end of the other stroke.
And you can see it's added one in between here,
it's doing a shape blend.
We're going to click into the shape blend tool
and this is how you control how many steps
and we'll go step and we'll try eight,
see what that looks like.
That's okay.
I actually think, I want nine.
I want that spacing a little smaller because once again,
those lines are going to match the tolerance we're using.
For example, on the branches of the trees, it'll be three
so let's see these look like.
That looks good.
We'll have to expand this to get access to these paths
because we're going to be editing 'em next.
And sometimes when you expand,
you might need to go to object and yep it's group
so we'll ungroup it, and like a good cooking show.
I have a cheat turned on and this is the thickness
of the strokes.
This is what they're going to be.
And before I make any edits, I want to check and as you build,
it's always good to make sure,
it's going to work in its final format.
Once I've established that the weight of this strokes
is going to work, I'll go ahead and all revert back
to a smaller stroke in this case, I want to go to a hairline
because I'm going to zoom in now,
I do like how on my drawing,
I've determined where these are going to come to an end
and I want to match that so,
we're going to go to the Scissor Tool
and this might not be a tool you use that often,
especially with the Shape Building Tool,
because this can do a lot what you can only really do
with manually using the Scissor Tool, but in this case,
it's going to help us, we're just going to cut these,
based off of where my lines are showing.
So we can select after we cut and delete these as we go,
so I don't need this.
And you can see I'm just creating the gaps
in this line work.
And we'll go ahead and match this one,
it's right about there.
Doesn't align perfectly with my drawing, but that's okay,
it's still going to inform us.
The next one goes all the way through the next two actually.
And on this one, we'll go here.
We'll cut here,
we're going to cut this, this and that.
And we'll cut it here.
Now I'll go back.
And I think I want,
lets get rid of that one,
I know I want to keep that, this can go away.
That can go away.
And that can go away.
I'm not sure about this one, I think this one,
I'm going to go back and I'm going to cut it here,
even though in my drawing I don't really
have anything showing here,
I'm going to cut that there.
And I think on this one, I'll cut it here.
Yeah.
I think that looks pretty good.
And now we'll go ahead and zoom back in,
so you can see what I'm doing.
And I have a command set up as an F key,
it's a keyboard shortcut and if I hold the option
and I hit F1, in this case it's going to select everything
because that's my shortcut for selecting strokes.
But if I select one and I go option F2,
all this does is it selects the same stroke color
and you can see I don't have to go
manually select all these.
So that's how keyboard shortcuts can help you speed up
the process, let's go back to our graphic style
and just click it on so you can see
what we've ended up with now.
I think that looks good.
Ultimately, we're going to expand all of these into shapes
and start combining things,
but I take that same tolerance level I established up there,
transfer it to the bottom because we're going to use that
for the reflection down here.
And now that I did that and I go back to my trees,
and I go back to the branches I have for those trees,
I didn't like how this tree
was kind of hitting on this reflection,
even though I drew it that way,
I'm kind of deciding as I go along,
that's just adding too much visual tension,
I think this is cleaner.
So I would remove that tree, that's just how you need
to be kind of art directing yourself as you proceed
through a creative process.
So the next thing I need to do now is I have all my base
vector artwork established, I just need to expand it
so we're not dealing with a stroke,
we're dealing with an actual shape,
so that's all we're going to do now,
is we're going to expand our artwork.
And so if I select the tree elements up here once again,
I can go option F2,
that'll select everything that's the same stroke color.
And in this case we can go to Object,
we can go to Path, we can go to Outline Stroke.
And now all of these are now what we want,
these are all shapes.
So that's going to work good.
We'll go ahead, I'm going to de-select the reflection down here
and just for the sky, we'll go ahead and unite
this with Pathfinder.
So we'll unite it and you want to make sure,
if we go to appearance notice it's a group,
even though we've united it.
So I have a keyboard shortcut to set
this as a Compound Path.
So if I go to Object and go to Compound Path,
you can make it this way, but notice I have F7,
so that's all I do, is I hit F7 that way I don't
have to go to that menu all the time to do
those kinds of functionality,
it just makes the process go a whole lot faster,
so we're going to select the branches and the tree here,
and we'll select these.
I'll select these.
And all we're going to do now is we're going to expand
these into shapes as well, so we'll do outline.
Do select these.
And I can go ahead and unite these,
actually let's go into isolation mode,
I don't want that to be connected to this one over here.
As I was looking at this ultimately,
this smaller tree, this is actually the top of another tree
that's technically as I'm thinking in my mind,
closer to the viewer, who's looking at this scene
and it's in front of this back tree,
that means this won't go into the other tree.
So I need to keep that in mind
because I'm going to be editing my art as I go along.
So this is where the creative process gets
a little confusing maybe at times,
because you have to just pay attention to those details,
and when I did that, and I was looking at that,
I don't like how these branches come too close
specifically down here, to where this one overlaps,
that's going to create kind of an odd negative space,
so I'm just going to select these branches
that go off the trunk.
And I'm just going to adjust it a little bit
by just bumping it up a bit, so we'll go one, two,
maybe double that three, four,
and I think this is going to work better.
Then I'll take the trunk, then I'll go ahead
and do that as well.
Now, what we need to do is we need to edit this branch.
So I'm going to take the shape and clone it.
So we'll go command C, command F.
And because they have Smart Guides turned on,
I can take this anchor and slide it along this path.
And all I'm doing this for, is I'm going to edit
this angle right here on this branch.
But I don't want it to obstruct the other branch.
So I'm going to move it down and so all I've done now
is I've taken this,
and I'll take this and I'll go ahead
and minus front or trim it,
like that.
Just wanted explain all that so we'll take this,
actually let's do this 'cause it'll be easier
to see what I'm doing.
I'm going to take this tree now,
and we'll go ahead.
This tree, this tree, this tree,
and this tree and the mountain all of these things
are going to be fused together now, so we'll just unite those.
And, I just realized I need to,
keep the smaller trees so we'll do these first,
then I'm going to take this and make a copy of it,
command C, command F, like that.
And then,
we'll take that copy and we're going to trim this side.
We have to move this down.
There, we're going to use that to trim this side
of these branches, that way it defines that edge
of the tree, 'cause ultimately we're going
to be punching all of these through.
So we'll select this tree now,
the other elements that we fuse together,
these and we'll go ahead and unite those into one shape.
And then we'll take.
Let's go into here 'cause.
I'm going to take this and I'm going to slide it down once again
on this path,
let's do the top one first 'cause that needs
to fall in here, this is the nitty gritty
of building vector art.
You just have to zoom in,
make sure you have everything aligned.
Looks like that doesn't actually,
go past the edge here.
So we'll do that, so it breaks that edge,
we can get rid of that anchor point.
We have an extra piece here, we can get rid of that.
Even though it's a simplified graphic,
you have to pay attention to what you're doing,
because it can be complex in terms to pull off
that look and feel.
As I'm looking at this, we'll go in here,
and we're going to pull this back like that.
And just to be safe, I'll pull that back,
we'll take a look at this,
and we'll pull this down and lock it to that anchor,
like this, this just ensures that when we punch through,
we're not going to leave little artifacts.
This goes beyond the path, that's fine.
And the top I think is fine.
Everything else.
Oh, here's a good example,
so this one is kind of shooting out,
so that is one I'm glad I'm checking this,
is because before I fused it,
I should have trimmed that area.
So if I color this,
all I'm talking about,
is this angle on the left side of the tree
to trim this one branch here.
That way it carries the eye through the design
at the right angle and I did the same thing over here
on this side as well.
There we go, we'll color this so you can see what I'm doing.
And this way Smart Guides is nice,
you can drag right on a path and so you retain that angle.
Now I can take this and I can trim this side of the branch,
so visually it continues and takes that edge of the tree
and implies it like that.
So if you were sitting here watching me build
on a normal basis, this is kind of what I do.
And, you know what?
I did the same thing over here,
oh, it's okay, in the real world I do the same thing,
it's not just 'cause I'm talking, trying to explain
as I build, it's because I'm usually not talking
when I'm building, but that's okay,
the creative process isn't always clean.
Okay.
So we have that.
I'll select that and I'm going to trim this one now,
this branch so that edge is implied again like that.
Then I'll take this one over here,
and I'll trim the same branch
so the edge over here is like that.
So a long way around it.
I probably should have thought of that before I jumped
into it, but oh well, it's still going to give us
the visual results we want so we're going to take
all these branches now, we'll go ahead and unite
them once again, it's going to be a group
so change it to a compound.
All of these interior shapes this one right here,
let's go ahead and just fill this with yellows.
So the branches pop out.
So this is what this looks like now we wanted to take
this shape and ultimately it needs to go behind
these shapes, so we'll paste it behind,
so all these elements are going to be sitting on top.
Technically sitting on top,
but right now we're going to fill 'em with white
and we're going to unite 'em,
make sure it's a compound shape once again here.
So we'll turn that to a compound,
I'm going to select this shape, which is already a compound.
And this one sitting on top,
and we're going to as think of a cookie cutter,
we're going to minus front,
and we're going to get our final shape,
so we'll go ahead and just fill it with black,
like this.
So all these shapes sitting on top now,
we can select these branches, select what we just created
with the mountain and filled black.
And we can minus fronts to punch all that detail through.
And this is what I'm talking about.
So the building, you have to pay attention
to what you're doing 'cause you can confuse yourself
like you just saw me do.
When it's all said and done, you're going to end up
with your base, black and white looking like this.
And it was at this point,
I was originally thinking of doing this as a rectangle
motif, but then I also considered maybe a circle.
Ultimately I kept it a rectangle,
but I set this aside and came back to it
and I'm looking at it,
something's bugging me about this.
Well, what was bugging me was the top of the trees,
I just didn't like how that looked,
especially down here where it kind of fuses
with this hillside in front of the mountain as well.
So I want to fix that so all I did
is I just took triangle shapes and dropped
them in those areas.
And I actually think that looks a lot better,
it's how I should have built it to begin with,
but sometimes you don't discover that,
until you go through the methodology of building things.
The other thing that was kind of bugging me,
is I didn't like how the tip now fused up here.
So this is where I'll direct myself again,
I'll take shapes like this,
select the top shape or the cloud areas
where it's going to interact with,
and I'll go ahead and punch this through.
Now, as soon as you do an edit like this,
on a shape that's a Compound Path,
it's going to return to a group nature,
so you'll want to return that to a compound.
And then the next edit we're going to do to the same artwork,
is we're going to trim this off just to give
a little more breathing room around the tip of this tree.
And we'll go ahead and punch that out.
Notice again, it reverts to a group.
You want to keep it a compound.
So you need to be aware of that because it can
cause issues going forward.
And the last few things that I thought of was another edit,
and that is, I just thought the outside interior line,
it matches the tolerance of the negative space,
the reflection, the sky line work,
but I thought it should be as beefy as the mountain,
I think it looked better.
And when I did that, I'm like okay,
that does look a lot better, we'll go with that.
As I was thinking about Cascade soda,
it's all about, you know, carbonated soda,
bubbles, it's sparkling type of beverage
and I decided to add some little sparkles in the lake
to kind of imply that.
So when it was all said and done my final base,
black and white looks like this, and it's at this point,
everything where it comes to a point,
if we zoom in right here at the top of the tree,
everything's really sharp.
It's sharp at the tree, sharp at the mountains,
sharp corners on the edge lines, and I want to soften it.
And this is where rounding comes in,
so I'm just going to turn on this layer
for rounding and pay attention to the sharp areas.
Look at how much I round these off.
But when we zoom out and you see it in context,
we'll compare rounded,
you know, with not rounded,
it looks so much better having the rounds on there.
So you can do the rounding,
just as easy using the rounding feature in Illustrator.
So if you go to any shape actively for the most part,
I always have the Corner widget turned off,
so we're going to show the Corner widget and that way,
if I select a corner,
and you know, I actually now that I think about it,
I think I have my settings set up, yep at see.
If I set it so it never shows up
because those tend to get my way,
but we'll go ahead and we'll set this back and go, okay,
so this is what you'll see when you have those settings
turned on, is you'll see a widget here,
you select the anchor point and then you can add
the round to it and that's all I've done here.
If we go up here to this, let's really zoom in on the sky.
We're looking at this at about 8000%,
so a lot bigger than you'll ever view it.
And then this is where I would put just smaller rounds here,
just to soften those areas.
And if you do that, you know you can take it
from this and all those rounds really add
a nice visual aesthetic to everything,
so that's why I do it.
And there's one more thing as I was looking at this,
that I kept vacillating between,
the holding shape of this whole design,
which is a rectangle.
And I ultimately decided I am going to go with a circle,
so this is where we ended up at.
And it was at this point I wanted to start exploring color.
And this is the easiest of all things to do.
This is the fun part too so that's all we're going to do now,
is we're going to explore color.
I wanted to try to make a mark that would work in one color,
which would be the darkest brand color we established.
And then also do a color format, so this one has dark brown,
and then we have a nice dusty blue, this one's a deep green,
and maybe it goes with the nice tan,
we'll try a purple on this one
and a more kind of a lighter type of blue.
We'll try another deeper bluish with just a hint of purple
and more of a teal blue on that one
and this one we'll try a warm color.
And I tried to warm color even though I didn't think
a warm color would work, I like that color combination,
but it's definitely not going to work
for this design direction.
But I did choose this final coloring.
And when I locked it up with the type I chose for it,
we had color the second one like this so this will be one
of the design directions we present to 'em.
Now, one thing I do all the time when I'm creating design
like this, is in this case I want the final mark
to be a one color.
And so I'm going to take this and I'm going to clone it,
command C, command F, I'm going to take this banner
and I'm going to show you you how I go ahead
and create what I call a reverse version of the logo.
So if I select this, this is grouped,
I'm going to ungroup it, we'll select this,
we're going to turn this to white
and we'll turn the type to white as well on a colored
or dark background.
And this looks good,
but if you compare the mark on the right,
with the Mark on the left,
if you look at this one on the right here,
the highlights, the areas of the mountain that are white,
this is where the light sources hitting it
and it's casting these shadows to the back,
that's kind of what we're implying with that graphic.
If you look at the reverse,
everything that should be lit up is now a darker color.
And so you get a weird dynamic going,
and I want to show you how I address this.
So let's go ahead and zoom in a little bit on this,
for this one all I'm going to do,
is I'm going to go into isolation mode
and sometimes you can drill down
and you'll be able to just select that shape.
This is one reason why I have this turned off by default,
you see all the rounding controls,
I don't want to see any of those so I turn those off.
To create what we need to do to get
that same visual appearance where you have the highlight
on the correct side, is I'm just going to select
this outer most shape of the brand mark here.
And I'm going to copy it.
Then I'll back out of isolation mode
and I'm going to paste in place,
and we'll go to graphic styles
and I'm just going to color this outline.
Let's see, we'll bump it up so you can see what I'm doing,
so that's all I've done.
I've taken the same shape and copied it out
of the original graphic and I'm going to offset this now,
so we're going to go to Path, Offset Path
and we're going to type in five,
like that.
And that's like way too much.
Oh no, there we go, that looks good, okay.
And then we're going to go okay,
we're going to take the original shape we copied out
and we can delete that now.
This shape is sitting on top, if I fill it you can see,
so you want to make sure this shape is on top.
If you don't know how to do that, you'd just go Arrange,
Bring to Front.
So now we'll go ahead and color it this magenta.
You can see it's sitting on top now,
so we'll select the brand mark,
we'll select the shape we created
and we're just going to go to Pathfinder
and we're going to go minus front,
so we're like a cookie cutter.
We're punching it through again.
And now we can move the color back to white
because we've added this additional outline,
it's a little closer to the logo mark.
So to retain that same balance of space,
I would just move it from this anchor point,
and snap it up to that so now it's in the same
spatial distance from the type.
That's an optical thing you need to do and by the way,
having Smart Guides turned on,
is nice because when you select a shape
and you're over an anchor it tells you, you're over a path
and it's going to snap when you do that.
So that's what you want to do, let's go ahead and zoom out.
But now the mark on the right now matches
the mark on the left in terms of its visual aesthetic,
so I call this creating a reverse version of the logo
that will work on a colored background
or think of a photograph, it would work on a dark area
of a photograph as well, really well.
So, let's go back to layers,
this was the design we just walked through,
but I also created the same exact style,
I just tried a different format to see
if I simplified everything
and still have the same type of elements if I liked it more,
I don't mind it, I'm actually going to show 'em both of them.
But I think I prefer this design more.
On most logo projects, I create at least six
to eight design directions to present to a client,
on average, each direction takes me about two hours
to build out the design because I'll stop,
print out my design and set it aside and focus
on something else.
Then I'll reapproach it later and scrutinize it,
looking for anything I should change, remove altogether,
or add too to improve a design.
We'll cover art directing yourself in more detail
in an upcoming movie.
If you like this, I encourage you to watch my weekly series
Drawing Vector Graphics Laboratory, DVG lab for short,
where I cover all of these methods and more every week.