Transcripts
1. Course Trailer: Hi. My name is Samantha Richardson, and I'm a graphic designer. And welcome Teoh, An insider's guide to creating digital ad campaigns. I've been working in the advertising industry for about five years, and I've found that digital as could be a little bit intimidating through this course, I wouldn't demystify what goes into producing a cross platform digital campaign. I'm gonna show you some tips and tricks for producing engaging designs and animation and ways that you can present to your clients. We'll be creating a Channel five banners, videos, brigade, social and guests for email blasts. We'll go over some simple digital marketing comes ups that will help you and form your designs will be using ILTER and photo shop to concept and design our campaigns. SPD ater to create some very simple animated S P G's flex. It'd Teoh. Anime and size are campaigns across different platforms and sizes. All the programmes featured in this class are free or have a free trial available so you can get started and testing them out. Agencies want you to think that creating digital bear adds it's complicated, but I'm gonna walk you step by step through the process. You could take your advertising or clients advertising into your own hands. A class project will be doing the lag campaign targeted to your pet if they were on the Internet. So hang back, grab a snack and I'll see you in the next video.
2. Tools: Hey, thanks for joining the class. We're gonna be using a wide array of tools to research, design and animates our acts. All the tools area that free or have a free trial. So you have no excuses. Some tools are optional to the course. Depending how risky your feelings so are essential. Tools are gonna be adobe illustrator and photo shop. We're also gonna be hopping in flex. It'd design Cloud and Google chrome are optional. Tools are gonna be Pinterest and SVG ator about links to these programs and any discounts or pro because I have and the class notes As we go through the course, I'm gonna walk you through why? I use each program. The the end of the day, you'll have the best don't on and I ain't even kidney. My can't be honest, underdressed
3. Class Project: our project is to create a mock ad campaign targeting your pet or your favorite animal. If they were on the Internet, what would be not do if he was on the Internet? Of course, To make an ad campaign, you'll have to come up with a mock product and brand tube. But don't get too bogged down on the details here. Look at this as an opportunity to make some fun designs an animation. Try thinking back to an idea that you've had for a design but never had a chance to use. I'm gonna walk you through my mock ad campaign. Flu flu is a brand that I made up that makes accessories floor fancy cops. In particular, Flu caters to long haired cats whose natural, regal beauty makes it hard for folks to see how stylish their accessories are. My inspiration, Theon is a total principal cat. He has such a luxurious man that I would never be able to see his collars when he was wearing them, but with the color made back proof, he'd be a fancy only outside of years on the inside. So let your pet the your muse and let me know what you're thinking of doing for your ad campaign on the class discussion board pace
4. Digital Marketing Strategy and You: All right. Buckle up, buttercup, cause it's going for a little ride down. Digital marketing strategy Loonies, depending on who you are, you may have different reasons for participating in this course. Maybe your ah designer working at a creative agency. Maybe you're a business owner trying to sharpen your brand and find a way to have more creative control over your product or maybe or somebody else. Some of you may work every day with the media specialist, and some of you are having to be your own. But whatever your job title is for this mock ad campaign, you're the designer. That doesn't mean that you can leave all the strategy and the thinking up to someone else. As a designer, it's extremely helpful to understand the basics of digital marketing. We're gonna briefly discuss three of the most support in digital marketing concepts for a designer to know K B. I's stands for key performance indicator. Basically, a K B. I is help businesses measure their success or performance across different platforms. You're making an ad. You have a goal. What's the one most important thing your client wants to accomplish for flu? We want folks to see our ads to move closer to purchasing are lush accessories. So some helpful metrics for us might be what percentage of people view that's our reach or click through on the act. That's the click theory KP. I would measure those percentages and could demonstrate our success numerically. More importantly, from a design standpoint, thinking about our KP, I helps understand the goal of our design personas and target demographics. A persona is usually a fictional character. The U composite to represent a segment of your target audience are persona is our V. I. P. We want to make sure our ad meets their needs for our class project. Your pet is the persona. My cat theon is a super fancy boy, so I knew that he would be interested in something that felt a little bit the furious and kind of fun and silly. Some ads have multiple personas that they're catering to. At the same time for this project, we're going to stick to one later on, though, I'll show you how you can use flex it to easily duplicate and modify and add to target different personas. As you work there, building your persona, feel free to post it in the class discussion board for feedback. All right on to the next concept. The funnel represents different stages of the consumers journey from the first contact with a brand all the way to making a purchase and total brand loyalty. Just like it's important to know who your audience is. It's also important to know what kind of relationship your audience has with the product. Will your ad be the audiences? First time learning about the product, for example, flew for is not a household name yet, so our ad may have some explaining to do a front. As your audience season engages with more of your ads and content, they move into the next phase consideration. This is where you have their awareness, and now they're learning a little bit more about you as a brand. Maybe they look at you as a resource and are engaging with your brand by visiting your blog's or watching your videos. The final stage before a conversion is decision. The individual is aware and interested in your product, but it's still weighing all their options. Really specific messaging. Such us an exclusive offer can really help guide the consumer Teoh making that purchase and the last area retention is aimed at facilitating our customer to make repeat purchases, referrals and testimonials so that new potential customers begin to enter the phone. Knowing where your target audience lands on the final helps you design and add. That tells consumers everything they need to know. While not wasting precious time and adds base for larger brands. You may have a number of different ads spending different platforms, targeting customers at different points in the funnel. These platforms are limitless but could include bear ads, paid social email campaigns, as well as YouTube blog's ASIO, even Tic Tac. Oftentimes your persona helps inform which platforms make the most sense for your campaign . Alas, I'm getting a bit ahead of myself for our course. We're not simply your brands, just a pipe dream. Our goal will be to make the audience aware that your product, because this you may be working with the media specialist. It's gonna be doing all this stuff for you, or you may be feeling both roles at your company. Either way, doing the basics of digital marketing can only help. Thanks to these strategies, we know what kind of ads may and how we want our customer to interact with it.
5. Deliverables: deliverables, All right. There are a few different levels for this project. They're gonna learn how to create. There's gonna be glorious. H melt by Better adds a smorgasbord of paid social, including instagram post instagram stories. We live and kick it old school, and I show you how to make a gift for something like a email campaign of based. Please deliver bulls off things that I've produced in real ad campaigns. But if you're feeling overwhelmed, don't worry. Could do as much or as little as you want to pick and choose which deliverables are most important to you. However, it's my job to show you how easy it is to push the bounds. It's easier than ever to create robust ad campaigns with a plethora of different ad types, formats and sizes. Just be sure your coloring inside the lines. You can check the spec sheet, and the class knows for recommended attributes for each ad. There's some strict rules for certain platforms, so check in that will help you stay in the know
6. HTML5: it's Jewel five Code is used to structure and display the vast majority of online content. You may remember using it to turn your text on your MySpace profile. Hot Pink designers also use it to create banner or display ads. Unlike its predecessor, HTML five lends itself to creating responsive animated designs that work on different devices and browsers, including Mobile I s O. Once you've made your banner ad campaign, it's handed off to a good friend, the media specialist who plays Is It and all those little quarters and niches armed webpages, the's Asian, All five adds, are provided in the form of a zip file, which contains a nation, all five code and all the reference videos and images. I'm gonna take you through the folder structure of an HTML five ad. If you double click here html five file, it's gonna open. And whatever program you have set as your default browser, we can also open that file up Neco text editor such as sublime text, and it will show the code that makes up our ad that flex it. It has generated no worries. We're not gonna be messing with any code. In addition, to the code file. Flex it. If it's gonna package of a few other assets in our HTML five Zip file, you're gonna have your backup, which is what I have pulled up here. Your backup image is the last frame of your animation, and it's served up in case there's any issue rendering the code in your HTML five. At the rest of the assets are just P and G's, J. Paige's and SP Jeez, that we've brought in from Illustrator and Flex a tive and flex. It'd optimizes those and helps us get a really nice low file size so that we can me our ad server requirements for a project. Let's say no bear ad can exceed 200 kilobytes.
7. Research Process: Here's the down low on Hatta. Begin defining a direction for your animated ad campaign. I like to start my design process by hopping over to Pinterest and creating a board. Pinterest is great for collecting inspiration and honing in on a particular looking field. As you can see, um, I use Pinterest for lots of different projects, such as fantasizing about the tattoos I'll never get, and the recipes all never cook. Here's a design board that I put together for flu for our project pen images that inspire you even if they're unrelated to the product that you've chosen. Another feature I really dig about Pinterest is that lets you explore related styles really , really quickly. Pinterest also has this nifty chrome extension, so you can collect inspiration on different sites and come back to them all in the same place. You can also download the Pinterest app on your phone and concept marketing campaigns from the comfort of your own toilet. Let's check out a few more sites to see where other brands and design professionals air. Doing dribble is a great place to get ideas for design styles, motion and illustration. You might also want to check out type wolf. They have some great examples of font pairings if you want to get some ideas for typography . Another good reference is giffey. Give. He is a great place to get inspiration for animation or to get in the Bible. That user generated lo fi content. I'm gonna try hearing, So I think that might give you some cores or results when it comes Teoh A dangly animation . Yeah, I dick this so we can just penned this Teoh Pinterest board. No, no, just save Tip Plouffe Perfect. A really great resource is moat dot com and basically, what that does is it lets you see real better at campaigns that have run before. But for some reason, the results are not always all inclusive. So sometimes it'll run but not show up in this search. And it'll lets you target like certain brands, Um so, like, glossy a and it will show me a bunch of different better hats that Chelsea has. And if they have an animation, if you like to go over, it'll play. Looks like all of these air static. We could also try Kat Graham like, um, fancy feast going. All right, I think we've seen all we need to see here. As she moved through your research process, Go back and UNP in some items that fill unrelated or two different than your man concept, trying really home in on your favorite ideas.
8. Asset Gathering: Sometimes when you're designing a digital ad campaign, all the assets you need could be provided for you. Other times scour shutter stock at 2 a.m. Wondering if the perfect image was a cruel farce devised by the design God's. Regardless, there some resource is that I found helpful to gather photography and bonds. It's natural that balance between asset gathering and design until you find a solution that works for your concept. For photography, I Sometimes he's unspool ash, which is free as you're looking through all thes photography. Resource is you can either build a collection native to that service, or you can penned them to your Pinterest board for paid work. I also like to use stock. See, which has a flat rate per size and you paper image, Pro Tip number one. You'll save yourself some extra time voter shopping. If you look for images that have seamless backgrounds, that way you could have them bleed into a solid color and re sizing them will be a sitch. Protect number two. Using a sequence of images is great for creating a narrative in your design. One thing to keep in mind, though, is that I wouldn't go more than three images, since it will give you a much higher file size. Since I do a lot of client work, it makes sense for me to have an Adobe stock subscription. Here's the collection that I put together for some of my flu images. Put step number three. Embrace Specter graphics wherever possible, wound that those into our project as S Fiji's. And generally they're false eyes is much lower. I'll show you some different ways off animating S P G's so that they can really come to life. You could wait until the next lesson to start developing your vector graphics, but just have it in mind that you're gonna go for more of a vector. Look versus an image one. Were you sectors to enhance an image based concept? Another important asset for developing your digital ads is typography. There are two different ways we can handle implementing topography into our animated digital lines. The versus lifetime life type works by directly importing the bond in to flex of its life type is most appropriate when we want our type to be simple, streamline and adaptive. It's gonna be directly edible, so you can make changes right there in flex a tive. In order to use life type, you'll have to either have an O t f off for TTF file of your font. Or you can use a dual font. Google fonts. Biden Awful are already loaded and reflexive, so you can find them there without having to do any additional imports. The second way to incorporate tomography and flex a tive. It's to use expanded type. Think of expanded type US type that you've created an illustrator that could potentially use ligatures type on a path multiple fonts on one line. This could be more fancy and designed type that you've been expert as an SPG and bring into flex a tive. An SPG is a vector graphic format, meaning that even though it's not live type, it's told in a scale really crisply because we're going Teoh end up expanding this and bring it in as a sug. It doesn't really matter what our original fought type is. For my project. I ended up using multiple fonts and incorporating both live type and S Fiji's. So either way, stick around and I got you covered. Regardless of which type format you choose. You need to make sure that you have the appropriate licence for your father. For some more info on using type and flex a tive, I'm Kelly Teoh Laxatives Knowledge Base in the class Notes for this class, A safe bet will be the stick to lost type and Google fonts. Lost type has a free personal use and demo license. Google fonts are open source, so you won't have to worry about purchasing a licence for those. If you like to incorporate some expanded type, feel free to use adobe fonts, creative market, whatever wacky font site you choose.
9. Concepting in Illustrator: next one will argue their how to begin concept ing and store rewarding your animated ad and illustrator. While you can certainly jump straight in the flex, a tive to concept and design there, I like to start an illustrator, especially if I know I need to generate design assets or storyboard different visual concepts quickly. Sometimes I even present these storyboards to clients. If I need to get approval on a direction or image use before I get too far into production , we'll begin concept ing in the 300 by 2 50 Better outsize with three R boards to represent three different frames. I'm gonna place all my assets within the illustrator file, including the topography and imagery I've selected from the last lesson. I'm just starting out a few different ideas for animation, so maybe the first idea is that it could be three different cats. The next idea is maybe, is that it's just the same cat in different positions. I really like how this cat kind of seems a little bit moody now. Some sparkles and since is the mock ad campaign. I'm gonna generate a few essentials, and I'd likely already have if this was a client project, starting with a logo. All right, I've been to a place where mostly satisfied with the's storyboard. So I'm just gonna create a pdf. That might be something that I could deliver Teoh client if they wanted to see a little preview. When sending a pdf to your client, make sure that you're only using the AARP board range of your big PF and not the individual cops. Also make sure that you have preserved illustrator at editing capabilities on checked and make sure you don't have any crop marks or pleats turned on. Hopefully all goes well with approval and we can move forward with bringing our concept in to flex a tive to bring it to life.
10. Exporting Assets from Illustrator: once we're good on a storyboard weaken. Begin to ready the file or production to export everything as individual assets to bring in to flex a tive. But before we did that, I'm gonna bounce over to voter Sharper Liquid. Since I downloaded these two images from Adobe Stock, I just went in and extended the background with the content aware fill, then used to airbrush to brush around the edges, will use the hex color for this blue to set the background and flex. It'd so re sizing is going to be a sitch. You also use a really simple curve fact to make the two images look more similar. Yeah, nothing fancy. So we'll just dio file save her web and books of those balls that limit for Apex ISS and needs to be under 10 megabytes, so shouldn't have any problem with that. Outside of these two frames, the rest of the assets will be setting up and exporting from illustrator. All right, illustrator, you want to begin pulling down your individual assets that you're going to need to export and bring into flex a tive? This includes Laura Little sparkly guys are type that's gonna have any ligatures or characteristics that will not lend itself well to live type. I like to do this method where I keep an edible typeset and then I'll also dragged down and expand that typeset. So if I need to go and change a word later, I still have inevitable version. And then I'll go to my are poured tool and I'll just simply click on the expanded type and will be able Teoh easily export spg from that. Now, this is our very square shaped, um, typesetting in this since we're using SPG is will need to make a horizontal version and a vertical version again. Just dragging down object expand appearance object expand, hit. OK, then click with your R four tool. Our little charm guy, He is gonna become exported as a PNG for your SPG es. Basically, all you need to know is that your type needs to be expanded of otherwise, you could have a lot of fun. As long as there are no images involved, images are going to hike up the file size oven SPG. You're gonna want to go through and name every our board, so it's going to be super clear what you're animating when you get into flex a tive after you labeled all your art birds, you'll want to rearrange your art board so that all your P and G's at SPG es or sequentially group together. Then you can go in and export all your SPV is at once and all of your P and G's once. All right now we should be good to go. Teoh hop over to flex a tive.
11. Bringing Your Concept into Flexitive: all right. The first step in bringing your concept into flex a tive. It's to set up a flex it of account. Well, dio free trial. All right, When you signed up, Alexa did. This is what you see. You can dive in more to the admin panel and add more users on the left side. Right here is sort of your navigation panel, where you can organize different products. Let's rename this move. You can even add different groupings like if you wanted to digital and one place or break it down by project, you could add like a new client. So this is all flip stuff. Let's say another one was like Boof. Maybe that's like a dog thing. Perfect the's, as are the equivalent of on a cookie show where they've already cooked at once and it's in the oven, ready, ready for them to fall out. So I'm gonna go ahead and move these over to our samples so we can kind of start fresh. Well, intern new title for the design, and you can go and set that is mock up in progress. So let's just say it's a mock up for now. Oh yeah, you can also like there's always organized user you can organize. By what stage and the workflow it is. We're gonna hop right in there so they have all these nifty little like templates that you can start off with. I always like to do things the hard way. So just going to jump in on a blank canvas and then Hala modules work inside. Flex it. You basically just click Teoh, activate a size here. So we're gonna start with the size that we can't update for bottoming. But a boom bring in that hex color that we talked about earlier to set our background. As we add more, more assets will be able Teoh, navigate the lira's panel, even add text shapes. Now we're gonna go over to assets, and we're gonna upload our assets that we created. All right, let's go ahead. I have our file pulled up. We're gonna use this illustrator file Teoh, refer back Teoh in flex. It'd to figure out where everything needs to sit. We're going to go to her assets from now. Just hit this ad to canvass button on this side panel. You have save your project, create sizes this is horrible. Activate you Size this later on assets animation. We'll get there in a bit. Preview. This will let you preview your ads and export. So we're going back to her size and we've got our image in here Now. We're just gonna go ahead and size puppy up, so I'm gonna do size position, and then I'm going to do Phil and Crop. And then you can position this guy a little bit where the layers pale. Now we'll go to size, position and then go down to the bottom and then where's his image size? We will go ahead and scale him up. So now we'll go ahead and go down and add in the text We went with SPG tax for this because of all the ligatures spg zehr good to use when you can't use a basic weapons because of certain design restrictions such as a drop shadow, radiant, etcetera What font are great to use because they don't take up much size as an SPG but can be easily updated and laxatives and apply to every size it appears on toe add this text will go ahead and hit to canvass and then well, just scale that up. Now we will go ahead and add are charmed the mix. So if the plus sign add can rece at that and won't skip that down. This is maybe where you need to seem to fit instead of actual size just so that it will let you access all of these little controls there some a few different options of how we can see our comparably quickly. One option is to go to this mawr section here, and then you can actually turn out lines off. A quick shortcut to show and hide outlines is to hit Q on your keyboard. And if you have an object selected celeb really used my key pad on my keyboard to kind of like move that around. All right, so we've got our first few elements, please. And now we can't really begin designing the rest of our frames until we start animating and the next one will go over how to begin animating and flex it
12. Animating in Flexitive: Now we've designed our first frame. It's time to enemy flex. It uses frame based timeline that is easy use and scalable to get started. Hit the start animating button and by default, everything will be head. So we're just going to select each of these elements. Then we'll go to animation effects. Make sure that each of these air now showing instead of hidden And now we're going to set the charm animation to swing. We're going, Teoh set the text to fade, right. So now we're gonna add in our next frame. This little pale here allows you to see all of your frames. We're going to switch to an in frame view with all of our selectors checked in. So delay is the time in between your friends and duration is the amount of time that your animation takes place. Typically, how I prefer to work is to set my delays to zero and to set my duration for a consistent amount of time. Say one second the later zero duration of one. All right, so in our first frame, we've got our term singing and we've got our text fading into the right in our second frame . No action happening. You could also do this by adding a delay. A one second delay. But this will give me a lot more customization if I want an animation to happen in another size during this one second time for him. So now I'm gonna add a another frames. Now we have three frames. I will set the delay to zero. I'll make sure the duration is one. Now, I'm going to tell the text to fade out to the right, and that's it for frame three for frame four and set. Mine. Delayed a zero again. I want this guy to just hard cut out. So in order to do that, I'm just gonna hit high. Also in a deal. Hard cut on the charm. Next, I'm gonna bring in our frame to image. If I see this, this means that I still have something selected. I don't want to swap, So I'm gonna make sure I'm clicked off and I'll just hit at canvas. I'll go to size and position and bit and crop, and I'll do a zoom and actually need the cat to be on opposite sides. Old do flip horizontal. I'll add in our flu flu go charms. You can also use your transform controls an illustrator to get the same with of different elements. So I go and click on the logo here, and I got on my transform controls. It will tell me that it's roughly 91 pixels, so I can just go in to flex a tive and size and position an element size and just said that to 91. I actually like it being a little bit larger, so I'm gonna put a fact the way it waas. But that's kind of a nifty trick that I found getting things to match your scale on Illustrator. I'm just going Teoh duplicate this four more times. So copy and paste. Now I'm gonna bring in my or Jack these guys around Adama term. All right, so now out some simple animation for this frame sold it to the animation panel. I want on this frame the flu flow go to have a fading pulse. Charms for fancy cats holds to fade in, and then we'll have Virgil come in, have a little swing. Now we're gonna add a new frame, and we'll have our center delayed zero and we'll have our kind of hold moment. So no animation forefront five Then we're gonna add a frame. Six set are delayed 20 for frame six. We're going to set a fade out on the charms tax So we'll just click on the charms texts and do fade out And then on the stand slide we're gonna fade in our offer We're going to import if on and live tax directly into flex a tive. So how we do that is go to the add text Peel then already added the thought. But I'm gonna show you how you can add in a new font. Upload custom font We're gonna hit open now we're gonna goto illustrator file We can go ahead and copy this hex coat keyboard commands to copy and paste that hex code here we'll set our text to nine points. We might be a little bit more generous said it's 10. You could just do cat blocks on your keyboard. Be sure Teoh, check your spelling really well. And now I could change like tracking and then lock font size. This is if you're gonna want you fought to be the exact same size on all your different coms. We do not want to do this because we want our type to be nights and responsive. And we're gonna make sure when we set our text that are text boxes extending past our text that we will need export. Everything's gonna be nice and clean. And there's no chance that the browser might interpret the text kind of funny. Our new text box will set for fate in and then we'll out a new friend. We'll set the delay to zero and then on frame seven, we're going to add in a button will go to our animation effects Since we added this element on for him. Seven. It will show on for him. Seven. Now we're going to set the animation Teoh Flip X. We're gonna add one more frame. Our last frame will make sure that our deleted zero again frame eight. We will set Teoh a pulse, so that's just gonna draw people's attention to the button just a little bit more. Something good to note is that you can set your animation loop. Typically for these display ads, you have 15 seconds that you're at will be served so pure ad is seven seconds long, you could have it loop twice. Or if your ad is five seconds long, you could have a loop three times. You can also say you're Loop Teoh, infinite for this project. I don't really think I need a loop, but I will set my last frame to have a seven second delay to maximize my 15 seconds of ad time. And that's basically it for us adjusting our frame sequences in the next video, we're going to go over how to preview your animation so you can make finals weeks and send to your clients.
13. Preview Animations in Flexitive: So now we're going to check out what we have done so far. So we're gonna the preview. There are different ways to preview so you can preview in within Alexa tive And that sort of looks like this. I prefer to go ahead and preview outside of flex it. And this previous page, that's with this little external arrow. If you click here, it will show you the preview just for the size. And if you Clinton down below, it'll show you the preview for all of your sizes. So in the next few videos, we're gonna talk about how we can really step it up and add some animated SP jeez, to elevate our sparkles. And then we'll also talk about how we're going to take that one completed animated size and produce it across platforms and sizes for our digital ad campaign. Now is also a great time. If you want to get clients sign off on the creative, you can go ahead and send of usually to the client. Thanks for sticking around. I'll see you in the next video
14. Adding Hoover Effects & Animated SVGs: And now I'm gonna take you through some different ways that you can really push your animation. The first way is by using hover states. So I think I'm gonna do a hovered state for the button, click on the button and then navigate to your animation effects. If you go over to this other section, this will allow you to add a hover state for that particular element. We're gonna dio pulse effect for a smoother animation. We will move our duration to the full 1.5 seconds. Then we'll just sit saved and then return to a preview page and refresh. And you can see now Button has a little pulse. So the next way that we can add some really fun elements to our animation is by making these sparkles enemy a little bit. So I'm gonna be using a program called SVG Ator. All right, so now we are inside spg ater we're going to import the SPG es that we created or and then import sparkle so we'll just hit open. What we're gonna do is click on our circle and we're going to simply click this, which will allow us to add a key, Fring. We're gonna wanna just add a key frame for a pass ity. It'll automatically generate a key frame of 100% capacity. When you navigate to this right panel and under compositing, you can see a pass idiot set to 100. Now, we're gonna move our play head over to one second, and we're going to add a new key frame. You can do that by hitting this button. Oregon. Simply inter end, Um, a new opacity through to set this A posse to zero. Great. Now we're gonna scoop sharply, head over to two seconds, and we're gonna set a pass ity back to 100. This is going to make our animation loop. So to play, you just move your play head back to zero, and you just place press the space bar. All right, so it's going out to three seconds. We just want this animation to be two seconds long, so we're going to hit our gears button and then set our duration to two seconds. Weaken, Infinite. Now we've got our animation, how we want it. We're going to save, and then we want to export. We're going to see our animation type two CSS on Lee on load and Responses and then just hit export open. And now you can see in the assets panel that the SPD and scheme in a bid So we'll do something super simple, will select one of our orbs, and we're gonna do an asset swap, which basically, you just hit this little so hot button check on swap. And and so I went ahead and performed thes same steps for our sparkle and put those guys in there as well. And here's the final product. Next video, we're gonna talk about how to size our concept.
15. Creating More Sizes in Flexitive: next, we're going to go over how you could useful exited to resize your animated concept across all your different platforms and sizes. If we navigate to the Create Sizes panel, it'll pull up all of our different ad sizes. We can use the toggle on the right for show only active sizes, and then we'll select on add in a similar aspect ratio just to show you how easy it is, Teoh start to, resize adds. Once we select a new aspect, ratio will need to go and just make some minor tweets. Teoh Train Flex a tive on how we want to start to build our new adds as to become more vertical for more horizontal. There are two types of changes as you're making your re sizes. Changes that only apply to this size versus changes that will affect all your sizes and flex. A tive changes to element disability Lear order, size, position, focus point and your fill crop and zoom are gonna be changes that only affect the current size, whereas adding deleting, swapping elements, flipping elements or changing the background color are gonna be changes that affect all of your sizes. Changes to size tracking and letting can affect the current size or change all sizes, depending on whether or not you have your fought size unlocked. The content of your text, color, font and alignment are all gonna be changes that affect all exercises. All of your changes to animation are going to affect all your sizes as you're building. Your resize is if you want to make changes to one size that would normally affect all of your size, is just copy and paste that element. Make your tweaks and changes lawyer visibility on different sizes. Each time you add a new aspect ratio, it might start a little funky, but you'll go in and make your tweets. And the next time you encounter a similar aspect or issue, Alexa Tiv will already know how to handle it. You can go in and bring those custom S P G's that we created earlier in the process to really capitalize on space for each aspect ratio for the size. I want to keep the text where it is because I'm using out on all these other comp. So what I'm gonna do is use my keyboard shortcuts to just copy and paste it And then I'm gonna navigate to my layers panel and the top layer, which is the new layer. We just copy pasta. I'm going to Rio over to size of position and say Onley four portrait it's And then I'm gonna go back to my layers panel and I'm gonna tell the bottom layer I'm gonna hit the icon for hide on this size. Selecting an element and deleting it, however, will remove it from all of your coms. Now, just go in and make a few more design tweaks. Feel free to alter the size and position of different moments without disturbing the rest of your calms. You can visit flex it of support portal to see a full list of properties that are affected by all the sizes or are just sized specific. Decided for this size. I want a flipped copy of this cat and I don't want to mess up. The cats have already comped. So what I'm gonna do is command copy, command paste again. When I hide that original cat, it's on all the other layers and then I'm going to set size and position Onley this size, and I'm gonna do back to the original orientation text alignment is also gonna be an element that teaches across all of your sizes. I really think a center text would look a lot better on this size. So I'm gonna do a copy and paste again and come early years. And as you were adding on lease, different versions of the text, you can even go in there, name them, So I'm gonna have named this one centered. So that way, as I'm going through, I know which is which. So text settings and set the alignment to center. And as I want to see all the sizes, I can just pop out all of them and kind of see what I have going on at once, knowing that summer just gonna look a little bit crazy until you dial them in. You know, if there are little things like this that are bugging you like this could be centered a little bit better. It's better to address those things early on so that we get things perfect. And then you're just iterating and call me gate. As we navigate through these different fixed sizes, we can also build some responsive sizes. You can go in and effectively make one ad that can give a warm to any size to view this, we're gonna get a preview responsive scroll down to the bottom. We can just pop that out. Yeah, I'll say them turned us. So it's gonna pop out a new page with all of the break points that we've set up for add. The cool part is that you can hit full addictive break points. You can pop out this new ad that you can effectively resize to any size and looks it Is she gonna show you how this can be responsive across all side of this? The ad. So you build and fix and responsive and social we're will all work together. So if you've got a dimension built in one of these sections, it will pull in perception. So we go on social, I know. What do you want to do? An instagram story? Activate here or we can click on our size B m. Just like that. We've created Instagram story out of our HTML five ads You can even useful exited to make your profile photo. Here's an instagram posed and instagram story. We have all the assets we need to go ahead and export. HTML five ads are videos for paid social and our gifts for things like email blasts.
16. Exporting HTML5 in Flexitive: Now we can begin exporting our HTML five ads. Export. We're just gonna select the sizes that will be on the spec sheet. Uncheck select all sizes flex. It will automatically out of one pixel border if you like. Add servers often require enough contrast so that users can tell the difference between the ads on the Web page. We've got this blue background, so we're not gonna need the one pixel border. But if you're concerned about the I A B one pixel border, you can leave that checked. We're gonna leave all of these boxes unchecked. The answer that we work with IHS Centro Sel Select Out Server Centro And then we're going to select specific sizes on our list. We'll just hit export sign, zip and flex it. It is gonna packages up really nicely for us and then we'll just go in and do a few little tweaks before we deliver to our media specialist. When we had export flex it, it will automatically compress each image to be the lowest possible file size and the highest resolution for each size. All right, so we'll have in this guy up and the ZIP file will contain each of your ads super handy. So we'll just go through and we're going to clean this up and just get rid of that file in the folder, and then we'll just click on each add to make sure that the file size it's under our 200 kilobyte limit. Great. All of our files are under our tour and kilobyte limit, but I'm gonna show you what you can do if you run into problems. This is common. If maybe you're including lots of images or P and G's into your concept. Open these guys up in photo shop. You can go in and calculate exactly how much space you need to save to get your ads under follow size limit. I'll go ahead and, you know, drop the quality down to, like, maybe 60 and you can actually save it in your file folder and override the name of your file. Since the code will refer to that file name exactly, and then we're just going to re compress this. So now we have to, and you'll see that since we compress that image, more are false. Eyes dropped about 30 kilobytes, but that's how you go about reducing your file size. Oftentimes just drop the's files into a cool drive and send a leak to my media specialist so that they can begin plays in the ads.
17. Exporting Images, Videos, & GIFS in Flexitive: next, we're gonna talk about how to export as a video, so videos are great for paid social. Here's my instagram story. Ready to go export all selects exporters video and then have my correct size for the Instagram story. Yeah, and that's basically it. I'll go on in the watch it. Make sure it's good. You can always import these files directly and to something like Facebook. Creative help or just give them directly to your media specialist. And there you go. There's your instagram story ad, and it required basically no additional work from creating your actual five Abbot's. All right, here's how to export a static image. Four. Paid social, perhaps for an instagram post. We'll just go in and make sure we have our static much selected, and we can dio export at twice the image size it would like and just select our image When the stop Well, you can see the images that I've exported for paid social as well you've got are 100% scale and our 200% scale. Finally, we're gonna go over Hajto exported gift, and then we'll make sure expert as a gift it's checked, will select or size, and we'll just hit export gift. Perhaps if you're using gifts for a website or a social media platform, so just get the file Size may not matter as much. If you're going to do it for an email blast, I would probably stick to that under 200 kilobyte limit. Next, I'm going to show you how to look at the file that comes out of flex a tive, and if it's over 200 kilobytes, how we can get it back under our 200 kilobytes limit. All right, you can see here are gift files. Eyes. It's quite large. So I'm gonna show you how you can get that down Teoh a much more manageable file size, preferably under our 200 kilobyte limit, so that you can embed them into an e blast. In order to do that, I went ahead and also exported a video version Been Photoshopped, and then we will do file import video frames, two layers and then we'll open our video and we can save ourselves a little extra work to limit our import to every five frames and hit OK, don't go through and decide on about five frames that I think our super interesting to get the ball size down really low because is kind of a large size. I would say anything over 10 frames is gonna make a false eyes way too big. Alright, so I've got my animation down to a small loop herbal movement. I'm hoping since the animations air pretty small that the ball size will be low enough. So we'll go to our state for Web and switch this to gift and you Since, um, the animation is just on these little stars. It's not having to include that much color information, and the false eyes is pretty low, so we'll go ahead and make a few tweaks. All right, so we set transparency, no tether, selective color color reduction algorithm and 256 colors. All that's looking good, and we are under 200 kilobytes. When you save for Web. You can also hit this and automatically prevue in your browser. Yeah, you win over how to export images, gifts, videos and the next module. I'm to show you how you can share class project using the exporting techniques we discussed and this module see in the next one
18. Sharing Your Class Project: All right. Now I'm gonna walk you through creating your class project on Still share to share a flex. It of ads with the class will go back to our from screen where we can select a product and we'll hit this little pop out funds. And this will allow you to share all of your different ads whether they're fixed sizes, responsive sizes for social sizes. First, you just name your project. Then you can go in and drop in some screenshots from your reflexive preview page along with a leak. The ideal size for skill share cover images 6 90 by 3 88 so we can actually make that influx. It will go to create sizes are with 26 90 our height to 3 88 The size doesn't exist, but we can add it. So we'll just have plus and we can add the custom size image that we created for our skill share page. There are so many more features a flex, a tive that we're not gonna get a chance to touch on in this class. Sky's the limit. Keep pushing on and learning more about laxatives because it's really a very versatile, yet intuitive program. Thanks so much for taking this class. It's my first skill share class. Hope you enjoyed it As much as I enjoyed teaching it. If you have any questions that you going through the project, don't hesitate to reach out in the class discussion board. Thanks so much. Leave this field you keep in touch with on instagram your sandwich? Yes, beyond
Samantha Richardson, Freelance Designer
