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 : Textures & Patterns Last Updated: Apr 15th, 2008 - 18:38:37


Construction Metal Effect
Author: renegade_911
Authors Website: www.photoshoptower.com
Feb 16, 2007, 18:36

Email this article
 Printer friendly page

Step 1.  Click here to download the Metal Texture file that was used for this tutorial. Open this file in photoshop.
Web Designers Library- Tutorials and Articles
Construction Metal Effect



Step 2.  First we'll apply the text to the piece. You'll need to use a grunge type text for this tutorial. If you would like to download the exact font used in this tutorial please click here.

Set your foreground color to white (#FFFFFF).
Go ahead and get out the Text Tool (  ) and set it up like so:


Result:
Web Designers Library- Tutorials and Articles
Construction Metal Effect


Step 3.  Next open up the file named "Overlay_Metal_Texture.jpg">" that is included in the Download Pack for this tutorial.

The image looks like this:
Web Designers Library- Tutorials and Articles
Construction Metal Effect


Once the "Overlay_Metal_Texture.jpg">" file is opened in photoshop. Press Ctrl + A to select everything, then press Ctrl + C to copy it.

Next move back to our original document. First create a new layer by pressing Ctrl + Shift + ALT + N on your keyboard, and then press Ctrl + P to paste the Overlay_Metal_Texture.jpg"> graphic onto the new layer.

Here is how your layer pallet should look:
Web Designers Library- Tutorials and Articles
Construction Metal Effect


And here is what the entire image looks like:
Web Designers Library- Tutorials and Articles
Construction Metal Effect


Step 4.  Hold down the Ctrl Button on your keyboard and click on the text layer.
Web Designers Library- Tutorials and Articles
Construction Metal Effect


This will make a selection of the text within the layer, here is how the canvas should look after the selection is active:
Web Designers Library- Tutorials and Articles
Construction Metal Effect


Click on the Meta_Texture_Overlay.jpg"> layer (top most layer) to select it, if it isn't already.
Web Designers Library- Tutorials and Articles
Construction Metal Effect


Go to Select->Inverse (or press Ctrl + Shift + i) to invert the selection.

Tap the Delete button on your keyboard to knockout the background.

Result:
Web Designers Library- Tutorials and Articles
Construction Metal Effect


You can now delete the text layer as we will no longer use it.
Web Designers Library- Tutorials and Articles
Construction Metal Effect


Step 5.  Double click the topmost layer (the one with our text on it) and apply the following blending options:

Bevel & Emboss:
Web Designers Library- Tutorials and Articles
Construction Metal Effect


Contour:
Web Designers Library- Tutorials and Articles
Construction Metal Effect


Gradient Overlay:
Web Designers Library- Tutorials and Articles
Construction Metal Effect


Stroke:
Web Designers Library- Tutorials and Articles
Construction Metal Effect


And that completes the tutorial. Here is what I ended up with as my final result. As you can see I've added simple yellow warning tape to the final composition to give it a more dramatic effect. Play around with some of the settings and see what you can come up with:
Web Designers Library- Tutorials and Articles
Construction Metal Effect



Top of Page

 
Level Ten Hosting