Over the past few months, I’ve been challenging myself to find the quickest way to create some common and not so common icons. All the icon speed runs I’ve created so far are in this Imgur album as GIFs.
Many of the GIFs have notes about the techniques used, but feel free to ask me anything about them. I also plan to write up some of the more complex icons as separate articles, if I get some spare time.
I’m up to 56 images in that album. Hoping to get to 100 at least.
I just spent 30 minutes yesterday trying to find your last post of these, unsuccessfully. Woke up to find this at the top of DN. Awesome timing, thanks for sharing Marc!
I did it for you. <3
This is such a great idea! Perfect example of pushing yourself to continually improve yourself. <3
Artificial constraints FTW. The pressure is on when recording. It’s like designing with someone watching over your shoulder.
Awesome. Downloaded the album for when imgur runs out of cash. Super helpful Marc!
I hope they don’t. I have a lot of stuff there.
The touch ID one is crazy!
Do you have some Illustrator tutorials that can make me work "like" you..
I don’t have any video tutorials, but I might make some in the future. I’ve written lots of articles that might be of interest: https://bjango.com/articles/
This one in particular is on icon design: https://bjango.com/articles/icondesignworkflow/
I’m hoping to write some articles covering some of the speed run icons, going through each step.
That's fun! I used to do that with stuff like this:
... which got me pretty good at Photoshop and Photoshop vectoring... not so much at software that's actually made for vector editing!
I think I might give this a go too :)
Awesome. Please do! It‘s tons of fun.
Your next client, after seeing this: "So here's the list of icons we need for the UI. I think you should easily be able to do them by tomorrow? There's only 50 of them after all"…
Yep, no probs!
The only downside is that some of these took a lot of research, and a few practice runs to get the final recording done. Oh, and the icons do not form a good set. They look really bad next to each other. And, they’re not all pixel perfect. And, many of them aren’t built the way you’d want them in production.
But, apart from those issues, sure. :D
Great stuff Marc! Thanks for sharing
Thank you! More coming. :)
So happy to see those Breath of the Wild ones in there!
There’s more of those coming, if I can figure out a good way to draw korok seeds. I might attempt the divine beast icons, too. They look pretty difficult for a speed run though! Trying to get these things done in a single take can be pretty stressful.
Thanks for sharing! Looks like illustrator - Any tips or tricks you've discovered through this process that you might be able to share with others?
Yep, these were all created in Adobe Illustrator. There’s quite a few techniques that are used across many of the speed runs. Here’s some of the more common ones.
- Live Corners. I love dragging out those handles. Works well once you get good at crafting the ideal polyline source.
- Using the polygon tool with a four sided polygon to draw a pixel snapped 45º rotated square.
- Lots of the Path Finder panel for boolean operations.
- Lots of Object › Path › Outline Stroke.
- Lots of Object › Path › Add Anchor Points.
- Lots of the Graphic Styles set up in the Greyprint templates.
- Lots of use of the Greyprint actions, too (Outline Stroke and Add Anchor Points in one click).
- A bit of use of the Width tool in Illustrator.
- The blend tool and warp also make an appearance.
Marc -- are the Illustrator actions included in Greyprint or documented anywhere? I'd love a peak at what Actions you've got set up in Illustrator!
I didn’t have them documented, but because you asked, I added some info here: Greyprint Illustrator actions help
Wow! This is super helpful. Thanks so much for adding that!
Why not in Skala?
At some point in the future, yep, definitely. :) Working hard on it.
wow, you make this look so easy... makes me frustrated with myself for not putting time into illustrator
There’s still time! Illustrator does so many cool things. Makes icon design a lot easier.
Impressive work. thumbsup.png
Loved this! Thanks for sharing
Imposter Syndrome strikes heavily lol. I would love to be able to do that too.
Hopefully there’s some helpful info in the GIFs. I’m not trying to make people feel bad!
You just made my Illustrator skills look poop haha.
Well done Marc, great stuff!
You're my hero.
I totally fav'ed that to my bookmarks so I can watch it again.