2.0 your Logo

domainnews_logo

One of the latest trends on the net today is having rich, reflected surfaces appearing on your website. This is a feature usually found on flashy stars containing important site information or navigation items to give them a sense of depth and interactivity. However, the effect not restricted to the web. Nowadays, designers are applying this method to corporate identity elements such as the company logo.


I designed the logo for DomainNews.com back in October 2006 and stuck to basic design principals such as keeping the shape and the colours simple and solid. I was happy with the outcome and stuck with it for a few months. The site that it was displayed on is a blog that brings daily domain name news and is therefore mainly a text orientated website. The overall feel of the website felt flat so I wanted to add a bit of dept to it. It was important not to disturb the viewer with unnecessary graphical elements within the text so I decided to modify the logo.

dnlogopieces

Since I had a circular logo to work with, it was easy for me to make the decision to add a shiny/gel/reflected suface to it. I was able to achieve this effect while also keeping the logo print friendly (the pink colour in the logo is 100% magenta). The first step was to add a radial gradient to the main circle which consists of 2 colour points: 100% magenta and 50% magenta). The second was to add the reflection to the top left of the circle. This was created by duplicating the main cirlce and deleting the bottom and right anchor points which left me with a section that I applied a linear gradient with the same values as above. Then it was a case of playing with the gradient angle and position until I was happy. I also nudged this section inward from the edge of the main circle by 1 pixel to help with the effect.

dnlogozoom

There you have it. A nice piece of eye-candy that can also be incorporated into other areas of the website. Take a look at the advertising section of DomainNews.com to see how it has been used along with another shape using a similar gradient.

Post to Twitter

Leave a Reply