Pixelated imagery is a common occurrence online, especially within the restrictions of the 72 pixels per inch ‘rule’. The blurry, artifact-ridden edges are something you need to steer clear of when presenting digital work due to the ugly nature of the small, off-coloured squares that make up your pictures. Deliberately pixelating to censor is also a common technique used to mask details that need hidden, for example on documents, registration numbers, people’s faces and nudity.
Recently, I was blurring an image through the ‘mosaic’ filter in Photoshop, in which, a small portion of the logo became blurred. The interesting thing was that the logo itself retained shape, and therefore remained recognisable. This led me to question how far a logo could be blurred or pixelated, without making it unidentifiable.
Below is a selection of classic logos, arguably the most recognisable globally – surely the best place to start the experiment? Let’s see how they hold up to the treatment.
Overall, I think it’s pretty clear that the ‘brand colour’ plays a central role in the companies’ visualisation. McDonalds for example, could be pixelated to twice the level it was done here, and still be identified by a five year old – due not only to the giant “M”, but the red and yellow brand colours. Both eBay and Google succeed in holding their colours under pixelation, although the flaws of the Google logo become a little easier to see. For more thoughts on that please see my post on the Google Logo Redesign.
The Nike tick exemplifies the key qualities in logo design, making it recognisable down to favicon-level sizes. Here, the pixelation barely distorts the shape, especially when compared to Starbucks or Nintendo where the background and logotype blend to make it essentially unreadable. Text in general is difficult to work with at particularly small scales, or in this case distortion. It’s also interesting to note how spherical and rounded edges can be built from squares, or pixels. Usually this is not a concern because the pixels are so small, but in the case of this experiment, the Audi rings only look circular when you squint.
Breaking down a logo into it’s key form, in it’s primary colour is the most effective way of retaining legibility. Any visual stylisation, such as Mercedes’ 3D bezel approach is lost under pixelation; fortunately their logo works well in black and white, free from any effects.
A similar trick I use when testing the adaptability of a logo design is to squint my eyes at varying levels and distances. This has the same effect, where details are blurred and you can focus on the core shapes and contrast. If you can still make out the important facets, then the logo has a decent level of adaptability. If it becomes a blurred mess of shape and colour, it may be worthwhile trying to draw things back to their basic communicative functions.
It may be a helpful exercise when designing your next logo to consider how it would look when pixelated, if only to see how it holds up. It can be done easily in Photoshop – Go to ‘filters’ then “Pixelate” –> “Mosaic” and push the sliders as far as you can before it becomes an unrecognisable set of shapes.