Noise, Grooves & Text-Shadows…

…And what do you get? One of the biggest web design trends of 2009 – 2010.

New sites are popping up all over using very simple techniques to create very effective, modern looking designs. And why are these techniques proving so successful? Well one of the biggest reasons is they are used so heavily nowadays on designs for Apple products, namely iPad and iPhone.

That’s right, Noise, Grooves and Text Shadows are such a winning combination because they highlight depth, and pixel perfect accuracy, simply because each of them use a single pixel width or height to create the desired effect, and you can’t get much more accurate than that…Well, unless you are designing for iPhone 4, in which case you have to use a bit of maths to calculate how wide a pixel actually is on screen, as the new screens use a higher resolution than that of superman’s vision!

So for this tutorial we will be sticking with the standard 72DPI.

These techniques have become bread and butter to the every day UI designer and will be commonly seen on a load of websites and applications, possibly to many you say? Well maybe, but being able to perfect these simple steps and techniques means when the right project comes along, you to can easily implement a modern look to your site designs.

So, that’s the intro out the way! Now I thought I would cover off each of the above for mentioned items and display how they can be used and combined.

The Desired Outcome.

Basic setup, open up Photoshop and create a blank image, any size will do for playing around with this, I used 500px x 250px. Throw in a gradient, here I used (#848ea2 top and #5b687f bottom) and we are ready to go!

Technique 1 – Noise

Easy-peasy this one, just don’t over do it! Noise can be produced very simply in Photoshop by navigating to ‘Filter’ > ‘Noise’ > ‘Add Noise’

For this example I set the noise to 1%, Distribution to Gaussian and made the whole thing monochrome to keep away from the multicolours!

Technique 2 – Grooves

Two ways to create grooves, either with images, or with borders in CSS, depending on where you are using them and how often they are to be repeated. I would suggest using a background image for main header breaks or title breaks, and borders for items such as list breaks or repeating items.

a) Create a Groove in HTML

This is best used for repeating elements stacked either next to or on top of each other, and can only really be used with more than 2 items or you will lose the effect. For this, all we need to do is add a border-top and border-bottom to our elements, one light and one dark to create the groove effect.

So, using the colours we are using in this example, your code would look something like this:


ul{
border-top: #3d495f 1px solid;
border-bottom: #8895ac 1px solid;
}
ul li{
border-top: #8895ac 1px solid;
border-bottom: #3d495f 1px solid;
}
 


You will notice that the colours have been reversed from the List to the List item, this is so we can apply the grooved look to the first and last element. You must also make sure you have no margin on your list items and no margin or padding on your list. That easy!

b) Create Grooves with Background Images

This is still a light weight solution and very simple to create, better suited for individual items and one which I would suggest using for this example.

For our horizontal groove we need to create a 1px wide by 2px high image, which can be saved as a 2 colour gif to keep the weight to a minimum.

Selecting your shades here are quite important as they need to be balanced. If your groove uses to heavy highlight and not enough low-light, or visa verse, you can easily loose the effect of the groove and your line will look more like a 1.5 pixel badly aliased cutout.

For the visual we simply stretch this 1px wide image to the width of our canvas like so.

When zoomed out you will see our groove stands out nicely and offers a decent amount of depth. Both the highs and lows can be picked out nicely. For this example I used the colours: #8895ac for the highlight (bottom) and #3d495f for the low light (top).

Technique 3 – Text Shadow

Text shadows are being brought in through CSS3, and even though not fully supported over all browsers, this CSS3 technique alters the look of the element so subtly that when viewed in none supported browsers, the fallback and degradation effect is pretty minimal, it is worth the risk of using it.

If you are concerned about your CSS being valid, which you have every right to,  then you can always create a secondary CSS file for your CSS3 elements.

So we choose a font for our header and copy, for this we are using a web safe font ‘Times New Roman’ but with the range of font replacement techniques available this could easily be applied to a none web safe font also.

We will set our header font size to 70px and center the text, and our paragraph will be set to 18px with a line height of 22px. Both will have a colour of #0f1727 which is quite dark but, we need to keep our contrast up as the same applies with colours on text shadows as it does when creating the groove, to little difference and you will not notice the effect, to much and it will become unreadable, as demonstrated below.

So the left item does not include any text shadow, the center image has text shadow of white which is to vivid, and the image on the right has the finalised colour which was chosen as #8895ac.

So applying all these techniques together we end up with a very nice, modern looking snapshot of what a full web page could look like.

All I would say is do not over use these techniques, as much as they are popular at the moment, they do become quite repetitive and should only really be used on extremely relevant projects, not just for the sake of using them.

So that’s a wrap! Hope you enjoyed this little tutorial, go now and make some Noise, get Groovy and be sure you leave a Shadow!