Creating Web 2.0 Logos

Print This Page

WEB 2.0 is a term used to describe a trend in web design that emphasis creativity, information sharing, and community in the form of user contributed content and collaboration among users. While there is no official definition of the term WEB 2.0, the term is usually associated with social networking sites, wikis, blogs, and user voted content sites. Some notably players in the WEB 2.0 sphere include Myspace, Facebook as examples of social networking sites. User contributed content sites include Youtube, Fatwallet, and Slickdeals. There are also a category of sites such as Digg, Reddit, Del.cio.us, and Technorati who leverage the power of collective thinking and present content that is popular among its users.

WEB 2.0 sites are often open, friendly in appearance, and utilize a simple design. Logos and fonts use bright, cheerful colors with large, bold type. WEB 2.0 logos rarely use serif fonts and often rely on rounded fonts such as Arial Rounded in the case of Myspace, Alternate Gothic for Youtube, Frutiger for Flickr, and Neo Sans for Technorati. Gone are the days of hideous drop shadows fonts, diffuse glow effects, and texture fills fonts. For a sample of WEB 2.0 logos, check out Ludwid Gatzke’s compilation of over 400 logos here.

I recently had an opportunity to try out a few logo design ideas for a new website in the process of launching. MayhemInsider.com is a community based web site where users contribute content on subjects such as photography and modeling. I feel the concept of the web site fits well within the WEB 2.0 space so it’s only fitting that I incorporate WEB 2.0 logo design elements into their logo. The designs are part of many submissions and I have no idea if any of mine will be selected but it was an opportunity for me to try out some designs.

Font Selection. I decided early on that I wanted to use a rounded, san serif font. It had to be bold, friendly, and it had to scale well. My first try was to use Alba but I was not happy with the curved tails in all the M, Y, and H. I finally settled on using VAG round regular by Bitstream.

Color Selection. I wanted to use simple, cheerful colors. The four colors I finally settled on was lime green (61fc5d), light blue (6cb5fa), white (fefefe), and orange (f98741). These would be used in different combinations to highlight the logo and background.

Text Effect. The only text effect I wanted to use was placing the different characters of the word ‘mayhem’ in different angles to suggest a tumbled effect….a play on the word mayhem which suggests chaos.

A true professional graphic designer would use Adobe Illustrator to create a logo but since I am not a professional graphic designer, I’ll just use the tool I know best as a photographer and user Photoshop. It will work equally well for this purpose.

Logo 1: This uses the Alba font, a simple lime green background with the words ‘mayhem insider’ across. The characters in the word ‘mayhem’ are each in their own layers and tilted slightly using the Free Transform tool. There is nothing special about how to make this. Create a document, select the color, and fill the background. Then choose the text tool and start typing. The hardest part was typing out each character in its only layer so I can tilt them individually. To apply the tilt, simply select the character using the text tool and hold down CTRL. A transform box will show and grab one of the corners to rotate. This is the end result.

Logo 2: This is exactly the same as logo one but I changed the font to VAG round regular by Bitstream. I prefer this version over the first one.

Logo 3: This version is a departure from the previous designs adding blue and white as the background. The text color has changed and there is a curved divider for the background. Another very easy effect. Simply use the Elliptical marquee tool to draw a large circle and use the paint bucket to fill one section of the background blue. Using the white background on part of the logo gives the effect of floating the word ‘insider’ on the page if the background of the page is white.

Logo 4: This one is more complex than the others. It consist of a linear gradient background that starts dark at the top and lightens at the bottom. Then there is a callout box with a white border around it and the text is contained within. I positioned the characters in the word ‘mayhem’ so that it looks like it fell into the box and rested on top of the word ‘insider’. Note that the word ‘insider’ kisses the bottom of the box and each character in mayhem sits on top of or leans on the word ‘insider’ with the H in mayhem interlocking with the D in ‘insider’. To create this logo, follow these steps.

Create a background layer and fill it with a gradient by right clicking on the background layer and going to Blending Options.
Select Gradient Overly, click on the color bar and select a color.
Check the reverse box, blending mode to normal, and opacity to 45%.
Next, make sure the foreground color is the one you want to appear in the box.
Use the rounded rectangle tool to create a box making sure that the shape layer is selected on the toolbar.
Create a new layer above the round box layer.
Now use the polygonal lasso tool to create a sharp triangle at the bottom.
Use the paint bucket to fill this triangle with the same foreground color.
Merge the rounded box layer with the triangle layer by CTRL clicking on both layers, right clicking and selecting merge. You now have a call out box. Name this layer BOX.
To create the border, use the magic wand to select the entire green box with the triangle.
Right click inside the box and select layer via copy. It will duplicate a new layer above the current one. Name this layer BOX.
Select the original layer below and name this BORDER.
User the magic wand and selection this box.
Go to Select, Modify, Expand, 5 pixels.
Fill this entire layer white all the way to the edge.
You should now see a green box with a white border over a gradient background.
Enter and arrange the text as required.

This is the final result.

Logo 5: For this variation, I want to add a perspective effect. In order to do this, all the layers except the background layer must be merged so make a duplicate file and work on that to preserve the other layers. To merge the layers, SHIFT click to select all but the background layer and merge by right click. Once done, go to Edit, Transform, Perspective and adjust as desired. These are the two variations.

Logo 6:

This final variation take Logo 4 and merges two sets of layers to allow independent manipulation of perspective. I first merged the text layer, then the box layers. Each of these layers have opposing perspective effects applied giving a 3D like effect to the logo.