Creating Web 2.0 Text in Photoshop
Personally, I think the phrase “Web 2.0″ is extremely overused and has probably lost its a great portion of its original meaning, but I have commonly heard it used as describing a specific style of design.
In this tutorial, I will show you how to create one of the many examples of Web 2.0 text.
Photoshop Tutorial: Creating Web 2.0 Text in Photoshop
In my simplest summary, Web 2.0 is a design technique using very subtle gradients and effects to make simple graphics look shiny, 3D, and vibrant rather than painfully flat and monotone.
Ready to learn a bit more? Let’s open up Photoshop and create a custom graphic design.
STEP 1. Create a new canvas (something big enough to work with but small enough to fit within your monitor at 100%). In my example, I am using a canvas of 450px width by 300px height (72dpi).
STEP 2. First let’s create a clean blue background. But rather than making a solid blue color, lets give the background some life by adding a soft Radial Gradient. To get the best looking effect, first get your Shape tool and draw a rectangle about 2.5 times larger than the actual canvas.
STEP 3. Next lets create the type. In my example, I chose the name of our beautiful location, Orange County. You can use any font you like, however, in this example I wanted a simple, strong font so I picked Impact. This is a common font and should be preloaded on almost every computer so if you would like to follow along with me you can. Once you have your font, grab your text tool, click on your canvas, and start typing.
STEP 4. Once we have our text, lets apply a shiny orange gradient. To do this, Right click (control click on Mac) your text layer and click Blending Options. Then select the Gradient Overlay option from the left panel. Use my screenshot as a reference on how to achieve the shiny gradient effect.
STEP 5. To contrast the text color, let’s apply a Stroke to the text layer. Still in the Blending Options menu, select the Stoke option. Depending on your font size, you may want to change the size but in my example I have applied a 3px stroke. Ahhhh… but it’s all about the small details so instead of making the color solid white, change it to a Gradient and make it slightly fade from bottom to top (or vice-versa).
STEP 6. Don’t get anxious just yet, we’ve got more detailing to do before we call it a day. Next we’ll give the text layer a small shadow to lift it off the canvas a pinch. Select the Drop Shadow option from the Blending Options screen.
STEP 7. Finally, lets add an Inner Glow to really make the letters pop out. But a regular Inner Glow will look funny so we’ll need to adjust a few settings to get it right. First change the Blend mode from Screen to Normal and then change the color to a slightly darker shade of orange than the text.
Viola! We have “Orange County” in a clean, glossy appearance that has depth and dimension yes is still very easy on the eyes.
Hope you enjoyed the tutorial! Feel free to experiment with your own creations and let us know if you have your own tips & tricks by commenting below.
-Zack Bujazia
Tags: graphic design, orange county, tutorials, web 2.0
