Noupe » tutorials

40+ Fresh And Useful Adobe Illustrator Tutorials

Nousheen Aquil — Thu, 05 Jan 2012 09:00:49 +0000

Tutorials are one of the best ways to learn and practice new tricks using Illustrator’s various tools. Learning through a step-by-step AI tutorial not only assists you in twisting the tools, but will also let you learn how to combine them in order to generate innovative and compound vector artwork, icons, and more.

In today’s post, we are presenting a collection of some valuable step by step Adobe Illustrator tutorials. These learning tools have been compiled to help guide you through the process of using this powerful program more efficiently. All the tutorials presented in this showcase have been created by some astute members of the graphic design community; therefore you will definitely be doing yourself a favor by checking out this collection.

Let us take a close look at the tuts. Feel free to share your opinion via the comment section below, and do let us know if we have missed out on any great Illustrator tutorials that you tend to turn to for enhancing your skills.

The Tutorials

Create a Burning, Vector Match Using Gradient Meshes
In this tutorial you will learn how to generate pragmatic vector fire, via the Gradient Mesh Tool and Screen Blending mode. Not as difficult a tutorial as you might think. Let’s strike a match!

How to Make a Classic Air Mail Envelope with Adobe Illustrator
In this tutorial Ryan shows us how to create a classic air mail envelope in Adobe Illustrator, using simple shapes, effects, and gradients.

How to Create a Vector Snake Using Adobe Illustrator CS5 and Mesh Tormentor
In this tutorial we will find out how to create a vector snake using the Mesh Tormentor – a free Gradient Mesh plugin, which will make your work with the gradient mesh easy and pleasurable.

How to Create a Vector Radiator Artwork
In this detailed tutorial you will use 3D-rendering, blends, as well as other tools and techniques for creating an oil filled, vector radiator. The skills you will learn here can easily be transferred to other creations and projects. So let’s get started!

How to Illustrate a Tomato Using Adobe Illustrator
You will employ meshes, gradients and blends for producing the resulted picture. The techniques learned in this tutorial will come in handy far beyond this creation alone. So let’s get started!

Basics of the Mesh Tool in Illustrator
In this tutorial we’re going to find out about Illustrator’s mesh tool. We’re going to build a Super Mario-style mushroom so as to better comprehend how to use this tool by means of a real life example.

How to Draw a Vector, Music Folder Icon
Here, you can learn how to draw a music folder icon in Illustrator. In this tutorial, you will learn how to use the 3D revolve tool and extrude & bevel effects. They are put into use all through the complete workflow, starting from shaping a 3D folder by means of a single path and finishing with all the bright lustrous musical notes.

How To Design a Print Ready Die-Cut Business Card
Want a new set of business cards? Follow this step by step tutorial to learn how to produce a cool business card design in Adobe Illustrator.

How to Illustrate a Vector Kitchen Pot
In this thorough tutorial you will study how to illustrate a standard, everyday household utensil, a cooking pot.

How to Create Advertising Billboard Using Adobe Illustrator
Create an advertising billboard by means of 3D modeling and a small amount of other simple techniques; for example shape building with the pathfinder palette, defining the vanishing point by means of using the guides, filling an object through gradients and using the blend tool.

Creating a Realistic Curtain
In this tutorial, you will learn to create realistic looking illustrations with the mesh tool. You can use this to create an interesting damask style curtain as it shows you how to give the piece the illusion of the silk accompanied by a nice floral design.

How to Turn a Photo into Vector Artwork
In this Adobe Illustrator tutorial, we’ll construct a vector illustration of a high-heeled shoe by tracing a reference photo using the pen tool.

Create a Steel, Vector Power Button Set
This tutorial will walk you through creating a set of steel looking power buttons in simple easy to follow steps.

Create a Cute Robot Using Adobe Illustrator
There are several reasons why Adobe Illustrator is an exceptional application for producing icons. The same components can be applied as building blocks to ensure uniformity and expedite your workflow. This tutorial is filled with a variety of techniques, from fundamental shape-building to more intricate lighting effects.

How to Make an iOS Style Mobile Navigation Bar
This tutorial will teach you how to recreate the navigation bar of an iOS mobile device complete with icons. This plain, easy to follow tutorial is great for a novice to intermediate level user. Let’s get started!

How To Create a Cubist Style Logo Design in Illustrator
Create a cubist-esque design perfect for logos using Illustrator and learn how you can incorporate lots of detailed vector facets in it. This tutorial explains the whole process of logo designing right from the initial sketches to finishing off the final design.

Create a Detailed Toilet Plunger Illustration
In the following tutorial you will employ essential shape building techniques, together with advanced Illustrator tools, to create the best plunger artwork you’ve ever made. By using these techniques you’ll become skilled at making several household tools to boot.

Create a Simple Vector Ninja Character in Illustrator
In order to create your very own set of awesome vector ninjas, you can follow this simple Illustrator tutorial. You will learn how to make the designs from basic shapes by using Illustrator’s core tools.

How to Create a Simple Web Button Set Using the Appearance Panel
In the following tutorial you will learn how to generate your own set of web buttons using Adobe Illustrator that can come in handy for any of your web design projects. Let’s get started!

Make a Fun Holiday Reindeer Illustration
This tutorial covers illustration style, color choice, shading and touches on typography. The procedure of adapting your illustration throughout the creation is also covered. This tutorial is created by Jesse Hora and Darrin Higgins.

Easy Clock Icon in Illustrator
A very simple and easy to follow tutorial to show you how to create this slick looking clock icon in AI. This tutorial is perfect for the beginners as well as for the pros.

How to Create an Open Book with Illustrator’s 3D Extrude & Bevel Tool
In this tutorial, we’ll generate open pages with graphics and put in a crimped background. The book can be personalized by employing your own graphics to the pages.

How to Create a Watercolor Background Using Adobe Illustrator
In this tutorial, we will make a watercolor painted styled background by means of a gradient mesh, tools of deformation and blending modes. The techniques covered here permit the creation of intricate textural backgrounds in an easy and effective way.

Create Super Mario’s Head in Illustrator
In this tutorial the artist explains how to craft a Super Mario face using mostly plain and easy to create shapes.

Create a Garden Scene Using Brushes in Illustrator
Become skilled at how to create a magnificent garden scene in Illustrator. You’ll explore the depth of the appearance panel, and art and scatter brushes in this tutorial.

Magnifying Glass Tutorial for Adobe Illustrator
In this tutorial we will be learning how to create a simple magnifying glass in perspective with Illustrator. This process uses the pen tool and a few ellipses.

Create a Wireframe Face with the Envelope Distort Tool
In this comprehensive and methodical tutorial you will learn step-by-step how to produce a wireframe face in Illustrator using the envelope distort tool.

How to Cell Shade and Add Texture to a Vector Comic Character
This tutorial will demonstrate how to produce a cell shaded character in Adobe Illustrator. This is a quick technique applying the live paint bucket used for block coloring, the gradient tool to add depth and form, and masked blended shapes for texture.

Create a Vector Gift Box for Upcoming Christmas
Here we will be creating an eye-catching gift box in Adobe Illustrator. We are going to apply a few standard types of tools, for example, the rectangle tool, ellipse tool, extrude & bevel 3D effect and some pleasant colors to help us in this creation.

Create a Magical Vector Landscape Using Illustrator
In this extremely detailed and magical tutorial you will learn how to produce a fantasy landscape by means of some of Illustrator’s powerful tools.

How to Create a Vector Stamp Set in Illustrator
In the subsequent tutorial you will learn how to craft your very own set of vintage styled stamps with AI. Go through creating the stamp border, emphasizing the edges, generating the branding, and providing the vector postage stamp a vintage texture, to help complete the effect.

How To Create a Cute Hairy Vector Monster Character
Follow this step by step Illustrator tutorial to generate an attractive vector monster character. We’ll generate the character from fundamental shapes to furnish a cute and forthcoming appearance then we’ll bring the character to life with gradient colors and a meticulous fur effect.

How To Create a Gruesome Zombie Illustration
Follow this step by step Adobe Illustrator tutorial to craft a hand-drawn zombie illustration. We’ll make use of a photograph as a critical reference then bring into play our Wacom tablet together with Illustrator’s vector brush tools to put together a range of gruesome components on our zombie character.

Create a Macbook Pro Illustration Leftside View
In the following tutorial you will gain knowledge that will teach you how to generate a semi-realistic looking MacBook Pro illustration. This is the left side view of the product.

Create a Simple Penguin Character
In the following tutorial the artist will demonstrate how to generate a plain little penguin character. The twenty-seven comprehensive steps will set up the fundamental tools and shape building techniques needed. Once you’ve created the starting paths, you will insert some basic colors and effects. At last, you will learn some fundamental stuff about the blending techniques.

A Complete Guide to Drawing Evil Vector Skulls in Illustrator
This tutorial will teach you how to pencil in evil looking skulls with ease, as well as learn a little anatomy along the way.

Create a Cocktail Glass in Adobe Illustrator
In this very comprehensive tutorial we will learn how to produce a cocktail glass with a multi-colored drink and fancy ornamentation. Producing a glass object can be a challenge seeing as there are only few colors you’re allowed to employ, frequently white, light blue and light gray.

Create a Sale Tag Icon with Adobe Illustrator
In this tutorial, we will be learning how to produce a smart looking sale tag in Adobe Illustrator. This tutorial will show you how to reproduce the look of a folded corner of the paper by using plain color gradients.

How to Create a Rainbow Beetle Using Adobe Illustrator
Here you will learn how to use some basics like the gradient tool, gradient mesh tool, art and scatter brushes, blend tool, and many other techniques to create a rainbow beetle.

How to Create a 3D Chart Using the Perspective Grid Tool and Adobe Illustrator CS5
The perspective grid is not extensively employed by designers. It’s a moderately powerful tool, although not truly a suitable one. Let’s learn how to make use of it on this simple example of the construction of a three dimensional chart.

How to Create an Illustration of Stylish Club Shades Using Adobe Illustrator
In this tutorial we will learn how to create club shades via simple and wide-ranging techniques. To create dramatic reflections from the lights of the discotheque club, we will make use of different blending modes. The tutorial contains lots of professional tips and techniques.

Create Vector Whiskey on the Rocks Using Adobe Illustrator CS5
In this complete and handy tutorial you will learn how to craft a vector glass of whiskey on the rocks by means of Adobe Illustrator CS5.

Make a Worm in Illustrator
In this throwback tutorial the artist demonstrates some quick tips on how to make an effortless but efficient vector illustration inspired by the classic video game, Worms.

Create a 50s Ad Poster in Illustrator
This tutorial will teach you how to make a retro looking poster for a web designer that gives off the impression that it was crafted in the 50’s.

(rb)

Designers Know Your Code: Web Design Tutorials

Angie Bowen — Mon, 03 Oct 2011 10:00:42 +0000

As almost any web designer worth their salt, and a large percentage of web developers will tell you, to be fully considered a web designer you have to have some background in code. Not to the depth that full on developers must, but it really is unfair to the rest of those working on a website with us if we do not have some knowledge in a handful of key areas. Which is where these web design tutorials come in.

In this post we have gathered a handful of useful tutorials from these various areas of code that designers should have their hands in. We have standard CSS and CSS3 tutorials, HTML5 and also Javascript tuts as well. A little something for all three of the main code branches that web designers need to always be improving their grasps on. We hope that you find these web design tutorials helpful in your next or current project!

CSS Tutorials

30 CSS Best Practices for Beginners – CSS is a language that is used by nearly every developer at some point. While it’s a language that we sometimes take for granted, it is powerful and has many nuances that can help (or hurt) our designs. Here are thirty of the best CSS practices that will keep you writing solid CSS and avoiding some costly mistakes.

6 Ways To Improve Your Web Typography – Typography on the web is anything but simple, and for many, it is a troubling mystery. Today, we’re going to review six ways that web designers and developers can improve the typography of the sites they create.

3 Easy and Fast CSS Techniques for Faux Image Cropping – This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS.

Build Multi-level Multi-column Multi Menus with pure CSS – works perfectly in most browsers, including IE 6, using absolutely no javascript

CSS Absolute Positioning: Create A Fancy Link Block – some tricks to create a fancy link block that make our links more attractive.

How to Create a Beautiful Dropdown Blogroll Without JavaScript – Dropdown menus are a great way of including a long list of links without cluttering up your page. The issue though is that they can be hard to style, but look quite ugly if you don’t. There isn’t a lot of flexibility with HTML’s select tags.

CSS3 Tutorials

CSS3 Minimalistic Navigation Menu – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.

CSS3 Tutorial: Sleek Card Pockets using CSS Only – learn how to create web card pockets using some great new CSS3 techniques.

CSS3 Animated Vignette Buttons – This tutorial uses a patterned background and places vignette-style .pngs over the top which are animated using transition.

CSS3 Music Player Menu – This tutorial maximizes power of CSS3 to create a CSS Music Player Menu with a Photoshop-like effect.

3D Animation Using Pure CSS3 – This tutorial uses the perspective property to create the 3d effect and transform and transition, to animate it.

Create a Swish CSS3 Folded Ribbon in 5 Minutes – Take one line of markup, a couple of CSS3 rules (no images), and you can have yourself a swish folded ribbon effect in five minutes.

HTML5 Tutorials

HTML5 : The Basics – This tutorial introduces HTML5 and its basic features as well as explains the key differences from HTML 4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition.

Have A Field Day With HTML5 Forms – Take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques.

Preparing for HTML5 with Semantic Class Names – A brief introduction to the new structural elements in the HTML 5 Working Draft, and how to use semantic class names in HTML 4.01 or XHTML 1.0 markup that correspond to the names of those structural elements.

Drag and Drop – This tutorial will teach you how to create a HTML 5 page that uses the new drag and drop feature.

How to Make an HTML5 iPhone App – This tutorial will show you how to create an offline HTML5 iPhone application, specifically, a tetris game.

Create Vector Masks Using the HTML5 Canvas – This tutorial looks at how to use the canvas tag and clipping to create images that aren’t so rectangular.

Javascript Tutorials

Javascript – An easy introduction – Javascript is used to add interactivity and functionality to a site. It has many uses, from detecting the viewers web browser to validating form input.

Nested Arrays in Javascript – Like most programming languages, JavaScript lets you create arrays inside arrays, known as nested arrays. In a nested array, the elements of one array are themselves arrays.

jQuery for Absolute Beginners – Fifteen video tutorials that teach you EXACTLY how to use the jQuery library. Start by downloading the library and eventually work up to creating an AJAX style-switcher.

iPhoto-like image resizing using Javascript – This tutorial uses the script.aculo.us slider control to capture input values, then converts those values into something useful.

Learn How To Detect Browser in Javascript – In this tutorial you will learn how to detect the browser in javascript so that you can then serve the suitable information.

Words Validation with Javascript – This tutorial will explain you how to filter out inappropriate words from being updated or sent from your website.

(rb)

100 Great CSS Menu Tutorials

Kevin Muldoon — Tue, 23 Aug 2011 10:00:18 +0000

Navigation is such an important part of your website. It’s how your visitors navigate to the main areas of your site and makes it easy for them to find your good content.

CSS is of course the perfect language for designing beautiful navigation menus. It can be applied to any type of website and is very flexible. Don’t be alarmed if your own CSS skills are fairly limited as there are a lot of great tutorials out there that walk you through how to add clean and professional looking CSS menus to your website. You can either copy and paste the code into your own design or modify the menu to suit your needs.

Today we would like to show you 100 of these tutorials; 75 horizontal CSS menu tutorials and 25 vertical CSS menu tutorials.