Gradient for HTML5 Banner Ads in Adobe Animate
Overview
Daniel Scott
Founder of Bring Your Own Laptop & Chief Instructor
instructorI 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.
Alright, in this video were going to look at gradients, now why does it get its own little video. It’s because they’ve hidden a few little features. So what happens is, say I want to colour this head, but I want it to be a gradient, I click first off in here in the fill and I pick any of these default ones. There's some really bad default ones so were going to pick the white to black but there's some radial ones in there and there's some lovely 80’s chrome rainbow one, so I'm going to pick this first one which is white to black, click on him.
The next thing I want to do is I would like to go and change the colours. So to do it, I open up my colour ones so I go to window, and I go to, colour, it’s this little fly out one here as well. You can see here this is the beginning of my gradient, this is a linear gradient so left to right, so I double click this little white house at the bottom here and I'm going to pick another colour so I'm going to pick you. And over this side I'm going to double click this end and I'm going to pick another colour. A bit of an awful gradient but that’s okay, if you want to add more gradient. So we've just got 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 can pick another one and lets go super hideous with an orange in there. So green to orange to blue, lovely, and you can see how I can drag this along and how it affects this over this side.
So that’s fine, next thing I want to do is find the way it flows. And you do it using the gradient tool. Now the gradient tool is totally hidden in here. so you think it'll 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. So you need to find him and what you do then is this is the extent of the gradient, how far it goes out. You can keep it a nice stripe or you can put it fully out. If you want to rotate it you can use this circle one here and I can rotate it around and this is my now lovely gradient.
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 colour panel open you can click add to swatches, so that now if I go to colouring something else, so I'm going to go back to my selection tool, double click this moon, go inside the group and I want to add this, you'll see down here is my tasty gradient that goes from green to orange to blue.
Alright, that’s it for gradients.