[tweetmeme]Lately LetterPress has become a real trend in web design. For those unfamiliar with the effect, LetterPress gives the impression that words and letters have actually been pressed or bevelled inwards. It’s not hard to see why it’s so popular. LetterPress is stylish, very simple, and it’s third dimension allows it to catch the eye without being overpowering. It’s very easy too, and only takes a few minutes. Here’s how to apply the LetterPress typography effect in photoshop.

Step 1:

Open a new canvas in photoshop and paint a new colour to the background. Radial Gradients work well here. As you can see I’ve chosen a gradient of light greys, with the lightest colour glowing from the bottom of the canvas.

Step 2:

Type your word in and choose the colour of your text. The colour should be white, black, or a lighter or darker version of your background colour. As you can see, I’ve chosen white which conforms with the grey background.
The LetterPress effect works significantly better on larger sized text, and bold fonts work much more effectively. I’m using Museo with the weight as 700 and the size at 150pt. The settings in the next few steps apply mainly to text around 150pt. If your text is smaller, just use smaller sizes and depths. Likewise for larger fonts, use larger numbers in the settings.

Step 3:

Add a gradient overlay to your word. Set the colours to black and white, and reduce the opacity to around 5-10%. Your gradient needs to be subtle, and the lighter colours work better at the top.

Step 4:

Add an Inner Shadow to the text. This will give the effect that the text has been pressed into the surface. The depth of the inner shadow determines how far inwards the text is pressed, but I tend to find that less is more. Set the colour to black and reduce the opacity to 40%. The size and depth may change slightly depending on the size of the text you’re using (the size I used was 150pt). I’ve gone with a depth of 2px and a size of 4px. Also setting the angle at 120 degrees tends to be the most effective. The angle we use here will depict the position of the light source. 120 is a fairly natural angle, and it also helps to add the third dimension.

Step 5:

Add a light Drop Shadow. The shadow helps to give the effect that the edges are curved, as though they are beveled inwards. In order for the effect to be optimal, we need to once again consider that less is more. I’ve gone with a distance of 0px because all corners of the text will be beveled, as well as an angle of 120 degrees to be consistent with the light source and the inner shadow. Also, the colour is very important. In order to make the lighting of the text realistic, your shadow needs to be darker than the darkest colour in your background. This can easily be achieved by setting the colour to black and reducing the opacity to between 30% and 60%, depending on the darkness of your colour. That way, if you’ve got a red background, the shadow will appear dark red. Likewise with blue and every other colour.

Step 6 (optional, but worth doing):

Add some noise to your background. This light noisy texture adds to the realism off the pressed in letters. It looks like paper, or a notepad, or something else you’d imagine letters could be pressed into. I’ve gone with uniform, monochromatic noise with the amount set to 3%. Once again, i’m being minimalistic.

But I’ve got small font and it looks crappy with these settings:

Just use smaller numbers for the settings. I’ve based my figures around a font size of 150pt. If your font is significantly smaller, then just use 2 or 3 for the inner shadow depth instead of 4, or whichever number makes it look good.

That’s really all there is to it. The LetterPress effect is very simple to apply and produces great results. It’s simple, modern and incredibly stylish. Just remember to be minimalistic and all should be well.

[tweetmeme]Yep, thanks for noticing. As you can probably see, PhotoGuides has been completely redesigned from the ground up. Whilst the colours and iconic style of PhotoGuides has remained fairly close to the original, the whole structure is evidently different. Here’s why we’ve redesigned.

The main focus for this redesign was to allow PhotoGuides to develop and become a strong contender in the world of online tutorials. Whilst the old website looked pretty nice, I felt it lacked usability. Content struggled to flow and it was impossible to support more than four categories. This was a huge burden to the concept of development, because it simply meant the website couldn’t expand, and even if it did there would be no way of sharing the great new content.

When I was asking for feedback on the old website design, most of it was positive. People liked the simple, elegant style of PhotoGuides. They liked how all the focus was on the tutorials and thought that the featured posts slider was pretty cool. It was clear that everyone liked the style and appearance of PhotoGuides.

Thanks to this feedback, I felt it was important to keep the website looking the same way. It’s still simple, it’s still elegant, the featured post slider is still pretty cool and thanks to the clear structure of the design, all of the focus is still on the guides and tutorials. The biggest change however comes when you scroll below the featured slider. Now every new post is displayed chronologically so you can scroll away and click anything that catches your eye. The structured sidebar also allows me to feature cool new stuff like posts and members content, and the categories bar just below the title also allows every section of PhotoGuides to easily be discovered and explored. All of these little things help to make the site so much more usable, and open doors for expansion in the future.

I’ve got a few ideas of where I want the website to head in the future, a few ideas of sections i’d like to open up, guides and tutorials to write and podcasts to release. This new design has opened up doors for expansion and is the key to achieving my goals for PhotoGuides. Thanks again to everyone who offered their feedback.

But what do you think of the new design? All feedback is welcome via the comments or by contacting me. Even if you’re new to PhotoGuides, what do you think of the new design, not just based on appearances, but on usability as well?