Scott Boms

Using Web Fonts in Photoshop

The other day I was invited to take a peek behind the curtain at a new web font related technology that’s nearly ready to hit the streets from the fine folks at Extensis. Needless to say I was very interested and excited by what they’ve been up to.

But first a bit of context…

How (Most) Web Designers Work Today

During TypeCon in New Orleans this past July, one of the things Brian, Luke and I covered during our talk on web fonts was process — exactly how (most) web designers work, and what happens to the particular artifacts we produce as a result of that work. In particular, design mockups, and most importantly though, how those relate to a web designer’s somewhat contentious relationship with fonts.

Web designers have wanted the same control over typography print designers have taken for granted for decades, including being able to use the same variety of typefaces. Hacks such as sIFR and Cufon aside, it’s really only during the last two years, thanks to the encouraging work of type designers, foundries and browser makers, that the tide has really turned and we’re inching closer to that reality.

Unlike print though, where designers create final artwork files that are the final output of the design phase of a project (a newspaper advertisement, a book layout, product packaging), the large majority of web designers create mockups, a transitional artifact created for the benefit of clients and others involved in producing the actual end product — a functioning website.

Mockups are not the end result, and so purchasing desktop font licenses for what is effectively a throwaway product is counter-intuitive. Web fonts are part of the real end product of a web designer’s work, not their desktop equivalents. But that’s not the way we’ve had to work.

And it’s certainly not that web designers don’t want to pay for fonts — quite the opposite in fact. Web designers have flocked to web font services such as FontDeck, Typekit, and WebINK, and more will come as these services are more readily adopted by those beyond the early adopters.

During our talk at TypeCon, we further explored a suggestion which originated from Elliot Jay Stocks illustrating how web fonts might be integrated into a desktop design application such as Photoshop. In July no such thing existed; it was just an idea. And while the software is not available quite yet, I can happily say that it does now thanks to the team behind WebINK, Extensis’ web font service.

Introducing the Web Font Plugin for Photoshop

To address this disconnect in how web designers work, Extensis has created a piece of software that bridges their WebINK web font service and Photoshop, thus allowing web designers to use web fonts as though they were traditional desktop fonts in the popular design tool.

The WebINK Web Font plugin for Photoshop in action
The WebINK Web Font plugin for Photoshop CS5

The web font plugin for Photoshop will be included with Suitcase Fusion 3 and available in beta in the coming weeks. Most importantly, it will continue to function beyond the software’s 30 day trial. There’s no requirement to purchase or use Suitcase — it’s simply the delivery mechanism for the plugin itself and assists in integrating the plugin with their WebINK web font service.

At the moment the functionality is simple and straightforward. Once the software is installed, open the Panel in Photoshop, sign in to your account and start working with their library of web fonts.

Transferring PSD files to others is seamless too, provided they have a WebINK account and the plugin installed. Designers will also be free to create JPEG, PNG and PDF files without watermarks or licensing restrictions beyond anything they’re already used to. Of course, there are still a few unanswered questions such as what happens without a network connection, but it’s a very promising start and raises the bar for competing web font services. Nudge, nudge Typekit and FontDeck.

Update (September 12, 2011)

Extensis has soft-launched the software’s microsite and you can download a 30 day free trial of Suitcase Fusion 3 and the Web Font plugin for Photoshop at webfontplugin.com. Go. Download. Create.