Versatile Logos and Watermarks
Many people get a beautiful colour logo or wordmark created for their business; but did you know, you will probably need a black and/or white version of it somewhere on your site? This allows it to sit on dark or light coloured backgrounds but still be legible.
Basic Logo Variations
While building out sites I often need colour variations of logos or wordmarks for use in different areas, usually in white and black. Let me explain how to get the most practical colour variations for your logos & wordmarks to use on your site. I follow these same best practices when handling media for all my clients!
#1 - Coloured Logo
You probably have some sort of coloured logo done up for your business already. You should save your logo and wordmark (text-based logo) somewhere safe where you won’t lose them, including the source file if your designer provided you one. This makes it easier to edit or use the logo down the road for graphic design.
#2 - Transparency
Your logo probably already has a transparent background to make it lay on top of coloured elements more nicely. If not you will want to get your designer to create transparent versions of your logo/wordmark, or get the source file from them so you can do it or have another designer do it. If you don’t have access to them or the source file at all, I typically use Lunapic to remove the background from the logo if possible (depending on the logo size/colouration this may be easier or harder).
#3 - Solid Colour Logos
Now that you have your transparent logos, we can use an image editor like LunaPic to create light and dark versions.
White
Turn the brightness all the way to 100%. Every non-transparent part of your logo image will turn white. You will want to save/export this to a PNG (don’t forget to optimize the image before loading it to your site! Click for instructions here).
Black
Turn the brightness all the way to 0%. Every non-transparent part of your logo image will turn black. You will want to save/export this to a PNG (don’t forget to optimize the image before loading it to your site! Click for instructions here).