Tue 08 Aug
2006

Feeding the Hand That Fed Me

Body

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.

060808_layers_palette.png

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.

+

Remarks 25 total remarks were added before the post was closed.

Tue 08 Aug 2006 at 08:57 PM
Chris

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.

Tue 08 Aug 2006 at 09:06 PM
Khoi Vinh

Mothers know best!

Tue 08 Aug 2006 at 09:47 PM
Daniel Eek

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!

Tue 08 Aug 2006 at 09:51 PM
Khoi Vinh

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.

Tue 08 Aug 2006 at 09:59 PM
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.

Tue 08 Aug 2006 at 10:01 PM
Julian Bennett Holmes

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.

Tue 08 Aug 2006 at 10:58 PM
Joshua Bryant

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?

Wed 09 Aug 2006 at 12:21 AM
Khoi Vinh

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?

Wed 09 Aug 2006 at 09:02 AM
Ron Domingue

Thanks, Khoi!

Wed 09 Aug 2006 at 09:42 AM
Jemaleddin

Nice work, but am I the only one who wishes that were crisper? It's just a little too fuzzy for my taste.

Wed 09 Aug 2006 at 09:45 AM
Khoi Vinh

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.

Wed 09 Aug 2006 at 11:23 AM
John Zeratsky

Bravo, Khoi. I think these turned out nicely.

Wed 09 Aug 2006 at 12:28 PM
Lisa

Yay, now I don't have to make one of these. Thank you icon fairy.

Wed 09 Aug 2006 at 01:41 PM
Kunal Anand

Awesome job Khoi. I'll definitely be using this for my next project.

Wed 09 Aug 2006 at 01:42 PM
matiasjajaja

Great !

thanks for sharing, it´s a great solution!

Wed 09 Aug 2006 at 03:18 PM
Richard Quick

That's awesome.

:o)

Thanks for sharing it!

Wed 09 Aug 2006 at 04:11 PM
Joshua Bryant

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.

Wed 09 Aug 2006 at 04:20 PM
Beth

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

Wed 09 Aug 2006 at 10:08 PM
Khoi Vinh

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.

Thu 10 Aug 2006 at 04:19 AM
Reed

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.

Thu 10 Aug 2006 at 06:02 PM
maus~

Funny... Apparently Mr. President doesn't appreciate the icons ;)

Fri 18 Aug 2006 at 01:12 PM
Walker Hamilton

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

Tue 29 Aug 2006 at 07:42 AM
Rocketeer

Yep, thanks for the suave icon! I will implement it on my site as soon as I get a chance...

Wed 22 Nov 2006 at 04:00 PM
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?

Any insight would be appreciated.

Thu 18 Jan 2007 at 07:00 AM
orxezg


http://italytop.szm.com/sesso7/Sesso-Forte-Foto-Gratuita.html ">Sesso Forte Foto Gratuita

Categories