from Scratch
Are you looking to create a banner ad from scratch using Adobe Animate CC? If so, then this tutorial is for you!
In this tutorial, we’re going to walk through the process of creating a banner ad from scratch using Adobe Animate CC. We’ll start by creating our project file and setting up our workspace. Then, we’ll create our animation using a combination of art and images. Finally, we’ll add some interactivity to our banner ad and export it for use on the web.
Let’s get started!
1. Create a new file in Adobe Animate CC and set the stage size to 300x250px. This is the standard size for banner ads.
2. Next, we need to create our background. For this banner ad, we’ll be using a gradient background. To do this, simply create a new layer and select the “Rectangle Tool” from the toolbar. Then click and drag on the stage to draw a rectangle that covers the entire stage. With your rectangle selected, open the “Properties Inspector” and select “Gradient Fill” from the “Fill Color” drop-down menu. Then click on the “Gradient Type” drop-down menu and select “Linear Gradient”. Finally, use the color picker to select your two gradient colors. For this banner ad, we’ll be using a dark blue (#000000) and light blue (#0066ff).
3. With your background created, it’s time to add some images to our banner ad. For this example, we’ll be adding an image of a laptop and an image of a smartphone. You can find these images online or you can use your own images. Once you have your images downloaded, simply drag them into your project file in Adobe Animate CC.
4Now that our images are in our project file, we need to animate them. To do this, select both images on the stage and open the “Timeline panel”. Then click on the “Create Motion Tween button” and select “Position & Scale”. This will create keyframes at the start and end of your animation timeline which will allow us to animate our images.
5With our keyframes created, we can now start animating our images. For this example, we want our laptop image to move from left to right while our smartphone image moves from right to left across the stage. To do this, simply click on each keyframe in your timeline and move your image into position on the stage accordingly. You can also use the “Properties Inspector panel” to adjust your image positions numerically if you prefer that method over clicking-and-dragging them into position on the stage itself..
6Once you have both images positioned where you want them in your animation timeline, it’s time to add some text to our banner ad. To do this, simply create a new layer above your existing layers and select the “Text Tool” from the toolbar.. Then click on the stage and type out whatever text you want in your banner ad.. For this example, we’ll just be adding a simple headline that says “New Products”.
7With your text added to the stage,. it’s time to format it accordingly.. First,. highlight all of your text by clicking-and-dragging over it with your mouse.. Then,. open up the “Character” panel from either Window > Character or by pressing F6 on your keyboard.. In here,. you can change things like font family,. font size,. color,. etc… For this example,. we’ll just be changing our headline text color to white (#ffffff)..
8Now that our text is formatted how we want it,, it’s time add some interactivity to our banner ad.. To do so,, open up Window > Common Libraries > Buttons or press F7 on your keyboard,, which will open up a library full of pre-made button symbols.. Simply drag whichever button symbol you want onto
