Even the most skilled web developers are not necessarily vector graphic pros. This video tutorial will introduce you to some of the skills that can significantly improve your vector-related projects.
In this tutorial, I will show you a number of techniques that can be used to create a variety of vector web badges in Adobe Illustrator CS4. These web badges can be used on a website to promote a product, announce a sale, or simply draw attention.
What You'll Learn About Vector Images and Creating Web Badges
First, I'll show you how to manipulate the Star Tool in Adobe Illustrator to create a good foundation for a web badge. Then, I'll show you how to apply a custom radial gradient to that shape and how you can create, save, and open custom swatches. After that, I will show you how to import a portion of another Illustrator file and how to apply a custom gradient to that as well. Once you have both a base for your web badge, and some filler information placed on it, I will show you how to add several different effects to your badge to give it a more professional look.
The first effect I will show you is the Inner Glow. To apply the inner glow, you'll go up to the Effect menu option, down to the Stylize option, and then select Inner Glow (Effect»Stylize»Inner Glow). I will go through the different options for the Inner Glow Effect, but note that these options are the same for both the Outer Glow and Drop Shadow effects. Once you have added your inner glow, I'll show you how to add the outer glow by selecting Effect»Stylize»Outer Glow. Next I will explain how to create a glossy highlight to your web badge using a new vector path, a gradient, and the Pathfinder Tool.
At this point you should have completed an adequate web badge, but I will show you how to take it a step further and add a 3D fold to the corner. First, I will use the Direct Selection Tool and the Pen Tool to remove some of the points from my star shape. Upon removing some of the pointed portion of the badge, I will show you how to use the Pen Tool and the Direct Selection tool to create your badge fold. Once the fold shape has been created, I will add a gradient swatch and apply a Drop Shadow to further emphasize the 3D look. Now that the badge is fully completed, I will show you a helpful tool in Adobe Illustrator that will allow you to easily modify the color of your web badge and enable you to create a wide range of colored web badges.
By the end of this tutorial you should understand a range of techniques that can be used to create a selection of multicolored web badges.
