Pixelmountain

Tutorial: Maak een ‘Letterpress’ effect in Photoshop

Een van de nieuwste trends op het grafische vlak van webdesign is het zogenaamde Letterpress-effect. Ofte simpeler gezegd: een relief geven aan je tekst. Je hebt dit effect zeker al wel eens gezien, toegepast op een lijn:

In CSS3 is het mogelijk om dit rechtstreeks op je tekst te produceren met behulp van je stylesheet. Maar CSS3 wordt nog niet ondersteund door alle browsers. Wil je toch al dit effect toepassen op je website, dan kan dat a.h.v. een image. Let wel: het gebruik van images is niet zonder gevaar. Geef dus zeker een alt- en title-tag mee aan de afbeelding. Of gebruik een andere veelgebruikte manier: image-replacement.

Oke, tot zover het geleuter: laten we eens eentje maken!

Laten we starten met een basislijn waar we in geen tijd een reliefeffect op toepassen.

We doen dit met een techniek die lichtjes afwijkt van de methode die we zo meteen zullen bespreken. Maar deze is net iets sneller, en is ook toepasbaar in andere projecten.

Maak een nieuw Photoshop-document aan, en creëer een nieuwe laag. Vul deze laag met een lichtblauwe kleur. De tint maakt niet echt uit, we gaan ze toch opvullen met een radial gradient. Ik gebruikte volgende kleurcodes: #15d4e6 en #01b2e4. Kijk even naar de andere instellingen:

Maak nu een nieuwe laag aan. We gaan nu een lijn tekenen met de pencil-tool. We kiezen voor een donkerblauwe kleur, bvb #00678f en tekenen een horizontale lijn. Tip: houdt de shift-toets ingedrukt om een rechte horizontale lijn te tekenen. Maak een nieuwe laag aan, en doe net hetzelfde: teken een even lange lijn, net onder de eerste lijn, en zorg ervoor dat de kleur een vrij lichtblauwe tint krijgt, bvb #00dfef. Zorg nu dat de twee lijnen net onder elkaar staan. Ons eerste Letterpress effect is klaar!

En nu toepassen op wat tekst

Wanneer we dit effect op tekst willen toepassen, gebruiken we een andere techniek. We maken gebruik van de o-zo handige laagstijlen die standaard in Photoshop zitten.

We zetten wat tekst op ons werkblad. Dubbelklik op de tekstlaag, en de laagopties verschijnen. We gaan een overlay-kleur toevoegen. Kies hier voor dezelfde kleur als onze donkerblauwe lijn #00678f.

Nu voegen we een schaduw binnen toe. Standaard geeft Photoshop een blurry schaduw. Maar we gaan dit wat subtieler maken. En wel met deze instellingen:

Het begint al op iets te lijken, maar nu willen we nog wel dat het echt lijkt of onze tekst is op ons scherm gedrukt. In hetzelfde laagoptiesvenster vinken we nu het drop schaduw-item aan. We passen de instellingen als volgt aan:

Misschien gebruik je hier wel best een lichtere tint van blauw dan bij onze lijn. bvb #a0f9ff. Op die manier wordt het effect beter zichtbaar. Dit is uiteraard afhankelijk van de kleuren die je bij aanvang van je project gebruikt.

Voila, simple comme bonjour. Bovendien kan je die effecten ook op allerlei andere items toepassen. Buttons, icons,…