Story Type 01 - Sale Promotion

14 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€65.43
List Price:  €93.47
You save:  €28.04
£55.38
List Price:  £79.12
You save:  £23.73
CA$95.75
List Price:  CA$136.80
You save:  CA$41.04
A$107.11
List Price:  A$153.03
You save:  A$45.91
S$95.36
List Price:  S$136.24
You save:  S$40.87
HK$547.90
List Price:  HK$782.75
You save:  HK$234.85
CHF 63.27
List Price:  CHF 90.39
You save:  CHF 27.12
NOK kr772.60
List Price:  NOK kr1,103.76
You save:  NOK kr331.16
DKK kr487.88
List Price:  DKK kr697.01
You save:  DKK kr209.12
NZ$117.84
List Price:  NZ$168.36
You save:  NZ$50.51
د.إ257.06
List Price:  د.إ367.25
You save:  د.إ110.18
৳7,700.43
List Price:  ৳11,001.09
You save:  ৳3,300.65
₹5,837.33
List Price:  ₹8,339.41
You save:  ₹2,502.07
RM333.67
List Price:  RM476.70
You save:  RM143.02
₦92,489.99
List Price:  ₦132,134.22
You save:  ₦39,644.23
₨19,533.24
List Price:  ₨27,905.82
You save:  ₨8,372.58
฿2,588.46
List Price:  ฿3,697.97
You save:  ฿1,109.50
₺2,275.23
List Price:  ₺3,250.47
You save:  ₺975.23
B$358.08
List Price:  B$511.57
You save:  B$153.48
R1,314.42
List Price:  R1,877.82
You save:  R563.40
Лв127.95
List Price:  Лв182.79
You save:  Лв54.84
₩96,452.39
List Price:  ₩137,795.03
You save:  ₩41,342.64
₪267.23
List Price:  ₪381.78
You save:  ₪114.54
₱4,034.64
List Price:  ₱5,764.02
You save:  ₱1,729.38
¥11,065.06
List Price:  ¥15,807.91
You save:  ¥4,742.85
MX$1,201.03
List Price:  MX$1,715.83
You save:  MX$514.80
QR255.83
List Price:  QR365.49
You save:  QR109.65
P965.79
List Price:  P1,379.76
You save:  P413.97
KSh9,296.24
List Price:  KSh13,280.92
You save:  KSh3,984.67
E£3,349.82
List Price:  E£4,785.67
You save:  E£1,435.84
ብር4,026.64
List Price:  ብር5,752.60
You save:  ብር1,725.95
Kz58,375.85
List Price:  Kz83,397.65
You save:  Kz25,021.80
CLP$66,628.33
List Price:  CLP$95,187.41
You save:  CLP$28,559.08
CN¥507.11
List Price:  CN¥724.48
You save:  CN¥217.36
RD$4,113.13
List Price:  RD$5,876.15
You save:  RD$1,763.02
DA9,393.54
List Price:  DA13,419.92
You save:  DA4,026.38
FJ$158.35
List Price:  FJ$226.22
You save:  FJ$67.87
Q545.71
List Price:  Q779.62
You save:  Q233.91
GY$14,678.83
List Price:  GY$20,970.66
You save:  GY$6,291.82
ISK kr9,808.34
List Price:  ISK kr14,012.52
You save:  ISK kr4,204.17
DH708.72
List Price:  DH1,012.51
You save:  DH303.78
L1,243.72
List Price:  L1,776.81
You save:  L533.09
ден4,025.16
List Price:  ден5,750.48
You save:  ден1,725.31
MOP$565.76
List Price:  MOP$808.27
You save:  MOP$242.50
N$1,323.80
List Price:  N$1,891.23
You save:  N$567.42
C$2,582.07
List Price:  C$3,688.83
You save:  C$1,106.76
रु9,353.99
List Price:  रु13,363.42
You save:  रु4,009.42
S/263.57
List Price:  S/376.55
You save:  S/112.97
K270.82
List Price:  K386.91
You save:  K116.08
SAR262.49
List Price:  SAR375
You save:  SAR112.51
ZK1,859.31
List Price:  ZK2,656.27
You save:  ZK796.96
L325.94
List Price:  L465.65
You save:  L139.71
Kč1,644.39
List Price:  Kč2,349.23
You save:  Kč704.84
Ft25,663.75
List Price:  Ft36,664.08
You save:  Ft11,000.32
SEK kr762.14
List Price:  SEK kr1,088.81
You save:  SEK kr326.67
ARS$61,304.48
List Price:  ARS$87,581.58
You save:  ARS$26,277.10
Bs486.59
List Price:  Bs695.16
You save:  Bs208.56
COP$277,527.04
List Price:  COP$396,484.19
You save:  COP$118,957.15
₡35,650.64
List Price:  ₡50,931.67
You save:  ₡15,281.02
L1,732.56
List Price:  L2,475.19
You save:  L742.63
₲522,432.19
List Price:  ₲746,363.69
You save:  ₲223,931.50
$U2,704.33
List Price:  $U3,863.50
You save:  $U1,159.16
zł282.07
List Price:  zł402.98
You save:  zł120.90
Already have an account? Log In

Transcript

Alright, so right now I'm in After Effects. And before I jump and start creating stories, I would like to change my layout. So since we all know that Instagram Stories are in a vertical format, so I'm going to just simply drag this composition window, and just simply snap it onto the right side. So over here, you can see that we have this really nice vertical column. This will help you in the editing process. But this is not compulsory.

If you don't want to do this, you can just simply go with the default layout. So let me just adjust the layout, according to this, and now we are pretty much done with the layout. So over here, you can see that I have already created a folder in which I have imported all the images that I'm going to use for this course. And you can download these images from unsplash.com just like I did or if you have your own images, you can import them also. So first thing first we're going to create a new composition. So let's go to composition, new comm and make sure the common name is Main 01 since this is going to be our first story, and make sure the width and height are in a ratio of an 80 by 1920.

This will give you a nice vertical aspect ratio, which is required for Instagram stories. Also make sure duration is something around 15 seconds or less than 15. Since Instagram Stories are 15 seconds at most in length, so just click on OK. And here you can see that we have this really nice vertical panel. I'm going to create another composition for for our media. So let's call this media. And I suppose the things when I mean same, just click on OK. And I can probably change its name to media 01 since this is the first story, and after that I'm going to import images into this column.

So I'm going to use this image so once you're imported, you can press S key on this keyboard to scale it down and just play around with it position. Make sure it's on fit up to 100% so that you can see the entire window. So just play around with the position however you want. So I think this is looking nice. And I will go back into the main column. And I can simply track this media composition over here.

So we have a media set. Now let's create a square. So this story will tell viewers that a sale is going on on your website or somewhere like that. So in order to do that, we are going to create the box in which we will type information about sales. So just simply click on the rectangle tool and you can simply click anywhere and just simply drag around the mouse and in order to make it a perfect square Make sure to hold down the shift key something like this. And once it has been created, you can place it in the center of the composition using the Align panel.

In case you are not able to say this just go to Windows and click on this and it will enable it so select the layer just align it in the center of this composition like this. And after that, you can select the layer and you can also move the anchor point in the center. To do that to simply select the layer and while holding down the control key, just double click on this pan behind tool and it will make the anchor one in the center. Since it is already center, there is no need for that. And once you've created that, I'm going to select the text tool to write some text. So our first text is going to be sale since this story will give information about sale.

So just quickly align it in the center of this box and and after that, let's select the layer and make sure that single bond is in the center. Now again, I'm going to select this and press Ctrl D to duplicate it. And for this one I'm going to type summer since this is going to be a Summer Sale, and just place it on top of it. You can probably select it and scale it up. Something like this, and you can probably change its font. So let's go with this one.

Again, duplicate it by pressing Ctrl D or Command D, you can also select the layer, then go to edit, and you can duplicate it from here. So for this one, we are going to type, flat 60%. So whatever amount you want to give, you can type here to change its size so that it fits nicely. Yeah, so this is looking nice. Just play around with the positions. So once you're satisfied with your look, you can pretty much start animating these.

So first, we're going to animate our box. So in order to do that, just simply select the box shape layer, then press S on the keyboard to add a scale property and click on this stop loss to add a keyframe. Then move the keyframe for the part somewhere around one second, like this, and in the beginning we want the value to be zero. Now select both the keyframes, you can press f9 to easy's them or you can right click, go to keyframe assistant, then easy's. And after that, just simply click on this icon to go into the graph editor. And over here you can see that we have the nice curve.

So in case your graph is looking difference, you might be in the Edit value graph something like this, make sure to check this edit speed graph value. So just simply select the end point and you can probably change it looks something like this. And now if I play back here, you can see that we had the box animation happening. So this is exactly what we want. Now we are going to animate our text. So let's just place them accordingly like this.

So first, we're going to animate the sales tax. So for this We are going to create a simple position animation. So, under animate, just simply go to position. And from here, you can drop down the range selector and under the advanced property, we are going to change few parameters. Now first thing first we are going to change the position. So we are going to make the text appear from top.

So I'm just simply dragging it up like this. And in order to animate it, we are going to use the offset value. But first, let's change a few of the values. So for smoothness, we can go with them up. And now I'm going to quickly change the offset value. So in the beginning, we want the value to be negative 100.

And as the box appears, we want the value to be 100. So now you can see that the animation is happening, but it's not looking quite good. So in order to tweak this animation, you can play around with these high nice low value. So if I crank this up to 100% Now if I play back here, you can see that it has this really nice ease in the starting. And it speeds up at the end. So if I change this value to negative 100 and now if I play back, you can see that now our text is coming fast, and it has this really nice easing at the end.

So this is exactly what we want. So once you're happy with your text, you can probably change the keyframes to get different looks. Yeah, so I think this is working fine. So we're pretty much done with the sacred text animation. Now let's animate both of these texts. So select both delays, then press B on the keyboard for position and click on destroy pause to add a keyframe and in the beginning, we want these summer text to come from this side and the flat 60% have to come from the right side.

So once again, select the keyframes press f9 then go to the graph editor and you can probably change the value to look something Like this. So now if I play back here, you can see that we have this really nice animation going on. So as you can notice that there is one small problem that in the beginning, all the effects are visible. So we can fix that by simply selecting the shape layer and then press Control D to duplicate it, and just simply place one copy above each text. Keep on doing it like this, you can now select the track mat option and set it to all format. In case you're not able to see this option, you can simply click on this icon and it will make it appear.

So just simply change the track map to a format. And now if I play back here, you can see that now our animation is happening. So this is exactly what we want. You can also offset the animation. So let's select the summer and flat 60% and I can just probably hold them little bit further apart something like this. So now we get this kind of hook.

So this is looking nice. Now let's add the swipe up option. So as you know that Instagram stories, you can add a feature called swipe up. So whenever they are viewing your story, they can swipe up to go to your website or whatever place you want them to visit. So we are going to create an indicator for that. So again, we are going to select the rectangle tool.

And I'm going to simply create a rectangle, something like this, and just play around with its position like this. And now I'm going to select the sales text and just press Ctrl D to duplicate it and make sure the track mat is set to none. And after that, I'm going to double click and simply type swipe up and after that just simply place it on top of this layer, so that it is visible. Like this. Then properties Select it and scale it down. Something like this.

Also, you will notice that this is coming from top, but we want it to come from the bottom. So we can easily do that by going under the text animation and just add the y position value to zero. And then we can set the value to something like this. So now if I play back here, you can see that our text is coming up. Yeah, so this is looking nice. You can probably select the text and change its font, whatever you want.

So, yeah, let's go with this one. And I'm going to scale it down something like this. Also, I'm going to add a little bit of space between the characters, you can do that by simply clicking on tracking and just simply increase it up like this. So now if I play back here, you can see that now our text is coming up. Yeah, so this is looking fine. We can also end made this bottom layer so press P on the keyboard, add a keyframe just move it apart.

And in the beginning just move it below something like this. Then select the keyframes easy's live with the graph editor. And that's it. So this is looking nice. So we are pretty much done with this part. You can also add more details like your website name over here if you want.

But for this example we are going to just leave it over here. And we can do one more thing we can add some shadow behind this layer. So make sure you select this layer and just simply search for drop shadow effect. And you can just simply change it softness something like this. And here you can see that we have this really nice shadow behind this you can probably increase it opacity if you want. I think this is looking And we can also do the same thing with this shape also.

So for this one, we can change the direction. So yeah, so now you can see that we have this really nice shadow. So everything is looking fine, but still, our images not moving much so we can add some little bit of animation to that. So in the beginning, we can select the media layer and press S on the keyboard for scale. Click here to add a keyframe and let's move to the 15th frame and we can simply scale it up like this. And also we can select the layer, press P on the keyboard for position and let's just move with something like this.

So now if I play back here, you can see that we have this really nice minimal animation in the background. So we're pretty much done with this part. Now you can also enhance this by adding some light links to it. So if you want to do that, you can download a free pack from the link In the description. So once you've downloaded it, you will get a video file, you can simply import it in After Effects and then apply on top of this. So now here you can see that I have imported the file, and I've dropped it into the comm.

So just simply select it and press S on the keyboard to scale it up. And after that you can change the blending mode to screen or add whatever you want. So now if I play back here, you can see that we have this really nice slightly going on. If its intensity is too much, you can select the layer, then press P to open up opacity property and just slow down its value. So let's set it to 50%. So now you can see that we have this really nice slightly going on can also just place it on top of the media only.

So now it's affecting the background only and not the text itself. Yeah, so this is how you can create this type of story. Again, you can edit these and type whatever you want. You can add it over Little stuff like that the basic thing will remain same. Now the best thing about this approach is that you can easily change the media and this one. So if I want to change the image, I can simply go inside the composition.

And I can simply drag and drop whatever image I want. And if I could go back here you can see that the changes have been applied. So you can probably change its scale and play around with its position if you want. Like this. And there you go. So everything is already animated, so you do not have to worry about anything.

So this is how you guys can create this type of story.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.