Design your way

In this tutorial you will learn how to make a preloader similar to the one at cubamoon, a modern purple preloader that can be coded in flash to look just extraordinare.

1. Start a new 500×300 .psd document and fill it with #301E25.
2. Make a new layer with CTRL+SHIFT+N. Using the Rectangular Marquee Tool draw a rectangle, now go to Select – Modify by 10 pixels. After that go to Layer – Add layer mask – Reveal selection and your rectangle will have round corners. Now fill it with #412932. Right click on the layer -> Blending Options -> Outer Glow -> Color: #000000, Opacity 56%, Spread 0% and Size 18px.


3. Make a new layer and by holding CTRL click on the previous layer to select it’s shape. Now go to Select – Modify – Contract by 4 px. Fill this layer with #301F26 and go to Blending Options to select a black 2 px stroke.

4. Draw a rectangle in the upper part of the main shape and fill it with #47383F. Then by holding CTRL click on the layer made on the third step and then using the Magic Wand Tool right click on the highlighted area and select Layer via cut. There will be made a new layer with what we’re interested in. You can delete what’s left outside the rectangle area.


5. Duplicate the layer at step 3 and uncheck the stroke in Blending Options. Now cut it in the upper area so it can start where the layer at step 4 ends. You can do that either with the eraser (not recommended) or by drawing a rectangle with the Rectangular Marquee tool like in the following screenshot and by pressing afterwards the delete button on the keyboard. Now for this newly created layer go to BLending Options: Inner Glow: Color Black, Opacity 31%, Choke 0% and Size 27%.

6. Select the layer made at step 4 and add a gradient from #301F26 like in the screenshot.

7. Now draw a 2 px line by using the Pencil Tool below the previous layer with #4B373E.

I forgot here to activate the layer at step 6. Don’t worry, you won’t make the same mistake.
8. We now have to make some lines cause they are very trendy these days. Draw a vertical line with a 17px Pencil Tool with color black and then press CTRL+T and rotate it to look like this.

9. Duplicate the line and move it so it will look as in the previous screenshot and then cut out the pixels that are over the main preloader body like we did in step 4. Press CTRL+E to merge the line layers and select layer Opacity 20%.
10. At the top draw a nice looking shape with the Pen Tool and fill it with white. Then select 5% opacity for this layer.

11. Now make a new smaller rectangle with Rectangular Marquee Tool in a new layer, make his corners rounded as we previously learned and use the following Blending Options for it: Overlay Color: #3D2F35, 2px Stroke with the following Gradient and click on Reverse.


Then Inner Shadow: Distance 1px, Size 1px with color white.
12. Do the same shape and make it a pink one (#782146) but make sure it doesn’t go over the inner shadow of the previous layer.

13. Copy the lines layer that is on the upper site of the preloader body and by using CTRL + T resize it so it can fit vertically in the new rounded rectangle. Duplicate this new line layer and move it to the right so it can fill the rounded rectangle.

You can now add a text like “loading, please wait…” or as the people at cubamoon did “Loading… One moment please”. The final image:

I want to mention that this tutorial must be served only as a guide on how to do a modern preloader and not one that teaches you how to copy their work. This is the reason why I made the images smaller and I didn’t animate it. This preloader belongs to cubamoon.com and must not be used in a commercial purpose.