Create an awesome broken plate typography effect

• 22 November 2010
• by Sebastiano
• Photoshop
• 49retweetTOP5K

In this tutorial I will explain how to realize funny letters that look like broken plates. We will start in Illustrator modifying the original font, then we will switch to Photoshop in order to play with textures and layer styles. Also we will deal with selection tools and simple methods to create 3d illusion always in Photoshop.

Preview:

Click to enlarge

DOWNLOAD SOURCE FILE

Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more.
Are you already a member? Login to download the PSD file.

Step 1

The idea is simple: we have to create letters that look like plates, then realize the broken effect. So create a new document in Photoshop (mine is 1920×1200 pixels with resolution 72pixels/inch) and add a gradient overlay going from a light grey (#979797) to a darker one (#0e0e0e).
*Note for Mac users: Ctrl=cmd

Step 2

The texture used for the background is taken from our Wooden grunge textures set. This set contains 8 high-resolution textures that I obtained by combining wood and grunge images in Photoshop. Merge a texture of your choice into the canvas and, if necessary, re-size and rotate it (Ctrl+T).

Step 3

Desaturate the texture (Shift+Ctrl+U) and set the layer blending mode to overlay with opacity 70%.

Step 4

To complete the background, add a gradient map layer (Layer>New Adjustment Layer>Gradient Map) going from a light brown (#c8ab85) to a darker one (#371c04). Set this layer to overlay. At this point you can select and group (Ctrl+G) all the layers of the background.

Step 5

Before creating the “plate styled” letters, let’s see how these letters should be illustrated with the help of some reference images.

As you can notice from the following images, we have to create letters characterized by 2 shapes: a border, and the central area.

It’s difficult to create 2 shapes like the ones shown above – one shape inside the other and with the borders of the 2 shapes equidistant – in Photoshop. In example, if we create a letter B in Photoshop, and then we select its pixels and go to Select>Modify>Contract to create the inner shape, the result is not satisfactory (screenshot below). While if you copy and paste the letter and then re-size the copy, the borders of the 2 letters are not equidistant. You could try to create the inner shape with the Pen tool…but it’s so laborious! This is why we will use Illustrator for this purpose.

Step 6

Create a new document in Illustrator, the size is not important. Then write something, (“broken” in my case) using a rounded font. I’ve used Junegull, that is a cool free font. Font size is 200pt.

Step 7

Go to Type>Create Outlines to turn the letters into shapes. Then press Ctrl+G to ungroup the letters so you can work with each letter without problems.
With the Pen tool (P), create 2 shapes so that cover the letter apertures:

Step 8

Select the letter B and the two shapes, then press the unite button from the pathfinder (Window>Pathfinder) to create a unique shape.

Do the same with the letters R and O.

Step 9

Select the letter B. Here is the trick to create the inner shape: go to Object>Path>Offset Path and enter -10 as value and Round as joins option.

Step 10

We’ve so created the two shapes that we need for the first letter. We have to import them in Photoshop. Start with the first shape. Select it, press Ctrl+C, then switch to the Photoshop document and press Ctrl+V.

Do the same with the second shape (I’ve used a different color so you can easily recognize the 2 shape).

How to align two shapes? In order to align 2 or more shapes in Photoshop, you have to select them from the layers window, then use the align tool in the option bar (top).

Step 11

Select both the shapes, press ctrl+T and enlarge them. Then put them on the left. Hide the visibility of the inner shape. We will start modifying the larger one.

Step 12

Right-click on the layer thumb and select blending options to get access to the styles. Take in mind the photo we’ve seen before of the plates. This shape will be used to create the border.
Let’s start by adding a linear gradient going from #f9f5f2 to #e3e0db.

Then select Bevel&Emboss to add depth to the letter:

Finally add a soft inner shadow:

Step 13

Now make visible the inner shape and again open the blending options window. Start by adding a gradient going from #e3e0db to #e8e5e0.

Secondly select Bevel and Emboss with the following settings:

Step 14

Now that the styles are complete, select both the layers and press Alt+Ctrl+E to merge them into a new layer. From now go on, we will use only this layer, so hide the visibility of the 2 shapes layers. It’s time to realize the broken effect. With the pen tool in Paths mode create a path that covers the first piece you want to cut out. Notice how the path follows the form of the “plate”.

Press Ctrl+Enter to activate the selection, then press Shift+Ctrl+J to cut out the piece into a new layer.

Step 15

Repeat the same method to create different pieces, then move the layers at your pleasure to create a distance between them.

Step 16

Select one of the piece layer, press Ctrl+T to activate the Free Transform Tool and rotate it a little bit. Do the same with the other layers, so the final result will look more realistic.

Step 17

The technique to add the 3d illusion is very simple. Select one of the plate piece layers. Duplicate it by pressing ctrl+J, then move the duplicated layer below the original one. Press 3 times the bottom arrow on your keyboard to move down the layer.

Add a dark grey (#83817f) color overlay and a drop shadow to finalize the effect.

Step 18

Do the same with the other pieces. While necessary, zoom in and create small shapes with the Pen tool (P) in Shape layers mode to join the layers above with the ones below.
Here is the first letter:

Step 19

Now that you’ve learned the technique, you can apply it to create the other letters and finalize the composition. The process, as you have noticed, is very simple. So give a try and share your result with a link in the comments!
This is mine: