-Start with a 500 x 30 px canvas (W x H)

-Choose a medium grey from the color picker then make a new layer and name it Metal.

-Fill the Metal layer with the grey you selected(Alt + Backspace)

 

 

-Apply this Layer style, Layer>Layer Styles... .

-Now make a new layer by hitting the New Layer button

and move it under the Metal layer.

-Your layers pallete should now look like this.

 

-Now, with the Metal layer selected, go to Layer>Merge Down or hit Ctrl + E. After you merge the layers together the layer will lose its name double clock on it to rename it

-After you have merged the layers go to Image>Adjustments>Curves or hit Ctrl+M

-Adjust it to these settings then hit ok.

-Next use the Move tool to stretch out the edges of the Metal layer so the whole bar has the same look and it doesn't curve at the ends.

 

 

-Apply these Layer Styles.

 

 

 

 

-Now go to Edit>Preferences>Guides, Grid and Slices...

Use these settings:

Gridline Every: 100 pixels

Subdivisions: 1

-View>Show>Grid to show the grid or hit Ctrl + '

-Make a new layer and name it Break

-Zoom in to make this easier to see. Now use the Single Column Marquee Tool to select just to the left of the first grid line.

-Now hit D to reset your colors to Black and White. Hit Ctrl+Backspace To fill the selection with black. Then hit the Right Arrow Key to Nudge the selection one pixel to the right. Finally hit Alt + Backspace to fill the selection with white.

-Do this at each gridline. When you are done you should have 5 white lines and 5 black lines evenly spaced throughout your image.

-Now change the break layer's blend mode to Soft Light, then make a copy of it by dragging the layer into the new layers button. We make 2 copies so it will show up dark enough.

 

 

 

-Now go to Edit>Preferences>Guides, Grid and Slices...

Use these settings:

Gridline Every: 10 pixels

Subdivisions: 2

-View>Show>Grid to show the grid or hit Ctrl + '

-Use the Circular Marquee too to make circles like this.

-Hold shift to add to the selection after you've made the first circle.

 

 

-Make not of how close they are to the edges, if they are not positioned correctly it won't look right.

-Use the Rectangular Marquee Tool to connect the two circles. When you have the selection done right make a new layer. Name it Screen

 

-Apply these Layer Styles:

 

 

 

 

-Your Screen layer should now look like this.

 

Duplicate the Screen layer and center it between each of the breaks. Then add whatever text you want for your site.

Turn the grid back on (Ctrl + ') and make slices at each of the divisions with the Slice tool. Then go to File>Save for Web....

That will save each of the slices as an individual image so you can add them to your website individually, enjoy.

Discuss this tutorial on the Forum

-More Tutorials-