And here we have our final logo
added to the portfolio and it's going to make
it stand out as designers and it's going to be really,
really, really great. Hey. Hello, guys. Today I'm going to teach you
how to make these covers. And to make these covers, we're going
to start with Adobe Illustrator. the dimensions of the file 808x632px I'm going to name it animated cover
portfolio. Okay. Where I created this new file, I'm
going to Paste a logo that I already had. I'm going to put this
in the descr
iption of the video so you can follow along this video.
So it's going to be fine. The first step is going to be resizing the logo in a size
We're going to feel comfortable using something like that will be fine. And then I'm going to make like a square
of the same size of the logo. And I send this to the back
when I select the logo here in Adobe Illustrator And we're going to
change the color of this to, 141. I think that's going to be good. Maybe make it a little bit greenish
just to make it go
a little bit, but not too much. have an idea. What if we take the color of the background
and we say just from there? Okay, sorry,
just making it lighter. Right? And then just bring it closer. So it gives us a greenish tone of the Y
that's going to make it blend better with the background. I think that's going to look really good. So yeah, we have now we have this logo
right here that we're going to use. The first step will be
to let me put the layers right here. It's the best. I normally use t
he layers
in the left side. I just got used to doing this this way. And what I'm going to do with
this is I'm going to take these layers and I'm going to select all the items
and so on. Group everything. If it's not easiest group, for example,
the logo, I need to group it and then I'm just going to make sure
that everything is on group, okay, I'm going to select everything. I'm going to click here
and this in this little part of the of the layers of my deselect
release into a layer sequence. Thi
s is an important step
that we need to do before we start working in after Effects. We're going to select all the layers.
We're going to take them out of the composition,
you know, out of the main layer. I'm not going to leave the main layer.
We don't need that for now. Rest our naming all the layers. I know this is tedious, but stay with me. This background. Okay, We're going to select G. this is the R, this is the E is the other e is n is the B, this is it. I am going to call this one. The the
thought of the highest leaf
and we're going to name the end So we have our layer separated as a layer,
a sequence. So we're going to take all this
and we're going to start press command shift s
and we're going to save this. And maybe in the desktop we're going to create a new folder,
animated cover, for portfolio Grace. Okay, Animated portfolio. But now save this and just press, Okay? In everything, the next step
will be going to after effects. Okay. We're going to create a new file
in after Ef
fects. And here the first step will be to create a new composition
for footage from footage. And we're going to go back to the desktop. And here we're going to select
the animated cover for portfolio and we're going to selected. And this is really crucial, guys. You get to change the import setting,
selecting composition, retail, retain layer sizes in our numbers
there an open is going to bring us this composition already into view. We're going to select this composition
that we have right here.
Everybody has yes,
we have the background right there. We're going to select all the letters. I'm
going to pre compose them. Okay. My name, we're in a name. This like a logo animation. And then we're going to do very simple
click the logo right there having these letters,
we're going to select the G, the E, the kn, the I,
we're going to leave it there. We're going to press P for position. We're going to create a position
keyframe. Okay. We're going to go back all the way to the beginning
and th
en we're going to change the position
all the way down, something like that. it's supposed to do this
when we play as opposed to go up when we play the opposite
with the other layer. So we're going to select
the are there E, the B and the N, and these ones are going to do
the opposite movements. So we're going to stand in the 16
frames are going to press B and then we're going to create an anchor point. Um, sorry,
we're going to create a keyframe and this keyframe
going to go all the way to the
beginning and we're going to change the position
of in the opposite to all the way up. they supposed to go like this. let me go to the beginning. Wait a second. they need to go higher. Like,
that will be fine. So we're going to have something
like they just joined together at the same time,
which is fine. The next step will be selecting
the leaf of the AI. We're going to stop there
we're going to press for scale, and then we're going to create
a new keyframe and we're going to move it to the 20
frames. And then, we're going to change this
to 100, sorry. And I'm going to click the first keyframe. Sorry about that. I'm going to put zero
and you go from zero like that. So it should be something
like really simple animation. Okay, But we got to spice it up.
That doesn't look really good. So the next step
I think we could do is selecting, um, the layers and then just pressing option
and the arrow in the keyboard. We're going to go one, two, three times. going to select again all the layers
one,
two, three times all the layers. I'm going to do it all over again,
you know, selecting all the, all the layers I want to three
and then we just keep doing it. think so. That's already was move.
Uh, one, two, three. And then point two, three
and here are three times as well. I'm just doing this to make thing go a little bit,
you know, not at the same time. So it's going to be like boom, boom,
boom, boom, boom. Now we have the animation right there. one thing I like to change that is it's
ki
nd of a slow, pressing option or alt. We're going to drag
the keyframes a little more together so they go a little faster and it's going
to give me something like this. Okay, we can use different types of ways
to make it look more, more like motion graphics
by selecting all the keyframes. And we're going to go to Keyframe
Assistant we're going to click isin
and it's going to fix the keyframes. Then they're going to make them
more snappy, it looks like more like motion graphics, and it's going to
it's
going to look kind of nice. Let me put them
a little bit more together. Pressing option. Try to drag them
a little bit more together. Maybe this is going to help option. Okay, Let me say like them again, pressing option, just make them
a little bit more tight like that. Now be fine. I'm going to be like,
okay, that looks actually cool. One thing that you could do,
or this is an extra thing. Normally I use this plugin,
this is not paid or advertised or anything,
but since these are doing af
ter effects, most of my stuff,
I do it with this plugging name motion for it's by empty graph
and when I put it the description below and what it does, it just helps me
create the default easings. And he has easings
already there in the software and it normally like to do. For example, this type of thing
would make it look a little better. I'm just double clicking it
and it's going to keep me at different type of easing a little bit
softer saddle. I'm going to take this one right here. I'm going
to do it with this one
more snappier and then I'm just going to okay, we have the animations there. Okay. This just to be a little bit separated
let's just do something like this. Okay? This is good. And this try to see the animation again. Okay. That looks that looks great. So the next step will be going back
to the animated cover and there what we're going to do
is we're going to create a mask. Okay. So when the logo comes in one second,
we're going to select the square and we're going to cre
ate a mask
that goes on top of the logo itself. Okay. Just to just to make it look
a little better when the animation goes. So it's going to be like this. Okay, here, start a little animation. One thing we can actually add to
this is the scale. We're going to have
a little bit of a scale to this. Let me just try to make it scale this. Make it in one second. Okay. Let's press scale right here. This taste into 100 and then we just make
it way bigger and let's see how it goes. There you go. It stay
s there in animation. And let's take this 2 seconds. 2 seconds. Okay. The next step will be to take this layers
and compose them. Okay, I'm going to press
and in the pre compositions, we're going to reduce the size,
we're going to go composition settings and we're going to change the the length
of this composition to a 0.3 seconds. Let me see your .0. 3 seconds going to be fine. .00. Okay. We're going to go back to the logo
animation made portfolio right here. It's going to be like a two sync
at
composition. Okay. And we're going to do
we're going to duplicate this layer. I'm going to select here time. Then I go to the select and then the new
layer that we created after Bresson. D we're going to command. D, we're going to go time and then we're
going to go to time reverse layer, okay? And we're going to try to match them
like this. This if this works, okay, let's save that. It should be like the lower combs there and it's supposed to go out. There you go. So we're going to go to the co
mposition
composition settings. And here in the composition settings,
we were going to do is we're going to change the time
of the entire composition to 0.0600. So 6 seconds length total. And we're going to press. Okay. it's going to be the animated cover for the portfolio,
and we should be good at this point. Okay. Let's try to see it again. Okay. It comes to logo there. It stays for a little bit
and then it goes out same way it comes in. That's a rather simple. So we're going to go to file
and
we're going to go to export and add to media encoder. Q normally use media encoder in this type of situations
is because he gives me more options. He's more flexible to give me different
formats, and it's going to help you a lot if you want to export better quality video
because he has more features is a really underrated program from Adobe,
so it's going to help you a lot. Okay here in media
encoder is going to send information from After Effects
all the way to media encoder. This is going to
help us a lot
because we are rendering or animated cover in media encoder. now that we have our covering media
in quarter, we're going to select these smart choices
8264. We're going to selected. It's going to do the dynamic link
to the server, It's going to what is going to take a little bit,
but I promise it's worth it. going to go into the settings
here in the medium quarter and we're going to make sure
that the format is going to be animated. GIF and we're going to scroll down
a little bit.
We're going to render at maximum depth
and we're going to use the maximum render quality. We're going to click the output
and we're going to select the output to be let me select here in the desktop animated
car portfolio and put final cover, create logo, animated cover as a name,
we're going to click Save Again. I press, okay, And we're going to click this screen
play button to start the rendering queue. here. We're going to just going to wait
until the magic happens. He's going to give us a gi
f at the end. That is going to be something like this.
Let me show you guys. I mean, I double click here just to show you
what I have right here In the final cover. We have this animated gif, which is fine gif or gif, but
the size of the of the gift is too high. it's 11 megabytes
and it's not website friendly. For this. I have this secret tip that I mentioned
at the beginning of the video. You get to go to a website you're going to
go to this website, Compressed Rt.com. Okay, here
we're going to
go back to our desk desktop and we're going to double click
the final animated gif that we created. We're going to drag it
on top of this queue. It's going to take a little bit, but it's going to do a conversion
is going to optimize as much as possible. This this is completely free, guys,
so don't worry about it. You're
just going to drag it and drop it there and it's going to compress it
as much as possible. And the great news,
this is going to give you a file with a really low, low like file
size
that is going to be really, really good for websites
and it's going to be really web friendly. we just wait to have
with this compression happening and then we're going to be able
to download it and try to add it to the portfolio guys. stay with me.
Now we have our file compress and it's going to reduce
95% of the size of the file. So this this is amazing.
This is great. It's not going to be heavy. So if we compare the normal version, which
was again, guys, it was 11 megabytes. Yeah, we com
pare that with this new
animated cover men, which is magnified. Look at this. This is going to be 542 kilobytes,
which is perfect for the use of purposes that we have right now. I'm going to go back to the
the portfolio guys that I was working with, you guys where I teach you
how to build your portfolio. And here we're going to create a new page.
Okay. is going to be a new page. We're going to name it Green Bean, where we're going to have the logo,
We're going to press. Okay, We're going to go b
ack to the pages. We're going to select
all the projects at home. And here is where I'm going to upload
a cover. It's going to ask me to upload a cover. We're going to go here,
We're going to upload an image. going to go back to the desktop,
we're going to double click here. We can have a the final cover and we're going to use
the minified version of the stuff that we created before. we're going to press open it's going to take a little bit,
it's going to upload it and optimize it for the web
An
d here we have our final logo added to the portfolio
and it's going to make it stand out as designers and it's
going to be really, really, really great. and is going to give us a wonderful,
wonderful gift in our portfolio is going to help
you stand out. It helped me get my first job
in the United States and I got multiple jobs just because of my portfolio,
because I actually went the extra mile and trying to animate the covers
of my portfolio in Adobe portfolio. if you feel like you learn someth
ing, you just give it a life
that'll help me a lot. Thank you so much for watching
and I'll see you again in the next video.
Comments