Attention to detail matters in web design, and having a custom favicon is a good example of web design detail. This tutorial is aimed at developers and do-it-yourselfers that don’t often work with favicons and Adobe Illustrator, or are simply unfamiliar with how easy it is to make favicons.
In this video tutorial, I will be showing you how to create your own custom favicon in Adobe Illustrator CS4 for use on any website.
Quickly Create A Favicon in Adobe Illustrator CS4
What to Expect from this Video Tutorial on Favicons
I'll explain what a favicon is and why having one can be beneficial to your site. I will show you how to make your Illustrator canvas preview on a transparent grid rather than preview on a white background. I will also show you some manipulations with Rounded Rectangle Tool and teach you how to add glossy gradients to that shape. I will also review some text manipulations for creating your favicon. Once you have a favicon designed, I will show you how to optimize it using the Pathfinders Tool in Adobe Illustrator CS4.
I will teach you how to take a path, convert it to an outlines, and then merge your new outline with the leftover path. I will also show you how to use the Pathfinder Tool to trim or cut one shape from another. I will also briefly introduce you to the Direct Selection Tool and show you the difference between it and the Selection Tool. Once you have a fully designed and optimized icon, I will show you how the Save for Web and Devices feature, covered in another Ecommerce Developer tutorial, to save your icon design as a .png file with transparency enabled. I will then show you how to convert a .png file into an icon, or .ico file, using Windows Explorer.
I will quickly go through changing your file view in Windows Vista and Windows 7 to disable hiding known file extensions. After deselecting the "Hide known file extensions," I will explain how to rename the portion of your file labeled .png to .ico, and describe the method used to display your favicon on your website. By the end of this tutorial, you should be able to create a custom favicon using Adobe Illustrator CS4 and Windows Explorer.
Related Articles
- Tutorial: Isolate Product Images With Photoshop
- Tutorial: Reduce Image Sizes with Basic Photoshop and Illustrator Features
- Tutorial: Protect Your Site Images With Watermarks
This article is filed under Photoshop & Illustrator and has the following keyword tags: illustrator, favicon, adobe, site design.
