Ecommerce Developer
 
 

Photoshop & Illustrator

Tutorial: Create Facebook Icons in Adobe Illustrator CS4

 

Adding a link from an ecommerce site to Facebook can be a powerful way to create both traffic for a site and a buzz around its product or service.

In this video tutorial, I will be showing you several ways to create trendy Facebook icons for use on a website. This tutorial is aimed at web developers wishing to increase their knowledge of Adobe Illustrator CS4 and icon design.

Download Source Files

First, I will show you how to create a foundation for the Facebook icons using three rounded rectangles, along with some simple addition and subtraction to calculate their correct size. I will then show you how to import the Facebook swatches included in the source files and apply them to the rounded rectangles. Next, I will show you how to import the Facebook “f” included in the source files and insert it into your icon. Finally, I will show how to add a simple highlight along with some glow effects to complete the icon.

After creating the first icon, I will show you how to quickly duplicate and modify it to create two new icons. Once you have created several Facebook icons, I will show you how to use the 3D Effects in Adobe Illustrator CS4 to create a new 3D icon out of any one of the icons on your canvas.

I will show you how to use the 3D Extrude and Bevel effect to create a three-dimensional preview of your icon. Once the effect has been applied, I will show you how to expand the different elements in your icon and delete the unwanted portions. After expanding and isolating the desired portions of your icon, I will show you how to apply gradients and effects to complete the design.

By the end of this tutorial you should be able to use the techniques shown in this tutorial to create Facebook vector icons.

Related Articles

0 Comments

Rss-sm