Web 2.0 Fonts Creation in Photoshop

The Web 2.0 is a new style or standard of style that depicts about the modern graphics and effects through it. It is nothing but a revamped outlook with glossy foreground, dual tone effect, shadows and appropriate use of color that can make even simple texts into wonderful looking 3D design. The main properties of Web 2.0 fonts are they are multilayered, sometimes vector, colored and enhanced with shadows, in a nutshell they are something new that describes the style of the new generation, from where the sole of 2.0 styles came.

The web has changed by a great amount since it was 5 years ago, it is much more graphical, animated and user friendly. The 2.0 style of the web is a sign of the change which are now being used everywhere in design concepts, ranging from website layouts to simple fonts, from Logos to Animation the design style is being enriched with better ones. The Web 2.0 style design done here in Photoshop is a direct descendant of that style; it is multilayered, enhanced, multicolored and shadowed something better from normal 3D text design, more elegant, more beautiful and more eye candy type.

To start create a new file with desired dimension, 8 bit pixel depth, 72 bits / inch density, RGB Color & white background. The dimension used here is 540 x 300 pixels, adequate to the ‘Shuttervoice’ text. Use the D switch in the keyboard to bring default foreground & background color, which is Black & White accordingly then press X to reverse it. Press Alt + Backspace in the keyboard to fill the page with Black.

Then Write the desired text by selecting the Horizontal Type Tool by using the T switch from the keyboard, font style may be chosen according to requirement, here used is Dutch801 XBd BT Font with 48 Pixels size. Right Click on the layer and select Rasterize Type to make it edible.

Change the blending property of the layer by right clicking on it and selecting Blending Options dialog box. Then click on the Bevel & Emboss to add flickering shadow effect on the text. Change the Bevel settings to Inner Bevel, Technique Chisel Hard and size to 1 pixel and let the other settings remain same.

Copy the layer by clicking Ctrl + J and select the Move tool by pressing V on the keyboard. Then move the copied layer by one pixel up and one pixel right by pressing the Up and Right Arrow key from the keyboard. Thus the copied layer moves to create a 3D effect of the text. Repeat the procedure 5 times to get 5 layer copies. Each time move the new text one step up and one step right to create correct effects. After completing, merge the bottom 5 layers by selecting using Shift Keys and merge them into a single layer by using the Ctrl + E. Rename the layer to 3D for better usability. And rename the top layer to ‘TOP’ to understand better.

Remove the blending effects of the Top layer by right clicking on it and selecting Clear Effects. Then use the effects as described in the picture on the Top layer to bring the stone effect on the layer. Right click on the Top layer and select Blending Property, then use the inner glow effect, set the opacity to 32%, size to 5 and choke to 0 settings. Click Bevel & Emboss, set the Inner Bevel style to Smooth, Depth to 600%, Size and Soften to 0, Angle 45 Degree, Attitude to 21, remain the other settings as they are.

Use the Color Overlay to add color effect by changing the Blend mode to Color Dodge, Opacity to 55% and color to #31464f. Use Gradient Overlay of Black as Primary color & #90999d as secondary color and set the Blend Mode to Overlay. Then use the final pattern overlay to give stone effect, the pattern used here is called Stucco 2 and can be found under the Texture Fill 2 Pattern, right hand top.

For the final image, add a reflection by duplicating the text and 3D layers, merging them, flipping them vertically, dropping the opacity to 30% and then adding a gradient layer mask. Thus the shadowed 2.0 style font is designed to perfection.

But imagination of the artist and skills add more flavor to it, so this design can be perfected or made better in that way.