Feeding the Hand That Fed Me

It took me a little while to get this all cleaned up and ready for release, but I’m finally making the expanded RSS buttons that we’ve started to use at NYTimes.com available to everyone. You can grab the PNG file here (right- or control-click on the image at the start of this post to save it to your computer) and start using it right away, or you can download the artwork as an Adobe Photoshop file and start customizing the label to suit your particular needs.

Whatever Label Suits You

Below: Anatomy of an icon. The feed icon button as Photoshop layers.

Why would you want to do that? Well, I’m glad you asked. The template, as provided, reads “FEED,” but you may be in an organization that prefers “RSS” or some other appellation. Setting aside the philosophical argument about whether that’s a good idea or not, this file preserves the text as an editable layer, so you can change it to read anything you’d like.


Font-tastically Flexible

The version I’m showing here uses the typeface Helvetica Neue Bold Condensed for its label, so you’ll need to have that installed on your computer if you want exactly the same look. Mindful of the fact that not everyone is lucky enough to own a copy of Helvetica Neue, there’s an alternative layer included that uses the more widely available (if also more widely disliked) Arial typeface instead. It doesn’t look nearly as nice, but only a hair’s breadth-sized slice of the public at large will notice.

Fringe Elements

But wait, there’s more! The edges of the button are translucent, so that you can create buttons that are appropriately ‘fringed’ to match the background against which they’ll sit. For instance, if you’ll be displaying your buttons against a pink background, you can use this template to generate a new image with pixels of intermediate color at the edge, that will then blend in perfectly with the pink background. A designer’s nirvana.

As an added bonus, I’ve included an alpha channel that will crop out a clean silhouette, so that the resulting button can be used against any color background without editing the fringed pixels. Now how much would you pay? Well put away that wallet, because it’s free.

  1. Ahhh! Arial! Scourge of the internet!


    Thanks much for this, Khoi.

    BTW, I name dropped you to my mother today. “I know the guy who does the NYT’s web design”. I don’t know what’s stranger. That I’m that big a geek or that my mom thought that was cool.

  2. Maybe add another layer with the type as rasterized so that the ones who doesn’t have helvtica still can have helvetica as the label? Nice work btw!

  3. I think you can actually get that without needing Helvetica Neue at all, at least with more recent versions of Adobe Photoshop (CS and CS2). Correct me if I’m wrong, people, and I’ll update the file.

  4. Thanks a million Khoi. When you first showed off the icon, I made a lame attempt at recreating it, but couldn’t find the font to match. You’re a stand up guy for sharing this with the world. Hopefully it will bring some ease to the non-geeks on the web.

  5. Julian, search the archives for more information on this and why he’s not using the standard feed icon.

    Khoi, funny thing about the fonts… I loaded the file up in PS and of course the font warning came up. What is suspicious however is that it’s not complaining about the Helvetica font, it’s complaining about not having Arial…

    Do you have some modified version of Arial on your system?

  6. Hmm, I don’t think so. I’m just using plain ol’ Arial as it’s installed on my system. Does it look the same if you change the ‘missing’ Arial with the one you have installed on your computer?

  7. It may give the impression of fuzziness only because it’s been enlarged at the top of the post there. This particular file is meant to be shown at the smaller size.

  8. Yeah, it looks the same. Do you have MS Office installed on your service?

    I know Office installs a bunch of fonts as soon as you install the app, so I’m wondering if it comes with a different version of Arial, i.e., if you don’t have Office installed and I do, I would have a different version.

  9. I also think this icon is really appropriate, and perfect timing for me. 🙂 Sincere thanks for sharing it, Khoi.

  10. You’re welcome everyone. I was negligent in pointing out that this icon wasn’t actually designed by me, but by Caryn Tutino, a truly excellent designer in my group at the Times/em>.

    Joshua: I do have Office installed on my Mac, but I honestly don’t know why you’re getting a font conflict, sorry. If it’s a big problem, email me and I’ll see if I can help you work through it.

  11. I think you can actually get that without needing Helvetica Neue at all, at least with more recent versions of Adobe Photoshop (CS and CS2). Correct me if I’m wrong, people, and I’ll update the file.

    Correct, and it’s true on Photoshop 7 too.

  12. Thanks for sharing the icon and your previous posts on the topic. Our organization (non-techie financial services firm)is set to offer news feeds for the first time and is torn on the label – “RSS” or “FEED.”

    Can you explain the Times reasoning on staying the course with the “RSS” label?

    And hypothetically, if you had a blank slate (with a non-geek user base)what label would you use out of the chute -RSS or FEED?

    Any insight would be appreciated.

Thank you! Your remarks have been sent to Khoi.