SECTION: 1
Overview
2:41
SECTION: 2
Industry overview
10:52
SECTION: 3
Drawing tools
16:21
SECTION: 4
Color
9:44
SECTION: 5
Shape tweens
11:30
SECTION: 6
Warnings & errors
1:10
SECTION: 7
Width tool
5:23
SECTION: 8
Class tweens
17:34
SECTION: 9
Fonts
6:16
SECTION: 10
Create a banner ad
16:44
SECTION: 11
Images
27:50
SECTION: 12
Nested animations
16:23
SECTION: 13
Sound
6:53
SECTION: 14
Project
9:34
SECTION: 15
Buttons
12:14
SECTION: 16
Masking & infographics
43:50
SECTION: 17
Bone Tool
6:53
SECTION: 18
Stop looping with JS
1:45
SECTION: 19
Motion tweens
16:35
SECTION: 20
Keeping file size down
13:18
SECTION: 21
Publishing
42:15
SECTION: 22
Conclusion
1:37
This course has been archived, the content is no longer up-to-date or relevant to most students.
Gradient for HTML5 Banner Ads in Adobe Animate
SECTION: 1
Overview
2:41
SECTION: 2
Industry overview
10:52
SECTION: 3
Drawing tools
16:21
SECTION: 4
Color
9:44
SECTION: 5
Shape tweens
11:30
SECTION: 6
Warnings & errors
1:10
SECTION: 7
Width tool
5:23
SECTION: 8
Class tweens
17:34
SECTION: 9
Fonts
6:16
SECTION: 10
Create a banner ad
16:44
SECTION: 11
Images
27:50
SECTION: 12
Nested animations
16:23
SECTION: 13
Sound
6:53
SECTION: 14
Project
9:34
SECTION: 15
Buttons
12:14
SECTION: 16
Masking & infographics
43:50
SECTION: 17
Bone Tool
6:53
SECTION: 18
Stop looping with JS
1:45
SECTION: 19
Motion tweens
16:35
SECTION: 20
Keeping file size down
13:18
SECTION: 21
Publishing
42:15
SECTION: 22
Conclusion
1:37
Questions
Student Gallery
Be the first to share something.
Course info
Overview
This course is for visual, creative people who need to start making HTML5 banner ads. I made this course for people that are struggling to get their heads around the new world of HTML5 advertising. This course is step by step with exercise files. I’ve saved a copy of each Adobe Animate file after every video so if you get lost you can compare your files to my completed files. At the end you’ll be able to create, test and upload standard banner ads.
This course is perfect for people completely new to the digital advertising world. We’ll cover all the basics. It’s also great for people who previously worked in Adobe Flash to produce SWF advertising.
Because this is such a new industry I’ll be around to help you with any questions. Use the forums on the pages and I’ll respond.
Thanks for considering my course. If you’re not sure if it’s right for you. Simply sign up, try it out and if you’re not happy I’ll refund you no problem. - Dan.
What are the requirements?
- You'll need a copy of Adobe Animate CC 2015 or above. A free 30 day trial can be download from Adobe here.
- No previous Adobe Animate or digital advertising knowledge is necessary.
- If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.
What am I going to get from this course?
- 53 lectures 3 hours of content!
- Forum support from me.
- How to build banner advertising
- How to keep file sizes down.
- Firm understanding of the publishing process for ad networks like Google Doubleclick, Adwords, Simek etc.
- Professional workflows and shortcuts.
- A wealth of other resources and websites to help your new career path.
What is the target audience?
- YES: This course is for beginners. For people who prefer not to work in code. Visual people. Creative people. Graphic designers. Marketers. Past users of Flash.
- NO: This course is not for developers. This course will cover standard animated banners. Not dynamic banners like expanding banners, video banners or game banners.
Course duration 5 hours + your study.
Daniel Scott
Founder of Bring Your Own Laptop & Chief Instructor
I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Downloads & Exercise files
Transcript
All right, in this video we're gonna look at gradients. Now, why does it get its own little video? It's 'cause it's, it's not hard, but it's, um, they've hidden a few little features. So what happens is, uh, say I want to color this head, but I want it to be a gradient. Um, I click first up in here in the fill and I pick any of these default ones. There's some really bad default ones.
So we're gonna pick the white to black, but there's some radio ones in there and there's some, uh, lovely eighties chrome and a rainbow one. Okay, so I'm gonna pick this first one, which is white to black. Click on him. Next thing I wanna do is I would like to go and change the colors. So to do it, I open up my color one. So I got a window, okay.
And I go to, where are you? And I go down to color. Okay, it's this little fly out one here as well. You can see here, this is the beginning of my gradient. Okay? This is a linear gradient.
So left to right. So I double click this little white house at the bottom here and I can pick another color. So I'm gonna pick, uh, and over this side, I'm gonna double click this end and I'm gonna pick another color. Okay? Bit of an awful gradient if that's okay. If you want to add more gradients.
So we've just got like one and two at the bottom there. You can click in the middle or anywhere along this line here. It doesn't matter where you click. And you can see here, I could pick another one. And let's go super hideous with an orange in there. Okay, so green to orange to blue.
Lovely. And you can see here, I can drag this along and how it affects this over this side. So that's fine. Next thing I wanna do is, uh, find the way it kind of flows and you do it using the gradient tool. Now the gradient tool is totally hidden in here. Um, so you'd think it'd be around the paint bucket or somewhere around here, but no, they hide it underneath this.
Underneath the free transform tool is the gradient tool. Okay? So you need to find him. And what you do then is this is how the extent of the gradient, how far it goes out. You can keep it a nice stripe or you can fully out if you wanna rotate it, use the circle one here and I can rotate it around. And this is my now lovely gradient.
Okay? So that's how to add a gradient and then how to go and style it. One last thing you might do is when you've got your color panel open, you can click add to swatches so that, now if I go to, um, coloring something else, so I'm gonna go back to my selection tool, double click this moon, go inside the group. And I wanna add this. You'll see down here is my tasty gradient that goes from green to orange to blue. All right.
That's it for gradients.
So we're gonna pick the white to black, but there's some radio ones in there and there's some, uh, lovely eighties chrome and a rainbow one. Okay, so I'm gonna pick this first one, which is white to black. Click on him. Next thing I wanna do is I would like to go and change the colors. So to do it, I open up my color one. So I got a window, okay.
And I go to, where are you? And I go down to color. Okay, it's this little fly out one here as well. You can see here, this is the beginning of my gradient. Okay? This is a linear gradient.
So left to right. So I double click this little white house at the bottom here and I can pick another color. So I'm gonna pick, uh, and over this side, I'm gonna double click this end and I'm gonna pick another color. Okay? Bit of an awful gradient if that's okay. If you want to add more gradients.
So we've just got like one and two at the bottom there. You can click in the middle or anywhere along this line here. It doesn't matter where you click. And you can see here, I could pick another one. And let's go super hideous with an orange in there. Okay, so green to orange to blue.
Lovely. And you can see here, I can drag this along and how it affects this over this side. So that's fine. Next thing I wanna do is, uh, find the way it kind of flows and you do it using the gradient tool. Now the gradient tool is totally hidden in here. Um, so you'd think it'd be around the paint bucket or somewhere around here, but no, they hide it underneath this.
Underneath the free transform tool is the gradient tool. Okay? So you need to find him. And what you do then is this is how the extent of the gradient, how far it goes out. You can keep it a nice stripe or you can fully out if you wanna rotate it, use the circle one here and I can rotate it around. And this is my now lovely gradient.
Okay? So that's how to add a gradient and then how to go and style it. One last thing you might do is when you've got your color panel open, you can click add to swatches so that, now if I go to, um, coloring something else, so I'm gonna go back to my selection tool, double click this moon, go inside the group. And I wanna add this. You'll see down here is my tasty gradient that goes from green to orange to blue. All right.
That's it for gradients.
