Transcript
0:00 What if you could design a single ad in Adobe InDesign and instantly turn it into multiple sizes, fully animated, and ready to export as HTML5? Follow along in this tutorial and learn how to design a banner ad in Adobe InDesign, export it as a PDF, and upload it to Viewst to create multiple sizes in just a few clicks. If you've ever spent way too much time manually resizing ads for different platforms, this is going to save you a ton of time. Let's jump in and get started.
0:37 On my screen, I have an InDesign template for a 300 by 250 pixel ad. If I click on my CC Libraries tab, you'll see that I have gathered some content that'll help me build out this ad. It has some images, fill colors, shapes, and a call to action button. You can find the same content in a folder within the exercise files. The first thing I want to do is give the background shape a fill color, so I'll click on it once, and click on this cream color that I have here in the CC Libraries. Next, I'll add the text, starting with the main title. That's this text frame here. I'll double click, and I already have the text copied to my clipboard, so I'll just simply command V, that's control V if you're on Windows. I'll command A to select all, go to my paragraph styles panel, and choose main title.
1:33 Now that I have my main title, I can focus on the subtitle, which will be the ad copy. That's this text frame down below. I'll click on it once, double click to get inside the text frame, and command V again to paste the copy in. Command A to select all, in this case, it'll be ad copy. I'm all set with the paragraph style, so I'll just minimize it, and then I'll go back to my selection tool and click away.
1:58 Next, I'll bring in the main image. I'll do that from my CC Libraries. You can see the main image here. I'm just going to click and drag it onto the page here, but before clicking, I'm going to hold option on a Mac, that's alt on Windows, hover over the frame that I want to place it in, and then just click to place it inside that frame. Often times, without doing this step, it'll just drop the content on the page and not actually inside the frame.
2:26 Great, I'll click away, and now I want to bring in this circle shape from my CC Libraries. I'll click it once and then just drag it over to the page. Again, I have it here in my loaded cursor, and in this case, I will click on it once to drop it on the page. I'll drag it onto the layout, and I want it to be behind the subject. A quick way of doing this is holding command on a Mac, that's control on Windows, and use your left square bracket to send backward.
2:55 Now, I'll just use my right and left arrow keys to position it in place. I think something like that looks pretty good. Once again, I'll click away, and I want to bring in the logo next. You can see that here in my CC Library. I'm going to click and drag it onto the layout. Here it is in my loaded cursor, and much like we did with the image, I'm going to hold option and then click on this image frame in the top left-hand corner to drop it into that frame.
3:24 Great, it's coming along nicely. And finally, I have a call to action button. This is the last item in my CC Library here, so I'll click on it once, and again, I'll just click and drag it to bring it over to the page, and in this case again, I could just click to drop it in, and then I'm going to place it in the bottom left-hand corner, snap the left side to the left margin, and now I have my call to action button. And to get a view of all this content on the page without your guides on, click away, so that's anywhere on this gray area, and then press W on your keyboard to get a view without the margins or the guides.
4:02 Great, now that I have the ad design in Adobe InDesign, I'm going to export it as a PDF and upload it to the Viewst platform. I'll make my way up to file, and then choose export. From the file format, ensure that you choose Adobe PDF print, and the destination folder you'd like to save this to. Go ahead and click save. This will bring up the export Adobe PDF options window, and from here, I'll click export it again to export that PDF.
4:33 Now that I have the ad exported as a PDF, let me show you how to upload it to Viewst and resize it to other ratios. Viewst is a web-based ad production tool that allows you to animate, resize, and export HTML5 ads at scale. Viewst does offer a free trial, so at the very least, you can create a free account and follow along with this tutorial. I'm in the Viewst platform now, and to upload my design, I'll make my way up to the right-hand corner and click the three-dot icon menu, and then choose upload design.
5:05 I'll choose the PDF that I just exported from InDesign and click open. That'll take a few moments to upload to Viewst. Once the upload's complete, it'll appear as a new project. Now, I can hover over the design and click edit to open it up. I'll zoom in using the zoom in controls in the upper right-hand corner to zoom in so you can get a better view. You'll see here that all the content from the InDesign document that was exported as a PDF carries over into this design. Have a look. I'll click on the main title, and it even recognizes that I'm using the Gotham font. The cool thing with Viewst, it also maintains all the layers from your InDesign document. You can see that here when I click layers in the bottom left-hand corner. All the layers from the InDesign document that was exported as a PDF carry over here to Viewst. There may be some minor shifting, for example, the body copy down below shifted to the right a little bit. You can do one of two things, maybe click on it once and decrease the size here a little bit, maybe go from 11 to 10 just to decrease and add some space between the text and the main subject.
6:17 Now, before I resize and adapt these to other ratios, I want to add a couple animations to this ad. So, I'll switch over to the animation editor, which you could see up here in the top panel. And once again, I'll just use the zoom controls to zoom out and scroll up to reposition the ad. Down below, you'll see a timeline with all the layers from the ad design. I'd like to add three animations to the ad, two to the text, and one to the main image. To add an animation, simply hover over the timeline, over the layer that you want to add it to. So, for example, here is the main title, and click anywhere where you want to add the animation. So, I'll click right here, and then choose add animation. Now, in this example, I do want to choose slide in left, and I'm also able to move this animation around freely. However, if you want it to start at a certain point precisely, in the upper right-hand corner, you have some controls. Where it says start at, I want this to start at half a second, which is 500 milliseconds, and you'll see that that will move to half a second. I can now click on these three dots and copy this animation, go to the second text line, click, and paste that animation. I'll ensure that I'm on this animation, and I'll change the start at point to 800 milliseconds. So, just after the first animation. Now, I'll click on the main subject layer, click anywhere, and let's paste that again.
7:48 Now, I can go in and change the type of animation. I'll replace it from slide in left to slide in down. I also want to change the start at point to 1,100, so I'll just type that in, 1,100, and press enter, and now I have all my animation set. I do want to add one more animation here on the main title layer, so I'll go ahead and click and choose add animation. This time, I'll go to accents, scroll down, and I'll choose empty. I'll start this animation at 1,500 milliseconds, and I'll change the duration to 8,500 milliseconds, which stretches the entire length of this ad animation to 10 seconds.
8:34 So, if I press play, let's have a look. We have our text, our main subject, and then the ad will remain static for the duration of 10 seconds. And typically, after the 10 seconds, it'll reset and play again. Great, now that I have my animation set, I can resize this ad to adapt to other aspect ratio using Viewst's built-in smart resize feature. I'm going to switch back to the design editor, and I'm going to make my way up to ad size in the upper left-hand corner. Now, I already have some sizes under the recently used section, so I'm just going to select those. I have four in total.
9:12 728 by 90, 300 by 600, 240 by 400, and 336 by 280. Down below, I have two options. I can use the classic resize, which does not use AI, or the AI smart resize feature, which intuitively analyzes the content in the ad and repositions it for the new ratios. So, in this example, I'll go ahead and choose AI smart resize. At present, it takes about a minute and a half to two minutes to generate results, which isn't bad considering the time you'll save overall. And just like that, I have my adapted size ratios. Some of the new ad ratios may still need some fine-tuning. However, the cool thing is, if I click on one of them, say the 300 by 600 version, and click the play button, the animation that I applied to the original ad carries over to the new ratios.
10:08 That's how simple it is to design an ad in Adobe InDesign, export it as a PDF, and use the web-based ad production tool Views to apply animation and resize it for other ratios. Thanks for watching, and if you enjoyed the video, give it a like. Don't forget to hit the subscribe button for more Adobe inspired tutorials and videos just like this one. Thanks again for watching, and I'll see you in the next video.