is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe. Previously, Khoi was co-founder and CEO of Mixel (acquired in 2013), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “How They Got There: Interviews with Digital Designers About Their Careers”and “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children.
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.
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.
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.
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.
Omar McFarlane
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.
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?
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?
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.
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.
Beth
I also think this icon is really appropriate, and perfect timing for me. 🙂 Sincere thanks for sharing it, Khoi.
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.
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.
maus~
Funny… Apparently Mr. President doesn’t appreciate the icons 😉
Yep, thanks for the suave icon! I will implement it on my site as soon as I get a chance…
Spiro
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?
It took me a little while to get this all cleaned up and ready for release, but I’m finally making the 
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.
Mothers know best!
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!
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.
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.
You didn’t think the standard icons at feedicons.com were good?
I personally like those, but yours look excellent, especially until the standard symbol used on the icons is more generally recognized.
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?
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?
Thanks, Khoi!
Nice work, but am I the only one who wishes that were crisper? It’s just a little too fuzzy for my taste.
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.
Bravo, Khoi. I think these turned out nicely.
Yay, now I don’t have to make one of these. Thank you icon fairy.
Awesome job Khoi. I’ll definitely be using this for my next project.
Great !
thanks for sharing, it┤s a great solution!
That’s awesome.
:o)
Thanks for sharing it!
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.
I also think this icon is really appropriate, and perfect timing for me. 🙂 Sincere thanks for sharing it, Khoi.
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.
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.
Funny… Apparently Mr. President doesn’t appreciate the icons 😉
Apparently, the guys who work on the PGA championship website read your blog, or at least, pay attention to the NYTimes.com site.
http://www.pga.com/pgachampionship/2006/index.html
Yep, thanks for the suave icon! I will implement it on my site as soon as I get a chance…
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.
http://italytop.szm.com/sesso7/Sesso-Forte-Foto-Gratuita.html “>Sesso Forte Foto Gratuita