I saw some pretty nice prelaoders on a lot of templates that people are selling. So I decided to try it and it turns out it is pretty straight forward. I wanted to go with a high-tech look so I found some great shapes that would match my design. Here is the tutorial on the graphics side of the flash preloader.

Step 1: Create a new document (300p x 200px) with the background color of your choice

Step 2: Create a rectangle using #242424


Step 3: Apply the following layer style to this layer.

Add the following pattern you can DOWNLOAD IT HERE

Step 4: Create a new rectangle inside of the previous one that we created this time using color #333333
Inside Rectangle

Step 5: Add the following layer style to this rectangle

Step 6: Now we are going to add some text, I used Tahoma 10px #FFFFFF

Loading Text

Step 7: Next create a really small thin rectangle I used #341713 for the dark red and I added a 1px outside stroke
(This is for the background of the loading bar so whatever color you are going to use for the loading bar make this background a much darker color, so if you were to use a light blue you would probably want to use a dark navy blue for this rectangle)

Step 8: Duplicate the rectangle you just created but this time using the rectangle marquee tool cut off about 2/3 of it, and add a color overlay. I used #7b1d0e in the example below.

Step 9: Now for the fun part! Get out your brushes or any images that you can use to create a tech like border. I found these really cool tech parts from a deviant art user ~kopus. Download them at the following Link

Step 10: I decided to use two of the images from the link above and use them on the corners.

Step 11: Now if you look you will see that bright white in the top right corner, you do not want this here as it create too much contrast and will be the first thing that people look at. So to correct this simply use a small soft round brush and set its hardness to 0% and select color #333333 then simply paint over it, next set the layer to Multiply and set Opacity = 85%. This should take care of it.

(You can do this same thing with a light color to create highlights, as always experimentation is key)


To turn this into a flash preloader I would really suggest checking out some of THESE great tutorials on Good-Tutorials.com