Layer styles in Photoshop are a powerful tool for achieving many effects easily and in a short time. This tutorial will show you how to use layer style overlays to create a wonderful text effect for web labels and buttons. Also during the lesson, you will learn how to add small details using brushes and filters to get a more refined final result.
The result of the lesson
Materials for the lesson:
Loading contours
You may have to load the outlines used in some of the styles during the lesson. To do this, go to the menu Editing – Manage Sets (Edit -> Preset Manager) and select Contours (Contours) in the drop-down menu of types of sets.
Click on the small arrow in the upper right corner and select the outlines.
Press the button To add (Append) to add new contours to existing ones.
Step 1
Create a new document with a size of 1100 x 750 pixels and create a new layer on top of the background layer. Name this layer Gradient BG. Set the foreground color to # 717171 and the background color to # 3a3a3a. Choose a tool Gradient
(Gradient Tool) and in the top menu activate the radial gradient. Then drag the gradient from the center of the document to one of the corners.
Double-click on the Gradient BG layer to open the layer style window. Apply style Pattern overlay (Pattern Overlay) with these settings. Blend mode Overlap (Overlay) and select the pattern that was given in the materials for the lesson.
This will add a pattern to the background.
Step 2
Now write the text in the proposed Comfortaa font. Set the font color to # 464646, size 230 pt, and set the tracking value to ?? to 175 to avoid overlapping the stroke, which will be added later in the lesson.
Change the values Fillings (Fill) text layer to 0 and duplicate it.
Step 3
Choose a tool Brush
(Brush Tool) and open the settings panel of the brush – Brush Window (Window -> Brush). In the tab Brush Print Form (Brush Tip Shape), choose a hard round brush with a size of 35 pixels, then set the option Intervals (Spacing) by 1%.
Right-click on one of the text layers and select the option Create work path (Create Work Path). Next, the text outline will be outlined with a brush of different sizes. Thus, each layer with a stroke will be named according to the size of the brush used. Start by creating a new layer under the two text boxes and name it. 35.
Set the foreground color to # 414141 and select the tool. Arrow (Direct Selection Tool). Now right-click on the contour and select the option Outline the contour (Stroke Path). Choose a tool from the drop down menu. Brush(Brush) and click OK.
The contour will be drawn with a brush with a size of 35 pixels. Do not get rid of the contour, it is still needed.
Step 4
Create a new layer below the layer “35” and name it “50”. Choose a tool Brush(Brush Tool), change the brush size to 50 pixels and set the foreground color to # 363636. Then select the tool Arrow (Direct Selection Tool), and make a stroke, as we did earlier. Press the ENTER key to get rid of the contour.
Duplicate the “50” layer, then hold down the Ctrl key and click on the thumbnail of the “35” layer to create its selection.
Make sure that the “50 copy” layer is selected, and then press the Delete key to delete the selected part. To get rid of the selection, press the key combination Ctrl + D.
Duplicate layer “35” twice, then drag two copies on top of all layers in the palette and change their values. Fillings (Fill) at 0%.
Step 5
Double click on the “50 copy” layer and apply the following styles:
Stamping (Bevel and Emboss):
Change Depth (Depth) to 300, check the options Smoothing (Anti-aliased). Change the blending mode to Backlight mode (Highlight Mode) on Bright light (Vivid Light).
Circuit (Contour):
Select contour Inverted cone (Inverted contour) and check the box Smoothing (Anti-aliased).
This will set the outer stroke style.
Step 6
Double click on the “35” layer and apply the following styles.
Inner shadow (Inner Shadow): just resize to 10.
Shadow (Drop Shadow): use default values.
This will add some depth to the inside.
Step 7
Double-click on the original text layer to apply the following styles.
Stamping (Bevel and Emboss):
Choose style Contour stamping (Pillow Emboss), Gloss contour (Gloss Contour) – Deep groove (Cove – Deep) and check the box Smoothing (Anti-aliased).
Circuit (Contour):
Select contour Semicircle (Half Round) and check the box Smoothing (Anti-aliased).
Internal glow (Inner Glow):
Change the blending mode to Bright light (Vivid Light), Opacity (Opacity) up to 100%, color # 33fffd, A source (Source) from the center (Center), and The size (Size) 16.
This will create the first layer of internal glow.
Step 8
Right-click on the original text layer, select the option Copy layer style (Copy Layer Style), then right-click on the text copy layer and select the option Paste layer style (Paste Layer Style). Double-click on the text copy of the layer to change the style. Internal glow (Inner Glow). Change the blending mode to Linear light (Linear Light).), Opacity (Opacity) up to 100%, color # 33cdff, A source (Source) from the center (Center), and The size (Size) 24.
This will add another layer of internal glow to enhance it.
Step 9
Double click on the “35 copy” layer and apply the following styles.
Stamping (Bevel and Emboss):
Resize to 21, uncheck option Global coverage (Use Global Light), change Angle (Angle) to 100, value Heights (Altitude) 70, check the box Smoothing (Anti-aliased). Change the blending mode to Backlight mode (Highlight Mode) on Bright light (Vivid Light) and change its color to # d4d4d4.
Circuit (Contour):
Check the options Smoothing (Anti-aliased).
This will add our 3D effect lettering.
Step 10
Double click on the “35 copy 2” layer and apply the following styles.
Stamping (Bevel and Emboss):
Resize to 21, uncheck option Global coverage (Use Global Light), change Angle (Angle) to 90, meaning Heights (Altitude) 48, check the box Smoothing (Anti-aliased). Change the blending mode to Backlight mode (Highlight Mode) on Bright light (Vivid Light) and for option Shadow mode ((Shadow Mode) reduce Opacity (Opacity) to 0.
Circuit (Contour):
Select contour Report (Log) and check the box Smoothing (Anti-aliased).
This will create the final 3D look and give the text a gloss and gloss.
Step 11
After all layer styles are applied, double click on the “50” layer and add a layer style. Shadow (Drop Shadow). Use the values as shown in the screenshot below.
By applying the shadow after all the other styles, if need be, you can customize it to your liking, according to how it looks.
Step 12
Right-click on the text layer and select the option Create work path (Create Work Path). Create a new layer on top of both text and name it Center Glow. Change the blending mode to Overlap (Overlay). Choose soft round Brush 5 pixels, change the foreground color to # 00fefc and use the tool Arrow (Direct Selection Tool) to circle the work path. This will enhance the glow at the edges in the center.
Create a new layer on top of the “Center Glow” layer and name it “Corners Glow”. Activate the tool Pen
(Pen Tool) and in the top settings panel select the option Circuit (Path).
You need to create small curves for some of the rounding letters. Click once to add an anchor point, then click and drag to create a curve. For help, see the screenshot below.
When creating a contour, you will need to press the Ctrl key and click outside the document before you can create another contour, somewhere else. The screenshot below shows where the contours were added.
Step 13
Activate the tool Brush(Brush Tool) and open the settings panel of the brush. Choose soft round Brush (Brush) size of 5 pixels. Then in the tab Form Dynamics (Shape Dynamics) in option Size fluctuation (Size Jitter Control) in the drop-down menu, select Pen pressure (Pen Pressure) and set the minimum diameter to 15%. This will make the brush disappear at both ends of the contour.
Choose a tool Arrow (Direct Selection Tool). Now right-click on the contour and select the option Outline the contour (Stroke Path). Check the options Simulate pressure (Simulate Pressure) and click OK. Then press the ENTER key to get rid of the contour.
Step 14
Double click on the “Corners Glow” layer to apply the following styles.
Internal glow (Inner Glow):
Opacity (Opacity) up to 100%, color #ffffff, A source (Source) from the center (Center).
External glow (Outer Glow):
Change the blending mode to Linear light (Linear Light).), Color # 2dfffc, The size (Size) to 13.
Now the corners will glow even more.
Step 15
Press and hold the Ctrl key and click on the thumbnail of the layer “35” to create its selection.
Create a new layer on top of all layers and name it “Noise”. Set the foreground and background color to black and white. Then go to menu Filter – Rendering – Clouds (Filter -> Render -> Clouds). To get rid of the selection, press the key combination Ctrl + D.
Change the blending mode for the “Noise” layer to Soft light (Soft Light).
Step 16
Now go to the menu Filter – Noise – Add Noise (Filter -> Noise -> Add Noise). Set the settings as shown in the screenshot below.
Decrease Opacity (Opacity) of this layer to your taste. The author chose the value of 7%.
Conclusion
This is the final result. Many layer styles and various brush settings were used to achieve the final result. It’s great that layer styles can help create amazing 3D effects in such a short time and effortlessly!
I hope you enjoyed the tutorial and find it useful.
