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


Filter Rock Effect
Author: DewDrop
Authors Website: www.photoshoptower.com
Apr 3, 2007, 18:33

Email this article
 Printer friendly page

Step 1.

Create a new document in photoshop of any size. For this tutorial I will be working with a 300x300 document.

Step 2.

Set your foreground color to: #9B926B, and your background color to: #293C36
Web Designers Library- Tutorials and Articles
Filter Rock Effect


Step 3.

Go to Filter->Render->Clouds.

Press Ctrl + F on your keyboard until you get a good contrast in colors, such as I have done here:
Web Designers Library- Tutorials and Articles
Filter Rock Effect


Step 4.

Go to Filter->Artistic->Watercolor, and apply the following settings:
Web Designers Library- Tutorials and Articles
Filter Rock Effect


Result:
Web Designers Library- Tutorials and Articles
Filter Rock Effect


Step 5.

Go to Image->Adjustments->Hue/Saturation (or press Ctrl + U on your keyboard) to open up the Hue/Saturation Utility. Apply the following settings:

Note: Make sure the "Colorize" box is checked
Web Designers Library- Tutorials and Articles
Filter Rock Effect


Result:
Web Designers Library- Tutorials and Articles
Filter Rock Effect


Step 6.

Press Ctrl + J on your keyboard to duplicate this layer. Name the new layer "Rock".
Web Designers Library- Tutorials and Articles
Filter Rock Effect


Double click this layer, and apply the following options:

Pattern Overlay:
Web Designers Library- Tutorials and Articles
Filter Rock Effect


Result:
Web Designers Library- Tutorials and Articles
Filter Rock Effect


Step 7.

Press Ctrl + J on your keyboard, and name this new layer "Shadow Color":
Web Designers Library- Tutorials and Articles
Filter Rock Effect


Press Ctrl + U on your keyboard to open up the Hue/Saturation Utility, and apply the following settings:
Web Designers Library- Tutorials and Articles
Filter Rock Effect


Result:
Web Designers Library- Tutorials and Articles
Filter Rock Effect


Go to Edit->Transform->Flip Vertical.

Result:
Web Designers Library- Tutorials and Articles
Filter Rock Effect


Step 8.

Click back on the original "Rock" layer to select it.
Web Designers Library- Tutorials and Articles
Filter Rock Effect


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

Name this new layer "Rock Erased", and drag it on top of all other layers in your layer pallet as I have done here:
Web Designers Library- Tutorials and Articles
Filter Rock Effect


 Get out the Erase tool () and set it up as I have done here:
Web Designers Library- Tutorials and Articles
Filter Rock Effect


Using the Eraser Tool, erase the darker spots on the canvas, to reveal the Reddish color below. Here is the the areas that I erased (shown in blue):
Web Designers Library- Tutorials and Articles
Filter Rock Effect


Here is how mine came out after a little erasing:
Web Designers Library- Tutorials and Articles
Filter Rock Effect


 

Step 9.

Finally we're going to just enhance the 3d effect a bit. Go ahead and get out the Burn Tool (), and set it up as I have done here:


With this tool, circle around the edges of the areas that we erased in the previous step on the "Rocky Erased" layer. Below is the areas that I brushed with the Burn Tool (shown in blue):
Web Designers Library- Tutorials and Articles
Filter Rock Effect


Result:
Web Designers Library- Tutorials and Articles
Filter Rock Effect


And here is how my final result turned out:
Web Designers Library- Tutorials and Articles
Filter Rock Effect

As you can probably guess, the key is to experiment with different colors, and layer styles ~ but needless to say you can come up with nearly endless different effects and combinations using these easy steps, and techniques.



Top of Page

 
Level Ten Hosting