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.)
Open Photoshop and create a new file with a 700px width and a 500px height.
Select the paint bucket tool and fill the background with color #80192e.
Now, click on the layer styles and select “Gradient Overlay.”
Click on the text tool and add some text using color #fdd0ab.
Select the text by pressing down the Ctrl/Cmd key and clicking on the text layer.
Create a new layer and fill it with color #4f0d06.
Now, select the above layer and click on “Filter” > “Distort” > “ZigZag.”
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.
Duplicate the above layer and reduce its size a bit using “Edit” > “Free Transform.” Then, click on “Layer Styles” > “Bevel and Emboss.”
And, as a result, we will get this:
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>.
Now, click on the texture layer, copy the texture, and paste.
Click on “Layer Styles” to add satin, color overlay, and drop shadow to the text. Use the following settings.
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.)
Now, click on “Layer Styles” to add Bevel & Emboss, Satin, and Drop shadow. Use the following settings for each layer style.
Create a new layer, select a hard round brush, and use the brush on the frosting with color #ffe5bf.
Reduce the opacity of this newly-created layer to 40%.
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.
Now, simply add some texture and abstract elements to the background, and we are done.
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!
User Interface Design with Sketch 4
Photoshop for Web Design
Introduction to Photoshop
Designing UX: Forms
Jump Start Sketch
The Ultimate Guide to Prototyping
- 1 Type Nugget: Good Typography is About Finding the Right Playground
- 3 Framework-Agnostic PHP Cronjobs Made Easy with Crunz!
- 4 8 Distinctive Headline Fonts to Make Your Content Sizzle
- 5 Using White Space: How Emptiness Can Give So Much to Design