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


Grunge Background
Author: Webmaster
Authors Website: www.photoshoptower.com
Jan 29, 2007, 19:38

Email this article
 Printer friendly page

Step 1.

Create a new document of any size, the document I"m using here is 550 x 200 and fill the background with black. Press 'D' on your keyboard to reset your colors to black (#000000) and white (#FFFFFF):


Go to Filter->Render->Difference Clouds.

Press Ctrl + F on your keyboard three times to repeat this process three times, Result:
Web Designers Library- Tutorials and Articles
Grunge Background


Step 2.

Create a new layer, fill the background with black and go to:

Go to Filter->Render->Difference Clouds.

Press Ctrl + F on your keyboard three times to repeat this process three times.

Press Ctrl + I on your keyboard to invert the colors.

Change the blending option of this layer to 'Overlay':


Result:
Web Designers Library- Tutorials and Articles
Grunge Background


Step 3.

Create a new layer, fill the background with black and go to:

Go to Filter->Render->Difference Clouds.

Press Ctrl + F on your keyboard three times to repeat this process three times.

Change the blending option of this layer to 'Screen':


Result:
Web Designers Library- Tutorials and Articles
Grunge Background


Step 4.

Now we'll add some color to the effect:

Click on the bottom most/first layer to select it.

Go to: Layer->New Adjustment Layer->Color Balance.

Press Okay, check the 'Highlights' box and enter the following settings:
Web Designers Library- Tutorials and Articles
Grunge Background


Press Okay.

Click on the middle layer to select it.

Go to: Layer->New Adjustment Layer->Color Balance.

Press Okay, check the 'Highlights' box and enter the following settings:
Web Designers Library- Tutorials and Articles
Grunge Background


Press Okay.

Click on the top layer to select it.

Go to: Layer->New Adjustment Layer->Color Balance.

Press Okay, check the 'Midtones' box and enter the following settings:
Web Designers Library- Tutorials and Articles
Grunge Background


Press Okay.

Result:
Web Designers Library- Tutorials and Articles
Grunge Background


Step 5.

With the top most layer still active press Ctrl + A to highlight all, then press Ctrl + Shift + C to copy all.

Now press Ctrl + V to paste all. This will make a copy of all three layers for us to create some further effects.

Go to Filter->Stylize->Extrude and enter these settings:
Web Designers Library- Tutorials and Articles
Grunge Background


Go to Filter->Sharpen->Sharpen.

Press Ctrl + F on your keyboard three times to repeat the sharpen three more times.

Change the blending mode of this layer to 'Overlay' and drop the opacity down to 57 percent:
Web Designers Library- Tutorials and Articles
Grunge Background


Result:
Web Designers Library- Tutorials and Articles
Grunge Background


Continue on to part 2 Grunge Borders.

Here is my my final result after adding a grunge border, some text, and a game render:
Web Designers Library- Tutorials and Articles
Grunge Background


That completes the grunge background tutorial. If you would also like to learn how to create a grunge border please view our Grunge Border tutorial that compliments this tutorial.



Top of Page

 
Level Ten Hosting