In just a few moments, you can add a vibrant splash to your text that will really add some pop-culture flavor to your designs! Great for spicing up banners and promotional material when time’s a concern.
What We’re Making
This Text Effect Quickie will show you a real simple way to create a vibrant, poppy type in just a few minutes. It’s a great effect to use on promotional materials, posters, or even in website graphics!
Before getting started, you may want to grab a Pop-styled font to work with. Really, anything with a bold look will probably look great, but for that extra pop feel, you may be interested in trying out a font like:
- Club Font (Free Trial Version, or $5 for the commercial version)
- Snow Dream
- Advert
- Pop Magic
Step 1 - Background
The background is a key element to this effect. If the background doesn’t give off a poppy, groovy sort of feel, the text alone may not be enough to compensate for the loss.
Start out with a base color of your choosing (I chose an especially bright Lime Green: #b7f22b), and fill the entire background layer of your document.
Create a new layer.
Now, using a white foreground color, and a soft (0% hardness), large (300px-ish) brush, make a few dabs in your new layer. Set this layers blending mode to Overlay.
Repeat this process of adding new layers, painting a few dabs on each, and setting them to overlay to build up a nice lighting effect as shown in the example on the right. Varying the size of the brush, and overlapping your dabs will help add depth to your background.
Step 2 - Setting the Type
As suggested earlier, using a bolder typeface is probably a good idea for this effect, as legibility may become a problem with something too small or thin. Another thing to keep in mind when setting the type is the actual placement of letters. Since this is more of a Pop-culture effect, we want the actual placement of elements to depict such a style.
For inspiration on type placement, try exploring various avenues that are well integrated in Pop-culture to see how they design their graphics. I tend to see more abstract combinations of text in such areas, along with frequent use of placing text at angles, and fitting words into one another. On a final note, to make this specific effect work best, you should use a White Font.
Below is an example I put together using CLUB and Impact:
Step 3 - Setting Up the Layer Style
Go into your text layers Blending Options (Right Click Layer > Blending Options).
Apply the layer effects shown below, making any modifications as needed.
Drop Shadow
Outer Glow
Gradient Overlay
We’ll need to build a custom gradient for our gradient overlay effect. If you’ve never built a custom gradient, I suggest taking a look at our Layer Styles in Photoshop Tutorial prior to this step.
The gradient should be setup as follows:
Stroke Overlay
Download the Text Effect
If you’re looking for an easier way to apply the layer effects, you can also download our Vibrant Pop Text Effect for free! It’s still important to note that some changes may need to be made to the effects in order to fit your design. 
Text Effect Quickie: Moon Shine Text Effect
Text Effect Quickies: Bubble Text
Text Effect Quickie: Delicious Chocolate Text
Colorful Glowing Text Effect
The effect looks great. Using the outer glow as a stroke is also something people rarely think of doing. Looking forward to more Quickies!
Thanks Tyler! That’s an important step to get the effect to look the way it does, since the effects are layered in a specific way (which isn’t adjustable). Hope these quick effects serve you well mate!
Very cool. I like you guys more than psdtuts. Shhhh…
Almost has a retro look to it. Cool tutorial!
@J.T. Shaver - Glad you found the tutorial enjoyable
I’m a pretty big fan of PSDTUTS really. Some of the writers there simply blow my mind.
Thanks Iceberg!
Would be cool if that Club font were free, it’s a really nice font.
And great tutorial David, I love this quickies! Keep up the good work!
@Brian - It’s really on the cheap side when you think about it. I actually contacted the maker of it a few months ago asking about the pricing, expecting some steep cost for the font, but was overly surprised when he quickly responded with a $5 charge.
In regards to a font - that’s CHEAP. It’s definitely a font to be used on special occasions over any normal instances though, as it’s not the easiest to read or anything.
Thanks mate! Glad you like’ em!
When you download the layer style, it comes up as an asl file. How do you apply the file to the font. Sorry, ionno, I tried copying the file and then right clicking to paste it, but it wont. Thanks!
Hey men, its so cool…thnaks for that, really really i´ll need that!!!
Hey, this image actually looks really low contrast on both of my LCDs and the text is hard to read and doesn’t seem to “pop”. It also fails the color contrast test, found at: http://www.snook.ca/technical/colour_contrast/colour.html . Consider contrast and usability in design!
can u please send us the link of the font? its pretty cool… i wanna use it for my design.. ^^ thanks
great tutorial for me ! Thanks you very much