Web Design Tutorials osCommerce Template Tutorials
New osCommerce Templates osCommerce Specials osCommerce Forums Search Our Site Contact Us Resources Web Design Tutorials
Web Designers Library- Tutorials and Articles
Tutorial Search
  Advanced Search
 
Tutorial Menu
 
 Video Tutorials
  · Dreamweaver
  · osCommerce
  · Installations
 
 Photoshop
  · Tutorials
  Photoshop Basics
  Special Effects
  Text Effects
  3D Effects
  Textures & Patterns
  Web Layout
  Drawing Techniques
  Color Management
  Photo Editing
  ImageReady Animation
  Miscellaneous
  · Articles
 
 Web Design Basics
  · Design Principles
  · Website Usability
  · Color Theory
  · Templates & Tuning
 
 osCommerce
  · osCommerce Knowledgebase
  Catalog Area
  Installation and Upgrades
  Administration Tool
  General Information
  Developers Section
What's New
Latest Tutorials and Articles
Video Tutorials
osCommerce Tutorials
Template installation with cPanel and Ipswitch
Photoshop
Photoshop CS3: Output Sharpening
Change Color on an Object
Sunlight Effect
Autumn Effect
Eyes in Green Pea Pod
Web Design Basics
A To Z About RSS
Elements of Great Websites
The Next Generation Website Model
Why Use a Web Design Template?
Web Site Templates and Their Benefits
osCommerce
SSL - This page contains secure and non secure items
Post-Installation
Security - .htaccess
SSL - This page contains secure and non secure items
Tax Proposal
Photoshop : Tutorials : Text Effects Last Updated: Apr 15th, 2008 - 18:38:37


Ring Style Text Effect
Author: Sandy
Authors Website: www.photoshoptower.com
Feb 16, 2007, 12:42

Email this article
 Printer friendly page

In this tutorial you will learn how to create a very highly stylized ring text effect that looks fantastic on banner advertisements, forum signatures, and even web page headers. The steps to create this technique are relatively simple and easy for users of any level to use and understand.

Here is an example of what we will be creating with this tutorial:


And here with a very basic background effect added:

Step 1.
Open an existing document in photoshop, or create a new one. I will be working with a 400x400 canvas.

Fill the background with your desired color, I'll be using #6A6A6A for this tutorial.


Step 2.

Press Ctrl + Alt + Shift + N on your keyboard to create a new layer.

Set your foreground color to: #450101
Go ahead and get out the Text Tool (  )and select a nice looking font. Here I'm using a font called AmerType Md BT.


Here are the exact Text settings I've used:


Type out your text near the center of the canvas as I have done here:


Step 3.
Double click this layer, and apply the following blending options:

Bevel & Emboss:


Color Overlay:

Note: Color used: #8F3600


Result:


Step 4.
Press Ctrl + J on your keyboard to duplicate this layer.

Double click this layer, and apply the following blending options:

Bevel & Emboss:


Stroke:

Note: Color used: #FF7800


Change the blending mode of this layer to "Screen":


Result:


Step 5.
Get out the Custom Shape Tool (  ) and select the Circular Frame Shape as I have done here:


Create a small circular shape as I have done here someone near the top of your Text:


Double click this layer, and apply the following blending options:

Bevel & Emboss:


Satin:


Color Overlay:

Note: Color used: #8F3600


Result:


Step 6.
Press Ctrl + J on your keyboard to duplicate this layer.

Press Ctrl + T on your keyboard to get out the Free Transform Tool.

Place your cursor near the center node (box) on either side.


Click and drag your mouse towards the center of the Ring as shown here to slightly distort it.


Press Enter on your keyboard to finalize the transformation.

Press 'V' on your keyboard to get out the Move Tool (  ) and position this distorted ring as I have done here:


Step 7.
Duplicate each of these two layers, and using the same techniques slightly distort them and position them as I have done here, to create the various rings:


Continue to add the rings to each of your letters until you have something similar to what I have here:


Step 8.
Merge each of your ring layers together, by clicking on the topmost ring layer, and press Ctrl + E until each of the duplicated ring layers have been merged together.

Press Ctrl + J on your keyboard to duplicate the rings layer.

Change the Blending Mode of this layer to "Color Dodge":


Result:


Step 9.
Next we'll create a slight reflection effect to give the effect a little more depth. Select and merge all layers (except the background layer) by clicking the topmost layer and press Ctrl + E repeatedly until all layers have been merged into one.

Press Ctrl + J on your keyboard to duplicate this layer.

Go to Edit->Transform->Flip Vertical.

Press 'V' on your keyboard to get out the Move Tool (  ).

Position the duplicate layer as I have done here:



 Drop the Opacity of this layer to 30 percent:



 Result:



Press Ctrl + T on your keyboard to get out the Free Transform Tool.

Place your cursor near the bottom center node (box), click and drag move this node inward toward the center of the shape to 'squeeze' it to nearly half it's original size:



Next Hold down the Ctrl + Alt + Shift keys on your keyboard, place your cursor near the bottom right node (box), click and drag this node outward to horizontally distort the shape as shown here:



Press Enter on your keyboard to finalize the transformation.

Here is how my final result ended up:



And with a very basic, simple background effect added:



I hope you've enjoyed this tutorial, and have learned how to create a very interesting text effect.



Top of Page

 
Level Ten Hosting