Create a Melting Typography Effect

Visual elements such as graphics are an important part of the design process. However, typography is also a crucial part of designing regardless of how much or how little knowledge you have about it. Picking the right typography should be carefully considered to bring out the best in your design. There are hundreds if not thousands of different of typefaces available on the internet that you can choose from but sometimes it can be overwhelming. For today’s tutorial I am going to discuss about typography and show you how to create a melting typography design.

Here are some points to consider when picking out typography for your next project.

Font Legibility

The concept of legible font is pretty simple and straight forward. Always go for an easy to read typeface unless, your design calls for something “out of the box”  for example: a fancier font for a night club. If you are using a typeface that might be hard to read try mixing it with various other fonts, in other words use it sparingly and in a way to add some dynamic to your design.

Color

The color you choose for your typography should be a contrast color to your background so that it is readable. When you pick a color try to use a color that lends itself well to your design and message. For example if you’re designing something about food you might want to use red as it is thought to stimulate appetite. If you’re design does not have a particular message try to use a color that works with your particular word. For the purpose of the tutorial below, I used a pinkish color because when I think of something melting from heat I think of it being gooey and sticky. If you are stuck on your color choices just go for something that will catch people’s attention.

Message

Sort of like color when you pick out your typography try to think of what your design is supposed to say. Pick a typeface that lends itself to the message so that it looks cohesive. If you’re designing a flyer for a charity you might want to use a round typeface opposed to using something with sharp hard edges. If you’re designing something for Halloween you will want to use a typeface that is less traditional, such as a font that looks handwritten or jagged. If you’re not sure if the font works for your message try asking friends and family for feedback.

Placement/Size

Another common sense consideration is the placement and size of your typography. Don’t make it too large that it swallows up your design and don’t make it too small that people have to strain their eyes to see what you want them to see. To find a good balance with your typography decide what is the most important information then work  your way down, this way you can easily complement your graphics. Creating a hierarchy will generally compliment most designs but you will need to experiment along with what placement works the best, just try to keep everything balanced.

Now that we have covered these tips let’s begin creating our melting typography design.

Preview

Melting Typography Preview

Step 1 New File

Create a new Photoshop file and make your canvas 1200 x 800

Step 1

Step 2 Gradient Background

Make a new layer and change your foreground color to #8c8c8c and leave the background color as #ffffff. Press “G” on your keyboard to access the gradient tool. Keeping your gradient as a linear gradient, drop the opacity to 56% and drag your cursor down the middle of canvas. Drop the opacity of the layer to 55%.

Step 2

Step 3 Font

Write your desired word or letter, in this case the word Melty in Poplar Std. Change the font color to #ff4a79 and the font size to 72.

Step 3

Step 4 3D Text

Duplicate your word and change the color to #d43e65. Move this layer behind the original text layer and move it so that your word appears to look 3D. Rasterize both layers and merge the layers.

Step 4

Step 5 Puppet Warp

To start giving our word the appearance of melting go to Edit>Puppet Warp. Each word should now have a wire mesh on top of it.

Puppet Wrap

Click and manipulate the points until you have something like below.

Step 5-1

Press enter for the changes to apply.

Step 5-2

Step 6 Drips

With the color #ff4a79 start adding extra lumps to your letters.

Step 5-2

Continue with both the main color and the background color of the letters (#d43e65) until you have something like this.

Step 6-1

Step 7 Small Drips

Create a new layer. Duplicate on the layer to access the Blending Options menu. Check the box for Drop Shadow and change the settings as shown below.

Small Drips

Keep your foreground as #ff4a79 and with a small hard brush begin drawing smaller drips on each word.

Small Drips 7-1

Continue until you are finished.

Small Drips 7-2

Step 8 Splatter

Draw some splatters underneath each letter in the same color as your font.

Splatter

Step 9 Shadow

Create a layer and place it under your splatter layer. With #000000 draw around the bottom half of each splatter to create a shadow. Drop the opacity to 23%

Shadow

Go to Filter>Blur>Gaussian Blur and enter the numbers as shown in the following image.

Step 9-1

Step 10 Splatter Drips

Just as you did before create some drips on top of the splatters.

Splatter Drips

Step 11 Splatter Goo

Duplicate the splatter layer and place it above the layer you created in Step 10. Change the layer mode to Soft Light.

Splatter Goo

Open the Blending Options menu and change the settings as shown below.

Steps 11-.01

Steps 11-.02

Step 11-1

Step 12 Clouds

Select your text and your splatters and in a new layer render in some clouds by going to Filter>Render>Clouds

Adding Clouds

Step 13 Crosshatch

On the same layer go to Filter>Brush Strokes>Crosshatch and change the settings as shown and press OK.

Adding Crosshatch

Step 14

Go to Filter>Sketch>Chrome and change the settings as shown below.

Adding Sketch

Change your layer mode to Divide and move the opacity to 50%.

Opacity

Finish

Finish your text by adding some more splatters underneath the letters along with darker shadows. Also add drip highlights on the words themselves and had any desired color changes.

Melthing Typography

[download#69#nohits]

Advertisement