Duotone Custom Filter

Say you have a black & white image and want to display it in many different 2-color schemes.

thief_bwthief_red_yellowthief_blue_pink

You have a few options here.  You could draw the image in a canvas and then use JavaScript to manipulate each pixel.  Or you could in theory convert your black & white image to SVG and then use CSS to manipulate the colors.  That’s probably a pretty decent solution.

Or you could use the new duotone CSS custom filter I’ve built.  You can find the source for the new filter on Github here. Continue reading

Photoshop Layer Mask Implemented with CSS Custom Filters

My last post talked about how you can create a Photoshop-like soft blur effect with built-in filters.  As I started reading more about how you would actually create that soft blur effect in Photoshop though, I realized that often you don’t want the soft blur to apply to people’s faces.  You want to apply a layer mask which essentially punches through the soft blur around the central subject’s face to reveal the crisp underlying photo on the bottom layer. Continue reading

Creating a Soft Blur Effect with CSS Filters

CSS Filters can be added to any element on your Web page to create some very nice effects.  You can even add multiple filters to a given element to create some interesting combined effects.   Continue reading

Adobe CFF Font Rasterizer Contributed to FreeType

Yesterday, Adobe, in cooperation with Google, announced that the Adobe CFF rasterizer has been contributed FreeType.  If you’re a font geek, this is fantastic news.  If not, you might be thinking to yourself, “CFF is what again? Why is this important?”.

In a nutshell, modern outline fonts use two formats, TrueType and CFF.  A TrueType font has a lot of ‘hinting’ in the font file itself, indicating how best the font should be rendered.  CFF font files contain less hinting.  They are dependent more on the quality of the rasterizer.

However, because there is less hinting within the file, and due to its efficient file format, CFF fonts are on average about 20-50% smaller than TrueType fonts.

FreeType is an open source library used for font rendering on Android, iOS, Chrome OS, GNU/Linux, and other free Unix operating system derivatives such as FreeBSD and NetBSD. That makes for more than a billion devices running FreeType.

Let’s take a look at how the Adobe CFF rasterizer improves the rendering of CFF fonts.  The left column below contains a CFF font rendered with the FreeType hinter.  The middle column is rendered with FreeType’s light-auto hinter.  And finally, the right column is rendered with the CFF rasterizer that Adobe has contributed to FreeType:

JensonW-640x425

 

The difference is pretty self-evident.

I don’t think it’s a big leap to understand why it is important to have smaller font files on mobile devices and to have the rendering of those fonts improve dramatically.

More good news for the Web.

Hey, You Got Your Web Platform Docs in my Brackets!

bracketsI was recently talking to Adam Lehman, product manager for Brackets, about ways I could potentially help contribute to the product, perhaps by writing an extension or two.  I wanted to learn how to write a Brackets extension, but I also wanted my efforts to go into something people would find useful, something of real value.

It turned out, the timing of our meeting was perfect.

Continue reading