How to Make a Split-Flap Text Display in

Photoshop
Apr 11 20136 CommentsBy Tyler Denis
http://designinstruct.com/graphic-design/how-to-make-a-split-flap-text-display-inphotoshop/

While in the real world split-flap displays are becoming obsolete in favor of digital
displays in places like airports, train stations, bus stations, and so forth, they still live
on as a symbol of travel. Whether you use them in app interfaces or a vintageinspired design, Im sure that youll find this tutorial interesting and useful. In this
tutorial, we will use Photoshop to create a split-flap display.

Tutorial Preview

Tutorial Resources
Download Link

Type

Author

scratched 5

Texture

Lost and Taken

League Gothic

Font

The League of Moveable

Type

Step 1: Create a New Photoshop Document

We are going to create a new 1200x600px document in Photoshop.

Step 2: Create the Background

First, fill the Background layer with gray (#666666).
Next, we are going to use a scratched texture image to give our background an
interesting surface texture. Download the texture I linked to or browse through
Design Instructs free textures, pick one you like and download that instead and
place your texture in your Photoshop document, right above the Background layer.
In the Layers panel, change the Blend Mode of the texture layer to Soft Light and
lower the Opacity to 10%.

Step 3: Create the Text

Our text is going say "TYPE". You can use the Horizontal Type Tool (T) to create
your text.
Well use the League Gothic font. Well set our font size to around 500pt. After weve
created our text, were going to convert our text to pixels by going to Layer >
Rasterize > Type.

Step 4: Draw the Split-flap Base Shape

Create a new layer for the split-flap base shape that well draw with the Rounded
Rectangle Tool. Switch to the Rounded Rectangle Tool (U) located in the Tools panel.
In the Options bar, set the Rounded Rectangle Tools mode to Shape layersand
Radius to 15px.
Draw a box around the first letter, giving some room on all the edges of the box for
the other split-flaps of the other letters. The box should be behind the letter, not on
top of it.

Later on, well duplicate the first finished split-flap for the rest of the letters.
Once youve drawn your first split-flap base shape, put it in a layer group by first
making sure its the active layer in the Layers panel, and then going to Layer >
Group Layers.
Rename the layer group to "Flap 1" to keep our work organized.

Step 5: Layer Style of the Split-flap Base Shape

Well give the split-flap base shape these three layer effects: Gradient Overlay, Drop
Shadow and Stroke. Well be using a layer style to do this. Below are screenshots for
each layer effect.
Gradient Overlay
Select the split-flap base shape layer in the Layers panel and then go to Layer >
Layer Style > Gradient Overlay.
In the Gradient Overlay window, change the Style option to Reflected.
Then, click on the Gradient preview to open the Gradient Editor.

In the Gradient Editor window, choose the Black, White gradient preset.

Drop Shadow

Now were going to add a Drop Shadow effect to our layer style. Were going to give
the split-flap base shape a heavy shadow to make it pop out from its textured
background a little more. Do this by going Layer > Layer Style > Drop Shadow.

Stroke
Finally, we are going to add a 4px stroke to the split-flap base shape. Do this by
going to Layer > Layer Style > Stroke.

Step 6: Create the Inner Split-flap Shape

To make it easier to work with, lets first rasterize our split-flap base shape layer by
going to Layer > Rasterize > Shape.
Then, in the Layers panel, make sure that the split-flap base shape layer is still the
active layer. Afterwards, go to Select > Load Selection. This should create a
marquee selection around the shape.
We will shrink the marquee selection using Select > Modify > Contract. Set the
Contract By option to 5px in the dialog window that appears.
Then, create a new layer by going to Layer > New > Layer.
In the new layer, fill (Edit > Fill) the contracted marquee selection with black
(#000000).
This is our work so far:

Step 7: Duplicate the Top Half of the Inner Split-flap

To start creating the appearance that the split-flap is divided into two pieces, we will
duplicate the top portion of the inner split-flap in a new layer and give it its own layer
style.
First, we want to find the center of the inner split-flap. Heres an easy way to find the
center: Go to Edit > Free Transform and make sure that the Show Transform
Controls option in the Options bar is checked. Then create a horizontal guide by
dragging to the center of that shape; this will only work if your rulers are visible in
your Photoshop workspace, so if you cant see your rulers, go to View > Rulers.

Using the Rectangular Marquee Tool (M), draw a marquee selection around the top
half of the split-flap. Afterwards, go to Layer > New> Layer via Copy. That will
automatically make a new layer with the part of the inner split-flap that we drew a
marquee selection on.

Step 8: Give the Top-Half of the Split-flap a Gradient

Overlay
In the Layers panel, make sure the top-half of the split-flap layer is the active layer
and then go to Layer > Layer Style > Gradient Overlay.

Step 9: Create the Split

Create a new layer on top of the text layer. Create a marquee selection using the
Rectangular Marquee Tool (M) thats about 200px wide and 6px tall. Fill the
rectangle selection with a gray color: #333333.
Using the Free Transform Tool (Edit > Free Transform) adjust the edges so the
rectangle fits inside the split-flaps.

Step 10: Create the Hinges

Next we are going to make the hinges that the split-flaps are attached to. First,
create a new layer. On the new layer, create a 6x25px rectangle using the
Rectangular Marquee Tool (M) and fill (Edit > Fill) it with black. Now, give them the
same Gradient Overlay as the split-flap base shape layer.

Duplicate the layer we just created (Layer > Duplicate Layer) and move it to the right
of the split-flap.
In the Layers panel, select the split layer (the gray horizontal line at the middle of our
split-flap) and the two hinge layers. Place these 3 layers in a layer group by going to
Layer > New > Group from Layers, and then name the new layer group "Split 1".

Step 11: Duplicate the Split-flap for the Rest of the

Letters
Now we are going to take the "Flap 1" layer group and duplicate it by going to Layer
> Duplicate Group. Change the name of the duplicated layer group to "Flap 2" to
keep our work organized. Use the Move Tool (V) to place the split-flap behind the
letter "Y".
Repeat this for the next two letters until you have split-flaps behind all the letters
(change the duplicated layer group names to "Flap 3" and "Flap 4").

Step 12: Duplicate the Split Group

Next, duplicate the "Split 1" layer group using the same method described in the
previous step. Change the layer group name to "Split 2". Move the group so it is on
the next split-flap letter.
Repeat the process outlined above for the last two split-flap letters. Change the
duplicated layer group names to "Split 3" and "Split 4".

Step 13: Add a Glow Effect

Set your foreground color to white (#ffffff).

Choose the Gradient Tool (G) in the Tools panel. In the Options bar, choose
theRadial Gradient option. Also in the Options bar, click on the gradient sample to
open the Gradient Editor.

Choose the Foreground to Transparent preset in the Gradient Editor. This will
allow us to create a gradient that goes from white (our foreground color) to 0%
opacity.

Our Gradient Tool is now set up and ready to go.

Create a new layer on top of all the other layers.
Create a white to transparent gradient on the new layer, starting at about the center
of our canvas.
Use the Free Transform Tool (Edit > Free Transform) to stretch the gradient so it
goes to the edges of the canvas, making the glow shaped like an oblong.
Afterwards, change the Blend Mode of the glow layer to Soft Light.

Step 14: Create an Edge Inner Shadow

Create a new layer for the inner shadow that will be placed at the edges of our
canvas.
Switch to the Rectangular Marquee Tool (M). Change the Feather option to 50px in
the Options bar.
Place a marquee selection around the entire canvas by choosing Layer > Select All.
We want the marquee selection to be on the edges, so lets invert the selection by
going to Select > Inverse.
Fill the selection with black.

Step 15: Add Some Color

This is the last step. In this step, were going to give our work a little color.
In the Layers panel, choose the topmost layer to ensure that youre on top of the
layer stack. Afterwards, go to Layer > New Adjustment Layer > Gradient Map.
Change the gradient of the Gradient Map adjustment layer to a yellow and purple
and check the Reverse option to make sure the yellow colors cover the white colors
and the purple covers the darker colors.
Change the Blend Mode of the Gradient Map adjustment layer to Color and drop the
Opacity to 50%.

Tutorial Summary
In this Photoshop graphic design tutorial, I showed you a way to create the popular
split-flap display. We used a ton of Photoshop features such as layer styles,
adjustment layers, the Gradient Tool, Rectangular Marquee Tool, and much more.
I hope you found this tutorial useful. If you have questions about any part of the
tutorial, please pose them in the comments!

Download Source Files

split_flap_display_photoshop (ZIP, 3.42 MB)