The Internet allows designers and aspiring designers to teach themselves anything they’d want to learn. Talented folks often publish videos and written tutorials on all subjects from UI design to motion graphics.
This post will focus on the absolute best Illustrator tutorials hosted on the web for free. If you have a browser and a copy of Adobe Illustrator you can become a pro designer on your own just by practicing and following these tutorials.
Although Photoshop is the traditional choice for a UI designer, it’s possible to create fantastic interfaces with Illustrator. This tutorial walks you through the process using guides, layers, and objects to define page elements on the canvas.
Looking more in-depth at specific page elements, this tutorial demonstrates how to build a custom signup box. It uses a lot of gradients and textured effects with a button and inset input field.
The benefit of designing in Illustrator means that you can scale items larger and maintain all effects without quality loss.
WatchKit OS is Apple’s newest mobile solution with their smartwatch devices. Apple Watch has its own unique specifications for dimensions and icon sizes – this tutorial gets you started on the right path.
Not all designers have an interest in the Apple Watch but it is a growing field. This tutorial includes all the info you need to learn the basics of Apple Watch icon design.
Believe it or not Illustrator does have a detailed grid system. This is often used for symmetry with illustrations or logos, but it can also be applied to interfaces and grids as well.
Follow along with this tutorial to learn the ins and outs of Illustrators comprehensive grid creation system.
Although Illustrator is primarily a vector program it can be used to create magnificent pixel artwork. It’s often best to rely on Photoshop in this scenario, but it’s not always possible and Illustrator makes for a great replacement.
Dynamic image sliders are incredibly popular in the modern web. Lots of jQuery plugins can help you build it, but how about the design?
This unique tutorial by Andrei Marius teaches you the process from blank canvas to finished slider. All elements are created with Illustrator so it’s completely scalable.
Folks interested in mobile app design will get a kick out of this iOS app tutorial. It follows a rather abstract layout design for an iOS 8 weather application for iPhones.
If you’re trying to learn more about web images then SVG is something you’ll want to study. It’s the hottest new format that finally has major browser support, and Illustrator is the best software to use for SVG images.
This tutorial explains how to deal with SVG files, how to export them properly, and how you should organize content in Illustrator for a quicker turnaround.
Whether you find a free pattern online or purchase a premium resource, vector patterns are prominent in the design community. This tutorial explains how to edit patterns in Illustrator and keep them seamless for tiling.
Culture in the distant decade of the 1950s was surprisingly different than today. This tutorial by Andrei Stefan replicates old-school items in a homogenous icon format. You’ll learn a lot about Illustrator’s tools and how to plan icon designs from scratch.
Illustrator has the ability to slice content just like Photoshop. It may not be useful in every project, but it’s always good to understand how it works and why you might want to use it.
Landscape illustrations are some of the biggest projects for vector artists. They require an understanding of shape, color, composition, and perspective.
In this tutorial you’ll learn how to design a little fun fair carnival with Adobe Illustrator. It’s a great starting point because the design is simple and focuses more on technique than flashy gimmicks.
These productivity icons use gradients and shadows to build depth and teach high-quality icon design. If you’re interested in icon design I highly recommend following along with this tutorial – you’re guaranteed to walk away with some newfound knowledge.
On/off switches have become more popular since they first appeared in iOS years ago. Now they can be found in all types of websites and mobile apps with different styles and animation techniques.
Follow along with this tutorial to learn how to design custom on/off switches with gradients and vector elements.
Short, sweet, and to the point, this tutorial explains how to design a meaningful bar graph from scratch. Naturally it relies on vector elements and can be used in websites or infographics.
Every mobile OS from iOS7+ has used flat simplistic icons. This tutorial teaches how to design icons that could be used for iPhone apps including retina screens @2x and @3x. These techniques can apply to iOS 9 and likely further updates that use Apple’s flat design style.
A very simple music player UI that you can replicate in HTML5 or build into a desktop/mobile app. This tutorial uses flat icons and simple colors with a focus on experience and interface design components.
If you’re a fan of Adobe Edge this is a must-read tutorial. It teaches how to design icons in Illustrator and animate with Adobe Edge. You can even export the design as an SVG animated for the web.
Veerle Pieters is a talented designer with a fantastic blog. This tutorial is based on a Dribbble shot and teaches how to design a vector geometric star/flower shape. It’s abstract but useful for tasks like logo and identity design.
Here’s another fun landscape tutorial teaching how to design custom elements in a simple cityscape view. You’ll learn to design trees, houses, and atmospheric buildings in the background.
The dotted halftone pattern adds texture to any illustration. It’s a popular technique for Illustrator users and it works great with landscapes.
This tutorial by Veerle examines the halftone pattern and best techniques for blending it into a landscape vector. This is perfect even for novice designers that just want to learn Illustration techniques for environments & icons.
This is perhaps the best tutorial covering vector icon design. You’ll learn how to sketch icon ideas, how to digitize them into Illustrator, and how to add the finishing touches to create a truly impressive icon design.
Icons are the best things you can add to spruce up any website design. This tutorial teaches how to design one icon of a keyboard and screen display with source code. It’s a quick tut but covers all the basics you’d need to know for making an icon with Illustrator.
This collection offers a chance for anyone to learn or improve their Illustrator skillset. Pick any tutorial that jumps out and you’ll be sure to learn a lot in the process.
And for more Illustrator tutorials check out these related posts: