This post is part of our daily series of posts showing the most astonishing artworks and inspiring images from the design community hand picked by some of our writers and users. If you want to participate and get inspired, share your works through our Flickr or DeviantArt groups.
This is a weekly series of inspirational posts in the field of Typography from Hangaroundtheweb that features top-class and exceptional work in categories such as typeface design, lettering, illustrated typography, or any piece with a strong typographic treatment. If you want to showcase your work, join our Flickr or DeviantArt groups and share your awesome typographic designs with us.
Etienne Chaize lives and works as a freelance digital artist in Strasbourg, France. He loves to explore 70’s and 80’s to feed his passion for retro-futurism and is well-known for eye-catching designs of vintage style chrome text effects carrying pixel perfect details with an established blend of bright and vibrant colours.
In this quick tutorial, you will learn how to create a beautiful eye-catching vibrant text effect in Photoshop using plain layer styles and filters. We will play with some layer styles and filters to create our text in a very quick time, the steps are much easier to follow, this tutorial requires no user expertise, even a beginner can learn with ease and create some stunning text effects based on this.
Step 1:New Document
Create a new document of size 1280 by 1024 px with black as the background color.
Step 2: Add Text
Now add some text of any simple, slab serif style font, i am using the font SD Eurostile Elite which can be downloaded from AcidFonts, about the size of 200 pt of some golden yellow or dark orange color (#FA8132). The color of the text does not matter that much since we are going to apply some layer styles over it and change the Fill Opacity to 25%.
Note: This text layer is the base for our design, so henceforth in the tutorial, we will be mentioning this layer as base_text.
Position the text in the center of the document , aligning both the horizontal and vertical centers with respect to the background layer.
Step 3: Layer Styles for the text
Bevel and Emboss
First apply the Bevel and Emboss style for the text, with the Gloss Contour option selected as Ring Double, you can find this option by clicking the drop-down next to it, please use the below image for your reference.
Next apply the Satin style.
Here also, we need to apply a different Contour style other than the default one. Choose the Ring contour style from the drop-down and apply OK.
This is the effect so far with our text.
Step 4: Cross hatch filter
With the text layer ready, next we need to apply some filters for the effect. For that we are going to duplicate our text layer along with the layer styles and then rasterize it and finally apply the blur.
So first select the original text layer, go to Layer -> Duplicate Layer (Ctrl + J), then create a new layer on top of it, select both the layers, then merge them by using Layer -> Merge Layers (Ctrl + E).
Then go to Filter -> Brush Strokes -> Crosshatch, use the settings as: Stroke Length = 50, Sharpness = 20 and Strength = 3, use the below image for your reference.
After apply the Crosshatch filter, our text will look like this.
Step 5: Motion Blur
Now make one more copy of the base_text layer and then rasterize it and apply some horizontal motion blur.
Go to Filter -> Blur -> Motion Blur and give the values as Angle = 0 , Distance = 300 pixels and apply OK.
After applying Motion Blur.
Step 6: Making the text bolder
Now the text is overlapped by the blurs and crosshatch effects applied so far, we need to make the borders of the text stand out from these effects, for that make one more copy of the base_text layer, move it to the top, and apply the following layer style to it.
Apply the Gradient Overlay style for text with the colors of the rainbow, there is a default gradient available called Transparent Rainbow choose this gradient, change the Blend Mode to Overlay and apply the style.
After applying the Gradient Overlay layer style, the effect will look like this.
Step 7: Making Fragments
We need to stylize the effect some more, for this we are going to apply the Fragment filter, duplicate the previous layer, the one with the gradient style applied and then rasterize it and go to Filter -> Pixelate -> Fragment and repeat this effect some 3-4 times.
After fragmenting the text will look like this.
Step 8: Adding more vibrancy
Our text effect is almost finished, but it is just lacking some vibrancy to it, for that create a new layer at the top, choose the Brush (B) tool, and select a soft round brush of about 200px diameter , 0% hardness and choose some bright colors like red, green and yellow and paint all over the text randomly with different colors.
Now change the blending mode of this layer to Overlay.
This is how our final output will look like, please also take a look at how the layers are stacked against each other and arrange the same in the order given below for good looking final result.
Finally here is our final image with a vibrant and gleaming text effect. There are certain things i want to mention here, please be liberal with the use of filters, choice of fonts , layer styles, and also experiment with the settings while applying filters to get accurate and effective results.
We’re finished! Hopefully you’ve picked up a few new techniques and had fun while doing so. Please share any of your personal creations in the comments for others to see!