Hipster Text Effect in Pixelmator

Every time I checked Dribbble I see a bunch of posts with this sort of vintage typography style. It's a very interesting look and very trendy nowadays. With that in mind, I decided to improve my skills by trying to replicate this look and feel using Pixelmator. I will also post a tutorial using Photoshop, Fireworks, and CSS.

So in this tutorial, I will show you how to create a nice Hipster Text Effect in Pixelmator.

Pixelmator tutorial

Step 1

Open Pixelmator and create a new document. I am using 1680x1050 pixels. With the Paint Bucket Tool (N) fill the background with a salmon color (#d97b64).

Hipster Text Effect in Pixelmator

Step 2

Let's add some text now. For the font, I used Sulivan Bevel. You can download it at http://www.losttype.com/font/?name=sullivan. For the color I used #cfbf9b. Use Overlay for the Blending.

Hipster Text Effect in Pixelmator

Step 3

Duplicate the font layer and change the font to Sullivan Regular. After that go to Filter>Blur>Gaussian Blur. Use 1 for the radius, also change the Blending to Overlay.

Hipster Text Effect in Pixelmator

Step 4

Just duplicate the layer created on step 2 to darken the text.

Hipster Text Effect in Pixelmator

Step 5

The first thing to do here is duplicate the text layer and change the font to Sullivan Fill. Then use the same color of the background. We want to create some shadow but the problem is that the font has some cutout areas and by adding a layer with the text and the Sullivan Fill we solve the problem,

After that duplicate the layer with the Sulivan Fill and change the Blending to Color Burn. This layer will be underneath the others. Move the layer with color bur 2 pixels down and left.

Hipster Text Effect in Pixelmator

Step 6

Keep duplicating and moving the layers 2 pixels down and left.

Hipster Text Effect in Pixelmator

Step 7

After some new layers, you will have a sort of 3D effect like the one in the image below. Group them all and in a folder.

Hipster Text Effect in Pixelmator

Step 8

Duplicate the group with the color burn layers and merge the group into a layer. After that go to Filter>Blur>Gaussian blur. Use 5 pixels for the radius. After that go again to Filter>Blur>Motion. Change the angle to 145º and the Radius to 20 pixels.

Hipster Text Effect in Pixelmator

Step 9

Let's add some nice texture to our design. I am using a nice pattern from SubtlePatterns.com You can download it here http://subtlepatterns.com/?p=834

Just place a stripe with the texture using Color Burn for the Blending.

Hipster Text Effect in Pixelmator

Step 10

Let's add a tagline. Use the same color as the Pixelmator text, but for the font use Mensch Regular.

Hipster Text Effect in Pixelmator

Step 11

Duplicate the layer a few times to create a drop shadow effect by using Color Burn for the Blending.

Hipster Text Effect in Pixelmator

Conclusion

Select all layers and duplicate them. After that merge all new layers into one and go to Filter>Stylize>Noise. Use 2% for the Amount.

Our design is done. As you can see it was a very simple technique to create this type of effect. Now it's up to you to come up with your own. Enjoy :)

Hipster Text Effect in Pixelmator

Download the Pixelmator File

Download source file

Brought to you by