All classes Illustrator Syllabus · Episode 73 of 106

Checking access...

Want to go deeper?

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

View the full 106-episode syllabus View Illustrator Courses Ask on WhatsApp

Recommended classes for you

Picked from the software, topic, and level of “Illustrator Class #73: Line Icon on 24-Pixel Pixel Grid”.

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

Premium

Krita · Beginner

Krita: Drawing a Girl Riding a Bicycle

Draw a cartoon girl riding a bicycle with Krita (free), layer by layer: a sky gradient, Ellipse/Polygon/Rectangle without outlines, wheels with the Ellipse Tool in Outline Brush mode, a frame with a thick brush, the character, and Airbrush motion lines, in 19 steps with color codes.

16 min 3 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

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

This is what we'll create in this episode: a set of sharp line icons for screen, home, message, and settings, created on a 24-pixel pixel grid with consistent rules. Let's get started. Hello, welcome back to the complete Adobe Illustrator series from Cerdas Inovasi Digital. Icons for apps and web are usually created on small grids, such as 24 pixels. A line that falls exactly on the pixel grid makes the icon sharp, not blurry.

Step 1: Arthoard 24 pixels

Create a document with 3 artboards of 24x2,4 pixels. Zoom in until the display is around 2000% so that every pixel is visible.

Step 2: Grid and keyline

Show the grid with lines every 1 pixel and activate snap to grid. Create a 20x20 pixel box in the center as the icon. Safe margin so the icon has breathing space of 2 pixels on the edges.

Step 3: Grid and keyline

On the first artboard, draw the roof and walls of a house using the pen tool with a 2-pixel stroke, round cap, and round join.

Step 4: House icon

Each anchor point falls exactly on the grid point.

Step 5: Message icon

On the second artboard, draw a box with 2-pixel rounded corners as the message body and a V-line inside as the envelope fold, with the same stroke. On the third artboard, create a central circle and a gear from a polygon with a zigzag, then expand, also with a 2-pixel stroke. Consistent stroke thickness makes the three icons look like a family.

Step 6: Export SVG

Hide the icon, then export for screen in SVG format. The SVG icon file is ready for use by web and app developers.

Done!

Done. We have prepared the 24-pixel artboard, grid and kiline, consistent 2-pixel stroke with rounded corners, created 3 icons, and exported SVG. In the next episode, we will create flat-colored icons. Need logo design, brand identity, vector illustrations, infographics, or print and social media materials? Cerdas Inovasi Digital provides vector graphic design services, as well as opens Illustrator courses from beginner to advanced. Want to master the entire series, 106 episodes from the interface to the final project? All episodes, complete with PDF step-by-step guides, practice files, and vector project files, are available for premium tutorial subscribers. Thank you for watching, see you in the next episode. Welcome back, 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

Recommended classes for you

Need more than a video?

Transcript

0:03Introduction

0:36Step 1: Arthoard 24 pixels

0:49Step 2: Grid and keyline

1:01Step 3: Grid and keyline

1:13Step 4: House icon

1:20Step 5: Message icon

1:57Step 6: Export SVG

2:24Done!

Ask the class material

My notes

Questions & answers

Your instructor

Recommended classes for you

Need more than a video?

Transcript

0:03Introduction

0:36Step 1: Arthoard 24 pixels

0:49Step 2: Grid and keyline

1:01Step 3: Grid and keyline

1:13Step 4: House icon

1:20Step 5: Message icon

1:57Step 6: Export SVG

2:24Done!

Ask the class material

My notes

Questions & answers

Your instructor

Introduction

Step 1: Arthoard 24 pixels

Step 2: Grid and keyline

Step 3: Grid and keyline

Step 4: House icon

Step 5: Message icon

Step 6: Export SVG

Done!

Introduction

Step 1: Arthoard 24 pixels

Step 2: Grid and keyline

Step 3: Grid and keyline

Step 4: House icon

Step 5: Message icon

Step 6: Export SVG

Done!