(upbeat music)
(cat roaring)
-: Okay, so now they're a little bit warmed up
and if you've got your tools ready,
I'm gonna go ahead and jump into Photoshop
and begin working on a client brief.
Now, this might feel like a ton of information at once
and depending on where you are in your illustration journey,
this may be a little bit overwhelming for you,
but have no fear, we will dive much deeper
into all of these processes and techniques
in the following weeks.
For now, this is just for you to get your feet wet
and to learn a little bit about my Photoshop workflow.
As a note, I will mainly be using hot keys here to work.
It's kind of like a second nature to me at this point.
I just always have my hand on my keyboard.
We will have a handy PDF for you to download
with all of this information on it
so you can keep it by your side
and use it as a reference at all times.
So, without further ado, let's dive right in.
(upbeat music)
Okay, so here we are in Photoshop, yay.
I'm gonna first open up the client brief before we dive
into the actual file.
So, here's the client brief
from a company named Tasty Tidbits and they've told me
that multiple illustrators will be working
on this same brief.
This company is a food blog dedicated
to sharing simple healthy recipes for busy people
and they're trying to create Instagram posts
for social media to attract a creative community.
For this particular project they're looking
to highlight four main ingredients
from various recipes on their social media
and they want these arranged as an Instagram carousel,
so it'll be square format.
It will have four ingredients
and then a final lockup illustration
that includes all of the ingredients together.
And if you don't know what an Instagram carousel is,
I'll show you on my own page right here.
It's essentially just a swiping post
where you can swipe between different pieces of content.
They can be either videos like this here or images.
Essentially the client wants five illustrations
in their Instagram carousel where the first image
is a still composition of the full lockup
with all of the ingredients together
and then the following four images
are each ingredient isolated on their own and labeled.
And we know that because the standard on Instagram
is square format, that's what we'll be using
here for this carousel.
Since they're looking at different illustrators,
you have the option to play with the style.
They have some really loose style references here
and what I can take away from these style references
is that they're kind of open,
so we have this line work very organic-looking style here
on the left and then in the middle we've got
this more vector-structured, playful, quirky style.
On the right there's a little bit more
of a painterly, hand-drawn feel as well,
but with more detail than the first one.
So, I can tell that they're really open-minded
for this brief and they really just wanna have
a cute Instagram illustration for their social media.
So, the first step of this process would be
to figure out exactly what I'm going to be drawing
and, for me, I'm always inclined to make something sweet.
I have the worst sweet tooth,
but I also love breakfast and this blog
is a healthy food blog.
So we really wanna focus on health here.
So, I've actually gone ahead and done
a little research already and I've decided
that I wanna focus on this recipe which I just found
on this random website, but this is totally something
I could of made at home.
It's just yogurt, bananas, strawberries, and granola.
Looking at all of these ingredients,
I'm considering the different shapes and colors
that will go into this illustration.
Already I'm thinking about how nice
the contrast between the deep red of the strawberry,
the light yellow of the banana,
and the clean white of the yogurt will look.
I'm also considering the variation and shape
and size that all of these ingredients bring to the table.
The tiny pieces of granola will be nice speckled
throughout the piece, tying everything together.
While a bunch of bananas next
to the medium-sized strawberries
will create some nice contrast.
I'm also getting excited about the idea
of creating some sort of vessel to hold the yogurt in.
So it's always just good practice
to think about the content of what you're drawing
before you dive headfirst into an illustration.
(upbeat music)
Now before we get too deep into our research
and concepting and sketching for this brief,
I'm gonna show you a little bit about my Photoshop setup.
Everyone likes to have their Photoshop set up differently
and it's totally fine if you don't do yours
the exact same way as me,
but I feel you might find some of these tips useful.
Okay, so what I have set up here
is basically what it would look like
if I downloaded Photoshop for the first time.
We have all these extra panels
in the top right over here in the bottom.
These are things that I don't really wanna have there
because they just take up space on my screen.
So I'm gonna go ahead and close those.
And I also am gonna close this Properties tab
because it doesn't really do much for me
especially in this project.
So I'm just gonna close that one, right clicking.
And personally I don't really have a need
for this color panel up here and these swatches
because I have the color picker on the left
that I can use whenever I'm choosing a new color.
So I'm gonna close that.
And then because I just don't need all this extra space
in the Adjustments panel,
I'm gonna make my Layers panel larger
by just dragging it
and one thing that I really like doing
whenever I open up Photoshop for the first time
is making sure that my layers
are cropped to the layer bounds.
So, I can show you exactly what I mean right here.
Okay, so I have a new layer here.
I'm just gonna do a little doodle on it.
And as you can see this thumbnail
right here is really small.
It's just kind of hard to see, at least for me personally,
especially on this big screen.
So, I'm gonna right-click the actual rectangle right here
and choose medium thumbnail
so I can see everything a bit more clearly,
but on top that what if I am drawing a tiny thing
in the middle of the frame?
Looking at these two boxes right here,
it's really hard to tell what's drawn in the middle
of this layer too.
So, I'm gonna clip this to the layer bound.
So, right-click the rectangle here
and select clip thumbnails to layer bounds.
That will make it so that your illustration
or whatever's on that layer
is the only thing visible in the frame.
So, it'll clip it so that you can see exactly
what's on that layer and this comes in handy a lot for me
because say I have like 100 layers in groups
and they're just really hard to sift through,
I can look at these layers visually
and see what they are especially
if I forget to label them, et cetera.
Imagine that this circle right here is a pupil of an eye
on another layer and I just can't find it
because I have so many layers in here.
It's easy to look visually at all of my layers
in this panel and figure out which one it is.
So I think this is really useful right here.
Okay, so now that I have all of this set up,
I wanna save this workspace
so that I can come back to it later
or if my Photoshop crashes and it goes back
to the essentials default workspace
we can recover this setup so you don't have to redo it
every time you open.
So, go to Window, Workspace and then New Workspace.
And I'm gonna title that
Illustration For Motion Test Workspace
and here you wanna select Menus and Toolbar
so that you can capture the different menus
and toolbars that you have on the sides here.
So, just press Save.
And then that will show up in your workspaces
so you can switch between them whenever you want.
So I have a separate one for animation as well as design.
You can also customize them for your projects.
If you need different toolbars open,
you can save that as a new workspace.
So after reading this client brief, we know a few things.
We know, one, it's a social media illustration.
Two, there's gonna be five assets
and they're all gonna be square.
It'll be for an Instagram carousel.
So, there needs to be one main illustration
and four smaller, isolated illustrations.
So we definitely wanna make sure we're working
in a square format.
So this is clearly not the right format for that,
so I'm gonna go to my finder and I just wanna show you guys
that I have templates set up to help me
just quickly select the size
that I want for the project I'm working on.
And just as an aside here,
Photoshop does have these templates that are already here
and you can set up your own templates
like I do have some that I use in here
the 1200 by 1200 pixels sometimes for Instagram posts,
but I really enjoy making my own templates
because I can take them with me from computer to computer
and I can also add things in like guides
that these templates here don't necessarily have
and I could even add in a color palette or something
if I wanted to create a special template
for a particular project.
So I have a 69 4k, 69 HD
which is 1920 by 1080 4ks.
3840 by 2160.
And I also have a higher res square for more print stuff,
but for this project I'm just gonna use a square 1500 pixel
because it's just gonna be on social media,
and we don't our file to get too big.
So I'm gonna select that and one thing that I have set up
in these templates is that I really like to make sure
that I have the center point ready
and, as you'll see, if I press Command + Semicolon
that will bring up my guides, so my guides are visible.
And this is just something I set up in the past
for my templates so that I don't have to redo this
and find the center point every time
I create a new document.
And you can find that yourself by using the ruler tool
CMD + R and just figuring out what the center point is.
But I highly recommend having templates set up.
It just decreases your set up time
and makes things a lot faster.
So, since I have this from a template,
I don't wanna save over that template
so I'm gonna just save it to my desktop here
and I'm gonna name it TastyTidbits_SB_01.
So, just looking at this file here,
if you notice it's RGB 8-bits 'cause it's digital
and we don't need that extra color information,
and then on top of that we see it's 15 by 15 pixels.
I like to keep things in 300 DPI
because I just never know if I'm gonna need
to turn it into print or up-res it at any point.
So I highly recommend working in 300 DPI when you can.
(upbeat music)
So I'm just gonna start
by illustrating the main food illustration first.
I'm gonna work with the full composition
of all the ingredients together
and then once I've done that I'm gonna break
that apart into four different smaller illustrations,
isolate the ingredients on their own
and those will be their own thing as well.
So, five assets sounds pretty intimidating
for a first project but really
it's just one and broken down for our client's needs.
So, for the sake of time in this first lesson,
I am not going to go deep into the concepting part of it.
You guys already know I chose a recipe,
but just so you know we will be learning
a lot more about concepting and researching
throughout the rest of this course.
So I've already pulled up some image references
that I think will be helpful for this project.
A lot of times I like to save my image references
to a folder on my computer.
I have photo references that I've gathered just so
I can see what the food looks like
in different shapes and forms,
but I also have style references.
I do this almost all the time for client projects.
I'll browse my Pinterest or I'll gather stuff
from real-life sources like books
and photos around my house,
but for this project since it's a quick Instagram project
and I don't have a very long timeline,
I just searched Pinterest for some things I like.
We've got a few things here.
As you can see, they're a bunch of different styles.
I wanted to keep the style pretty varied
so that I have a lot of options
and I also like to choose different styles
because I don't wanna end up copying one thing.
I just wanna make sure that my overall design
has little elements of each
but isn't necessarily copying the exact shapes
that I've seen here.
I really wanna caution you to not take too much inspiration
from other people's work.
We're just looking at this for a reference
to give you a feel for what the P should be.
So, I'm gonna pull my favorites into my frame
just so that I can use them as reference.
So here's something that the client had,
so I'm just gonna drop that in there.
And I'm gonna make, CMD + G,
I'm gonna make a group called Mood.
And I'm just gonna start making these images smaller
so they don't take up my whole frame.
I'm gonna turn off my guides there.
So, you can tell that we're kind of starting
to get a mood, like maybe
this one doesn't fit as well anymore.
So this is not necessarily what mines gonna look like,
but it'll just have some loose mood reference here
for me to reference if I need to use it.
As I'm looking at this,
a few questions come to mind like how can I make this
a little bit more interesting
than just some plain floating vector fruit?
This is a really nice design,
but how can we be set apart a little bit?
Maybe I add some ground shadows,
maybe add more than one fruit to each illustration
so that it adds a little bit of depth.
Maybe I can add a bit of ground line
or wood texture for context.
Could I include subtle bowls or vessels
to showcase each ingredient
or could I make those vessels just line work
so that the vessels can become the important part
so there's a little bit of visual hierarchy?
Or maybe the background color is different for each.
These are all things I'm considering
as I'm starting to sketch here.
So I'm gonna start sketching
and I'm just gonna make sure
that all of my sketch layers are in the same group.
It's just much easier for me to organize
and move everything around together.
So, I have the new layer here.
I'm just gonna press CMD + G and start sketching.
So as I mentioned before,
I think I'm gonna start by just sketching the full lockup
of all of the ingredients together.
So, the banana, the strawberry, the granola,
and the yogurt all together
and in my head I think the best way
to showcase yogurt would probably be in a bowl.
So I'm thinking it would be nice
to have a bowl with some fruit arranged around it
and maybe a spoon in the middle
just to keep it a little interesting
and I'm just gonna start sketching here
and walk you through what I'm doing as I go
and, obviously, this brush isn't great
for sketching, the one that I used earlier.
So I'm gonna find another brush, use my Brush Panel here.
And I've got a lot of this organized.
I really recommend that you organize
your brushes as well.
You can do that by selecting this Settings tool here
and going to Preset Manager,
and it's really easy to Add Folders, Load Groups,
Save Sets, et cetera.
But I already have all of this kind
of set up for myself here,
but we'll go a little bit deeper into this in later weeks.
So when I'm sketching I really like
to use this thin sketch brush.
This is actually the Kyle Webster brush
and a lot of Kyle Webster brushes
are available through Adobe CC Cloud.
He's got a lot of great pencil and charcoal brush tools,
some nice inking tools that I use a lot of the time.
I just kind of start with the basic,
five-point sketch brush tool here.
I'm just gonna make that black because it looks better.
So, for me, sometimes it's a little bit intimidating
just sketching and using a blank canvas.
So I'm gonna pull in some of my image reference here
and, as I showed you before,
I have these pictures of food that I've gathered.
So I'm just gonna drag some of those in.
I'm gonna pull all of these into my reference folder here.
So now that I've looked at this,
and I kind of have some thoughts,
like I wanna use this circle shape for my center,
I'm gonna go ahead and get sketching,
and a lot of times when I sketch I like to use
the Shape tool because it just makes things easier.
I will go back and trace shapes
so that they have a more organic, textured edge to them,
but right now since it's just an outline,
I'm gonna create a circle to be the centerpiece here
and I'm gonna try to make it into a bowl.
And, as you'll find out, I use a lot of CMD + Z
as I work, so don't be alarmed by that.
In fact, I just use CMD + Z
in real life all the time, it's probably bad.
I try to use CMD + Z on my sketch book.
I'm sure some of you guys have been there before.
Okay, so that doesn't really look like a bowl yet.
I'm thinking that maybe this circle
shouldn't be a full, perfect circle.
So, I'm gonna squish it down a little bit.
And since this is just a sketch,
it doesn't really need to be perfect yet,
but I feel like this looks a little bit more like a bowl
and since we have our bowl now,
we kind of need to add the yogurt.
So, I'm gonna just try to define the yogurt
by creating an edge for it inside of the circle here.
That should look something like...
Something like that, maybe not so detailed on the edge.
And that's really rough right now.
We'll probably go back and refine it a bit,
and there's my bowl of yogurt.
So I'm gonna actually make that into a group here
just so I know where everything is
and I can move it around if I want.
And I'm gonna turn that off as I draw the bananas
because I think it might be a little bit distracting
and if I go back to my reference
I can see that bananas are, obviously,
these curved, organic shapes here.
I think it would be kind of fun
to make them a bit more geometric.
So, I'm gonna start off just experimenting
and using the edge of a circle to create the banana.
And maybe it's a bigger circle
so that we can just use this wide edge here,
but I'm actually gonna go ahead
and right click the ellipse in my layer panel
and rasterize it so that I can just erase pieces of it.
So this is starting to look like
the edge of a banana, right?
And I like to rotate my canvas a lot,
and you just press R to do that.
It makes everything a lot easier and more fluid.
It's probably too skinny, so I'm gonna try it again.
Okay, so we're getting somewhere.
It looks kind of like a banana.
Bananas have this brown bit at the top
where they all connect, so I'm just gonna add that in there.
I'm gonna use E to erase and to change my brush size,
I just press these brackets left and right
to make it bigger and smaller.
Something else I really like to do
is I like to press Shift and select a bunch of layers
and press CMD + E which will just combine
all of those layers together.
And I'm doing this because I want to duplicate the layer
and I think while I'm sketching I can be
a little bit more loose and erase things
and flatten things because I'm not really worried
about them being used for animation or anything.
So, I'm just gonna use that flattened layer
and duplicate it by pressing CMD + J.
Pressing CMD + T to get to the Transform tool,
and just rotating the banana a little bit
so you can see the edge of it.
And I think that might be too much.
And I'm just gonna erase this part of the banana
that should be behind the other banana.
Starting to look like a bunch here.
I'm gonna take the original banana layer
and copy that as well so I can make
a third banana in the back.
Don't think I've ever said banana
this many times in my life,
but I'm just gonna make it a little bit smaller
so it kind of looks like it's further back in perspective.
Now I've got a little bunch of bananas.
So we got the bananas and we got the bowl.
I think the bananas would look really nice back here
kind of do like this force perspective composition
where it looks like we're on a flattened surface.
So, we're almost looking above it
and in front of it at the same time.
I'm not really worried about it looking super realistic
because the client just wants us to have fun with it.
Another thing I really like to do while sketching
is use masks because I'm not really sure yet
if I'm going to need some of the visual information there,
if I'm gonna move things around, et cetera.
I don't wanna permanently erase anything
as I'm working because I'm still playing around.
So, if I wanna hide the bananas behind this bowl of yogurt,
I'm gonna press this Mask button here on the bottom right.
I'll be using black and white to mask out the bananas
and if you haven't done this
in a previous class or anything,
this is basically just hiding information
from your group or layer so that
it's still there inside of your group.
You can turn your mask off,
but it looks like it's erased.
So, I'll use black to hide the information.
And if I decide I wanna show that again
and I'm in my mask layer
and my mask layer is selected and I press X
to switch my palette and I'm using white now,
I can reveal that information again.
So if I decide that I need something to show again,
I haven't permanently erased it
and I can still use it.
So we've got our bananas behind our bowl of yogurt.
So now I'm gonna draw a strawberry,
and a lot of times when I wanna draw something symmetrical,
I will just draw half of it and flip it on another layer.
So, here's my center line,
and the strawberry's pretty heavy up top
and when it comes down it gathers at the bottom.
So it's almost like kind of like a heart
and I'll press CMD + J to duplicate my layer
and I'm gonna transform that layer
by flipping it horizontally and just drag that over.
We've got this almost heart shape-looking thing,
but a pretty good strawberry.
So I'm gonna erase these center lines
by combining the layers CMD + E
and just erasing the one layer now.
So I've got a pretty nice looking strawberry shape there.
Maybe I want the top to be a little bit more curved,
so I'll adjust that.
But I also wanna draw these little green stem pieces here,
so I'm just gonna do a little quick swoop there
and I have a strawberry.
Just put some dots which we can detail this
a lot further later, but I think this is great right now.
So I'm gonna mask out the yogurt bowl here.
But I also think it would be nice
to add a little bit of depth
if I put one of the strawberries behind the yogurt bowl.
I'm gonna duplicate my strawberry layer
and I'm gonna put one even further back,
and I'm going to erase that part
of the strawberry I don't wanna see.
So it's just gonna be behind everything here.
It's just peeking out back there.
I think that looks pretty nice.
Okay so we have everything here but the granola,
and looking back at this reference,
I think it'd be really nice to have a spoon in here
just to kind of showcase the granola
and the yogurt together.
I think the granola should definitely be laying
on top of the yogurt because it would just
look really awkward if it was just sitting on the side
in a pile.
So I'm gonna turn that reference off.
I'm gonna make a granola group
and I'm gonna start by drawing the spoon,
and I'm gonna do that symmetrical trick again.
So I'm just gonna draw this center line.
Draw another straight line down for the base of the spoon,
for the handle, and as you can see,
I'm drawing extremely straight here
and that's because I'm holding Shift down
as I draw down vertically which locks my Brush tool.
It's a really nice trick I like to use all the time.
So now I'm gonna draw the bottom of the spoon.
This is kind of rough, but let's see how it looks.
I'm gonna copy that and flip it.
Put it together, and it looks pretty good.
So, let's merge that and erase the center line.
I have a nice little spoon there.
I think it would look really nice
kind of breaking up the frames, so I put it here.
It feels like it's competing with the bananas a little bit.
I think it would be nice to have this feel like
just a diagonal composition.
So what if I put it overlapping the bananas here?
I think that's nice, it adds a little bit of depth.
It keeps the composition diagonal,
but it also looks pretty awkward with the spoon
just sitting there, so I'm gonna make another layer,
draw some yogurt over the spoon and go back
and erase the part of the spoon
that's hidden by the yogurt.
So, it definitely feels like it's more in the bowl now.
I'm gonna go back and just erase
or mask out the part of the bananas
I don't wanna see and the bowl.
So we've got our spoon.
I think the best way to showcase the granola
would just to have it kind of be sprinkled throughout
because it's kind of an awkward ingredient to draw,
so let's just see what it looks like when I draw a few in.
I think that could be pretty nice.
Maybe we draw a few on the side here
just to kind of create some continuity throughout the frame.
Next to the strawberries as well.
And I kind of left this space in the middle here
because I think it would be nice
to see some cut up pieces of fruit in the center as well.
So let's draw a piece of banana here sticking out.
So I'm probably just gonna wanna see half of it,
but if we're looking at it from an angle,
this is kind of what a slice of banana would like, right?
And maybe you wanna see a little bit of strawberry, too,
so I'm just gonna draw a little bit
more strawberry right there
and that feels like a pretty cohesive sketch.
Sometimes I also really like to draw the shadows in
before I start filling it out.
So I'm gonna make a shadow layer here
and I'm actually gonna reduce, I'm using black,
but I think I'm gonna reduce it to about 30%
so it looks lighter and we have a lighter value there.
My first inclination is to just kind
of draw the shadow this way.
And fill that in using the Paint Bucket tool.
And like you also have a little bit from the strawberry
and then the banana shadow gets kind of weird over here.
Like I don't really know how that would look.
I actually think it would follow our diagonal a lot better
if we created the shadows facing the other way.
Let's draw the bottom of the bowl shadow over here.
We got 30% again.
We got a really loose shadow shape here.
I'm just gonna trace the outline of the strawberries
and fill that in and then for the bananas you would just see
it kind of hiding behind the bowl,
so it would be a lot less awkward of a shadow too over here.
Maybe you see a little bit of the tip
of that banana over here.
And I'm just gonna zoom out here
because I tend to get in this tunnel vision
where I can't really see the overall composition
well when I'm zoomed in for so long.
And since it's starting to fill up the frame a little bit,
I think I'm actually gonna reduce the size
of the entire sketch.
So, I've just grabbed the whole sketch group together
and I'm just gonna transform it
and just make it a little bit smaller in frame.
As you can see, we have this handy guide system here.
So that will tell us exactly when it's centered,
and, voila, we have our sketch.
So Photoshop has this really annoying thing
that happens when you fill in an outline.
Like, say you draw an outline in Photoshop
and you fill it with just a Paint Bucket tool.
There's gonna be this strange edge
between your outline and your fill.
There's just one or two pixels that aren't filled,
so it's just this clear edge.
This action essentially removes
that little extra bit of space
between your outlines and your fills.
So I'll show you how to set up these actions
and we'll also have some of these actions available
for you to download,
but I think it's really important
that you understand how it works
so that you can set it up for yourself in the future.
So after I show you how to set up this Photoshop action,
we'll dive right into color and start refining everything
and this is where everything really comes to life.
So there's this thing that Photoshop does
that's super annoying where when you draw a shape,
you use the Wand tool to select the inside of that shape
and then you use the Paint Bucket tool to fill it.
There's this really awkward space between your fill
and your outline and in the past I would go in
and just draw over all of that space layer
by layer to get it exactly how I wanted so there
is no extra weird detail there
but that's super inconvenient, right?
And it's super annoying to have to do that for every layer,
and it definitely takes up a lot of your time.
So, I wanna show you how to do this.
You draw a shape, select it, and then just press
a function key to fill it without that extra annoying space.
And that comes in handy a lot for me.
I use it all of the time.
So, I'm gonna show you how to set that action up now.
So, before we start setting up the action,
I'm just gonna ask you to draw a random shape
with a textured brush and I just like using
a textured brush for this because it shows
more variation in the line.
So let's draw that shape,
and then I'm also gonna ask you
to select the inside of that shape
using the Magic Wand tool,
and before we can actually make an action,
we need to actually pull up the Actions panel
which you can find under Window, Actions.
That should pop up on the right side
of your screen under the History panel.
So, as you can see,
I already have a few of my own actions here that I use.
I mean, here's my Fill tool that I use,
but to make a new action press this little paper button
on the bottom right.
And here's where we name our action.
So I'm just gonna name this one IFM-FillTest
and I really like actions
because they match your function keys
and you can turn your function keys
on in your system preferences so it makes
it really easy to just press those
without holding Command or Shift.
So, for the sake of this project I'm just going
to use F10 and press record.
So now that you can see this little red record button
is on, that means that any action or movement
I take in Photoshop right now is going to be recorded here
and Photoshop will remember what I'm doing so that it can be
used later for the action.
Make sure not to do any extra steps
because it'll just appear here and you might have
to start recording your action over.
To begin this action,
we're gonna go to Select, Modify, Expand,
and this little tool here is just going
to expand the pixel width of your selection here.
So, it'll actually make it so
that your Magic Wand selection overlaps your line from
your shape by however many pixels you tell it to.
So I like to use two pixels just
because it works from experience, so hit okay.
See that will appear there on the right side.
So from here the most important thing we need to do
is fill the inside of the shape with color.
So it's very important here
that you use the key Commend here instead
of the Paint Bucket tool just so that it can be used
for multiple actions in the future.
To do that, use the key Commend Option + DELETE.
This will fill the selection with the foreground color
and, finally, one more step over action.
We wanna press CMD + D to deselect
because we don't wanna have
to deselect every single time we do this action.
And from there just press stop to stop recording your action
and we have our action setup.
So let's just test that by drawing a new shape.
Selecting the inside of it
and then pressing F10 and, look, the action worked.
So anytime in the future now you wanna fill
a shape with color without having
a weird, squiggly edge between the outline and the fill,
just use this action.
I think it'll save you a ton of time
and make your workflow way more efficient.
Now that we've got our sketch down,
I'm gonna go a little bit further
into depth about color palettes.
Now for this illustration the client
is a healthy food blog, right?
So, we clearly don't wanna use any crazy colors
like fluorescent pink.
We definitely wanna keep things feeling natural
and organic and since we're talking about actual real food,
we want to use colors that are realistic
to the fruits themselves as in the bananas
will be some shade of yellow.
The strawberries will definitely be red
and anything green will be green.
The yogurt will be white 'cause it's vanilla,
et cetera, et cetera.
For the background color we probably wanna stick
to something that feels pretty fresh.
I mean this is a breakfast bowl we're talking about.
It's healthy, it's light, it's airy.
So imagine if we use a dark blue background.
That wouldn't really feel like a breakfast bowl, right?
That would feel more like a midnight snack.
So we probably wanna choose something like a light beige
or maybe even a light pink.
And then that means all of the ingredients
that we see will actually pop off the page too.
So, we just kinda wanna stick to natural colors here.
We just to get play around a little bit with the hues
and contrast between the colors and where everything
is situated on the page will help bring all of that to life.
Okay, I'm gonna start coloring,
but before we color I just wanna pick
a very broad, basic color palette
and I'm gonna make a new group that says color.
I really like to just scribble a bunch of colors
in the top right corner.
For this one I think it would be really nice
to just use a light, airy pink or peach
for the background and we can adjust all of this later,
but I really like to use fun colors
as I'm illustrating
because it just keeps the process more interesting for me.
So let's just say this is our background color.
So I'm just gonna draw a little swatch of that there.
And then for the bananas I wanna choose a yellow
because that's what color bananas are,
but I wanna keep it a little darker so that it pops off
the background 'cause if the yellow and the pink are
the same value, it'll look like the bananas
are being swallowed by the background.
I'll go a lot further into depth about value
in the next couple weeks.
So, let's go with this more muted yellow.
Although that looks really weird,
so I'm gonna select that and I'm gonna use CMD + U
to change the hue saturation.
I'm just gonna look at them compared to each other.
Maybe increase the saturation a little bit.
Press Okay, Deselect.
For the strawberries I wanna use a kind of
more natural red tone because we want them to look
like real strawberries, so I'll just select that.
Maybe it has a little bit of a orange hue to it
because that makes it more interesting
and then obviously for the yogurt we wanna it
to be white and the white will really pop next to the pink
and for the granola and the spoon
I think we should use a nice, warm brown hue.
So I'll just select a random brown
and that might look weird next to each other.
I actually wanna kind of change
this red to be a little bit more pink
so that it fits with the background better.
So I'll just play with that and here.
Maybe mute it a little bit so it feels organic
and then since all of these colors are warm colors,
I think it'd be really nice to use a blue or green
or something for the bowl so that there's something
to ground it and to contrast off of it a bit just
to keep everything balanced.
Let's just go with a darker blue here.
I don't know if that's gonna work, but we'll find out.
All right, now we've got our color palette.
I like keeping that on the top right
so I can just pick from it whenever I want.
Okay, first things first,
we're gonna fill the background color.
So I'm gonna label this background.
I'm gonna select using the Eyedropper tool
or just press I.
I'm gonna select the pink and then I'm gonna fill
the background with color.
And so now you can see our sketch
is sitting on top of this pink background.
I'm gonna take the sketch
and decrease it's opacity to 7% so it's super faint.
It makes it a lot easier when you're working
so you can actually see
if the shapes you're drawing are accurate.
You don't get confused by your sketch in the background.
I'm gonna make a new group and just name that Yogurt Bowl
because I'm gonna start with the yogurt bowl.
So let's go ahead and start filling in the yogurt bowl.
I actually really like the texture of the brush
that I was using and it was looking really nice
when I was showing you how to use the Fill action.
So let's just stick with that one.
I'm just gonna go ahead and start creating
the two shapes for the bowl, the top and the bottom.
And I like to rotate here because it's really sometimes hard
to get that exact circle shape.
And while I wish I was actually this fast
at tracing my own sketches, this is definitely sped up.
So, in this scenario I don't really mind
that the circle is a little bit wonky,
I actually kind of like it
because it feels more hand-drawn
which seems to be what the client wants.
So, I think that looks pretty good.
So I'm gonna fill that using my action that we set up.
And now I'm gonna go ahead and draw the bottom of the bowl.
And, as you can see, the top of the bowl
is covering this back part.
So it doesn't really matter
if I just close it with a straight line here.
So I'm gonna fill that as well.
So now we have our bowl shape
and it could use a little refinement, but here we are.
I'm gonna put the bottom of the bowl underneath the top.
And when I'm starting to do color I use clipping masks
a lot and we'll talk a little bit more about this later
how it can sometimes be harder for animators
to use clipping masks,
but for the sake of this first project
and just learning how to illustrate,
let's just go ahead and use them.
I think they're super useful
and it would be really hard for me
to work without clipping masks.
So as you can see from here, you can't really see
where my yogurt is supposed to go because my sketch
is hiding behind this big blob.
So, I'm gonna actually duplicate my sketch
and just flatten it using CMD + E.
And put it above everything too
so I'll have one sketch under the bottom unflattened
and I'll have the flattened sketch on the top.
And this just means I can see the sketch on top
and underneath of everything that I'm working with.
And so to draw the yogurt I'm gonna
select the top of the bowl
which I've just labeled and then I'm gonna press
ALT between the two layers
and that will create a clipping mask.
This is how I'm gonna draw my yogurt in
because I want it to be inside of the shape
so that if I go over the edge anywhere
with my fill it doesn't spill over
the edge of the circle shape.
Okay, so I've got this line here
and I'm actually just gonna connect the bottom
of it to the other side, so say we unclip it,
you'll see that it's an actual close shape here,
I'm just gonna clip that back.
Fill it in and voila, we have our yogurt.
And so you can see when we turn the bottom back on
you can actually tell that it's a bowl now
which is great because before it just looked like
a giant blob.
I kind of want the yogurt to feel more like
it's mapping to the edge of this shape, the circular shape.
So I'm gonna just make a couple adjustments here too.
Okay, so I'm pretty happy with that for now.
I'm gonna turn my sketch back on
and now that I have this blocked out,
I think I'm gonna go ahead and draw the bananas.
So, I'm gonna make a group for my bananas.
I really like to just block everything out
in simple shapes first, it gives me a better idea
of where color is gonna go, how the composition
is gonna look once it's colored in.
Maybe I'll be able to see if something looks too weighty
on one side or if the viewer's attention
is going to the wrong place.
So, let's go ahead and create the bananas.
All right and if you remember earlier when I was sketching,
I just masked the bananas out and so right now
it's really hard for me to tell what the shape is
because it's behind the bowl,
but I actually want to draw the bananas fully.
So in case I wanna animate them later or something,
I still have that information there.
So I'm gonna duplicate and move those bananas up top
of my color so I can see them and I'm actually gonna delete
the layer mask so I can see what they fully look like here.
I'm gonna use that as my guide for drawing these bananas.
So I'm gonna turn this sketch off
and just use the bananas
and this makes it much easier to trace.
And, once again, this is sped up
so that you don't have to watch me
painstakingly trace these bananas.
And using my color palette,
I'm gonna use that brown to create the top
of the banana, fill that in.
And there I've got one banana,
so I'm gonna make that banana into a little group,
and I'm gonna duplicate that banana
like I did in the sketch and put it behind the other
and then just kind of follow my guide here
to put it where it's supposed to be,
maybe decrease it a little bit in size.
I'm gonna do a third banana behind that one.
It's a little bit smaller.
And there we go, we've got our bananas.
So don't worry about the fact
that they're not really separated right now.
We'll play with that later when we get into texture.
So, I've got my bananas
and I've got my bowl of yogurt.
Now I'm gonna move into the strawberries.
So we're gonna start with the strawberry that's on top.
I'm just gonna name it strawberry top because why not?
I'm gonna select that red.
And just trace what I had because I already figured out
how it was gonna look in my sketch.
Fill that, even it out a little bit.
See how that looks.
So as I'm looking at this right now,
I can tell that the red of the strawberry
is vibrating against the blue slightly
because they're really close in value,
so I'm gonna just have my layer selected here
and I'm gonna press CMD + U and I'm gonna change
the hue, sat of this strawberry slightly.
Maybe I'll make it a little lighter
so that it pops off of the blue of the bowl a little bit.
Maybe increase that saturation slightly.
I feel like that looks a lot better.
And then I am going to add a green in
because I didn't add it into my color palette.
So, let's choose a more muted green.
I think a poppy crazy green would look insane,
so let's just do a light, natural green there.
I'm gonna use that green
to create the top of the strawberries.
I still think that green looks a little weird
against the red, so I'm gonna darken it.
I think that feels better.
I'm also gonna put that green layer of leaves
behind the base of the strawberry.
So now I have my main strawberry shape
and I'm gonna duplicate my top strawberry
and I'm gonna drag it behind the yogurt bowl.
So I'll name it strawberry behind
and I'll move that up so we have one
that's hiding behind another layer behind the bowl.
So I've got most things blocked out
but I still need to draw the spoon.
So, we'll add that spoon in
and the spoon needs to go on top of the bananas
because it's in front of them in physical space.
I'm gonna finish out that spoon
and so obviously we don't wanna see all that information
that's supposed to be hidden by the yogurt there.
So I'm gonna mask it out using the same brush.
And now we've got most everything besides the granola.
So, I'm gonna go into the yogurt bowl folder
and just draw some granola in there
so that if I decide to move the yogurt bowl or something,
the granola will be attached to it in the same group.
So I'm gonna just draw the outlines of all of them first.
Then I'm just gonna select, by holding Shift,
I'm gonna select the insides of all them,
the Wand tool, and now that they're all selected,
I can use my action tool to fill all of them at once.
Yay, that was pretty easy, huh?
Now I've got my granola.
And I really do like to label everything,
but sometimes I don't do it until the end.
But I think it's really important
to label things as you go which I'm gonna
go back and do that right now.
Great, so now that everything's labeled,
I'm also gonna go ahead and draw a banana
and a strawberry inside of the bowl layer,
so here's my banana.
And since we're gonna draw the side of it
and we know that the shadow's gonna be going towards
the right, I'm gonna make that side
of the banana a little bit darker.
So I'm just gonna use my color picker
to decrease the saturation and value and lightness
of the yellow and then make a new layer
so that they're on the same layer
and draw the side of the banana behind it.
Fill that in.
Make it a little darker.
Okay, so there's my little banana.
I'm gonna do my little strawberry.
And a good thing to note
is that if I was setting this up for animation
and the animator wanted
to show these fruits falling into this bowl
or they wanted them to pop out or something,
I would be drawing the entire piece of the banana
and entire piece of the strawberry
and since this just for Instagram,
I'm not gonna go too deep into that right now,
but if it's animated we should always try
to have that information there for the animator.
Finally I'm just draw a little specks
of granola on the background.
I'm gonna do that the same way I did it.
Maybe add another piece here.
Do it the same way I did it earlier.
Fill them all at once.
So it looks we've got almost everything now.
We just need to add the shadow,
but we can do that as we get into the detailing phase.
So now I'm going to use texture
and detail to bring everything into life.
I will go much further into depth on this entire process
like using different texture brushes
and how they apply in certain areas
and using masks and clipping masks, et cetera,
but for now I'm just gonna go ahead
and start detailing everything pretty quickly
so that you can see how everything comes to life,
but we will be going deeper
into clipping masks for textures,
deciding where to add detail in future lessons.
So here I really focus on adding
some shadow and texture to the bananas
so that we can see some separation between them.
I specifically chose to use a big, sweeping grungy brush
that has some natural variation in it
to quickly create an organic feel.
And as you can see here,
I'm actually also adding a couple little hard shadows
between the bananas to create some separation
between that top, brown part.
When creating texture I like
to keep everything on separate layers as clipping masks.
I then will use a layer mask
to mask out the parts of the texture I don't want
using the same brush.
Creating textures on separate layers
makes them much easier to manipulate or remove later.
If the texture was flattened
or drawn directly on the object it's texturing,
then it would be impossible to move around
during the animation phase.
(gentle music)
I always try to use the same texture brush
throughout my entire project
so it helps tie everything together.
Most times I'll use the same color
of the object I'm texturing with the layer
on multiplayer screen mode
to help it blend in more to the object.
Sometimes when detailing I like to use
the Free Transformer Distort tool
to adjust things to my liking.
I wasn't really happy with how my detail line
was turning out so I adjusted it's curve
using the Distort tool.
I'll also decrease the opacity of texture layer
on occasion to make it more subtle and natural.
During the detailing phase I often see parts
of my illustration that are bothering me,
like you can see here, and I'll go back in and adjust them.
For most parts of this illustration I would use
the same color as the object I'm texturing
as a multiply layer but in the case of the yogurt
I'm using a light pink hue to add shadow and depth.
This color compliments the background better
than using a gray which would be a variation of white.
I'm sure you can tell that it takes me a lot
of nitpicking and going back into all of my detail
to make sure I feel like they're right and don't feel
that if you're doing the same thing that you're indecisive
or you can't get it right the first time.
There's always this chance to go back
and change things before you send it off to the client.
It's completely normal to do this.
And, as I mentioned earlier,
we'll go much further into depth
on how I decide where to add texture
and adding detail in future lessons.
Okay, so now that I have all the detailing done,
I need to make sure I'm following the client brief.
So, let's go back to that and as I'm looking at it,
I see that they wanted their logo
and recipe name at the bottom of this lookup frame.
So, that's something I wasn't thinking about
as I was illustrating.
So, let's go back to my color composition
and I'm just gonna make some room for that type.
So, let's just grab the whole group
and decrease it in size like slightly
so we don't lose too much information
and then I'm gonna go into my file and grab the logo.
Drop that at the bottom.
So this composition still looks pretty awkward.
I think the illustration's still too big.
It's taking up too much space,
so I'm gonna decrease it again slightly.
So that it's more centered towards the top
without getting too close to the edges
and then I'm gonna make sure the logo
is centered on the bottom here,
but it also feels like something might be missing, right?
Like I think we might need some
kind of ground line or something.
So, I'm gonna go ahead and maybe draw
some perspective lines, see how that looks.
Maybe this is like a wood grain texture on the ground.
And as I'm drawing this, this looks super weird
because the perspective is pretty flattened anyways
and adding this more realistic perspective
is making it feel even weirder.
So, I'm thinking the right solution might be
to use just straight lines
to delineate wood in the background.
And here's what I mean by that.
I'm not too worried about them being evenly spaced
as long as they look evenly spaced to the naked eye.
So I've got my little wood texture group.
And I do feel like this line at the top here,
like everything's kind of competing up here
for the edge of frame,
so I'm gonna just mask out the top of the wood texture
so it doesn't interact so much with the top of the frame.
And since the composition is a little stronger now,
I'm gonna move all of that up together.
This one line is bothering me a little bit.
I'm gonna put them together as a group,
so food illustration
and then I'm gonna also create
a little group for the logo.
I'm gonna name it logo lockup.
But we also need the name of the recipe.
So, I'm just gonna call this the breakfast bowl
and I'm just using one of my favorite fonts here, Apercu,
but feel free to use whatever you want.
You can hand draw this front, it's up to you.
I think a little bit smaller
for some visual hierarchy, informational hierarchy.
Still feeling a little low there,
so I'm gonna move that up.
There's something about this wood texture still bothering me
a little bit so I'm just gonna decrease it a little bit
so it's less visual and taking up less of the frame.
I also am not super in love with the shape of this
so I'm gonna go in and adjust that a little bit.
And then I'm just gonna sprinkle
a little bit more granola in here for final touches.
I think that's looking like it's in a pretty good spot.
So, now that we have this fun illustration done,
we should not forget about the other part of the project.
For the brief we have those four individual illustrations
that we need to do of each ingredient.
So in this case it's gonna be granola,
yogurt, strawberries, and bananas.
So, we need to isolate these ingredients
into their own little frame,
add a little text box under each
and create those as their own little illustration lockups,
so I'm gonna go ahead and take everything
that's in this frame including the background.
So I'm gonna duplicate the background,
put it underneath the food illustration
and then I'm gonna group all those together
and name them Frame 01 Full Lockup.
And for Instagram carousels,
I think it makes the most sense
to just keep everything in the same file
because, at least for this project,
we're gonna be using the same assets
and it's nice to see them all together,
but we're not animating this project
and on an Instagram carousel you won't be seeing
the images together.
They're gonna be sitting alone as individual illustrations.
So we don't really need
to see them all lined up next to each other.
So we don't need Artboards here.
So, I'm gonna do the bananas first.
And when I create a new layer and group
and I'm gonna go ahead and name it Frame 02 Bananas.
And I'm gonna go into my full lockup food illustration
and I'm just gonna grab that whole banana group.
Duplicate it, drop it into my frame two.
Also we're gonna drop the background into my banana frame.
So, as you can see, I didn't texture everything
that I should have.
So we're gonna have to do a little bit of work here
to clean it up, but it's gonna be pretty easy.
So, I've got the banana centered.
Basically pretty centered in frame.
I'm gonna ungroup these layers
so I can see them all by themselves.
And then I'm gonna adjust that texture
so it actually works.
I'm gonna go into each texture layer
and make sure I have my brown selected
and just fill that in.
I'll go into my top bananas texture layer.
Fill that in as well.
Just make it flow a little better.
And, obviously, I didn't finish this line of detail.
So I'm just gonna go ahead and draw that.
Maybe take a little work to fix it,
but just need to add a little bit more detail.
So that it doesn't look like
there's randomly no spots on that part of the banana.
So wow, we've got our bananas,
but it does look kind of weird
that they're floating in frame, huh?
So, I'm gonna go and see my first frame
what color the shadow was
and I'm gonna add a shadow underneath all these bananas.
I'm just gonna treat these
as if they're just sitting on a flat surface.
So I'm gonna do a little wonky shadow here.
That's not very hard at all.
And so there we have it, bananas.
I'm also gonna grab the text
from the first frame and duplicate it
and bring it into frame two so that I can use the same font.
And I will type out bananas.
Make it a little bit bigger
so it's easier to see on Instagram.
Just make sure everything feels visually balanced.
So there's our bananas.
Now we'll move onto Frame 03 Strawberries.
So I'm gonna duplicate the background again.
And I'm gonna grab the strawberries I created
from the previous frame
to drag it into frame three, so we got that.
I think it's okay to increase the size of it just slightly.
I would only increase it by 10 to 15%.
We don't want it to get too pixelated,
but if we're gonna have a pile of strawberries here,
I think we can work with this size.
So, I'm thinking we can do something more playful here.
Maybe I'll just duplicate the strawberry
and start stacking it, maybe flip it a couple times.
We gotta make sure that we're paying attention
to the shadows here because this shadow
should not be on the opposite side of this shadow,
so let's flip it and just put it on the other side.
Do some things around and I feel like
that's already pretty fun for a little ingredient highlight,
just make sure it's centered.
Also I wanna keep the text in mind,
so I'm gonna duplicate that from the banana frame.
Just make sure it's staying in the same place
so that when you're swiping on Instagram
you don't see the text jumping around.
So that feels pretty good to me.
I'm just gonna add a little shadow here
as I did with the bananas.
Voila.
Let's see how they look when we go between them.
Feels pretty good.
I feel the bananas could be slightly smaller
just because the strawberries are smaller.
So we've got our strawberries.
Do a frame four, duplicate the background again.
This is gonna be our yogurt.
For the yogurt I'm just gonna grab
the yogurt bowl and the spoon, duplicate them.
And then bring that copy over to frame four
for the yogurt bowl and here since we're just showcasing
the yogurt, we don't need to see all this extra stuff.
So let's get rid of the strawberry, the bananas.
The granola, and we're just left with some texture here
and I might need to clean up that texture a little bit.
We need to get rid of these shadows.
These extra shadows, so not the spoon shadow,
but the other shadows.
Maybe fix the texture a bit
like add a little bit more so it doesn't look so empty.
I do wanna copy the shadow from over to two,
so I'll just select that shadow layer, duplicate it,
bring it up.
We have this extra shadow from the bananas,
but that can go easily
and then I will also just finish the shadows
since I clearly did not.
Voila, yogurt.
I will copy text from the last frame, duplicate
and bring it above the background layer
and clearly this one is a little bit bigger
than the others.
So we're gonna have to decrease the size a bit.
Another thing that might help here
is since the spoon is sticking so far out,
we could try moving the spoon down lower
in the bowl so it doesn't feel like it's touching
the top of the frame as much
and then we can move the shadow as well.
Just extend it a bit.
We name this yogurt, and I think that looks pretty good.
So we've got our full frame lockup.
We've got some bananas,
we've got some strawberries and some yogurt.
Now here comes the tricky one, the granola.
I've been thinking about what to do for this one
and I really don't wanna just show a pile of granola.
I want there to be a volume of granola.
I want there to be a large amount of it,
but I don't really want it to just be sitting
on top of the frame like it was in the yogurt.
So, I think I'm gonna draw a see-through glass jar
with just a chunk of granola in it
as one big shape and I'll show you what I mean.
So, I'm gonna make it like a mason jar I think.
And this is where I can use the symmetry check.
If I draw one side I like I'll just duplicate it.
And flatten that together,
make that a layer called jar.
Make sure it's centered, maybe extend the top a little bit
so it's not short,
and then I'm gonna draw some little rectangles for the top.
Then I can just make one of 'em.
And duplicate it.
Maybe it can be a little shorter so it looks attached.
I also kind of want to add some shine to it
so that you know it's glass.
So I'm just gonna draw some shapes here and fill them.
This is just kind of a random reflection.
I'm not really basing this off
anything, hopefully it looks good.
And then I'm gonna decrease the opacity on that
so it just looks like a really faint reflection,
maybe like 20%.
Maybe 30, but we'll see how it looks later.
And then inside the jar I want to draw a lump of granola.
So, I'm gonna take this brown
that I have from the other frame
and just start drawing the granola,
and here's what I mean when I say a lump.
Like a cloud lump of granola.
And that color actually looks pretty dark.
I think I ended up lightening the color
when I was adjusting the detail, I lightened it here.
So I'm just gonna color pick that.
And then I'm gonna use CMD + ALT + DELETE
to fill that layer with the foreground color.
I've got my little lump of granola,
but that doesn't really look like granola, right?
So, I'm gonna draw some detail over top of it.
That signifies that it's granola,
so got little granola pieces poking out here and there.
Maybe they're not fully formed.
Maybe we even have some full pieces of granola
poking out of the top.
And we see those little line.
And then perhaps to make it even more obvious
that it's granola we can draw a couple
pieces of granola laying on the ground next to it.
Draw the shadow.
So I'm actually gonna make that a separate layer shadow.
And voila, there's your granola.
We also wanna make sure if we end up sending this
to anyone or animating it,
we wanna make sure that everything
is labeled correctly.
So clearly like I went to this granola section
and we look in the jar and nothing is labeled
and for the most part if it's just groups, that's okay,
but you wanna make sure that everything's grouped together
accurately and has at least some
kind of title name to everything.
If I'm getting really OCD, I'll name everything.
Like this would be reflection
and this would be granola pieces, et cetera.
But sometimes you just have way too many layers
that's not even possible.
They just take up way too much of your time.
So if you can at least just group things
like you've got your jar
and for the yogurt you've got your spoon and your bowl.
At least you know where everything is and what group.
So, at least you can move just the bowl around by itself.
It's just a little more obvious when you're working.
So, we've got our full frame lockup.
We've got our bananas, we've got our strawberries,
we've got our yogurt and our granola.
Go back to the client brief,
just check that everything is correct.
Seems like it, seems like we've hit all of their notes.
At this point we can save everything out as JPEG
to send to the client and we'll be going much further
into depth on saving things out especially
for animation, saving out for print, et cetera,
in future lessons but for right now all of this information
is just here to help you get your feet wet,
get you familiar with my workflow
and with Photoshop itself diving into using
some of the tools that we used here,
hot keys, actions, the Fill action,
different brushes, et cetera.
Really this is a no-pressure way to start the course.
So, I know this was a lot,
so go take a little break, step back.
Get outside, stretch your legs
and then get ready to dive right into the exercise.
(upbeat music)
(cat roaring)