Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Posted by Obi Kaleje
Obi Kaleje
78 Points

How to Create Flat 'screen-preview' Icons?

Does anyone know of the best way to create flat icons such as the ones that are on the teamtreehouse homepage or videos?

I am hoping to create screenshot-preview icons for different pages of a website. (e.g. dashboard screenshot icon)

Thanks so much!

3 Answers

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Obi,

You will just need a Graphics Illustrator to create your icons like Adobe Illustrator or Affinity Designer.

I your looking for icons in general I fins ICONFINDER a really great tool to get icon sets and singular icons and there are both free and premium option on here!

Craig

Obi Kaleje
Obi Kaleje
78 Points
Obi Kaleje
Obi Kaleje
78 Points

Great answer, thanks so much!

Lastly, would you happen to know of any tutorials or know of anywhere to get free templates to understand how to get to the point in Illustrator where you can make 'screenshop-mockup' icons since I am a very beginner in Illustrator?

Craig Watson
Craig Watson
27,930 Points

Hi Obi,

If you are just starting out on illustrator like I was, I found this course very informative. It is quite a long one but it have paid off because of the skills I learned.

After that I recommend this, a new course that runs over illustrator for web designer by way of layouts and wire frames.

I found this course grat for using the tools on illustrator to

I have done all of the above and dont even use illustrator, the skills you will learn are transferable to most graphic design programs the only things different are the icons for the tools themselves :)

Hope this gets you a decent starting point Obi illustrator is great :)

Craig

Obi Kaleje
Obi Kaleje
78 Points
Obi Kaleje
Obi Kaleje
78 Points

Awesome thanks again so much! Those are some great suggestions. Would you happen to have any suggestions if I needed to create these icons within the next day? Also, I've seen people make icons like the ones I need to make using Photoshop, which doesn't make sense to me since Photoshop is apparently not vector based.

Thanks one last time!

Craig Watson
Craig Watson
27,930 Points

Hi Obi,

Is it essential you make these icons yourself ? usually you can find what you need out there. Try Fort Awesome, they have bundles of icons for use and all optimized for the web to :)

Craig