Tech Preload Interface

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.
If those aren’t too much good to you, you can download the PSD for my interface in this tutorial 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.

Return home. Published Aug 7th, 2006 under Graphic Design, Web Graphics.

Digg Delicious Reddit Float Stumble

You must be logged in to post a comment.

13 responses

Haha said:August 18th, 2006

Haha why is the images watermarked if you can download the .PSD?

Eli said:August 18th, 2006

Good question lol. I started watermarking my images when I noticed some people were putting my tutorials on their site, leeching my bandwidth etc.. so I made it so people can’t leech my images and i put some watermarks on some aswell

MaZa said:August 19th, 2006

This is great for flash websites. Good job!

j4yhu11 said:August 19th, 2006

This is cool but you should consider taking this tutorial the next step and have the dots animated and maybe even instructions on how to write the code to make this image into a preloader for movie content (ie- flash). I still like it so don’t get me wrong, but there’s so much more potentail for this that it felt like there was something missing.