Burned bar

Author	Tom de Bruijn
Date	Dec 20th, 2007
Status	Done [?]

This is a nice burned looking website bar with an optional burned effect.

This one is also about making a website bar.
The result of this tutorial will be an website bar that got a dark brown color (burned) with small bright metal strokes.

We can also add, at the end of this tutorial, a decayed effect - it's optional!

Now the images of the results:

• Normal
• With decayed effect

Now let's start with the tutorial, I hope you have some time, it's not small and have fun!

Step 1 - Making a new PSD file

Start with makeing a new PSD file by pressing: Ctrl + N , using this kind of shortcuts will save time if you have less time than usual, and set the settings to this:

Step 2 - Editing "layer 1"

Now we got an long empty file let's fill it with Black, Shift + F5 . This will result in a long black bar.
Also edit the layers name into: bar-background , by right clicking on the layer in the layers window and click on Layer Properties and rename it, this will help in having things organized.

Step 3 - Addings Blending Options to Bar-Background

Now to give the bar it's dark brown color right click on the bar-background layer in the layers window and press Blending Options [b].
First we will add a 3D effect to our bar by going to [b]Bevel and Emboss and add these settings:



And now to add a darken effect to the color, which we will add after this, go to Satin and add these settings:



And last but not least we will add color to this layer. Go to Color Overlay and add the following settings:
The color's hex code is:
#ff7200 (Note: Different colors are allowed to fit your needs)

Step 4 - Cloud Layer

Before we continue, let's check if it all went well, here is what it should look like: Click Here
Ok, Now to give it's special color we will make a new layer and call that one: Cloud Layer .
Just the same as explained in step 2. Make sure the Cloud Layer is above the bar-background layer in the layers window or else the cloud layer will not be visible. (see image below)

Now select the Cloud Layer and go to Filter -> Render -> Clouds
And after that go to Filter -> Render -> Different Clouds

As you can see now the bar will be not visible but covert by clouds. To give a nice effect go to the layer options and add the overlay blending option, like this:

You will see that the cloud will still be visible only over the bar layer.
Result so far: Click Here

Step 5 - Using the Polygonal Lasso Tool

First we will begin making a new layer and call it: Metal stroke 1
Now to make those metal strokes we first need to an selection for the first one.
Grab the Polygonal Lasso Tool and make a selection as shown below:
Hint: to have the lines right next to eachother hold shift while drawing the selection, this will result in straight lines all the way)


Now that's done we need to fill the selection. Press Shift + F5 and fill it with black.
Finally press Ctrl + D to deselect the selection.

Step 6 - Adding effects to the Metal Stroke 1 Layer

Since we only got a black stroke now and we want it metal right click on the Metal Stroke 1 Layer in the Layer window and go to Blending Options
Then add the following settings to the Options.

Satin, Add a darken effect to the color



Color Overlay, Add a color to the Effects.
The color I used is: #d2d2d2



Stroke, add a small stroke to the outer of the layer.
The color is just plain black.

Step 7 - Adding more Metal Strokes

Now we got one stroke and of course we want more, I will do 3 in my example.
Making more strokes is easy, right click on the Metal Stroke 1 Layer and press Duplicate Layer, this window shows up and call the duplicate Metal Stroke 2 [].



Now move it 10 pixels away from the first one so there is a gap between them.
[b] To add another Metal Stroke just repeat this step again and again untill you have enough strokes.

Step 8 - Adding the Metal stroke layers to the other side of the bar

If you want to add the same strokes to the other side of the bar, to make it symetrical, you can do the following.
Duplicate (as explained in step
7) one of the metal strokes layers and Flip the layer horizontal by doing this:
Select the layer you want to flip horizontal and go to: Edit -> Transform -> Flip Horizontal .
Now by flipping the layer the settings will be the same, which we don't want, so right click on your layer you just flipped horizontal and go to Blending Options .
Change the Satin angle from 161 to 19, like this:



To make more metal strokes in the right side just duplicate the one layer you have allready made on the right side and repeat untill you are happy.

Your current result shoul look like: Click Here

Step 9 - Making a center metal piece

If you want to add the same strokes Make a new Layer and call it Middle-Bar .
Grab the Horizontal Marquee Tool (see image below) and make an selection with a width of 200 pixels (or any size you rather have) and a height of 20 pixels in the center of the bar.



Now fill (Shift + F5) the selection with Black.

Now what you can do to make the edges like in the result here: Click Here
You can do one of the following things:
- Grab the Eraser Tool () and clear the rest of the layer space.
- Make a selection which will remove the extra layer space.
I did the first one and this is my result: Click Here in step 14 you will see why I choose for that one.
(It's not needed to make it perfect.. there will go a metal stroke over it so it will not be visible if it's not in a straight line)

Step 10 - Adding Blending Options to the Center Metal Piece

If you ever copied and pasted layer styles the following step will not be hard.
And if you never did that, you will learn now.
Since we don't need a special layer style for the Center Metal piece we are going to copy a layer style:
(This is a lot easier than add every style seperatly)
Right click on one of the layers on the right side of the bar (Metal Stroke 4-6) in the layer window and press Copy Layer Style :



Now right click on the Center Metal Piece and press Paste Layer Style :



what you will have now is a Center Metal Piece that has the same layer style as a metal stroke on the right side of the bar.

Step 11 - Adding metal strokes on both sides of the Center Metal Piece

Now to add strokes to the right and left side of the Center Metal Piece is easy.
Select a layer from the left side (Metal Stroke 1-3) and duplicate it.
Now move it to the left side of the Center Metal Piece, make sure the metal stroke layer is above that of the Center metal Piece or else it will slip under the Piece and it will not be visible.

To make one Metal Stroke on the right side Duplicate one Metal stroke on the right side (Metal Stroke 4-6) and move it on the right side of the Center Metal Piece, also make sure the layer of that stroke is above the Center Metal Piece stroke.

My result so far is this: Click Here

Step 12 - Add Text to the Bar

Now we're done with the Bar itself (minus the optional stuff that will come after this) we can add text.
Grab the Horizontal Type Tool : and select the whole bar, this will result in a nice centered text (make sure the alignment in the type bar is centered), and type your text you want on it.

Step 13 - Adding Blending Options to the Text

If you want your own text effects on this you may skip this step, else we will continue. Right click on the text layer in the layers window and Press Blending Options .
Add the following settings:
Iner Shadow , Add a shadow inside the text which will make it more dark.



Bevel and Emboss , add a 3D effect to the text.



Contour , this will strenghten the 3D effect



Color overlay , add a color to the text. The color is just plain white: #FFFFFF



Stroke , add a stroke outside the text.



Now you will have this: Click Here
If you do not wish to add option settings to it go to the end of this page.

Step 14 - Adding Optional Effects

Now if you like your burned bar so far, but want it to have a decayed effect you can do that really easy.
Actually not a lot of work at all. Now you will find out why I did the center piece not perfect, it will give a more decayed effect.
We'll start with grabbing the Eraser Tool :
and select the block Mode in the Eraser bar .
Then select a layer you want to have a decayed effect and then just remove some of the edges.
If you want to decay the Center Metal Piece just change the Eraser mode to Brush .
Eventually you will have something like this: Click Here
Also if you want it rusty you can use this colors:
#6b2b00
#72492e
#953c00

Finnish

Done!
Now you will have something like this: Final Result
Or with Decayed effect: Final Result

I hope you had fun using my tutorial, I sure had, got any comments?

Downloads

• Full PSD file of the bar
• Full PSD file of the decayed bar

No comments placed yet, be the first!