Learn how to make a cool interface for something like a flash preloader.
Note that this is an advanced tutorial, if you’re new to photoshop you probably won’t be able to completely follow this tutorial.
1.
First of all you need to learn how to make the metal interface pieces, I’ve written a tutorial on how to make them before on TheDesignWorld, view the original here, view my version here.
2.
When you’ve made your interface, or if you’re going to use mine, merge all the layers together (CTRL+E) and press CTRL+T, now you’re in transform mode, re-size the selection to about 12% by 10%.
You’ll probably need to sharpen it once, Filter > Sharpen > Sharpen.
Duplicate the layer and flip it vertically Edit > Transform > Flip Vertical, move the layer downwards and merge them together.
Duplicate the newly merged layer and flip it horizontally Edit > Transform > Flip Horizontal, move the layer as much to the right as you think you should.
3.
I sharpened the layer slightly and put a basic black Outer Glow on the main interface layer.
Set your foreground color to #157bca. Now make a rounded rectangle in the middle of the interface like so:
Apply the following layer styles to the blue shape layer:
Inner Shadow,
Outer Glow,
Inner Glow,
Gradient Overlay,
Pattern Overlay, (Pattern: .pat – .gif)
You should now have something like this:
4.
Select the blue rectangular layer (CTRL+Click the layer thumbnail.)
Contract the selection by 2 pixels by going to Select > Modify > Contract in the photoshop menu.
Use either the Gradient Tool or Brush Tool to make some soft white gradients at the top and bottom of the selection (I used the Gradient Tool.)
Set the Layer Mode to Overlay.
Add pixel text and dots with the pencil tool. I also added 1px solid Drop Shadow to the text and dots layers.
Download the complete PSD here.
