15 New icon tutorials for 2017-18

Icons are an important part of any web interface. Using creative icons on your website or application will give users a great first impression and show that you care about design. One of the best ways to get the perfect icon set is to create your own icons using a graphic design program. Follow one of these 15 brand new icon tutorials to create your own icons for any website or app.


1. Character Icons

This tutorial shows you how to make character icons using Adobe Illustrator. These icons work great for social sites and apps, as well as forums and entertainment-based web projects. Follow the steps shown here to create scalable vector images with unique, original cartoonish characters.


2. iTunes Inspired Icons

This iTunes-inspired icon tutorial will teach you how to make a music icon. The final product displays a music note over a CD with a 3D-like design. This is a great choice for any audio download or music-streaming button.


3. Computer Monitor

The Computer Monitor tutorial is a great guide for creating a high-tech monitor icon that looks similar to those found on Windows computers. This icon would be useful to any tech or computer repair website, or any web app that enables remote connections or file transfers. Follow this tutorial to create an icon you can use on any web or local application.


4. Drawing Icons

The pencil icons you can create with this tutorial will look great on any art or design website. They have a sketched appearance which will add an artisan touch to your user interface. These icons look great in black and white, or can be colorized to your liking.


5. Elegant Web Buttons

Once you’ve selected your web hosting and a good template, you’ll no doubt be anxious to get your site underway. The final important thing you’ll need to choose first however, is a great icon set. Make your own stunning custom website icons with this tutorial, and avoid the hassle of finding the perfect set online. This guide will teach you step-by-step how to create web buttons with depth and shine.


6. Metal Icons

Metallic icons look great on modern websites and applications. Use this tutorial to create a metal icon set for your tech, automotive, or industrial website. The icons shown in this tutorial include social sharing buttons and even main navigation buttons.


7. Magic Icon

This magic wand icon tutorial will teach you the process of creating a detailed, multi-colored magic wand for your next website. This icon will come in handy for online editors, revision buttons and repair uses. With this tutorial you will learn how to implement gradients into your icons, which will help you many times over again on future icon projects.


8. Social Media Icons

This handy guide will show you how to create buttons and icons for social media sharing of your content. You can use this to create simplified social buttons that are familiar and intuitive, but stand out from the boring standard buttons each site typically releases.


9. Mini Icons

Miniature icons work great for drop-down menus, messenger applications and other web interfaces where design space is limited. All you need to create the purposely-pixelated mini icon set shown in this tutorial is Adobe Photoshop and about 10 minutes per icon.


10. Colorized Outline Icons

If you’ve created or downloaded outline icons for your website you may want to color them to match your custom template or color scheme. Use this icon to learn how to easily colorize any outline icon for a more optimized and matching icon set.


11. Photoshop Notification Icons

This unique icon tutorial will show you how to create notification-style icons in Adobe Photoshop. If you follow the tutorial exactly you will be creating a sun icon, a settings icon, and an icon with a snowflake on it. Customize the graphics to your desire for box-style notification icons that will work with any website or mobile app.


12. Scalable Icons

Sometimes you need scalable icons that look great on larger or smaller displays. This can also be important if you want to create a matching mobile icon set for apps and mobile sites that pair with larger navigation buttons on desktop website versions. This tutorial will teach you to make pixel perfect, scalable icons for any web interface.


13. Paint Icon Tutorial

This tutorial will create a paint and paintbrush icon that looks great on any artistic website. If you have web hostingand a creative endeavor to get to work on, you might want to bank this icon back for your navigation buttons or portfolio. You’ll need Adobe Illustrator to create this vector-based web icon.


14. Outline Icons

Outline icons are very modern and trendy. They use minimalist sketch-style design for a strong artistic effect. This tutorial is designed to give you a comprehensive knowledge of building outline-based icons, and will get you started with a handful of useful examples.


15. Book Icons

There’s no limit to the uses for a book related icon. This tutorial will teach you to how create a detailed book icon using a vector image. The end product is detailed and scalable, and will work great on any educational or informative website or application.

These tutorials will walk you through creating unique and engaging icons that will make your website easier to use and give it an artistic edge. Custom icon sets ensure coherent themes and color schemes and give your user interfaces a professional, artisan look and feel. Custom icons can make navigation easier and even enhance your company’s branding and image.


About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub

Comments are closed.