A couple of people have asked me about the Social Network icons in the right column of my design: where I got them, how I made them, if they can “steal” them, and so forth. I’ll discuss all three below, but those who just want to use them for their own site can now download the 10 icons in Photoshop PSD format and be done here.
Still reading? Fantastic. Let’s get started.
Where did these icons come from?
When I began work on my site’s current design, I ran into a problem pretty quickly: the “Web 2.0 icons”—as I started calling them for simplicity’s sake—were not exactly available in any form suitable for my design.
Some of the social networks had good PR sections with various incarnations of their logo available for (free) use, but most of them either did not or they didn’t have a logo I could use readily. For the sites I couldn’t find a usable logo for, I started sifting through their HTML code in search of Apple Touch icons. Those were often more useful in terms of image dimensions, being closer to what I needed, as well as design.
Still, I was missing a couple. Twitter, for instance, had no logo for download in their PR section and their Apple Touch icon was not at all suitable for my purposes. In such cases, I simply took the largest version of the logo I could find and worked with that. Speaking of…
How did I make the icons?
Sadly (for me), almost every icon I found was not usable right off the bat. Even the ones I found in nice alpha-PNG format were insufficient. I had to process them, which turned out to be extremely painstaking: in order to separate the logo itself from the background color it rested on, I had to manually reproduce every single anti-aliased pixel in each logo. Yes, I really did do pixel-for-pixel manual Anti-Aliasing. If anyone knows of a process to do this automatically in Photoshop, please tell me because a lot of time was spent searching the Web for an easier technique to do this.
I could have, of course, tried getting in touch with PR representatives of each social network and ask if I could get an unaltered, clean PSD of their logo somehow, but I suspected that would be an even more harrowing process.
Suffice to say, after many hours of pixel-pushing in Photoshop I ended up with ten nicely anti-aliased, isolated, transparency-friendly versions of the logos of my most-used social networks. They allowed me to create the nice Elsewhere tabs you can see on the right in my site, which look their prettiest when you view and hover over them in Safari.
Can I use them on my own site?
You sure can! I crafted a separate PSD containing just the logos, set in separate layers atop a background palette of the same colors I used as backgrounds for each respective icon in my site. I also added an empty layer in the PSD file containing the drop shadow Layer Style that I used, so if you want to add that same shadow you can just copy-paste the Layer Style. This is especially relevant for the Dopplr logo and background, for instance.
There’s a download link to the PSD file above, or simply click this big fancy image to download the ten icons and use them on your own site. If you use them, a mention for my efforts would be nice, but is not at all required.
Update: two small disclaimers: first, I take no credit for the creation of the logos themselves nor are these versions officially sanctioned or approved by the networks. Second, the Dopplr and Flickr logos are slightly adjusted in that for the first, I stacked the six squares and for the latter I added the white circle. Both of these adjustments were made for usability purposes, but your mileage with them may vary.