Happy Tuesday! I’ve had a few requests to create flat-style illustrations, so this week we’re creating a flat iMac icon in Adobe Illustrator! If you’ve ever been unsure of how to get started with vector icons, or you’d like to practice your shape-based illustration skills, this tutorial is perfect for beginners. We’ll be utilizing the rounded rectangle, rectangle and ellipse shapes the most and keep things super simple throughout. Read on for the full tutorial and all of the color builds mentioned in the video!
Pin it for later!
Create a Flat iMac Icon in Adobe Illustrator
Mentioned in the tutorial:
- Here is the reference iMac image used for the icon.
Here are all of the color builds used (RGB):
- Dark yellow: 232/230/210
- Yellow: 250/246/225
- Blue: 183/214/241
- Black: 3/3/3
- Lightest grey (1): 235/235/236
- Grey 2: 221/222/224
- Medium grey (3): 213/215/217
- Grey 4: 201/202/205
- Dark grey (5): 189/190/193
Here are some tips for creating vector based icons:
- Vectors are point-based (instead of pixel-based like raster images in Photoshop), so they’re infinitely rescalable. This means it’s cake to create any size icons you need without ever worrying about resolution issues.
- When creating an icon based off of a source image (like we did in this tutorial), be sure to lock it on its own layer. Locking your layer prevents accidental moving as you work, plus the ability to turn the layer’s visibility on and off so you can check your work as you go.
- Common icon sizes are (in pixels): 512×512, 256×256, 128×128, 64×64, 48×48 and 32×32.
- To export your icons for web (with the icon scaled within your properly sized artboard), go file > export > save for web. Alter the file format preferences in the upper right corner of your screen.
- Be sure to always save an Illustrator file of your icon work. If you need to make adjustments later, you’ll have the raw, editable file available outside of your web formatted files.