PART 1 (loading page)

In the first part we will make design for our loading screen. Click here to see the final result.

1. Step

Create new document (900×700), create new layer (CTRL+SHIFT+N) and name it “background”. Now fill it with any color you want. Then right click on that layer and select Blending Options. Apply the following settings :

2. Step

Make your foreground color #333333. Then create a new layer and name it “left”. Select your brush tool (size 13px) and in brush preset apply following settings :

3. Step

Select Pen Tool and using Paths (not Shape Layers!) click in the left corner of document (point 1), and then in the center of your document (point 2).

4. Step

Using Convert Point Tool click on point 1 and drag it to point 2 (see picture below) while holding down left mouse button.

5. Step

Right click on the path and select Stroke Path. Then select Brush and press OK. Right click the path again and choose Delete Path.

6. Step

Duplicate layer “left” and name it “right”. Press CTRL+T, right click on layer an select Flip Horizontal. Press enter and then move layer “right” to the right while holding down SHIT key (this will make it move straight).

7. Step

Using Horizontal Type Tool write “loading” between those two layers. Duplicate it and flip it vertical. Reduce its opacity to 10% and drag it down while holding SHIFT. Above you can write current progress, eg. “22%” in Arial.

When you do a flash version just hide layer “22%” and put there the real loading progress you coded.

8. Step

Now just add the title above the same way we did for “loading”. I’m gonna name it “Shade of Grey” but you can put name of your web site or your name (if you are doing a portfolio page).

That’s it! Design for the loading page is complete. First part of this tutorial is finished, be sure to check back in a few days when part 2 (post-loading page design) is published. Hope you’ve learned something about Pen Tool and brush settings. If you don’t understand something leave a comment and i will try to help you.