All classes Illustrator Syllabus · Episode 104 of 106

Class Illustrator #104: Export for Screens and Asset Export: Application Icon in Multiple Sizes at Once

0 views

Illustrator Tutorial: Export for Screens, export application icon 1x 2x, SVG, artboard name, UI assets. Episode 104 of the Complete Adobe Illustrator Series.

Software: Adobe Illustrator
Level: Beginner
Duration: ± 3 min
Series total: 6 h 32 min · 106 videos
Published: October 27, 2026

Episode 104 of 106 · view syllabus

Download PDF (6 PDF pages)

0 downloads

Download Project File· 1 MB Unlock All Premium Classes ▶ Watch the video lesson0 plays

▶ Video Lesson

Watch every step above performed live, with English narration.

0 plays

Class book

Page 1 / 6

Class Illustrator #104: Export for Screens and Asset Export: Application Icon in Multiple Sizes at Once: Cover: Class Illustrator #104: Export for Screens and Asset Export: Application Icons in Multiple Sizes at Once

Class Illustrator #104: Export for Screens and Asset Export: Application Icon in Multiple Sizes at Once: Before you start, steps list, and Step 1

Class Illustrator #104: Export for Screens and Asset Export: Application Icon in Multiple Sizes at Once: Steps 2–3: Drawing the Icon

Class Illustrator #104: Export for Screens and Asset Export: Application Icon in Multiple Sizes at Once: Steps 4–5: Export for Screens

Class Illustrator #104: Export for Screens and Asset Export: Application Icon in Multiple Sizes at Once: Step 6: SVG for web

Class Illustrator #104: Export for Screens and Asset Export: Application Icon in Multiple Sizes at Once: Done: Final Result and Further Practice

Cover: Class Illustrator #104: Export for Screens and Asset Export: Application Icons in Multiple Sizes at Once

Click a page or use ◀ ▶ to turn · swipe on mobile · to enlarge

Want to go deeper?

Join one of our courses or ask us directly on WhatsApp.

Download PDF· 0 downloads View the full 106-episode syllabus View Illustrator Courses Ask on WhatsApp

Recommended classes for you

Picked from the software, topic, and level of “Class Illustrator #104: Export for Screens and Asset Export: Application Icon in Multiple Sizes at Once”.

104 episodesFree preview

Adobe InDesign · Beginner

Complete Adobe InDesign

104 video lessons with PDF guides, 6 h 7 min in total. Starts with: Getting to Know the InDesign Interface: Menu, Tools, Control Panel, Pages, and Layers.

6 h 7 min 40 0

View class

102 episodesFree preview

Adobe Photoshop · Beginner–Intermediate

Complete Adobe Photoshop

102 video lessons with PDF guides, 6 h 5 min in total. Starts with: Getting to Know the Photoshop Interface: Workspace, Toolbar, and Panels.

6 h 5 min 19 0

View class

Krita: Drawing a Girl Hanging Laundry in the Yard

Premium

Krita · Beginner

Krita: Drawing a Girl Hanging Laundry in the Yard

Want to learn to illustrate children's daily activities for storybooks? In this video we draw a girl hanging laundry in the yard with Krita (free), step by step. Comes with a step-by-step PDF and a project file to practice with.

14 min 9 0

View class

Krita: Drawing a Girl Dancing Ballet in a Studio

Premium

Krita · Beginner

Krita: Drawing a Girl Dancing Ballet in a Studio

Want to learn to illustrate children's daily activities for storybooks? In this video we draw a girl dancing ballet in a studio with Krita (free), step by step. Comes with a step-by-step PDF and a project file to practice with.

12 min 7 0

View class

Premium

Krita · Beginner

Krita: Painting a Snowy Village at Dusk

Paint a snowy village scene at dusk with Krita (free): a purple gradient sky, mountains, wooden houses with warm windows, layered snowy hills, and chimney smoke with Airbrush, in 16 steps with color codes.

12 min 7 0

View class

Need more than a video?

Other ways we can help with Adobe Illustrator.

Learn with a mentor

Scheduled Graphic Design courses with live guidance and a certificate.

Course

Course/Training Adobe Illustrator — Applying Adobe Illustrator to Clothing Design for Fashion Branding in the Digital Era

★ 5.0 (4)

Course

Course/Training Adobe Illustrator — Fashion Drawing with Adobe Illustrator CC – Advanced

★ 4.9 (9)

Course

Course/Training Graphic Design — Photoshop and Illustrator Ultimate Class: 100+ Practice Projects

★ 5.0 (6)

See all in Graphic Design →

Have it built for you

No time to learn Adobe Illustrator? Our team can do the project for you.

Service

Development Service: Adobe Illustrator — Fashion Drawing with Adobe Illustrator CC – Basic

★ 5.0 (5)

Service

Development Service: Adobe Illustrator — Applying Adobe Illustrator to Clothing Design for Fashion Branding in the Digital Era

★ 5.0 (3)

Service

Adobe InDesign Development Service — Learn Adobe InDesign by Making a Recipe Card

★ 5.0 (40)

See all in Graphic Design →

Get notified about new Adobe Illustrator classes

At most one email a week. Unfollow anytime with one click.

Transcript

The full narration of this video. The current sentence is highlighted while the video plays; click any sentence to jump there.

Show transcript

Introduction

In this episode, we'll master exporting a set of app icons in multiple sizes and formats all at once using Export for Screen, without exporting one by one. Let's get started. Hello, welcome back to the complete Adobe Illustrator series from Cerdas Inovasi Digital. We're entering the final module, Export and Final Project. UI and web designers often need to export many assets in multiple sizes. Export for Screen does this in one step. Create a document with 4 artboards sized at 128 pixels, one artboard for each icon: home, search, cart, and profile.

Step 2: Drawing the Icon

Draw each icon on its artboard using basic shapes and thick rounded-ended strokes, with a consistent line style.

Step 3: Naming the Artboard

In the Artboard panel, double-click the artboard name and change it to Home Icon, Search Icon, and so on. The artboard name will become the file name. Open file, export, export for screen.

Step 4: Export for Screens

The Artboard tab displays all artboards with checkboxes. Select all.

Step 5: Scale and Format

In the Format section, add scale 1x and 2x with suffix 2x, format PNG. Click Export Artboard and all files are created at once.

Step 6: SVG for Web

Repeat with the SVG format for web developers. One document produces all the needed assets. Done.

Done!

We've prepared artboards per icon, named the artboards, and exported all assets in 1x and 2x scales as well as SVG using Export for Screen. In the next episode, we'll prepare PDF print and package. Need a logo design, brand identity, vector illustrations, infographics, or print and social media materials? Cerdas Inovasi Digital provides graphic vector design services, as well as opens Illustrator courses from beginner to advanced. Want to master the entire series? 106 episodes from interface to final project? All episodes, complete with PDF step-by-step guides, exercise files, and vector project files, are available for premium tutorial subscribers. Subscribe starting at Rp69.000 per month, save 28% with the 12-month package, or pay once Rp999.000 for lifetime access. Want just one class? Buy single classes with lifetime access. Subscribe now on the premium page cerdasinovasidigital.com Contact our WhatsApp or visit cerdasinovasidigital.com Thank you for watching, see you in the next episode.

Ask the class material

Type a question or keyword; we find the part of this episode that explains it and jump the video there.

My notes

Notes are saved with the current video time and are only visible to you.

Questions & answers

Stuck on a step? Ask here; the instructor and other learners can answer.

No questions yet.

Your instructor

Cerdas Inovasi Digital Team

Software developers, BIM & 3D engineers, and AI practitioners

52 video classes1,276 episodes

We build software, BIM models, games and AI automations for clients every day, and turn that hands-on work into step-by-step classes: every step is shown on screen and comes with a PDF guide you can keep.

See our clients →

Memuat

▶ Video Lesson

Recommended classes for you

Need more than a video?

Transcript

0:03Introduction

0:48Step 2: Drawing the Icon

0:57Step 3: Naming the Artboard

1:13Step 4: Export for Screens

1:20Step 5: Scale and Format

1:32Step 6: SVG for Web

1:53Done!

Ask the class material

My notes

Questions & answers

Your instructor

▶ Video Lesson

Recommended classes for you

Need more than a video?

Transcript

0:03Introduction

0:48Step 2: Drawing the Icon

0:57Step 3: Naming the Artboard

1:13Step 4: Export for Screens

1:20Step 5: Scale and Format

1:32Step 6: SVG for Web

1:53Done!

Ask the class material

My notes

Questions & answers

Your instructor

Introduction

Step 2: Drawing the Icon

Step 3: Naming the Artboard

Step 4: Export for Screens

Step 5: Scale and Format

Step 6: SVG for Web

Done!

Introduction

Step 2: Drawing the Icon

Step 3: Naming the Artboard

Step 4: Export for Screens

Step 5: Scale and Format

Step 6: SVG for Web

Done!