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).
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.
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.
Step 4
Just duplicate the layer created on step 2 to darken the text.
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.
Step 6
Keep duplicating and moving the layers 2 pixels down and left.
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.
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.
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.
Step 10
Let's add a tagline. Use the same color as the Pixelmator text, but for the font use Mensch Regular.
Step 11
Duplicate the layer a few times to create a drop shadow effect by using Color Burn for the Blending.
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 :)
Download the Pixelmator File
