Submit Your Article
Home Articles News Tutorials Videos Add An Article
Topics: Design Photoshop Programming PHP CSS Java Database Web Development Javascript Ajax
– Close + Open

Find Out More About DevWebPro!

Sign up for the newsletter


» Terms & Conditions

Welcome to the New DevWebPro!

DevWebPro Includes:
  Hundreds Of Tutorials   Developer News
  Unique Gadget Videos   Tons of Topics to Discuss
  Expert Advice   We Will Publish Your Articles

Industrial Panel

Sunday, November 12th, 2006
Text: Decrease Font Size Increase Font Size | Print Print Article | Share: Delicious Digg StumbleUpon Post to Twitter Post to Facebook

In this tutorial I’ll be showing you how to create this industrial styled panel, great for gaming website templates!
industrial panel tutorial result
Let’s get started.

1.

First create a new document and make a background that will match the panel. I used a dark grey background with a few nice effects.
background grey

2.

Create a new layer for the start of the panel.
After you created the new layer, make a rather crooked selection with the Polygonal Lasso Tool.
polygonal lasso tool
This is the selection I made:
selection
Fill your selection with a lighter grey than the background, I used #454545.
filled with grey

3.

Go into the Blending Options for the main panel layer and apply the following layer styles:
Outer Glow
Outer Glow
Gradient Overlay
Pattern Overlay (Download the pattern from here)
You should have a result like this:
after applying layer styles

Pages: 1 2

Topics: , ,

Leave a Comment

DevWebPro is an iEntry Network ® publication - © 1998-2010 All Rights Reserved