Fresh Adobe Illustrator Tutorials

How to Create a Medieval Paper Scroll
In this tutorial, you will learn how to create a medieval paper scroll with the 3-D Extrude and Revolve tool. Using texture, you will also learn how to make an object look old and how to map artwork to a 3-D vector object.

How to Create a Fun Circus Tent Icon
In this tutorial you will learn how to create a simple circus tent icon. You may discover some interesting things about Warp effects. Warp effects are often overlooked in digital illustration, but as you can see, they lead to some really nice results.

How to Illustrate Deliciously Realistic Grapes Using Simple Techniques
Learn how to illustrate a bunch of grapes using basic Adobe Illustrator tools. You will learn how to render multiple light sources and how to model a complex object using simple shapes and techniques.

Playing With Vectors in Illustrator
Walk through the process for how the design below was created, after checking out the designer’s first sketch.

Design a 3-D Digital Clock Icon With Illustrator
This tutorial explains how to create a glossy and stylized digital clock, with basic shapes and nifty gradients, all from scratch in Adobe Illustrator.

Creating Complex Style Illustrations: A Process
Learn the process of making a tribal-style illustration using only fundamental techniques in Adobe Illustrator. This is more of a process overview than a play-by-play tutorial, and thus some basic skill in the program is needed to follow along.

How to Create an Abstract Desktop Wallpaper
Looking for an abstract wallpaper but can’t find a color or shape that you like? In this tutorial, you will learn how to create desktop wallpapers using simple geometric figures, the Blending Mode and Gaussian Blur.

Illustrator Tutorial: Wooden Smoking Pipe
Draw a stylish smoking pipe in Illustrator. You will learn how to create the wooden texture on the pipe and the tobacco and smoke. The steps are simple and hopefully useful.

Design Symmetrical Character Art
In this tutorial, creative duo LouLou & Tummie show you how to use Illustrator to create a symmetrical, character-filled banner. You’ll hone your skill with the Pathfinder tool to build new shapes and tweak lines to give a sense of flow.

Create a Briefcase Icon
Create a briefcase icon using rectangles, ellipses and gradients. This icon is great for Web designs and user interfaces, and you can easily apply the techniques to other icons, logos and illustrations.

Create Lush, Glossy Vector Images
In this tutorial, Thomas Burden shows how you to create vibrant work in Illustrator using a simple color palette and basic blur effects, particularly Illustrator’s Gaussian Blur effects.

Create CS5 Width Profile Brushes in Any Version of Adobe Illustrator CS!
Adobe Illustrator CS5 has a new option in the Stroke window known as “Width Profile.” This tutorial shows how you to create brushes and use them in any version of Adobe Illustrator CS. You will also learn how to create, save and use your new brushes!

How to Illustrate an Elegant Bottle of Wine in a Gift Box
Make use of the 3-D tools in Illustrator to create this attractive bottle of wine in a gift box. You will learn how to create the graphic using the Rectangle tool, pen, 3-D revolve and gradients.

Create a Print-Ready Business Card Design in Illustrator
Illustrator has fantastic tools for creating small print items such as business cards. Walk through how to create a fun business card design complete with illustrated character.

Creating a Mysterious Cheshire Cat in Adobe Illustrator, Vector Premium Tutorial
In this detailed tutorial, you will learn how to manipulate a reference image to get started and how to use custom brushes to create the fur effect.

Create a Distressed Vector Typographic Poster Design
Follow the walkthrough of the design process for this “Spectrum” poster. Starting with custom-made type in Illustrator, you’ll move the vector graphics into Photoshop for some serious distressing with Photoshop brushes, blending modes and more!

Quick Tip: How to Draw a Stylized Motorcycle With Complex Brushes
Learn how to create complex brushes in Adobe Illustrator and how the brushes work together. You will create some interesting effects.

Create a Detailed, Vector-Based iPhone Illustration, Part 1
Learn how to create a photo-realistic iPhone illustration and every single icon found on the iPhone touchscreen.

How to Create a Rock Girl with “Beautiful Strokes” in Adobe Illustrator CS5
In this tutorial, you will work with a stock image and the new Stroke settings in CS5 to create this stylized vector portrait. Along the way, you will learn some great tips and tricks on how to strike the perfect balance between form and detail.

Create Your Own Calendar With Illustrator and InDesign, Vector Premium Tutorial
A calendar is an appealing and practical item to make from your study of Illustrator. In this tutorial, you will create a print-ready 12-month calendar using grunge text, the Linked Text tool, master pages and layers.

Make Watercolor and Marker Style Portraits With Illustrator
In this tutorial, you will work through ways to create digital portraits that have the unique and somewhat tactile feel of marker and watercolor. This tutorial requires a drawing tablet and Adobe Illustrator. The focus is on technique and technical settings, but the result will rely on your personal style.

Create an Artistic Scene with 3-D Lightbulbs and Type
Combine Illustrator, Photoshop and Cinema 4D to produce a composition that includes 3-D text, 3-D lightbulbs (created from scratch using only a reference photo) and floral ornaments.

A Guide to Creating 3-D Text in Adobe Illustrator
Adobe Illustrator is more than adequate for creating 3-D objects with some basic shading for the text. In this tutorial, you will learn how to create 3-D text using Adobe Illustrator and learn techniques for shading the text to give it a clean, consistent, stylized look.

Quick Tip: A Simple Way to Create Vector Fog
Learn how to make a simple yet effective smoke-like illustration. Using this technique, you can make smoke, fog and clouds in just a few easy steps.

Make a Grungy Hand-Drawn Festival Poster in Illustrator
Create a grungy, hand-drawn-looking poster with a cassette tape as the focus. You’ll use the Pencil tool to make organic vector objects and patterns in Illustrator.

Creating a Stylized Vector Environment
This is an advanced tutorial and assumes familiarity with the basic workings of the Pathfinder palette. You’ll learn how to create environments occupied by many objects.

Create a Remarkable Poster with Decorative Elements
In this tutorial, Sebastiano shows you how to create various decorative elements (including geometric shapes, half-tones, ribbons, 3-D stars and 3-D text) in Illustrator and then merge, compose, enhance and texturize them in Photoshop.

Create a Trendy Seamless Type Pattern
Create a trendy seamless pattern in Illustrator using some text and icons. Although you won’t go in-depth into creating the icons, you will look closely at creating a seamless pattern swatch. You can easily apply these techniques to other seamless pattern swatches.

Create a Cute Creature Character From a Sketch
In this tutorial, you’ll learn how to create this cute creature from a sketch. This tutorial uses custom brushes, the Paintbrush tool, Pen tool and Live Paint Bucket tool. Even if you’re not a huge fan of the cuteness, you can still use these techniques for other illustrations, logos and vector elements.

Illustrator Tutorial: Contemporary Wallpaper Art
Create contemporary wallpaper graffiti, with splashes and motifs. This quick tutorial shows you how to draw florals and create ink-splatter effects. Combine them all to create a stunning contemporary masterpiece

3-D Golden Text Effect
Create the golden 3-D text effect below. Create text using 3-D Extrude, and clean up the broken shapes. The final step goes over the glow and highlights of the text. This is a great tutorial for beginners to create professional 3-D text effects in Illustrator.

Discover Tattoo Illustration Techniques
Want to produce clean detailed line work with a hand-drawn edge? Not sure whether to use the Pen tool in Illustrator or a tablet in Photoshop? With his stunning tattoo-style designs, digital illustrator and “part-time thrasher” Chris Parks has all the answers in this tutorial.

Master Dynamic Gradient Techniques
Build up many elements to create a vector image with real depth and richness. The designer explains, “I spend most of the time picking out colors that match each other to form harmonic color composition. It takes a lot of time, but it’s worth the effort.”

Create a Tiger-Striped Cat With Illustrator
A step-by-step tutorial on creating a tiger-striped cat in Illustrator

How to Illustrate Dynamic Hair Using Adobe Illustrator’s Paintbrush Tool
This tutorial shows you how to create a dynamic hair style from a reference image. You will use the Paintbrush tool, basic skin shading and transparent gradients.

An Illustrator’s Project: From Start to Finish
In this tutorial, Zena walks you through the creation of an art illustration so that you can see what goes on behind a digital illustrator’s work and gain new insight for your own workflow. You’ll go through conceptualizing and gathering ideas, creating the illustration in Illustrator and then finishing the piece in Photoshop.

Using Symbols in Illustrator for 3-D Effects in Photoshop
Illustrator is a terrific resource for creating symbols. Corey takes those symbols into Photoshop and uses the new 3-D tools to get creative.

Adobe Illustrator Eye Tutorial
A detailed tutorial on making a beautiful eye.

Create an Ominous Jar of Purple Ooze
Beef up your Illustrator skills while creating an ominous jar of purple ooze. You’ll find handy tips and techniques for illustrating glass, chrome and toxic ooze.

How to Draw a Glossy Yo-Yo Icon Using Adobe Illustrator
Entertain yourself by creating a glossy yo-yo icon. You will combine different gradient and object effects to make a hyper-realistic and shiny plastic surface. The result is a perfectly rendered and appealing icon that can be made in just one hour.

jQuery Mobile

jQuery Mobile is a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code has been built with progressive enhancement, and has a flexible, easily themeable design.
jQuery Mobile Download & Docs →

Globalization Plugin from Microsoft

The jQuery Globalization Plugin enables you to add globalization support to your JavaScript applications. This plugin includes globalization information for over 350 cultures ranging from Scottish Gaelic, Frisian, Hungarian, Japanese, to Canadian English. We will be releasing this plugin to the community as open-source.
Globalization Plugin from Microsoft Download & Docs →

Transformie

Transformie is a Javascript plugin that comes in less than 5k that you embed into web pages and that brings you CSS Transforms by mapping the native IE Filter API to CSS transitions as proposed by Webkit.
Transformie Download & Docs →

CLEditor

CLEditor is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site.
CLEditor Download & Docs →

Color Plugin xcolor

The xcolor plugin is an easy-to-use jQuery extension to manipulate colors in all imaginable combinations.
This plugin implements an extensiv color parser and a featureful set of color-manipulation methods. There is also an animate() extension to smooth CSS colors. Another useful method isReadable() completes the whole, by allowing you to check if a text is readable on a certain background. The color value can also be passed in different color models: RGB, HSV/HSB, HSL and their adequate alpha extensions.
Color Plugin xcolor Download & Docs →

Sexy.js

Sexy.js is a lightweight JavaScript library which provides enhanced Sequential Ajax (Sajax) functionality and a sleek facade to jQuery’s native Ajax methods.
Sexy.js Download & Docs →

Crazy Dots

jdCrazyDots is a jQuery Plugin that creates a loading spinner via CSS. Best appearance is with CSS3 capable browser, but can be made to work in older browsers, too.
Crazy Dots Download & Docs →
Demo →

QuickFlip 2

QuickFlip 2 is a major reworking of the jQuery plugin that flips any piece of HTML markup over like a card. The new version is faster and even easier to use—simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back.
QuickFlip 2 Download & Docs →

Transform

This plug-in allows you to apply 2D transformations in all CSS3 capable browsers as well as Internet Explorer. This plug-in works in Firefox 3.5+, Safari 3.1+, Chrome, Opera 10.5+ and IE 5.5+.
Transform Download & Docs →

Tooltip Plugins

Cute Balloon

Cute Balloon is a jQuery script that allows you to easily make a ‘cute’ tool tip balloon. It also works with Ajax content.
Cute Balloon Download & Docs →
Demo →

Poshy Tip

PoshyTip includes 7 different color schemes for tooltips; it displays tooltips relatively to forms and inputs; supports asynchronous page loading; can load flickr feeds; has fade-in effects; and much, much more.
Poshy Tip Download & Docs →
Demo →

Colortip

Colortip converts the title attributes of an element within your page, into a series of colorful tooltips. With six color themes are available, you can easily match it with the rest of your design.
Colortip Download & Docs →
Demo →&

Charts and Graph Plugins

gvChart

gvChart is a plugin for jQuery, that uses Google Charts to create interactive visualization by using data from the HTML table tag. It is easy in use and additionally it allows you to create five types of charts (AreaChart, LineChart, BarChart, ColumnChart and PieChart).
gvChart Download & Docs →
Demo →

DDchart

DDchart is a JSON data driven bar chart plug-in that creates a classable bar chart with flash style animation effects.
DDchart Download & Docs →
Demo →

Web Page UI Plugins

Pines Notify

Pines Notify is a JavaScript notification plugin that has been designed to offer an unparalleled level of flexibility, while still being very easy to implement and use. It uses the jQuery UI CSS library for styling, which means it is fully and easily themeable.
Pines Notify Download & Docs →
Demo →

jQnotice

jQnotice allows you to easily show an animated notification tooltip at the top of your website with just a simple line of code.
jQnotice Download & Docs →

jQuery Constant Footer

jQuery Constant Footer Download & Docs →
Demo →

Simple Unlimited Levels Vertical Drop-Down Navigation Menu

Simple Unlimited Levels Vertical Drop-Down Navigation Menu Download & Docs →
Demo →

Pajinate

Pajinate is a simple and flexible jQuery plugin that allows you to divide long lists or areas of content into multiple separate pages.
Pajinate Download & Docs →
Demo →

Mapping Plugins

.goMap

.goMap Download & Docs →
Demo →

jMapping

This plugin has been designed for quick development of a page that implements a Google Map with a list of the locations that are specified within the HTML.
jMapping Download & Docs →
Demo →

Forms, Validation, Tables and Search

jQuery.validity

jQuery.validity is a powerful jQuery plugin you can use to setup client-side form validation. Instead of writing validation manually or balancing some unwieldy server-side framework, validity allows you to design client-side validation in a manner that feels natural and straightforward.
jQuery.validity Download & Docs →
Demo →

Formation

Formation is a jQuery plugin that allows you to quickly create a form with validation without writing any HTML. You simply specify the container you wish to append the form to. By passing a few paramters into one of the formation function calls you can add different validation such as number, e-mail, url, phone number, or zip code.
Formation Download & Docs →
Demo →

Html5form

HTML5 allows you to validate forms without the need for additional JavaScript. Currently only Safari & Google Chrome supports this functionality. This plugin, with just a single line of code, gets the same result in Firefox & Internet Explorer.
Html5form Download & Docs →
Demo →

ezMark

ezMark is a very small (minified version is ~1.5kb) plugin that allows you to stylize Radio button and Checkbox easily.
ezMark Download & Docs →
Demo →

Searchable DropDown

A jQuery plugin which extends normal dropdown (select) elements to be searchable.
Searchable DropDown Download & Docs →
Demo →

popBox

This plugin provides a simple to use popup textarea extension for textboxes.
popBox Download & Docs →
Demo →

Cantipi Time Picker

Cantipi is a simple, functionality and highly original time picker built with jQuery and makes use of canvas.
Cantipi Time Picker Download & Docs →
Demo →

Animated Table Sort

This plugin allows you to animatedly sort a table based on a column’s <td>s, or on the content/value of a child/descendant element within those <td>s. The various <td>s fly to their new homes, giving a nice effect.
Animated Table Sort Download & Docs →
Demo →

Video and Media Plugins

jQuery YouTube TubePlayer

jQuery YouTube TubePlayer Download & Docs →

MediaElement.js

MediaElement.js allows you to use H.264, FLV, and WMV video with the <video> tag and program against the HTML5 Media API. This is accomplished by detecting what the browser supports, and when it doesn’t suppor <video> or the media file you’ve give it, MediaElement.js replaces the <video> element with a Silverlight or Flash plugin and wraps it in a JavaScript object that that mimics the native Media Element API.
MediaElement.js Download & Docs →
Demo →

jMediaelement

jme is an HTML5 audio / video development kit with Flash Fallback, which focuses on flexibility, intuitive DOM-API and semantic code.
jMediaelement Download & Docs →
Demo →

FlareVideo

FlareVideo Download & Docs →

Image Slider Plugins

Coin Slider

Coin Slider Download & Docs →
Demo →

Image Scale Carousel

When working with imagery online keeping the integrity of an images aspect ratio is as important as anything else. This is what’s so nice about this jQuery plug-in; you don’t have to worry about all of your images being perfectly sized for this slider. The jQuery Image Scale Carousel auto scales all of your images making implementation super simple.
Image Scale Carousel Download & Docs →

Sudo Slider

Essentially, Sudo Slider is the slider plugin that allows the designer to do whatever they wants, with whatever HTML he want. It’s a content and image slider, with support for captions, ajax, multiple sliders, bookmarks, automatic sliding, continuous sliding, fading etc.
Sudo Slider Download & Docs →
Demo →

Nivo Zoom – jQuery Image Zoomer

Nivo Zoom – jQuery Image Zoomer Download & Docs →

Image Gallery and Effects Plugins

YoxView

YoxView Download & Docs →
Demo →

Exposure

Exposure is a jQuery plugin for rich and smart photo viewing that can handle very large amounts of photos.
Exposure Download & Docs →
Demo →

Cloud Zoom

Cloud Zoom is a jQuery image zoom plugin. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.
Cloud Zoom Download & Docs →

Blockster Transition Effect

Blockster is a Javascript transition effect designed for ‘featured content’ rotators or slideshows. Its underlying concept is to transition between one element to the next block by block. It is highly customisable in terms of how many blocks are involved, whether they fade in or simply appear, whether they appear in order or randomly, and more.
Blockster Transition Effect Download & Docs →

Lightbox_me – Stupidly Simple Lightboxing

Have you ever had a DOM element that you wanted lightboxed, but didn’t want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is for you.
Lightbox_me Download & Docs →“>

Easy Gallery

Easy Gallery Download & Docs →
Demo →

jQueryrotate

This is a small plugin for jQuery that adds a nice feature to rotate images by a selected angle on web pages.
jQueryrotate Download & Docs →

jQuery.popeye 2.0

jQuery.popeye is an advanced image gallery script that allows you to save space when displaying a collection of images and offers your users a nice and elegant way to show a big version of your images without leaving the page flow.
jQuery.popeye 2.0 Download & Docs →
Demo →

Galleria

Galleria is a image gallery framework that is very easy to use, yet loaded with advanced customization options. With more than 5k daily downloads, it’s one of the most popular javascript image galleries available today.
Galleria Download & Docs →
Demo →

jQuery and Social Media

jTweetsAnywhere – jQuery Twitter Widget

jTweetsAnywhere is a jQuery Twitter Widget that simplifies the integration of Twitter services into your site, with just a few lines of code.
jTweetsAnywhere – jQuery Twitter Widget Download & Docs →
Demo →

So So Social – jQuery News Feed from your Social Networks

The So So Social plug-in uses jQuery and YQL (Yahoo Query Language) to gather RSS feeds from your various social networks and sorts them into an “activity feed”. It basically creates a news feed out of your social networking activity.
So So Social Download & Docs →

Bit.ly Button – jQuery Plugin for Your Clicky Post

bit.ly offers realtime statistics about the clicks on shortened links and this button takes advantage of that information. This jQuery button gives you a uniform click count button -tall or wide- that people can also use it to retweet your post.
Bit.ly Button Download & Docs →
Demo →

Quite Delicious Button

This jQuery-fied delicious sharing widget gives you a uniform share button -tall or wide that works the same as the official Delicious button but looks much prettier.
Quite Delicious Button Download & Docs →
Demo →

You might also like…

40 jQuery and CSS3 Tutorials and Techniques »
50 jQuery Plugins for Form Functionality, Validation, Security and Customisation »
15 CSS3 Navigation and Menu Tutorials and Techniques »
20 CSS3 Tutorials and Techniques for Creating Buttons »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
50 Fundamental jQuery Controls, Components and Plugins »
15 Javascript Web UI Libraries, Frameworks and Toolkits »
50 jQuery Plugins for Form Functionality, Validation, Security and Customisation »