Glifo Adobe Photoshop Plugin Released for Icon Web Font Creation

While it might seem to make more sense to use a vector illustration program such as Adobe Illustrator to generate vector graphics, the fact is that Photoshop has become the do-it-all tool for design. As such, it's popular among web developers for icon web font creation. The Glifo panel, an Adobe Extension, has been released as a solution to generate these from Photoshop vector shape layers.

Icons to be included in a web font must be placed on their own vector layer, with a correct path and a layer name that includes the asterisk (*) prefix at the beginning. Icons are automatically assigned to a Unicode value but it's possible to assign an icon to a specific character by adding the greater equality symbol (>), followed by the character that should be assigned to the icon.

Once layer names are complete, users run Glifo to generate the icon web font in SVG format, as well as an HTML reference document and a style sheet. The HTML document makes it possible to quickly obtain specific CSS classes for any of the icons in the icon font by simply clicking on the icon. It's also possible to convert the SVG icon font to TrueType or Web Open format via converters such as Online Font Converter.

The developer warns that, "Although in most cases Glifo will be able to make a successful conversion it is important to remember not all icon paths will convert as is and may need some tweaking in order to get them to display correctly." A video is provided on how to fix broken icon paths if this arises.

Glifo for Mac and Windows CS5 and higher can be purchased for $19 on the ui parade site.