Skip to main content

Export for Screen

Lesson 9 from: Ignite Your Business Marketing Kit in Adobe Illustrator

Kladi Vergine

buy this class


Sale Ends Soon!

starting under


Unlock this classplus 2200+ more >

Lesson Info

9. Export for Screen

Accelerate your workflow by using useful shortcuts and exporting your design for the web in many different formats from one single panel.

Lesson Info

Export for Screen

in this lesson, you will learn how to accelerate your workflow by using useful shortcuts and exporting your design for screen. I'm going to use a file created in the previous lesson and you can use your own file or follow along using the starter file provided open your illustrator file and before we export I want to show you two very useful techniques to professionally purview the final artwork Before exporting this first feature is the presentation mode, click on the art board you wish to display, then had to view and select presentation mode. You can also access the presentation mode with a shortcut shift f. As you can see, illustrator will display each our board individually in full screen. You can toggle between our boards using the arrow keys on your keyboard. To exit the presentation mode, press the escape key. The other feature that you can use to preview your final artwork is the Train view. To access the train view head to view, then select trim. View. The train view will show...

you only what is inside the art boards and we'll preview them exactly as they will be exported in the final asset. This feature will allow you to hide any distracting work in progress or any other graphic or image located outside the art board. To exit the train view, choose view and then the selected train view and one more thing before we export, use the shortcut, shift up to access the Arbor tool and then click on each are bored and press the enter return key to open the our board options window from here. I will strongly recommend to name your harbored appropriately. This will be very helpful when exporting the files as it will give each are bored and easy to recognize label. Of course you can skip this step but me mindful if you do not name your are but the final outputs will be named our board 123 and so on. It's now time to export. Let's open the export for screen dialog box using the shortcut control old E on Windows. Let's command option E on the Mac, then select one or more are birds of your choice By clicking on the little square below their thumbnail. Then from the right side panel, pick a destination folder to where export your file. Take an open location after export if you wish to open the destination folder after exporting to quickly locate your files and if you wish to place your files in a sub folder, take their respective box from this window. You can select to export your file with one or multiple formats. To explore the formats, click on the down pointing arrow and select the format of your choice between PNG, jpeg SVg Pdf and more. I will select a jpeg compression. You can also add multiple sizes and formats by clicking on, add scale. When you're done, click on export our board. If your selected, so your destination folder will open up in here. You will find your designs ready to be shared with the world. Yeah, the majority of social media profiles display your avatar image as a square or a circle and usually the app will crop the circle automatically after you upload the square image. If you would like to preview how your image looks like inside a circle, you can do that in illustrator. Let me show you how to start. Press the letter V on your keyboard to activate the selection tool. No click and drag over the graphics. Now make sure to group them by pressing Control G on Windows. That's command G on a Mac. Then press the letter L. On your keyboard to activate the ellipse toe with your lips to selected, click once on the top origin of your are bored. And your lips options panel will open up. Set the size of your lips to by 1000 pixels which is the same size of the art board. Then click on OK. And the circle will appear to make sure that the circle is centered inside the our board. Head to the properties panel. Then to the alliance options, click on the down, pointing error to align to the our board and then align horizontally and vertically with the circle selected. All you have to do now is to hold the shift key and click on the graphics that you've grouped previously to add them to the selection. Then use the shortcut Control seven on Windows. That's command seven on a Mac to create a clipping mask and as you can see, your image will be cropped inside the circle, which will work as a frame to export the circle. Use the same shortcut and repeat the same actions as we just did for the other assets. In this case, don't forget to click on the gear icon and set the background to transparent, then set the file format to PNG to preserve the transparent background and you're done. And don't forget that you can use this export for screen options for any file that you would like to display on screen. But let's move on to the next lesson to build some exciting social media graphics.

Class Materials

Bonus Materials with Purchase

Promotional Flyer
Pattern Starting File
Avatar 1
Avatar 2
Export For Screen
Social Media Template

Ratings and Reviews

Lisa Carney

Kladi is very clear in her explanations all while being very inspiring. Great class!!

Mazhar Iqbal

Great Kladi is a legend I really appreciate

a Creativelive Student

Very good teacher. I wish she had more classes.

Student Work