Designing Web 2.0 – Part 1 (The Logo)
Use of colour (applied to a logo). Including subtle 3D effect.
Learn how to create a web 2.0 style logo; a helpful guide to some useful photoshop
techniques you can incorporate into your other designs.
Almost every in vogue website and youthful new web start up has a look and feel that is centred on clean space and the limited use of bright colours.
A few years ago a JavaScript news ticker, a bunch of disjointed rollovers and the odd swish in the background was all your site needed to express a personality of technical prowess, now it seems less is more.
The sparing use of bright colour and abundance of calm white space demonstrates a particular skill with design and CSS that is surprisingly difficult to get just right.
In this article I will explain some Photoshop (CS2) based techniques for achieving a collection of graphics that will explore the phenomena of Web 2.0 design.
Use of colour (applied to a logo). Including subtle 3D effect.
For a Web 2.0 logo, grab a round and friendly font (http://www.betterfonts.com/), I chose ‘RayGun’. For a neater look use something like ‘Lucida Sans Unicode’ or ‘Trebuchet MS’, this will give a Mac like feel to the text.
Using Photoshop, think of a simple website name, and use your font to write it out:
Next make it a bright colour! Something like Orange or Light Blue, however try not to use the bright colour at its strongest value (ie, make it slightly darker or slightly lighter, FF0000 (Red) won’t do, but EF0101 might).
Insert a new blank layer, then Cntrl-Click the TEXT layer to make a selection.
Make sure you are on the new blank layer and, select: Select/ Modify/ Contract…
Contract the selection by 2 pixels.
Next, select the gradient tool.
Make sure the gradient is set to foreground to background. For your foreground colour choose white, and for you background colour choose a slightly darker version of your text colour.
Now apply the gradient to your blank layer.
Now press Cntrl-D, to de-select the selection. You might think the new colour is too light, if so just reduce the layers opacity.
And suddenly we have a lovely new logo. Simple and clean and modern.
RSS
Twitter
