Save an alternate ‘virgin logo’ from a website
As a designer, there is many a time I need to grab a company’s logo and place it in a mock-up. This usually result in me taking the following action. Either I grab a usable (hopefully transparent) version of said logo off the company’s website. Or I start searching in google because the website version is stylized with a drop shadow and white text and a gradient in the background. Both acts still lead me needing to knock out the background of the logo and making it black on white; perfectly neutral with a global use/re-use.
Basically I like looking at the first of these, but want to work with the latter:
So one of my clients actually noticed this problem when a writer needed to grab his logo for an article. After some CSS-ing my solution is the following… view demo. I also implemented this on the website that sparked the idea, at www.bloom-hq.com.
Bear in mind I have made some assumptions. I assume you don’t have a media-kit that is downloadable and easy to find. I also assume that people are lazy and want to get your logo quickly and in a place they know where it is located (your header). In addition I assume that to cover most uses, even if people believe/want the stylized ‘website version’ of your logo, it is best to provide your logo as black on white (or greyscale) format.
Maybe this can be the start of a web standard to always provide your logo in it’s basic format for easy use (and save Google search and Illustrator tracing for something else).
I will update this post with the CSS needed to make this happen, but of course it’s all in the demo.
That is all.
