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 : 3D Effects Last Updated: Apr 15th, 2008 - 18:38:37


3D Text
Author: Ghost
Authors Website: www.tutorialfx.com
Dec 5, 2006, 17:18

Email this article
 Printer friendly page
This tutorial will teach you how to create 3D text, as shown below.
Preview

Web Designers Library- Tutorials and Articles
3D Text


Step 1: Creating the document and preparing text

Create a new document (File > New) and use any size you want. I'm using 320px x 150px. Next, select a font and type your text. Add any effects you want to the text, such as gradients or colours.

Web Designers Library- Tutorials and Articles
3D Text


To stretch and transform the text, we need to rasterize it first. To do this, right click the text layer on the layers list, and select Rasterize.

Web Designers Library- Tutorials and Articles
3D Text


Step 2: Transforming the text

After you have rasterized your text, your ready to transform it. With the text layer selected, press CTRL+T, and position your text as if it were in 3D perspective, and press Enter to apply the change. You'll want to achieve an effect as shown below. (This will be the top of the 3D text)

Web Designers Library- Tutorials and Articles
3D Text


Making the text 3D

After you have transformed the text, right click it on the layers list, and press Duplicate Layer. (Alternatively, you could press CTRL+J with the text layer selected.) Now create a new set (  ), and place your duplicated layer into it. Add a bevel and emboss to the duplicated layer (use the default settings). This will help in achieving the 3D effect.

With the duplicated layer selected, hold shift and press the down arrow 2 times. This will move your text layer down by 20 pixels. Now, hold the alt key and ctrl key and press the up arrow 19 times. This duplicates each layer, and nudges it up by 1 pixel each time.

Web Designers Library- Tutorials and Articles
3D Text


This is the end of the 3D effect. If you want to add more effects to it, such as reflections and shadows, continue reading.

Step 3: Adding extra effects

Note: These effects aren't needed, but they provide nice details to the final product. Now that we have the basic 3D effect, we can add more effects to give it a reflection, and an environment. Select the original text layer and add a faint drop shadow to it. Select the layer set, and press CTRL+E (this will merge all the layers inside.) Duplicate the new layer (CTRL+J) which use to be the layer set, and lower its opacity to about 20%. Position it below the 3D text, so it looks like a reflection. There are many tutorials about reflections in our database if you need any more help. On my background layer, I also added a faint gradient instead of just a white backdrop.

Final Result

Web Designers Library- Tutorials and Articles
3D Text




Top of Page

 
Level Ten Hosting