Ecommerce Developer
 
 

Photoshop & Illustrator

Tutorial: Create “Home” Icons in Adobe Illustrator CS4

 

There are going to be times when online shoppers just wants to start over, go back to the beginning of their shopping experiences and get reoriented.

Today, I will be showing you several techniques in Adobe Illustrator CS4 that can be used to create custom home icons for use on your website—just the sort of thing customers will need when they want to start over.

This tutorial is going to be one of a series of tutorials on icon creation for web development.

Video: Creating Custom Home Icons

What You’ll Learn

First, I will create two rectangle shapes and use the pathfinder to make the body of my house. Once I have created the house body, I will use the Direct Selection Tool and the Pen Tool to create a roof peak.

Next, I will show you how to copy a single Anchor Point from a path and paste it to create the roof of the home icon. I will also explain a nuance associated with copying and pasting Anchor Points to help keep you out of trouble.

Once the roof path as been created, I will show you how to convert it into a fill. I will also show you how to create a chimney using the same Pathfinder technique used to create the door. Once the body of the house has been created, I will show you several applications of Web 2.0 gradients to stylize a home icon.

Download the source files.

Related Articles

0 Comments

Rss-sm