Design Professional Logos from a Sketch! (Firefox Logo in Illustrator!)

hey everybody I'm Nathaniel Dodson from
Top vidcom welcome into this Adobe
Illustrator tutorial where today we're
gonna take a look at creating the
Firefox logo from a sketch that I did of
the Firefox logo a few months ago we're
gonna take it into illustrator cover it
do it make this thing look good and well
you're seeing an example over here on
the screen now so need i say more
I think not if you do enjoy this
tutorial make sure you subscribe to this
YouTube channel if you would like to
follow along with this video go ahead
and use the download link in the video
bio you can download the sketch imported
into illustrator just as I will be doing
here in a moment you can follow right
along and make your very own Firefox
logo as well so let's jump into
Illustrator and get this thing started
alright we're here we are in Adobe
Illustrator and we're gonna begin by
creating a new document 2560 by 1440 now
I am also working in the RGB color mode
you can really work in either one I'm
just choosing RGB because I'm an RGB
kind of guy I'm gonna go ahead and hit
create we have our document here I'm
gonna adjust here in my layers panel by
hitting the little flyout menu there I'm
gonna just go down to panel options I
prefer to work with slightly larger
thumbnail so I'll go with something like
45 pixels
it'll help us see what's going on in our
layers here in just a moment next I'm
gonna jump out to my finder and I'm
gonna drag the copy of the sketch into
my adobe illustrator document if you
downloaded the sketch yourself feel free
to drag it in I'm gonna make this a bit
smaller just so the Firefox logo itself
fits here on my my little arch stage
artboard area I'm gonna zoom in here and
this whole thing will basically begin by
us tracing the sketch as we see it but
you know what actually before we get to
tracing I want to create the color
scheme so I'm just gonna lock this layer
up fact I'm gonna name this layer assets
because it's like my background asset
it's my sketch let's go ahead and create
the colors that we're gonna need for our
Firefox logo before we do anything else
so it's gonna begin here with the
swatches panel let's create a new folder
here so it's a color group as
illustrator calls it we can call it
whatever we want I can call it Firefox
it really doesn't matter I'm gonna drag
the color white to the trash it just
took the color that we had and here in
the swatches panel we will create a new
color group and I can name it whatever I
want I'll hit OK and there's our new
little color group now what we want to
do is begin creating some color swatches
here with our
or our fill color picker so I can just
double click on that and I've got some
hex codes written down here in front of
me so let's go 4 0 9 3 D 0 as our first
color it's kind of this light blue and
we can just click and drag this and drop
it in our group just like that now it is
a good idea generally speaking to make
this a global color in this case I've
already tested these colors I know that
the colors I want so just to save us the
step I'm probably just not going to go
in and make them global colors however
like I said global colors are awesome
but we're gonna in the in the interest
of saving time we're gonna do it this
way all right now I'll double-click this
foreground color and let's go with
another color here for b2 a7 - this is
gonna be a much darker blueish blue
purple I don't know something like that
have difficulty seeing these blues
alright just drag that right into that
group now we're gonna double click on
our foreground we have eight colors by
the way that we need to create so we're
- in six to go let's go be e 1 D 7 B and
these are gonna be very helpful to have
later on you'll see as we build out our
Firefox logo let's also go EEE to f3 6
that's kind of like a flat reddish color
four down four to go
let's select our fill color again let's
go f9 9 e 1 D and this is more of a
light orange color let's drag this
sucker in again go back to the fill now
here's where the colors get they kind of
get a little a similar FF CCO six this
is more of like a very mustardy yellow
color and then we have two more sort of
yellows here FCE b03
and c is just a very vibrant yellow now
and last but not least we have kind of a
highlight color here FBE f55 this is
just you know kind of the same yellow
but just a little brighter so those are
the colors that we want those eight
colors it's gonna be very helpful for us
to have those colors as we work our way
through creating this Firefox logo so
let's go ahead and create a new layer
and I'm going to grab my ellipse tool
and what I want to do I just want to
dump the stroke or the fill excuse me
and I'm gonna select the stroke and we
can get the stroke any old color I'm
gonna go with the yellow just because
yellows cool this isn't really because
we're gonna be using this particular
yellow this is just think of this as a
marker and I'm gonna come over here to
my appearance area of my properties
panel and I'm gonna bounce the stroke up
to like five points to make it very easy
to see
then I'm gonna hold down my shift key
and I'm just gonna drag in a nice little
circle here that's going to be about the
size of the globe here for my sketch so
probably something about that size is
what we need right I just want to make
sure that this part of the globe won't
be revealed outside of the tail because
we don't see any of the globe outside of
the the Firefox's tail in the proper
Firefox logo so there we go we have the
globe and now let's go ahead and create
the bulk of the Fox itself so we'll grab
once more the pen tool and I want you to
try to think about this thing in parts
like this ear is gonna be a separate
part the snout here is gonna be a
separate part the shadow here underneath
his you know ear or cheek really that's
gonna be a separate part the little Paul
that's gonna be a separate part and
probably this little piece of tail will
also be a separate part so hang with me
here for a second let's let's sort this
out let's begin right here and I'm gonna
pull a little a little bit of his cheek
out and then I'll probably pull up here
and just drag those tangent handles
until my path follows my sketch I'm
gonna double click click on my layer out
here and change the color from light red
there's something we can actually see
let's go with let's go with a light blue
that'll probably contrast a little
better than what we've got going on I'm
gonna hold down alt or option now and
just pull a tangent handle back this way
so the ear can kind of curve the way it
should hold down alt or option again and
pull a little tangent handle I'm just
looking to pull the tangent handle out a
little bit so it's kind of like starting
beginning to wrap around the curve and
the more you do this the more you'll
kind of understand oh you know I need my
tangent handle to be pulled in this
direction or that direction or or
whatever and if you need to go back and
adjust a tangent handle that's fine hold
down your alter option key I can select
that tangent handle say you know what I
need you I need you to be pulled up this
way and over here I can pull it and just
it a little bit and just make it all
perfect we really want to get this
initial shape just kind of as nicely as
we can hold down the alt or option key
and click on that anchor point so you
can just make that really sharp curve
back hold down the alt or option key
again and pull another tangent handle
out you see how I'm coming out past the
curve and then click and drag to just
complete that shape or that that curve
really hold on alt or option once more
and we're gonna make this nice sharp
return here for our fox that way
what I probably should have I probably
should have curved this angle over here
let me just undo this a couple times
let's do this the right way let's do it
the right way right out the gate so I'm
gonna pull just a small handle back I
probably don't have to pull the handle
back I'm just gonna make a small curve
on it that way
and I'm gonna hold down alt or option
let's pull the curve out this way there
we go
hold on alter option to straighten that
out and then make a little curve this
way it'll probably just give us a nicer
looking finished illustration in the end
and then I'm gonna pull this tangent
handle out this way cuz now we've got a
we got to come way around
in fact I might zoom out just a little
bit I'm gonna bring it bring it all the
way to there let's see let's see if we
can make this work now that was probably
a bad mistake let's bring it to here
look at that what you get a nice smooth
curve right around there I'm gonna suck
this tangent handle back in just a
little bit and now we'll bend it right
around here and then hold down alt or
option Reed rag the tangent handle Bend
it right around here voila hold down alt
or option and we'll drag this out right
like that and then alt or option click
that anchor point and let's curve this
guy back around this way alter option
drag a new tangent handle out here
dragging the tangent and allow it just
it kind of gives us a head start on the
curve right so we kind of just make sure
that it's going in the right direction
before we before we do much with it I'll
just give this a nice little curve there
and then here here's we complete the
tail and just get a nice kind of
swooping shape to the tail we don't want
to be too crazy but we still want it to
kind of work and line up well hold down
alt or option and let's pull the shape
back this way right because now we're
now we're bring it at home so I'm gonna
drag this and pull this nice sharp tail
shape in this way and here we're gonna
kind of cut and make a perfect circle
around this way so I can actually just
make an adjustment like that and then
ignore this the perfect ellipse because
that doesn't have to do with the Fox so
I'll probably bring the sky right around
about here something like that and then
we'll come all the way up underneath his
cheek let's see do we have that I think
we do and then alter option he
here we'll drag out a little bit and
then just join the path and there if I
open up my lair and I shut off the
circular ellipse we can see we've traced
the sort of rough outline of the fox now
I would highly recommend you go through
and find like you see how that doesn't
look perfectly smooth hit the letter A
to bring up the direct selection tool
and you can just go ahead and tweak and
adjust and make whatever adjustments
necessary to clean that kind of stuff up
a little bit it's much easier to do it
now at this point then it will be later
when we start layering in color and
different effects and things like that
so I highly highly highly recommend you
mess around with your lines and get
everything as cleaned up and ready to
rock and roll as you can get it here in
this stage or something like that we get
a nice much more smooth curve wrap
around and you can just look around to
make sure nothing's messed up we could
look here and make sure that everything
is good there it's just not giving us
the kind of point that we would have but
we're not gonna be relying upon the
stroke so that's fine I just want to
make sure I have one nice long path
these kind of curves can be easy to mess
up so you may want to take your time
with them as well but once once we've
got it we're kind of ready to go and I
think at this point we're ready to just
do kind of the other additional shapes
that will be added to this so here's how
we do these these are gonna be pretty
quick and easy because we're gonna use a
little illustrator trick here I'm gonna
just go ahead and draw his ear I'm just
gonna drag the ear and all this stuff
here we don't even need to worry about
all the stuff that's here underneath
underneath his the rest of the
illustration if you will all we need to
do is make sure that this part of the
ear out here lines up perfectly because
all of this in here we're gonna we're
gonna make that line up perfectly
whether it wants to or not all right
then I'm gonna draw out for his little
snout let's make the snout it's now just
one of those funny words isn't it all
right there we go and let's pull this
right around and right around the bottom
as well and then we'll loop up down here
with the very bottom of our our path
looking good hold down alt or option
just to reset that so we can have just a
sharp line come all the way up and
around
voila we have a nice little snout for
him when you get the little shadow here
underneath his cheek we need to get as
Paul and then we need to get these
shapes here that are gonna be sure these
cuts into the tail and then we'll
also explore the highlight for the tale
and this little shadow but I think we're
gonna do that stuff later or we can get
the little flick coming off his tail
back there let's get the let's get the
little bit underneath his cheek so we'll
hold down shift here and if you have
your smart guides turned on view smart
guys right here you can actually align
exactly with an existing anchor point so
if I grab the Pens will hold down shift
you can see how I don't know if you can
see that but it actually says when I
hover over it anchor that's just letting
me know look if you click here you're
actually gonna get rid of this anchor
but you're specifically on the anchor if
I hold down the shift key I can click
right on that anchor and it's gonna drop
a fresh point for a new path but what I
want to do is I want to shift click and
drag to drag out some tangent handle
action for myself because I have a
perfect I have a perfect curve that I'm
looking to get here so I want to make
sure that I get that head start that
I've been talking about that looks about
right I can hold down my alt or option
key I can just adjust this a little
little it a little bit more there we go
it looks pretty good and then what I can
do is really the rest of the shape
doesn't matter nearly as much because
we're gonna cut away everything that we
don't need now for his Paul again with
with my smart guides turned on I can
begin exactly on the path so I can just
hold down shift click there I can begin
pulling out a tangent handle and I can
just wrap right around here to get this
Paul just get a perfect depaul maybe I
maybe I went too far I got a little too
ambitious there there we go something
like that I think I stretched that just
a touch too far too there we go
let's take this a little up and over
something like that's very nice let's
make the front of his Paul here and then
we'll wrap the Paul around this way
great and then we can just bring the
Paul way over here and that's gonna be
fine again you want to look your lines
and make sure they look smooth if
anything doesn't look smooth adjust it
now or forever hold your peace because
it's gonna get much more difficult to
adjust later on down the line all right
that looks pretty good for the for a
little shadow underneath his cheek that
looks good too and it looks like kind of
like a mess but don't worry we're gonna
be cleaning all this up soon the point
is we need to get all of our shapes and
all their paths created at this point
let's go ahead and create this as well
I'm actually going to extend this little
flare e-tail thing a little bit
let's do that let's bring this around
here all the way to the path and then
what I'll do is drag out a tangent
handle I just held on alt or option key
I drag out that blue tangent handle you
see that and then we'll bring it all the
way back up here hold down alt or option
and we can just create a nice little
swooping tail flick II you know piece
that goes back there great remember we
have our ellipse still turned on so we
have that line the only shapes we need
are these little notches and then when
it comes time we'll worry about the
highlight shadow on the tail but we'll
get to that later all right so let's
hold down click P to grab our pen tool
again hold down shift we're gonna work
right off these anchors hold down shift
click and let's drag out a nice little
you know hold down shift and drag out a
tangent handle I think more like this
and let's click and drag a little bit
maybe something like that alter option
and drag a tangent handle back this way
and just get some nice little notches
here again don't worry about this stuff
hanging out here we're gonna clean all
this up really nicely in just a little
bit again we'll shift click and drag to
get a nice little tangent handle alt or
option and drag a new tangent handle
back this way and then just make our
nice little knotch
very cool well done shift I'm gonna drag
another tangent handle out if you
haven't gotten sick of me saying that
yet there we go alter option I'm gonna
pull a tangent handle back this way
we're almost done here guys we're almost
done there we go and I'm actually gonna
make sure I cover up this entire area
just like that like we basically
encapsulate that entire little tail
it'll just give us more options later on
down the road all right so we've created
all these different shapes how do we
begin adding some color and really
actually making this look like the
Firefox logo well first and foremost
let's select all of these paths by
grabbing them with the selection tool
and just command or ctrl C to copy them
and let's move over here and paste them
out here and we'll work out here that
way if we mess anything up we still have
our original paths in fact I'll select
all these paths and go object group and
just group them up leave them there we
might we might even lock them up so we
don't accidentally select them and do
any damage to them let's go ahead and
create our little globe underneath the
Firefox first
so I'll select that little circular
ellipse first we're gonna get rid of our
stroke because we don't want that and
we're gonna go to the fill and I am
going to add a gradient I'm gonna switch
this to a radial gradient and here's
where our swatches become important the
two colors for the globe are the light
and the dark blue or the light blue and
the purple a color so I'm going to go
light blue drag it and drop that color
on the white stop and the darker purpley
blue I'm gonna drag that over to the
black stop and then I'm gonna grab my
gradient tool right here and I'll just
drag in the highlight for this it should
the highlight should be somewhere up
here and by the time we're getting down
here where his little is little Paul is
that should probably be the shadow I
don't have a reference image here so I'm
kind of going from memory but that's the
way I believe it should go and you know
what worse comes to worst we're gonna
create our own little very similar
version of the Firefox logo now here's
where we do something kind of
interesting we're gonna grab the pen
tool I'm gonna get rid of this gradient
fill and we're gonna give our lines here
let's give them like a hot pink stroke
and I'm gonna make the stroke something
very noticeable like maybe ten points
what I want to do is create a series of
six different lines so with the pen tool
start drawing and drag out a line like
this and then bring that pink line all
the way around kind of something like
that okay and then hit enter to just
kind of commit that path now we're gonna
create another path so we're gonna begin
this one here and this one is going to
come through the Fox and exit somewhere
around this little part of his tail in
fact it should probably come a little
bit further than that
he'll exit somewhere right around there
and we might need to hold down alt or
option and just adjust these handles
again you can make all these different
changes that you like to your paths it's
very very easy to edit them a very nice
way to work all right hit enter/return
to commit that path let's does it make
sense right now but don't worry hang
with me it's gonna make sense very soon
now I'm going to go ahead and we're
gonna add another stroke right through
here so just another line another path
with the pen tool just like that commit
that and then I'm going to go ahead and
drop another line right about here
commit that and then I'm gonna go with
another little angular not really angled
I should say curved line there and then
finally one last curve
all the way up here now you may be
wondering what is this these six lines
are ridiculous what's going on here well
what we want to do is begin building a
gradient for the Fox he has a very
interesting colored gradient this is how
we sort of make that so let's select our
first color here and I have the stroke
selected so we can sample the pink color
we have in our swatches panel and the
stroke will now be colored with that
let's select our second color we again
have the stroke selected let's go with
our red and now the red is going to be
that stroke color let's select the next
pink color and we're going to go with
our orange and then the next stroke
color we're going to go with a lighter
orange and then an even lighter orange
we'll really we're into the yellow
territory and then that very very pale
yellow to be the last color so we've
sort of lined these colors up now what
we want to do is go object blend and
choose blend options and we'll go
specified steps and we should go with
something pretty hefty like maybe 250
specified steps hit okay and let's begin
by selecting the pink and red stroke
first you go one at a time here object
blend and we'll choose to make it and
you can see how interesting we're
beginning to make a gradient hold down
the shift key and grab the orange stroke
and go object blend make and we're going
to just extend our gradient right
interesting interesting let's grab the
yellow here's your things are gonna get
a little weird because we need to make
sure that the gradient can join from
this path or from this very point here
to this point without trimming off his
nose so we may actually take our direct
selection tool hit a and drag this
anchor point up a little bit more like
that just to make sure we have
reasonable color it'll still probably be
a little funky but if it's not appearing
over the Fox it really doesn't matter
let's select the blend hold down shift
select that light orange layer and once
more object blend make there we go okay
not bad not bad
hold down shift select the next color
object blend object blend make and last
but not least grab that very last color
object blend make so you can see we have
this very interesting shape that we that
we have just made with a really crazy
blend of colors and we really have to
mask this to the fox's body but I think
before we do that I want to make sure a
hundred percent that the Fox is
everything we want them to be before we
go ahead and create this mask so let's
just stash this blend away we'll come
back
to that just a little bit in fact I want
to lock up the elipse layer this bluey
lips just so we don't accidentally move
it around let me show you how we're
gonna get these perfect shapes check
this out
I can grab my selection tool and select
this ear and the Foxes body so let's
just select those two shapes and we can
use the very powerful panel here in
Illustrator called the Pathfinder now I
already have the Pathfinder open it's
right here what I want to do is first
choose to divide these shapes right so
we're gonna divide what that's gonna do
is it's gonna basically break this into
all the parts that it can possibly be
broken into so the ears the ear out here
is going to be one piece this little
shape on the inside is gonna be one
piece and then the rest of the fox
is gonna be another shape in fact I can
see here a group has been created in my
layers panel if I open it up you're
gonna see I have three paths one path is
that little shape inside of the fox one
is the outside here and one is the bulk
of the fox's body now what I want to do
is select that whole group and just
ungroup it object ungroup we'll be using
the hotkey from now on command shift or
ctrl shift G and then all I need to do
is select the little interior shape and
the bulk of the fox's body and choose
the unite option right here that's going
to take that and just merge it right
back together and we have a perfect Fox
ear now on the outside of the Fox so of
course we're gonna do the same thing
with the snout will select the snout
select the bulk of the fox's body
divide ungroup command shift or ctrl
shift G select the inner part of the
snout and the bulk of the Fox's body
choose to unite them boom it goes away
and now we have a nice little snozberry
snout and the rest of the fox's body and
it's a beautiful thing now what we want
to do here under the cheek of the Fox as
well as with the paw is a little bit
more complicated we'll come back and
touch on that in just a second I want to
just get these shapes cut out real quick
so we'll do the same thing here select
both shapes
we're gonna go divided we're gonna
ungroup them select the outer shape and
just delete it say these are even easier
select the big shape select the bulk of
the Fox divide on group select the outer
shape delete it
easy right easy divide ungroup select
that outer shape boom gone and the same
thing up here it's so easy it almost
should be illegal get rid of that whoops
what did I just do nope I don't want to
do that I want to select this interior
shape select the bulk of the Fox and
unite
those shapes there we go what am I
thinking and there should be something
else going on here what's this what do
we have here looks like a little bit of
a flat spot but I think there's another
shape and there look at that we can
probably can we delete those shapes let
me just highlight the whole thing what's
this little path there's something there
yeah look at that see that there's some
there's some stuff hanging out there
that we don't want and that might just
be a rendering thing yep there we go all
right let's turn the rest of the Fox
back on and that might be a little area
where we want to kind of touch that up
but I don't think we'll mess with it
here in this tutorial the main thing is
we have our nice crisp shapes and
everything is lined up now to mess
around with the shadow underneath the
cheek of the Fox we really we want to
get rid of let me just hide the Paul
real quick by the way just so it's not
distracting we want to get rid of this
little bit here that's hanging out over
the globe but we just want this to end
up being a shape overtop of the Fox so
what we're gonna do is we're going to
perform our divide so I'll select both
shapes and we'll go divided and we'll
ungroup them as well will delete the
outer shape we know that's junk
but for this inner shape here and don't
worry I know it looks a little funky
down here the way we're gonna blend the
gradient you'll never even see it I want
to copy this shape so I'm gonna go
command or control C and then I'm just
gonna select both of these shapes and
I'm gonna reunite them so it's just
gonna make one Fox shape just like that
and now all I need to do is go edit
paste in front and it's gonna paste that
shadow shape back in front so this is
gonna make sense later when we go and
have to apply a shadow to give his cheek
a little bit of definition but you'll
see when we get there and by the way
don't worry about this mess of strokes
coming together again this these fills
are not going to be stroked with
anything these are just our lines and if
they're a little messy around the edges
that's entirely fine
let's turn is Paul back on his Paul we
don't really need to do anything with
because this is just gonna be a shadow
later on and when it comes time to mask
in the color which we're gonna be doing
here momentarily we'll just be able to
copy the Paul over and it'll be able to
be part of our mask while still being a
little disjointed I think it'll be more
vet be more valuable for us in the
future to have the Paul disjointed so
that's what I want to do all right
speaking of masking let's select this
whole mess right here and go command or
control C
and I think I'm gonna group this so
let's go commander control G just to
group this up and we should probably
hide this will bring we'll bring some of
these strokes back in a moment I just
want to be able to see what happens here
with the blend so let's select the blend
here on our transparency panel which by
the way is window transparency right
there we're gonna double click on this
little thumb down it's gonna give us a
filled mask which is great
we're gonna go edit and we're gonna
choose paste in front we're just gonna
paste some lines in there we don't want
the lines we want to get rid of our
stroke so just hit the little slash and
here for the fill we're just gonna give
this solid white get okay and now you
can see we're beginning to build out
what is starting to look a lot like the
Firefox logo now what I can do I want to
get out of my opacity mask in this weird
layers panel so I'm just gonna click
here on my old blend the unmasked blend
but it still masks don't worry and we're
back here to our layers panel and here's
where we begin adding a little bit of
shadow to bring out some of the details
in this shape okay now before we
actually begin the shading process let's
create a couple of shading gradients
this might sound a little weird
probably because it is let's just create
a random circle out here just something
we can throw a gradient into so go ahead
and choose gradient there we go now what
I want to do is select the white color
point here and we're gonna go to the
flyout menu here in our color panel and
go RGB and I have a hexadecimal code to
punch in and that that is eight five one
F two five so it's a really like flat
red color and I want to do I want the
same color to be in the other gradient
stop as well so we're gonna go RGB or
new hexadecimal and I'm gonna go eight
five one F what was it two five I
believe same color and I'm gonna reduce
the opacity of this color stop to zero
so we essentially have what we
essentially have this flat red color to
transparent
I want to drag this out of my fill
swatch down into my swatches panel just
to save it for this project so we can
use it whenever we need it all right now
we need to do another gradient let's
select our first color stop here we're
gonna change this this is gonna be
another foreground to transparent this
give me another fill to transparent
gradient we're gonna go IDI to zero to
four just a much brighter red and the
same exact color for the other color
stop we're gonna go IDI to zero to four
boom and this gradient as well we will
drag and drop in our swatches
so we're gonna need quick access to them
because we're gonna use those here to to
work on shading all right I'm gonna lock
up my blend so I don't move it I'm gonna
turn my strokes back on you can see the
little strokes appear over everything
I'm gonna drag these above the blend so
we can see what we're working with
so let's begin first well let's actually
select this group and ungroup it I might
not have been thinking quite as far
ahead as I should have been a moment ago
command shift g to ungroup
let's grab his ear up here let's ditch
the stroke and let's go ahead and apply
one of our gradients so i'm gonna go
with the sort of flatter gradient and
i'm just gonna grab the gradient tool
and let's go ahead and pull up and pull
up a little bit further and this is
gonna be part and parcel of the
shadowing here on the ear in the
transparency panel here I'll probably
set this to something like multiply and
then just reduce the opacity to like 45%
now again we would really see what this
looks like if we got rid of the bulk of
our path here that is cutting it away
from us you can see how we just have
this now nice shadow division from the
body of the Fox to our ear just like
that it was that easy let's turn the
overall path back on all right now let's
grab his little snout and once more
we'll get rid of the stroke so we know
we don't need that and bring the fill
back to the fore and we're gonna go with
the less saturated of these gradients I
think this actually might be perfect
positioning and we'll try here I don't
think the multiply overlay the multiply
blend mode excuse me will work because
it's just it's not given enough contrast
a bump I think something like soft light
is what we want here and we probably
don't even need to adjust the opacity
let me just get rid of the rest of that
stuff yeah look at how I mean that just
looks perfect doesn't it it looks really
really nice so I'm gonna do that I can
probably actually shut off my overall
eye overall stroke I don't think I need
that right now let's focus on the shadow
here that's gonna go beneath his cheek
so we'll select the shape and we will
get rid of the stroke I'll bring the
fill to the foreground again I'm gonna
go with the flatter gradient as well I'm
gonna grab my gradient tool once again I
don't say yeah you know pull the shadow
through here maybe kind of sort of like
that you can see here see how it's
fading to nothing so if I just deselect
this you can see it just fades out to
nothing so I'll select that and we'll
try setting this to let's try soft light
first I think soft light yeah I think
that's gonna that's going to work for us
look at that it looks like we do have
just a little
extra path over there we'll just delete
that cuz we know we don't need it
shadows are coming together here for the
head of the Firefox and now for the Paul
the interesting thing about the Paul is
there's really just a little bit of a
shadow down here in the base or not the
base and just like the low-lying part of
the Paul so I'm gonna get rid of the
stroke here as well didn't mean to
double-click get rid of the stroke and
let's bring to the fill to the front I'm
gonna once again go with that darker
flatter red to transparent I'm gonna go
with my gradient tool and I'm just gonna
pull up a little bit right down here so
I'm just looking to give a little a
little bump a ruski of shadowy darkness
here into the bottom of the Paul maybe
something like that and we'll go with
probably soft light see what that looks
like and if I deselect yeah you can just
see I don't know it just comes together
kind of nicely there it's it's not
exactly how they do it on the Firefox
logo but that's not really what we're
shooting for here we're going based on
the sketch that I did and I think that's
kind of cool all right now let's go for
our tail notches here I'm gonna grab
this tail knotch
that's actually let's grab off all these
and I'm gonna get rid of the stroke in
one fell swoop
now these we're gonna go with the
brighter red to transparent gradient all
right that kind of lines it up actually
lines it up pretty nicely I think
and let's try setting these to the
multiply blend mode yeah I think well I
think we'll just roll with that leave
them very rich maybe maybe maybe reduce
the opacity a little bit what 85 percent
yeah 75 percent something like that yeah
that's that's kind of cool flatten him
out a little bit there a little bit
bigger and more saturated than they are
in I think the real deal Firefox logo
but I kind of like it I think we'll
leave it the way it is now up here we're
gonna also get rid of the stroke and
we're also going to make sure we set the
fill or bring the fill to the to the
front and give it this bright red at
gradient and here I will grab the
gradient tool and I'm gonna pull the
gradient back into it kind of like this
and I want most of this piece of the
tail to be covered with that kind of red
fading effect and here I think I'm gonna
try hard light and I'm just gonna reduce
the opacity because I want a lot of that
color to carry through and I want this
to really be a strongly colored Orange
which is exactly what will happen there
you see that just differentiates it
nicely from the the actual big part of
the tail all right so now we draw the
big highlight that's out on the tail
here and then we'll worry about the
shadow that kind of curves in off of
this in just a moment so let's grab our
pen tool and we're gonna begin
over here so I'm gonna kind of rely upon
my smart guide so what that means I
should unlock the blend so I can take
advantage of the points on the path
there or really I can lock the blend
what I should probably do is turn on the
big yellow path again because now I can
just say right there's an anchor point
cool maybe I'll bring the highlight off
of here so I'll hold down shift I'll
click and I'll drag I'll drag out a
point a little bit mm-hmm how do I want
to do this maybe a little bit like that
and you can kind of make this however
you want so what I'm going to do is I'm
going to pull the highlight in somewhere
up around here that looks cool hold on
altar option I'm going to pull a tangent
handle out around this way and what
we'll do is we'll loop this back around
to somewhere right around here something
like that and the key is we want it to
kind of end up lining up with this point
here on this little this little shadowy
area of his tail so we're just going to
pull this and try to make this like a
very gentle sloping shape and then as
we've done before alter option-click
there we can just kind of bump this
shape right out like this and we'll end
up cutting it using our using our main
path overlay this guy will use that so
let's just select this we can get rid of
this bright red ridiculous
gradient and let's just give it a yellow
stroke let's get our shape correct first
so we'll bump this up so we can see this
competing yellow shape make sure our
line looks right I think it looks pretty
good and let's select this and our Oh
underlying a Firefox stroke and we will
once again go to our path finder let's
go divided and ungroup so command shift
G I'm just gonna get rid of the stuff
outside of here we know that that's we
don't need that
and then what I want to do is I want to
select the highlight I want to copy it
commander ctrl C but then I want to
select both of those shapes and I just
want to unite them back together just so
we still have one contiguous and you
know whole underlying shape if we need
to make cuts later and then I'm just
going to hit command or control F to
paste that shape back in place we can
get rid of the stroke by hitting a
little slash and what we'll do is we'll
probably give this a white to
transparent gradient so I can hide that
big yellow outline just because we don't
really need it anymore
for the shape we don't let's go gradient
let's apply that red gradient again but
I'm gonna change the color stop to white
so let's push our RGB color stops all
the way over there's white there and we
got to get the red stop down here by the
transparent to white as well and we can
grab our gradient tool and let's just
kind of pull the tail highlight through
here and you can see the bottom part of
the shape really doesn't matter all that
that much because really a lot of the
gradient is gone by the time it gets
down there
all right I'll deselect that and if I
like it I'll reselect it and we'll go to
our transparency panel and this guy will
just get set to something like soft
light and you can see it's just a nice
subtle highlight there for the tail it
really adds an extra layer of
something-something there now in order
to create this shadow this is kind of
fun we won't take the shadow from this
exact point and bring it all the way
around to this point in the knotch oh
you know what this this tail highlight
this path probably should have come down
to here guess what we can still do that
I believe let's let's do a little
troubleshooting here let's select this
let's just save our white to transparent
gradient so we don't have to remake it
right just drag it to the swatches panel
and let's fill this with something
that's easy to see like hot pink it
doesn't look like it did much because
it's still set to soft light so we'll go
back to normal and let's work with this
real quick I can take my direct
selection tool and I can drag this and
you can see it's gonna like click me
right into that little anchor point so
that's really helpful and then what I
can do is I can bring this out here I'll
probably have to recut this shape no
problem okay we can do it very quickly
here let's just go through this together
let's learn together I'll drag this out
here great alright I think that's good
we need to fix this now as well so let's
go ahead and just really make sure that
we're pulling through here the way we
should
I think I'll swap my my fill and stroke
just so I can see what's going on with
the curve does the curve look right and
it doesn't quite look right doesn't it
adjust it a little bit
let's adjust it a little more this way
something like that that looks a little
bit better it still looks like this
handles not a hundred percent the way it
should be I think something like that's
pretty good maybe we'll pull it out a
little bit further here we want to try
to avoid any kind of herky-jerky looking
stuff right there that's the most
important that's the most important area
where that where the path kind of comes
together all right
that looks good let's turn on our
original path we'll go through that
little process again where we select
both paths and we divide them so we'll
go Pathfinder and we will divide and
then we'll ungroup command shift G will
select the junk out here we know that's
that's a goner and we'll select the
piece on the inside see I'll just match
the stroke that's totally fine we'll
copy it and then we'll select both and
we will just unite them again and we can
shut that path off and then just
commander control F to paste our new
highlight right back in place we can can
the stroke get rid of that go back to
the fill and just apply our white to
transparent gradient voila use the
gradient tool yeah this looks this looks
a lot better let's go with this let's
pull that let's maybe even try to pull
that highlight through the shape a
little bit more set this to soft light
and now I believe that will be lined up
a little bit more like it should be yeah
look at that it's so much better let's
work on the little shadow shape here so
let's grab the pen tool and what we'll
do is once more if I turn that path on
the the overarching guide path we have
that anchor point right there so I can
shift click on that I can pull an anchor
point out and we really this curve here
that's gonna come down and meet up on
with this point of his tail we really
want the curve to sort of follow our
highlight so that's that's what I'm
gonna kind of keep an eye on here as I
create this I certainly don't want it to
clash with it in any way so I'm just
gonna look that looks about right if I
accidentally double tap you can see our
fill is a little wild here in fact I'm
gonna get rid of that and let's just
give it that yellow stroke so we can see
what's going on I still have my path
active by the way don't worry and I'm
gonna increase the stroke to 5 points
and now we can just you know create any
old shape here that's probably good
enough and then I'm going to I just held
down my alt/option came in to pull a
tangent handle out here I'm kind of
thinking as I'm doing this hold down alt
or option click and drag to cause this
to meet back up in that corner and
here's where we want it we want to try
to make this look as natural as we can
so maybe I'll try to like split between
these two because this shape is going to
be the shadow so we'll try to have you
know almost equal sized shapes coming
out of this thing maybe something more
like that is natural
I try to adjust that a little tiny bit
something like that maybe like that yeah
something like that I think probably
looks decent right so now with this
shape I'll select it and here we can get
rid of the stroke once again now that we
know what our shape is doing and we're
gonna go with the less saturated red
gradient I think we'll use this what you
can see it applied the gradient to the
stroke that's why I usually bring that
fill to the fore and I'm going to add
the gradient I'm gonna grab the gradient
tool and we're gonna pull this gradient
right through now I want to be careful
that I don't bring the gradient to the
end because that's obviously an ugly
edge of the shape we want this to fade
out beautifully and if i deselect yep
fades out nicely now what we need to do
is set this to try the blend mode of
soft light and see what that looks like
yeah I think that'll pretty much work
for us let's hide that thick yellow path
where is that where is that coming from
there it is right there I can bring just
bring that up on top just so we can see
what's going on there and what I might
do is select this I think this this
needs to be a little fatter than it is
doesn't doesn't quite look right
something doesn't look right about it so
let me just click on the path out here
I've got the direct selection tool and
I'm just gonna try to make it a little
fatter
I'm gonna really bring this out this way
again I want to make sure that doesn't
necessarily clash with the highlight but
I still want it to be thick enough that
it makes a difference there we go
something like that I think will work
for us it's not perfect it still might
be too thick I could obsess over it all
night
I suppose all right let's just we'll
just stick with that I think for now but
this is all going to be you know yours
is gonna look different than mine mine's
going different than yours and the guy
next to you and the and the girl next
door so we're just gonna we're going to
roll with what we get at a certain point
now it's time to create the little
shadow here on the inside of the Fox and
this is kind of cool what we'll do is we
will make sure we lock up the globe
layer but we'll unlock all the rest of
the layers and I'll select all these and
you can see that we have a lot of
different colors going on and we got
this big blend so it's gonna be a little
difficult to create a shadow this is all
the more reason why it was important for
us to retain that path at least to the
extent that we did we kind of need to
add some shapes back into it those watch
how easy this is we want to add back in
a Paul so his Paul is right here so I'll
copy that command or ctrl C command or
ctrl F and I'm gonna get rid of the fill
and I'm just gonna add a yellow stroke
back on to this and bump this up to 5
points just so
can really see it right there it is I
can probably select that let's
right-click here on this poll and say a
range bring to the front that way we can
really see it and we really still can't
see it and that's because it is set to
soft light which I forgot there we go so
there we've got his Paul we also need
the snout other than that I think will
have everything because remember the
shadow is only on the inside here so
those are the only shapes we really need
so let's go to his snout which is right
here let's copy that commander control C
command or control F to paste in place
we're gonna get rid of our little
gradient fill we're gonna give it a nice
yellow stroke we're going to set it to
normal blend mode we'll push it up to 5
points for the stroke and we will bring
it to the front so I'm choosing a hotkey
command or control + the square brackets
to bring it all the way up to the front
all right cool
now that we have that I can select both
of these shapes so this is the yellow
stroked snout and the yellow stroked
bulk of the Firefox body and we'll just
unite those great and that'll do the
same thing here with the little paw and
we'll unite them and now we have a shape
that we can fill with a color which can
be our shadow and I think that color
will be the dark bluish purple color
which is the same as the dark color on
our globe so let's go ahead and just get
rid of this stroke but we should
actually learn from this let me undo
that let's copy this shape because
vectors are free so let's go commander
ctrl C command or ctrl F to paste in
front and we'll just shut this off we'll
call this like a Ridge path so we know
that's the original path and this will
be shadow so here with this now with
this new shape we'll get rid of the
stroke we'll go to the fill we'll fill
it with that purple color well oh it's
in front of everything let's drag this
down the layers panel and put it just
beneath the blend but of course above
the little glow because it's a shadow
and what I want to do is just begin
resizing this so I can just drag this in
a little bit you can see we're starting
to see a little bit of the shadow we
dragged it down a little bit maybe we'll
get a little shadow that way drag it in
this way a little bit we get a little
bit more the shadow there drag it up a
little bit on the bottom and get a
little bit of shadow there don't think
it's got to come in this way a tiny bit
and maybe down a little bit more from
the top still by the way it might be
helpful for me just to lock up the blend
let's try this again push this down a
little bit there we go something like
that's probably cool I want to make sure
I just see a little bit underneath this
Paul now we have a couple things going
on here we got this little wayward thing
hanging out
this over here this is probably too far
below his ear up here so all this is
easy to fix before we even set this to
anything just grab your direct selection
tool and we can hover over and just drag
these anchor points in it doesn't matter
if it's a mess in these other parts of
our shadow because well we never need to
see a shadow over there so that's
totally fine and here for the ear I
could select like both of these points
by shift-clicking them and just nudge
with my arrow keys and just say you know
what this shadow I just want it to be a
little bit more like that and if we
wanted you know of course we could mess
around and just get the angle a little
bit more perfect a little bit more
smooth coming into the ear shadow there
and you can spend as much or as little
time on the shadow as you want it and
then we'll select the shadow and I think
we'll set it to like I'll try the color
burn blend mode and then reduce the
opacity what is 35 look like this 35
looked good yeah something like 35 and
we can zoom out and there we have
created the Firefox logo in Adobe
Illustrator is it perfect is it exactly
the way that Firefox has created their
local absolutely not
but that's exactly why I love it because
this is my version of the Firefox logo
and you know what I'm kind of gonna
nitpick the shadow a little tiny bit on
that side there we go so something like
that and just that easily we create the
Firefox logo I guess took a little bit
of time but you know what we did it and
that's what counts and at this point
you're ready to take the artwork and
export it bring it wherever you want
share it with whoever you want yeah and
that's really it so thanks for hanging
out and checking this thing out with me
so there you have it it is indeed a
labor of love a lot of just fine
adjustments and things like that to make
this logo what it is I like the fact
that it's a little bit different than
the actual logo because it just shows
you know we we put a little
something-something into it we made it
our own in the interim now if you do
create your own version of this logo I
would love to see it I would love upload
it to your Instagram and tag me at my
Instagram handle is act cut fit you want
to make sure you actually tag me in the
image though so it comes through my my
instagram tagged images feed if you give
me a shout out while i do appreciate
that it kind of like it's here today and
it's gone tomorrow in my notifications
and i don't know how to get back to it
I think they just go away but if you
tagged me in the actual image then I can
get to it and I can show you a little
love and see what you do and also if you
prefer we also have a discord that we
just started discord server very own you
can head over there the link will be
appearing on screen there's also a link
down in the bio for that you can check
all that out join our little
fun community have a little bit of fun
with us and come hang out there as well
so for working with the pen tool and all
kinds of gradients in the blend tool in
shapes and all sorts of other things
here in Adobe Illustrator guys for this
one that's it get it got it good
Nathaniel Dodson Tuck vidcom I'll catch
you in the next one and before you go
make sure you subscribe to my channel
for more great tutorials every day also
by my course it helps us do what we do
and this channel is supported by viewers
just like you you can also just click
the thumbnail and watch another video
from this channel see you next time guys