Design Delicious, Dessert-Inspired Typography

Tweet

Typography is an important and often-overlook aspect of many design projects. While average designers are satisfied with employing a standard fonts, exceptional designers see their type as an opportunity to strengthen their design with additional detail and polish. You don’t have to use boring, plain styles in your designs, and you probably shouldn’t if you intend for your design to be distinct and captivating. You can create terrific text effects to tailored to your message and brand with minimal effort, and the custom type can create measurable improvements in your design’s performance. Well-designed typography can increase the time visitors spend on your design, the pages per visit, and it can even improve bounce rates and make your website “stickier” (dessert pun intended).

Today, we’re going to design a delicious and sweet text effect. We’ll explore various tricks and techniques to create our tasty type. Let’s check out our final result before we start designing. (Downloaded the completed, layered PSD file.)

Step 17

Resources:

Cookie Texture

Step 1

Open Photoshop and create a new file with a 700px width and a 500px height.

Step 1

Step 2

Select the paint bucket tool and fill the background with color #80192e.

Step 2

Step 3

Now, click on the layer styles and select “Gradient Overlay.”

Step 3

Step 4

Click on the text tool and add some text using color #fdd0ab.

Step 4

Step 5

Select the text by pressing down the Ctrl/Cmd key and clicking on the text layer.

Step 5

Step 6

Create a new layer and fill it with color #4f0d06.

Step 6

Step 7

Now, select the above layer and click on “Filter” > “Distort” > “ZigZag.”

Step 7

Step 8

Now, we will add some drop shadow to this layer, so click on “Layer Styles” and add the desired drop shadow. Use the settings below.

Step 8

Step 9

Duplicate the above layer and reduce its size a bit using “Edit” > “Free Transform.” Then, click on “Layer Styles” > “Bevel and Emboss.”

Step 9

And, as a result, we will get this:

Step 9b

Step 10

Now, for the main text, paste the cookie texture from our resources into the document, then select the text layer using Ctrl/Cmd + <click on the text layer>.

Step 10a

Now, click on the texture layer, copy the texture, and paste.

Step 10b

Step 11

Click on “Layer Styles” to add satin, color overlay, and drop shadow to the text. Use the following settings.

step 11a

Step 11b

Step 11c

Step 12

Create a new layer and add some frosting to the text using a small hard round brush with color #fe7f8d. (We want thick, fluffy frosting, so it’s not going to be runny.)

Step 12

Step 13

Now, click on “Layer Styles” to add Bevel & Emboss, Satin, and Drop shadow. Use the following settings for each layer style.

Step 13a

Step 13b

Step 13c

Step 14

Create a new layer, select a hard round brush, and use the brush on the frosting with color #ffe5bf.

Step 14

Step 15

Reduce the opacity of this newly-created layer to 40%.

Step 15

Step 16

Create a new layer and select a 3px hard round brush. Adjust the settings in the brush panel and use it on the text layer with color #ffffff.

Step 16

Step 17

Now, simply add some texture and abstract elements to the background, and we are done.

Step 17

Our delicious, dessert-inspired type is fresh out of the oven. I hope you guys enjoyed this tasty tutorial. I’ll be back with some more treats. Until then, enjoy!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Adam Cox

    Awesome post!