40 Awesome Illustrator Tutorials

1

In this roundup we have showcased some of the creative illustrator tutorials from 2011. These include typography, character design, poster design, logo design, portrait design and many more. Enjoy!!

Artistic Printing Inspiration in Illustrator and Photoshop

Create a Lava Island Scenario in Illustrator

How To Create a Slick Navigation Bar In Adobe Fireworks

fireworks-nav-bar-preview

I love Photoshop. I guess we all do. But I believe Fireworks is better suited for web-design work and I usually prefer it over Photoshop. After all Fireworks was created with web-designers in mind and it allows us to quickly prototype and design for the web, so let’s see what it can do.

I’ve created this simple yet modern navigation bar in Fireworks, and I’ll walk you through the steps necessary to create something like that. In the event there are some windows and panels you don’t see opened on your computer, simply go to the ‘Windows‘ menu and open them.

7 PHP Development Techniques to Minimize Security Vulnerabilities

php-secutity-preview

All PHP developers working with user-based content face similar challenges with security. What methods to take, how to avoid certain vulnerabilities, all these elements resulted in innovation of new security methods and techniques designed to fight against unintended loopholes in their code.

While sometimes remembering the basics can help, we discuss several different techniques to minimize security vulnerabilities that may arise otherwise.

How To Design A Gorgeous Big UI Button In Photoshop

big-ui-btn-preview

In this tutorial we’re going to be creating a gorgeous and modern user interface button suitable for the web or a mobile interface design. We’ll be using a handful of Photoshop techniques that are bound to come in handy for more than just creating buttons; in fact, the techniques we’ll be using are often used in most UI elements.

Create a new Photoshop document (I’ve used a 1000×1000 pixel RGB 72dpi document for this tutorial – keep in mind this will need to be a high resolution if you’re designing for a mobile device with a high resolution display such as an iPhone 4). Fill your background layer with a color of your choice, I used this lovely mid-blue color.

How to Create an Awesome Retro VW Beetle Vector in Illustrator

vw-beetle-preview

In this tutorial we’ll be using Adobe Illustrator (CS4 in this case, although can be completed using most versions of Illustrator) to create a vector image of an original Volkswagen (VW) Beetle. We will be making use of one of Illustrators most-used tools; the Pen Tool, as well as adding some finishing touches using a graphics tablet (an affordable Wacom Bamboo tablet in my case) to give the vector a nice hand-drawn style.

If you like this tutorial, keep your eyes peeled for the follow-up tutorial, in which we’ll be using our vectored VW Beetle to create a lovely retro and textured poster in Adobe Photoshop.

Brilliante Blog Layout – Coding The PSD File Into CSS and HTML

tutorial_presentation

In this tutorial, we’ll be revisiting the Brillante blog design, covering the PSD slicing, HTML/CSS coding, custom fonts embedding and some handy cool tips to improve your website performance.

This is Part 2 of 3 of the Photoshop blog design called Brilliante, published some time ago on SpyreStudios and designed by Mahmoud Khaled Deiab.

In this second part, I’m gonna walk you through the PSD to HTML/CSS coding process. Third part will be about creating a WordPress theme. Let’s begin!

How To Create a Sweet CSS3 Vertical Navigation

css3-nav-preview

Today we’ll be creating a beautiful vertical CSS3 navigation, without the use of images. Basically we’ll display a circle with an icon in the center. When the user hovers over the circle, it expands and shows a short description.

Now you may be wondering: how are we going to display an icon without images? Well, Drew Wilson’s (fabulous) Pictos font makes this quite simple. Unfortunately (but understandably) it’s not free, you can purchase is for $49 here. Luckily, there are other icon fonts out there like iconic, which you can use for free.

I should also mention that this has been tested using Webkit browsers only (Safari, Chrome). It may work in other browsers but probably with limited support. Check out the demo here!

Creating a Cartoony Print-Ready Business Card in Photoshop

business-card-tutorial-preview

Business cards are your little marketing companions. They’re small enough to carry anywhere, yet big enough to contain all essential details a prospective client has to know about you.

In this tutorial, we are going to learn how to create a print-ready business card in Photoshop. Designs made for printing have to be prepared in a special manner. Before sending to the printer, it’s best to make sure that your file is ready so you can avoid all the hassle of redesigning, or better yet, the anguish brought by a printing disaster.

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

cute-bar-thumb

Today we’ll be creating a bar that pops up at the top of a page, and stays above the content (similar to ‘hellobar’). The popup bar was only tested in Chrome and Safari and may not work in other browsers. The bar can be used to display information, for example your latest blog post, to the user.

The way the bar pops out at the top makes sure it’ll be seen. And after the visitor has seen the information, he/she has the option to hide the bar.