Transcripts
1. Class Presentation: Christmas is a very
special time of the year when we share our
good wishes with everyone. In this class, I'm going
to teach you how to create an animated Christmas
greeting in the Adobe Fresco app
to surprise everyone. Adobe Fresco is a
free app from Adobe, in which we can create amazing illustrations
in a very simple way. This animation will contain some original houses
or buildings with Christmas trees or other
Christmas elements of your choice and the
simple text Merry Christmas. We will add animation in
several ways to create a personalized animated
gift that you can use this year to congratulate your people and to send
your Christmas greetings. We are going to start making
everything from scratch, so this class is suitable
for everyone who wants to make an original
animated Christmas greeting. I will teach you the basic tools and settings of Adobe Fresco. Then we will start
finding inspiration from real beautiful houses and
Christmas color palettes. Then we will sketch our design, and we will explore different artistic
digital mediums to select the most
inspiring to us. After that, we will
color the illustration and we will design our
own handwriting text. Next, we will start
animating the illustration, and I will teach you
two different types of animation in Adobe Fresco. Finally, we will export
the illustration as a gift ready to be sent to
our family and friends. All you need is your tablet, a stylus and the Adobe
Fresco app installed. Join me in this
class and prepare your original greeting
card this year.
2. Tools And Settings: Hello, and welcome
to this class. In this lesson, we will
take an overview of the basic tools and settings we are going
to use for this class. So on our iPad, let's open Adobe Fresco
and create a new document. We can create a new document
from recent document, safe documents or choose one of the standard templates for
digital or print document. Also, we can create
a custom document, and since for this illustration, I want to have a
squared document, I am going to set my width to 2048 pixels and my
height to 2048 pixels. Then regarding the
printing size, I am going to set these
to 300 pixels per point. Therefore, if I needed to print this illustration to create
physical Christmas cards, I can be sure that the resolution quality
would be high enough. However, keep in
mind that increasing the DPI will increase the
weight of the final file, and as a general rule of thumb, we should keep gifts
under 2 megabytes. We can also save this
document size for future uses to basically avoid repeating
all these process. But since I have
already saved it, I am going to skip this part. All right. Then we
create the document. Now we are going to
take an overview of the main tools that we
can find in AtobeFresco. The app is very intuitive
and easy to use. First, let's take a
look at the brushes. Adobfresco has three
types of brushes. The first one is
the pixel brushes. And as you can see, the app
comes with a big variety of pixel brushes to achieve different types of
artistic results. Of course, we can add new sets
of brushes to our library, importing them from our
folders or we can discover new brushes from Adobe frescos library
that at the moment, have been released
completely for free. So as you can see,
there are plenty of different sets that you can
add easily to your library. I have already added
quite a few of them, and adding new
ones is very easy. So when you see a set of brushes that you want to include
in your library, just click on the Bottom at, and it takes seconds
to install it. Now I can go to my
Pixel Brochures library and I will see the new
set already installed. Surely, for this class, we can check the winter
brushes and test some so we can decide which
ones will be useful. For example, I'm going to pick this tech brush and
see how it works. I'm going to pick
red color ideal for Christmas and
paint on my canvas. And this one has a nice texture that could be interesting for
my illustration. When we are using pixel brushes, that information will be
reflected on the layer panel. As you can see if I
hover over this icon, it says that this is a
pixel layer. All right. The second type of brushes
is the live brushes, and to me, these brushes
are really amazing. They can be used for
oil brushes effects or diluted color as they are very similar to
real watercolor. I'll show you how this works. I am going to pick this one, for example, and when I
paint with it on the canvas, you can see that
the strokes expand as if I were painting with
a real watercolor brush. The effect is incredible. Even if I paint over the previous stroke,
it blends together. This is a nice realistic result. But moreover, if I pick a different colors such as
bd yellow and paint over, both colors are going
to blend very nicely. As you can see, the ink still spans as it was real watercolor. If this is not enough with
the color picker tool, we can select multiple
colors as one color itself. I will show you
how. This tool has two options for picking a color as a solid
color as it is now. Or if we press the second
icon as multiple colors, and now I can move
around the selection on the canvas to choose the
color that I want to use. Let's say that I want to pick up this selection with a nice
blend of yellow and red. Then I can just grab a
live brush and paint. As you can see, the result
is very interesting. All right, I am going to undo
these steps as I don't have enough room on the canvas just by tapping with two
fingers on the screen. Also, you can undo by pressing this arrow on
the top of the screen. And finally, we have vector brushes with a
smaller selection of sets, but still enough to achieve
different artistic results. So as before, I can just grab a brush from the sets
and start drawing. Vector brushes are very sharp. They don't have texture, and also we can use only one solid color
to draw with them. Another thing is that
if we use vectors, we will have the information
in the layer again, as Adobe Fresco cannot mix pixels and vectors
in the same layer. Then we have the eraser
tool very simple to use, and then we have the smudge
tool to mix and blur paint, and this tool cannot be used with vectors,
only with pixels. I'll show you how it works over strokes made with pixel brushes. We can get really nice effects
with this tool as well. Then we have the
transform tool to scale up or down our elements, and this tool comes with
different options to bend, distort, or get a
different perspective of the selected items. We can also flip them
vertically or horizontally. Also, we will use the image icon to import images from
our different folders, camera, libraries, et cetera. Finally, on the right side, we have the panel for the layers that we
have already seen. We can click on the plus
icon to include new layers, and we can click on the e icon to hide or show the
content of the layer. In the property panels, we can change the fusion mode of the layer and also the
opacity of the layers. At the bottom, we have the motion icon that I will
show you later how it works. So these are more
or less the tools that we will be using. So let's move now onto the
next lesson. See you now.
3. References And Color Palettes: Hello again. In this lesson, we are going to get some
references for our design. I am going to open Pinterest. I have already created a board of beautiful
front wall houses. In this search, I want
to find pictures of lovely buildings that can
inspire my illustration. Mainly, I will pay attention to the composition
of the buildings, the roofs, the
windows, the colors. So when I see
something that I like, I can save it on my board
or take a screenshot of it. So in this process,
take a look at different pictures
that can inspire you. This one, for example,
is very beautiful, so I am going to save it. This one also is perfect for the colors and the
aesthetic of the buildings. I am also going to
take a screenshot. For the color palette, we can also search for Christmas color
palette on Pinterest. For example, I am going to
save this one in my pictures. All right. Now, I am going
to open Adobe Fresco, and now pressing the
on of the picture, my photo gallery will come up. In my gallery, I have included
different pictures of beautiful front wall houses and color palettes that inspired
me for this illustration. So I am going to
select this one. With the transform tool, I am going to scale it
up and when I click Undone Adobe Fresco will automatically create
a color palette. So I am going to find
all these colors by clicking on the Color
tool and going down, I will see the colored palette just created of this image. I am going to bring to
the app the image of the Christmas color palette
that I saved on my gallery, so I can have it
also ready to use, and here it is. It is as simple
and quick as this. As you can see, the
app is going to automatically include
all the colors that we have in the image. All right. I am going
to delete this layer by clicking on the icon button of the layer and selecting delete. But I'm going to keep
this image as it will be my reference picture
for my illustration. All right, let's start sketching in the next lesson. See you now.
4. Sketching The Illustration: Hello again. In this lesson, I am going to sketch
the basic lines of my illustration and make the composition that
I want to follow. I am going to reduce the
opacity of the layer. And now in a new layer, I am going to select
a pixel brush, such as sketching brush. I am going to grab a gray color. Alright, let's start sketching. I want to use three houses
in my illustration, but you can adjust this
to your own preferences. I love the pointy roofs
of the buildings, so I am going to include
these in my illustration. And then I am going to trace the windows and the
doors of the buildings. Okay, I'm going to
speed up this process. Et's take a look at the sketch. Since I am including a few
details in my drawing, maybe I need to scale
up the size of my file. So I can click on
the gear wheel icon. And here I can change the
measurements of the file. I am going to change it to 3,000 pixels and keep the DPI size. Alright, the size is bigger now. I want to include in the illustration two
Christmas trees. On top, I am planning to include the text
Merry Christmas. So more or less, this would be my design, including also some stars
decorating the card. Let's move on to the next
lesson. See you now.
5. Selecting A Digital Medium: Uh Hello again. In this lesson, we are going to make some tests to decide on the digital art
style that we prefer for our illustration
and the color palette. From the vast option of brushes that we have
included in Adobe fresco, we can test those that
are more appealing to us. For example, I am going to check the dry median and
grab a pastel brush. Now I am going to
pick up a color from the initial color
palette that I have saved like this beautiful pink, and I am going to
start coloring. Oh, and this is a
beautiful pastel brush with a lovely texture. So if I like this brush, I can mark it as a favorite, and it will be added
to this favorite list. Being easier to use. So we can try different brushes. Let's try markers now. And this is a completely
different style. I don't like it very much, so let's try another medium
that I really love ink. There is a long list of ink
brushes that we can test. So let's pick up this one
and see how it performs. Wow, this is amazing. I really love this texture. The edges are really nice, and I think this could be the style I want for
my illustration. So I am going to mark
this as my favorite. Sumi brushes are also
another type of ink brush that is very nice with
fantastic texture. So I will mark this one too. And the Belgian comics brush
is also one of my favorites. And I like using this
brush for the outlines. I'm going to try
now oil brushes. Let's try one to see if
we like the texture. Of course, this is going to
be a very personal choice. You can decide to use pixel brushes or maybe
you prefer to select pector brushes that will have a completely different
effect on the illustration. The idea is to keep the same style in the
whole illustration, take your time to test the different digital mediums to decide what suits you more. Fine. I can have an idea about
the style of this brush, and I'm going to continue testing this brush
with another color. You can color the whole
illustration to test the colors, and I'm going to
pick up this pink. And yes, I like this
color combination. Alright, I think I'm
finally going to select the ink style Forma
Illustration. I really encourage you to test different mediums before
going into the next step. Fine, let's move on to the
next lesson. See you now.
6. Coloring The Illustration: Hello again. I have here on my favorite list
the selection of the process I am going to
use in my illustration. I have decided to use the ink finish effect for my artwork and I have
my color palette ready. So let's begin coloring. I am going to create a new layer and grab the ink roll brush. Look at the beautiful
texture that this brush has. Let's start coloring
the first front wall. For the next front wall, I am going to select
a blue color. And I think it looks very good. Coloring is a relaxing
process, isn't it? I am going to paint all
these in the same layer. I'm going to pick a pink color. Maybe this one is
not the right color. I'll select a lighter color. Okay, much better with this one. For the roofs, I
am going to choose the same color of each
building, but the darker. Let's see how it looks. Now, in a new layer, I am going
to colour the windows and doors of the front walls with the darker tones of the roofs. And I use here a different layer because in case I need to change the color of the windows, I can do it easily if they
are in a different layer. For the trees, I am going to use a different
layer as well, and I will keep using
the same brush. And I am going to align
them with the houses. Now, I am going to reduce the opacity of the sketch layer, and in a new layer, I am going to outline
the sketch using the Belgian comic brush
because it has a rough edge, as you can see that matches the ink brush that we
have already used. All right, I am going to grab a darker color for the moment, although I will
change this later. I'm not going to draw
a perfect outline, but something more open, putting some more pressure on
some parts of the strokes. So I am going to continue
speeding up the process. All right. Next, I am
going to duplicate this layer as I want to
do a test and hide one. In the visible layer, I am going to block
the transparency, and I am going to try
to change the color of the outlines to white to see the effect on
the illustration. I am going to get a bigger brush and color all the outlines. The effect is very cool, and I think it's perfect as this is going to be
a winter illustration. I will need to adjust some
details like these windows, so I am going to select
it with the Lasso tool. And now with the transform tool, I can rotate it a bit. Okay, so now in the new layer, I am going to grab
a yellow color. I have to place this layer
on top of the windows layer, and I am going to color all
the windows for the moment. Maybe this yellow
is too intense, but I will replace it
later with a lighter hue. Okay, now in the layer, I am going to reduce the
intensity of this yellow. I can reduce the opacity of
the layer or I can select a lighter yellow hue and with
the transparency activated, I can paint over all
the windows again. Fine, let's move on to the next lesson to continue with the
process. See you now.
7. Animating Fixed Elements (1): Hello again. In this lesson, I will teach you how to animate fixed elements using one color. I have all my windows colored. Now let's animate them and
start with the fun part. With the layer of the
yellow windows selected, I am going to click
on the motion icon. In the new window that comes up, I am going to click
on the square, and here I can
duplicate the frame. I am going to repeat this process until
I have four frames. The final purpose of
this is to create different combinations of lights on and off flashing
in the windows. To do this, I am going to
select the first frame, and I am going to erase the yellow color in some
windows in a scattered way. So I grab my eraser
tool and start erasing. A in the second frame, I am going to erase
different windows. And I can check how
the effect is going. I continue with the
rest of the frames. Now, if I click on play A, I can see the effects and
if there are some flaws. Like in this window that I didn't erase in any
of the four frames. Also I am going to
color this window in some frames. Check. In the settings of
the motion tool, I can adjust the number
of frames per second, and that will create a
faster or slower animation. Okay, I'm going to add some more details
in the illustration as some shadow touches in the buildings and
Christmas trees. In a new layer set to multiply, I am going to add shades. Also, in a new layer placed
behind the buildings, I am going to colour
a light background, but enough to create some contrast with snowflakes that I want to include later. Okay, to get better organized, I am going to delete this layer. Also this one, and I am going to leave the
sketch layer for the moment. Alright, in a new layer, we are going to include some snowflakes to
animate them as well. I will select the white color, and in one of the winter
sets of my brushes gallery, I can find a brush with
snowflakes effect. Let's test this one flurris and see the beautiful
snowflakes that it creates. Wow. The effect is really cool. I am going to use this
brush in a scattered way. And now I am going
to animate it. So I click on the Motion tool, and this time, I'm going
to click on the plus sign. So in the new frame, I
am going to paint in the spaces where I didn't
paint in the first frame. I am going to create
two more frames and paint different
trajectories of the snow. If we play it, we can see the effect of the snowstorm
in the illustration. This looks really nice. I still have to
include more details, but let's move for
the moment onto the next lesson. See you now.
8. Adding And Animating Texts: All right, for our text, we can get inspiration from
Pinterest, for example. You can search for Christmas
funds where you can find different ideas to create
your own handwriting text. You can check original fonts, where you can pay attention
to how the letters are designed and the
decoration that they have. For example, this
one here is very original with the candy
cane decorative stripes. I suggest you take some time looking for fonts that
might inspire you. Of course, another
alternative to handwriting is to include text from the text
tool in a new layer. If I write my text, Now I can click here
on the keyboard icon, and I can select
a phone I prefer. These are all from
Adobe font so I can use any of them without worrying about the
license of use. But if you use phones
from other sources, always keep in mind that you
should check the license of use before selecting it
for your illustration. I can change the
color of the text and the size of the
font in the panel. Or I can change it directly
from the text box. So I am going to create
a new layer and select a new brush to prepare a
better sketch of the text. I have to tell you, I'm not
an expert in calligraphy, so I have to do
this very slowly, practically drawing each letter. I am going to speed the process. You can always add some decorative loops at the beginning or
end of each word. And I think this adds your own personal
touch to the design. In a new layer, I am going to write the next word Christmas. Okay, now I am going
to adjust the size of both texts and align
them in a better way. Now I can detect if I
need to modify something. For example, the T in
Christmas is too large. When I'm happy with
the new sketch, I am going to reduce the
opacity of both layers, and in two different layers, I'm going to start
drawing my two words. I am going to opt for a
calligraphy brush for my text. Normally, when you go up, the strokes are lighter
and when you go down, you add more pressure to the strokes. So
they are thicker. So now, I am going to block the transparency of
the layers and change the color of the text to one of the red colors I
have in my color plate. H. All right. Next, I am going to
animate both texts. So I click on the motion icon, and as before, I am going to duplicate the
photogram a few times. I am going to
change the color of each text using
the color palette that I have used in
my illustration. I make sure that
the transparency is blocked and I change
the color of the text. I do the same with
the next photogram and check how the
animation is going. Okay, it looks nice. Let's do the same with the other layer
with the word Mary. I can alternate the colors
to have a nice combination. And I can change the position
of the photograms by grabbing one and dragging
it to a new position. Also, I can include more photograms and
test other colors. So make different combinations
and play around with the motion effect as
this is really fun. All right, I would like
to include in the text the candy cane
decorative stripes that I spotted on Pinterest. So in one of the
photograms of each word, I am going to draw stripes
using a white color. Just like this. I will
speed the process. And this looks really cool. Alright, let's move on
to the next lesson.
9. Animating Fixed Elements (2): Hello again. In this lesson, we are going to include some more details
dude illustration. That will be also animated. I want to create
the idea of snow land contrasting
with a darker sky. So I am going to
grab my brush and I'm just going to paint on the
previous background layer, although you could use
a new layer for this. All right. I like how it looks. However, now the text clashes
a bit with background. So we can fix this by
creating a new layer. I am going to grab a new
brush with a blur effect, white colour and draw a
spongy cloud behind the text. And now, everything
is more integrated. About the Christmas trees, I am going to draw the
stars with the rest of the lights of the Christmas
trees in a new layer. Okay, I think it looks better, although maybe I
am going to reduce the intensity of the yellow. Much better with this one. Now, I want to have some light
reflections like a halo. So I'm going to grab this brush and choose
a lighter hue of yellow with some transparency and just draw a circle
around the stars. Next, I am going to create
some ornaments on the trees. So I am going to grab a pink
colour from my color palette and draw small and scattered
circles on both trees. Then I am going to grab
a different color, maybe a blue, but something more vivid than the
one I have used. Then maybe some Christmas red to draw the tinsel garlands. Oh Okay, this looks very nice. And now, of course, we are
going to animate these lights. So I click on the
Motion icon again. Now, I am going to
draw new lights in different positions to
create an nice effect. I have duplicated the
previous photogram instead of creating
an empty new one, but it's okay as I can just erase all the content
and draw the new light, the stars and the
Tinsel garlands. This would be the effect. However, in the
other animations, if I don't remember that, I created four photograms
per animation. I'm going to keep the
same number here. Therefore, I can just duplicate these
photograms and move them one after the other to have a more balanced animation with the rest of
the illustration. Okay, this looks better. Fine. Now let's move on to
the next lesson. See you now.
10. Animating Elements With Paths: Hello again. In this lesson, I am going to teach you
how to animate elements, drawing paths. It is super fun. We are going to
create flying stars. So I am going to create a new layer on top
of all my layers. Then I grab my brush, and I will pick a
solid yellow color. Then I start drawing my star. Alright, I have finished
drawing my stuff, but I think I'm going
to scale it down a bit. Next, I can add the halo effect. And now, I am going to
select a motion icon. But this time, we are going
to use the path option. With my stylus, I can draw a random path on the screen and the star
will move along it. Can you see it? It
is really nice. We can include multiple paths, and we will have multiple
stars moving along them. The effect is really cool. There are stars
flying everywhere. If I want to modify this, I can open the motion tool
and clicking on PATs, I can delete the paths,
clicking on the Xs. Okay, I am going to
draw some paths again. Now, in settings, we
can choose the type of repetition that we want to
have for this animation. And then we can also check different effects in the
panel of layers properties. This is also very nice
like this effect. So I encourage you to try this tool and play
around with it. And this is my finished
animated illustration. Let's move now onto the
next lesson. See you now.
11. Exporting The Animation: Hello again. In this last lesson, I will teach you how to
export the illustration. In the top menu of the screen, we click on this icon, and we can export it
in different ways. We can select exports, and this will give us options to export our illustration
as a JPEG, PNG, PDF, or PSD. Bear in mind that if I wanted
to export this as an image, I would only have one star here as the others
are just animation. So I should throw a new layer with other stars in the sky. To export the illustration
as an animated gift, I click on movement, and then I can include the
title of the Illustration. And select the type of
format gift in this case, and click on
Generate photograms. I can click then on
the Play button to see how it looks and
finally on Export. Next, I can save the image, and it will be added to my
photo gallery ready to be used if we need to reduce
the weight of this gift, we can do the following steps. First, I will make a copy
of this document as I always want to keep the original with a higher resolution. Next, click on the gear
wheel and click on change. Then blog the Pad log and enter the new
size for the file. For example, I am going
to set it to 300 pixels. After that, change the
DPI of the document, and I'm going to set these 272. When you click on Okay, you can resize
your illustration, adjusting it to the new Canvas. It is very easy. Now we can export it again as
we have learned previously. The size and the weight
of the gift will be considerably
lower than before. Alright, this was all. I hope you enjoyed the class, and I can't wait to see your Christmas animated
illustrations. Bye bye.
12. Project Of This Class: For the project of this class, you will design your own
Christmas greeting animation with Adobe Fresco. Along the class, you have all the steps that
you have to follow. First, gather some
references online for designing your
buildings or little houses. Maybe you can even design a small village or anything
that will inspire you, including Christmas
color palettes. Pinterest is a great
resource for inspiration. Next, sketch your
design and test and choose a digital artistic
medium for your illustration. There are many beautiful digital
mediums like watercolor, ink, oil, chalk, take
your time to desig yours. After that, start coloring your illustration and add some basic animations
in some elements. Next, try to handwrite
and decorate your own text in the way
I teach you in the class. Include some moving
animations in your illustration and export it and share it with us in
the project section. Remember that you can use the conversation sections to leave your comments if
you need some help. I'll be happy to assist you. Please, if you like the class, it is very important
for me if you can leave a positive review of the
class in the review section. Thank you very much for joining this class
and Merry Christmas.
Beatriz Pascual, Pattern Designer & Entrepreneur
