This tutorial shows step by step how I created the page I was going to use for my previous work display page. I'm not sure if I still will. However if you come across a page that looks exactly like this and has the name Xi Lin with work displayed that is by Xi Lin, then you'll know I used it.

Step 1. The Page Itself

Determine the size of your page. For best result on all monitors, use 760x600. This resolution will fit in monitors using 800x600 resolutions and on up.

Step 2. The Page Format

First, pick the Rectangular Marquee tool and change the style to Fixed Size.

Enter the value "55" for width and "600" for height.

Select both sides of the page and fill it with white. Name the layer "Bar".

Create a layer set, and name that "Bar" as well. Then put the layer "Bar" into the layer set.

Create another layer set, and name it "Top". Within it, make a layer called "Top" (MAKE SURE this layer set is UNDER the "Bar layer set").

While in the "Top" layer, select the Rectangular Marquee and them select Fixed Size. Make the Width "760" and the Height "136".

Next, at the very top of the page on the "Top" layer. Use the Rectangle Marquee to make the Fixed Width selection and fill it with white.

Create another layer set under the the "Top" layer set, and name it "Side Bar". In the new layer set, create a layer called "Side Bar" as well. (MAKE SURE this layer is UNDER the "Top" layer set.)

Select the Rectangular Marquee again, and select Fixed Width. Make the width "35" this time and the height "600".

Where the end of the first "Bar" layer white space ends, make a selection there and fill it with white as well.

Next, create another layer set under "Side Bar" layer set and name it "Body". As with others, make a layer named "Body" in it too.

Now select the Rectangular Marquee once again and used Fixed Size.

With "580" Width and "600" Height to select the remaining transparent area and fill it with white.

Step 3. Setting Them Apart

Now your whole screen should be filled with white.

Go back to the "Bar" layer set.

Press Ctrl and click on "Bar" layer at the same time. Now there should be a selection around the "Bar"

Create a new layer under the "Bar" layer and name it "Blur".

Now fill the selection with black on the "Blur" layer.

Then go to Filter >> Blur >> and Gaussian blur. Enter the value 5.

Then change the layer opacity to "25%" and your result should be:

Go down to the "Top" layer set and create a new layer under "Top" named "Blur".

Do the same as above: Press Ctrl and click on the "Top" layer and then fill the selection with black in the "Blur" layer.

Then go to Filter >> Blur >> Gaussian Blur and enter the value 5.

Set the opacity to "25%" and your result should be:

Now repeat for the layer set "Side Bar" by creating a new layer under the layer "Side Bar" and naming it "Blur".

Then press Ctrl and click on the layer "Side Bar", fill the selection that appears in the layer "Blur" with black.

Then change the opacity to "25%", and step 3 is complete.

Step 4. That Shinny Metal Look

Go back to the layer set "Bar" and create a new layer above "Bar" named "Bevel". You'll need to do this for all your other layer sets so go ahead and do that now.

When you're done creating the layers, your Layers window should look like this:

Select the "Bevel" layer in the "Bar" layer set.

Press Ctrl and click on the "Bar" layer to make the selection.

Make sure you're in the "Bevel" layer then go to Edit >> and Stroke. Make sure your option matches below:

You'll only need one side from both sides of the strokes.

Use the Rectangular Marquee tool, and select out the part's that are not facing inside.

Then press delete.

Go to Filters >> Blur >> Gaussian Blur and enter the value 12.

The press Ctrl and click on the "Bar" layer at the same time. Then press Ctrl+Shift+I.

The selection should invert itself, and then press delete on the "Blur" layer.

Your page should look like this so far:

Now you'll need to repeat these steps for the other layer sets.

Let's do the "Top" layer set first.

Press Ctrl and click on the "Top" layer. Then make sure you're on the "Blur" layer, go to Edit >> Stroke and enter the value 12.

Then while on the "Blur" layer, go to Filters >> Blur >> Gaussian Blur and enter the value at 45.

Press Ctrl and click on the "Top" layer at the same time. Press Ctrl+Shift+I while on the "Blur" layer, and then delete.

Now your result should look like:

Now it is time for the "Side Bars" layer set.

Click on the "Blur" layer above the "Side Bars" layer.

Press Ctrl and click on the "Side Bars" layer. Then go to Edit >> Stroke and enter the value 3.

Similar to the "Bars", you only need the line facing inside the page. So select the other areas using the Rectangular Marquee and delete them. Your image then should look like:

Go to Filters >> Blur >> Gaussian Blur and enter 12.

Press Ok, and you're done with the "Side Bars" layer set.

The "Body" layer set is next.

Click on the "Blur" layer in the "Body" layer set.

Press Ctrl and click on the "Body" layer. Then go to Edit >> Stroke >> and enter . Press Ok.

You only need the 2 side lines, so select all the other areas and delete them. Make sure you delete all the other areas, even the ones that are unseen.

Then go to Filters >> Blur >> Gaussian Blur and enter "56".

Now you should have a nice smooth page that looks like:

Step 5. The Cuts

Now, we go back to the "Bars" layer and make a new layer above the "Bevel" layer called "Cuts".

Choose the Circular Marquee, and make a circle that fits similar to the picture below.

Then press Ctrl+Shift+alt at the same time and click on the "Bar" layer.

The selection should deselect that areas that are not in the layer "Bar" and look like below:

Then take a blurred paint brush "200" in size and click once towards the left side of it, to leave a very faint shadow.

Then take a blurred paint brush "100" in size and click near the tip.

Press Ctrl+D to deselect. Then duplicate the layer and go to Edit >> Transform >> Flip Horizontal and put the duplicated image in the exact mirror position. Then Merge Down.

Now your image should have nice two cuts on the top sides:

Now head down to the "Top" layer set.

Create a layer above the "Bevel" and call it "Cuts".

Then select the Rectangular Marquee and choose Fixed Width and insert the values "57" for Width and "25" for Height.

Select areas within the top on both sides, much like the image below:

Now drag the guides to fit inside the selection facing each other:

Press Ctrl D. Then go back to the Rectangular Marquee with Fixed Size. Enter "760" for Width and "25" for Height.

Make a selection at the end of the top image. Then use the guide to chop off the extra selections.

Then press delete on the "Top" layer, press Ctrl+A in the "Blur" layer and delete the content in the "Blur" layer.

Press Ctrl and click on the "Top" layer then go to the "Blur" layer and fill the selection with black. Then go to Filters >> Blur >> Gaussian Blur and enter 5.

Go back to the "Bevel" layer.

Press Ctrl and click on the "Top" layer. Then press Ctrl+Shift+I. Then press delete.

Go back to the "Cuts" layer.

Make a selection similar to below near the top corner of where you've deleted off the top.

As with before, press Ctrl+Shift+Alt and click on the "Top" layer. Then use the Rectangular Marquee to deselect the other extras:

Then use a blurred paint brush sized "100" and click near the top of the selection:

Then duplicate the layer, flip it horizontaly, put it at it's mirrored place and merge down so it'll look like:

And that's the end of step 5.

Step 6. Those Bump Circles

Make a new layer under "Cuts" in the "Bar" layer set called "Balls".

Make a selection similar to below:

Then press Ctrl+Shift+Alt and click on the "Bar" layer to deselect the extra selections.

Choose the blurred paint brush size "200" and click near the selection like so to add a shadow:

Then deselect, and duplicate the layer. Flip the duplicated layer horizontally, and move it to its mirroed place. Then merge down.

That's the end of Step 6.

Step 7. Orange Lines

Time for the orange lines.

Go to the "Bar" layer set.

Create a new layer called "Orange" above all the layers in the set.

Press Ctrl and click on the "Bar" layer. When the selection loads, click on the Lasso tool. Then press the left arrow button 12 times, this will nudge the selection to the left 12 pixels.

Then fill the selection with the color #FFC600.

Then press the left arrow button ten times and press delete. Then delete the excess orange on the right side of the page.

Then make a circular selection that fits the "Cut" nicely.

Press the left arrow 12 times to the left, then press delete.

Then press Ctrl+Shift+I to invert the selection.

Make a new layer above "Orange", you don't need to name it.

Fill the new layer with the orange, and keep the selection.

Then press the left arrow ten times to the left.

Then press delete to erase the excess orange.

Use the Rectangular Marquee to erase the rest of the excess orange.

Merge down the new layer to the "Orange" layer, and change the opacity to "45%".

Then duplicate the merged layer and flip it horizontally. Move the image to the very edge of the "Bar" layer image then with the Select tool selected (Next to the Marquee), press the right arrow button to the right 12 times.

Then merge down.

Create a new layer in the "Top" layer set above all the layers called "Orange".

Use the Rectangular Marquee with a fixed size of 760x10 to make a selection box at the very top of the image.

Make sure you still have the Marquee tool selected, press the down button 12 times and fill the selection. Then change the layer opacity to 45%.

That's it for the Orange lines.

Step 8. Under Top

Create a new layer set named "Under Top" above the "Top" layer set and create a new layer called "Under top".

Use the Circular Marquee with a Fixed Size of 580x63 and put the circle right where the tops of where the cut is in the top image.

With the Circular Marquee tool still selected and in the "Under Top" layer, press the up button 5 times.

Then press Ctrl+SHift+I to invert the selection.

Then press Ctrl+Alt and click on the "Top" Layer to substract extra selection.

Then use the Rectangular Marquee to clear up everything but that little arc under the top.

Then fill the selection with white.

Next, make a selection that'll fit nicely the cut part in the top.

With any of the Marquee tool selected, press the right arrow key five times.

Then press Ctrl+Shift+Alt and click on the "Top" layer.

Deselect the extra area to fit the "Under Top" shape and fill it with white.

Select the part you've just created, copy it and then paste it on a new layer. Flip it horizontally and put it in it's mirrored place on the other side.

Then merge down.

Create a new layer under the "Under Top" layer called "Blur".

Press Ctrl and click on the "Under Top" layer at the same time.

Fill the selection that appears. Then to go Filters >> Blur >> Gaussian Blur and enter the value 5.

Change the layer opacity to "25%"

Press Ctrl and click on the "Top" layer, then press delete while on the "Blur" layer in the "Under Top" layer set.

Create a new layer above the "Under Top" layer and name it "Shadow 1".

Press Ctrl and click on the "Under Top" layer to make a selection and stroke it with this setting.

Go to Filters >> Blur >> Gaussian Blur and blur it with the value of five.

Change the layer opacity to 45%, then press Ctrl and click on the "Under Top" layer.

Press the Ctrl+Shift+I to invert the selection, then press delete.

Create another layer above "Shadow 1" called "Shadow 2".

This time, press the Ctrl and click on the "Under Top" layer and stroke with these settings:

Go to Filters >> Blur >> Gaussian Blur and blur it with the value of five.

Then press Ctrl and click on the "Under Top" layer.

Press the Ctrl+Shift+I to invert the selection, then press delete.

Here's what you should have so far:

Step 9. Side Bar Madness

Create a new layer set above the "Side Bars" layer set called "Side Insets" and create a new layer in it with the same name.

Make a Rectangular Marquee with a Fixed Size of 15x30 and place it like below:

Use the Eye Dropper tool, and pick the color around that area and fill it the small selection.

Next, use the straight lasso tool to make a small corner selection. Press Ctrl+C, then delete.

Move the pasted layer into where it is suppose to be and name the layer "In".

Now to add shadow so it looks like it actually digs in.

Pick the burn tool and with a blurred brush size of 35. And paint a little over it so it looks like a gradient. Make sure this is all on the "In" layer.

Now move down to the "Side Inset" layer and still using the burn tool, pick a blurred brush size of "35" again paint from top to bottom once or twice depending on how deep you want it in. I only did this twice, the second time a little further away.

Now, click on the "In" layer and merge down. After you do, press Ctrl+A and then press Ctrl+C. Then goto the History folder and undo the merge.

The press Ctrl+V.

Go down to the "Side Inset" layer and add a guide so that it locks to the side of the little box.

Next, place them all vertically evenly.

After that, merge all the inset layers with the except of the layers "In" and "Side Inset" together.

Name the merged layer "L Inset". Then Duplicate it and name it "R Inset".

Flip "R Inset" horizontally and place it in it's mirrored position.

With that, conclues Step 9.

Step 10. Inset Lines

Create a new layer in the "Under Top" layer set above all the other layers. Name it "Lines".

Press Ctrl and select the "Under Top" layer and a selection should show up.

With a Marquee tool selected, press up five times.

Then press D, then press X.

Go to Edit >> Stroke and enter the following option:

Then still with a Marquee tool seleted, press down once.

Stroke with the same option, but have the foreground color be black this time.

Now, press Ctrl and select the "Under Top" layer and then press Ctrl+Shift+I, and finally delete.

Now set the layer option to soft light. Play around with the opacity until you get a look you like, I left it as it is:

Now do the same in the "Top" layer set.

Create a new layer named "Lines".

Somewhere not too far under the orange line, use the line marquee tool and fill it with white.

Nudge the selection down once and fill it with black. Then change the opacity to 5%, or whatever you like.

Now your image should be similar to:

Step 11. Shaping Up

Create a new layer set above everything called "Top Image".

Create new layers and name them as follows, make sure they are all in the same order too.

Go to the "Cockpit" layer. Create a Fixed Size rectange that is 380x600 and drag a guide to the end. This is the middle of the page.

You can now deselect the selection.

The steps below are all merely guidelines, because there are no exact measure. Just make sure you have a good eye for detail, and don't let anything be to out of proportion.

Make a verticle oval shape like below:

Move that selection so that the tip is exactly on the top line.

You don't have to worry about being in the middle, because that guideline will force the selection to snap onto it.

Pick a light shade of grey and fill in the cockpit. I used the color #DBDBDB.

Now go down to the "Head" layer. Make a bigger oval shape and place it about five pixels under it.

Fill it with the orange you used before for the strips. I used the color #FFC600.

Now move down to the "Body" layer.

Make a bigger circle like the example below.

Put it in the exact some position as the "Head" layer and fill it with a darker shade of grey. I used #D7D7D7.

We're not done with the "Body" layer yet. Next create two circular marquees towards the end of the circles to make them more like shoulders.

Here's how my selection looked like:

The press delete and press Ctrl+D.

If it doesn't come out even. Just delete one side. Duplicate the layer, flip it horizontaly then put it in it's mirrored place.

Now move to the "Scythe" layer.

For this part, the Pen tool comes in handy.

Select the pen tool, and dot out a rough sketch. Don't use too many dots, it'll drive you crazy.

Then use the Covert Point tool to smooth everything out.

When you smooth everything out, it should look something like:

When you're happy with the look. Right click the layer and click Rasterize Layer.

Then check the lock transparency button and fill the Scythe with the orange again.

Also, move it to somewhere near under the head.

Now duplicate the layer, and flip it horizontally and place it in it's mirrored place.

Now move down to the "Arms" layer.

Make a circle like below and put it so a bulge comes out in the curve of the scythe.

Press Ctrl+Alt and click the Scythe layer. This will deselect the scythe.

Now deselect the useless area using the lasso.

Fill in the selected area with a light shade of grey than the body. I used #E2E2E2

Duplicate the layer, flip it horizontaly and place it in it's mirrored place.

Almost there...just the legs.

Under the "Body" layer create a layer called "Legs" and then a layer called "Cover" on top of "Legs".

Click on the "Cover" layer and make a oval shape like so.

Then using the Circular Marquee deselect a part of it.

Then deselect a small area from the top too.

Color it with the same shade of grey as the body. Which was #D7D7D7.

Now move down to the "Legs" layer.

The legs will require the use of the Pen tool again.

Make sure your foreground color is #FFC600. Select the pen tool and dot out a rough sketch.

Now pick the Convert Point tool, and fix up the vector to make it rounder.

Then right click the layer name in the layer list and rasterize it.

Move both the "Cover" and "Leg" to the too left hand corner.

That's all there is to the shapes.

Step 12. The Shadowing

Now, to add shadowing to all the shapes.

All that is used is the burn too, and the blurred brushes.

Click on the "Body" layer.

I've decided the light comes from the center, so the top would have a shadow.

Now select the "100" sized blurred brush.

Paint across the top.

Next, there are shadows from the arms too. So color those in.

Then there's shadow from the head. Brush in a little.

Tone in the shadows for the arms a little more, to give it more depth.

Don't forget the shadows from the Scythe.

Now move to the Arms layer.

Most of the shadow comes from the Scythe, so just shade that in a little.

Time for the "Cover". Shadow wise, there are some at the side.

Now move to the "Head" layer.

There is shadow at the top, and a little at the bottom.

Now, it's time for the scythes, so move to the "Scythe" layer.

They're shadow comes from the bottom. So just shade in the bottom abit, following the contours.

Pick the blurred brush with size "65".

Now move to the "Legs" layer.

The shadow is from under the cover and the bottom of the legs. Use size "100" blurred brush.

OK, so far...it should look like:

It may not look like much, but you're not done yet.

Step 13. The Lighting

Go to the "Head" layer and select the Dodge tool and use blurred brush size "100". Click around the middle.

Now go to the "Body" layer and click the middle areas where the shine would be.

Now go to the "Arms" layer and lighten up the top.

Now move to the "Scythe" layer and lighten up the top of the scythe.

Time for the "Leg layer". Lighten up the sides.

Finally, it's the "Cover" layer. Lighten up the sides up as well.

Now you've lightened things up abit.

Step 14. Adding More Detail

Start off with the "Head" layer. Press Ctrl and click on the "Cockpit" layer.

Then click on Select >> Modify >> Expand and insert the value 5.

Then using the burn tool with the size "100" again, and burn the top, then a little towards the bottom.

Now use a circular marquee to make a vertical oval that is a few pixels smaller. Press the Ctrl+Shift+I to invert the selection.

Then press Ctrl+Shift+Alt on the "Head" layer, and add some burn effect to it.

Select the "Body" layer. Make a selection like that of below.

Then press Ctrl+Shift+I, after that press Ctrl+Shift+Alt and click on the "Body" layer.

Use the size "200" blurred brush this time.

You'll need to repeat this for both sides of the body.

Now, do the same for the "Cover" layer as well.

Now it's time for the "Scythe" layer.

Press Ctrl and click on the Scythe layer. Make sure you have a marquee tool selected and press the down arrow five times.

Then press Ctrl+Shift+I and burn.

Repeat for the "Leg" layer, but press the left arrow five times instead of down. Also, make sure to switch the brush to size "100".

Now press Ctrl and select the "Leg" layer so a selection is formed. Have a Marquee tool selected and press the left button 24 times.

Then press Ctrl+Shift+I and finally press Ctrl+Shift+Alt and click the "Leg" layer. Use a size "200" blurred brush and burn the section.

Select the "Scythe" layer. Press Ctrl and click on the layer. This will make a scythe selection.

Nudge (Using the marquee tool and pressing the arrow button) the selection down about 20 pixels. Then press Ctrl+Shift+Alt and click on the layer.

Create a new layer above "Scythe" layer and name it "S Lines". Now press the D button. Stroke this line with a black one pixel line.

Nudge up one pixel, then stroke white. Then change the opacity to 45%

Do the same for other layers, adding lines to give it detail. Change to opacity to match your other lines, this can range from 5% to 45%.

Merge the lines for "Cover", "Leg" and their respective line layers together. Copy the image then undo the merge. Paste the image, flip it horizontally and place it in it's mirrored place.

Step 15. The Shadowing

Now holding Ctrl down and click on one of the layers in the "Top Image" layer set, then hold down Shift as well and click on all the other layers.

This will make a selection of the whole image. Create a new layer called "Blur" under all the layers in the same layer set. Fill it with black and gaussian blur it 5. Then change the layer opacity to 75%.

You can now move the guideline if you haven't done so.

Step 16. The Cockpit

First off, I have to give credit where credit is due. I used a tutorial to create this. The tutorial was originally created by ScaperMoon. I can going to go through the tutorial step by step in context to the Cockpit. However, I would like to acknowledge that I am not the author of the following effects.

While you're on the "Cockpit" layer, goto Filter >> Render >> Lighting Effects. Try to make your option like the image below:

Click on the lock transparency button, then Gaussian the layer by three.

Then press Ctrl+I. This will invert the colors.

Now go to layer effects and add inner glow. Try adding the options like below:

Now go to Adjust >> Bright/Contrast and change the contrast to +30.

Now go back to Adjust >> Hue/Saturation and change Saturation to +100.

Then do go back to Hue/Saturation and change Lightness to 20.

Create a new layer, name it "Colorize" and change the blending mode to Color.

Press the Ctrl button and select the "Cockpit" layer to select the selection and fill it with the color #0096FF.

Create a new layer named "Glare". Fill it with black and create a Lens Flare, doesn't matter which one. Resize it until the glare is at the top of the cockpit.

Goto Filter >> Noise >> Add Noise and enter 10. Then go to Filter >> Blur >> Radial Blur. Set the blur to Zoom and enter the value 10. Press Ctrl+F until you are satisfied with the glare.

Make the "Cockpit" selection again, invert the selection and delete the extra space in the glare layer.

Go back to the "Cockpit" layer. Make sure the transparency lock is still on. Go back to Radial Blur with the same options as before. Blur until you are satisfied.

Create a new layer above the "Glare" layer and name it "Little Glares". Select the size "17" blur brush and the color white, color it a little glare down near the bottom of the cockpit. Then using a smaller brush, add another white dot. Change the blending option to screen and the opacity to "75%".

Create a new layer above the "Cockpit" layer and name it "Big Bevel" then another layer above it named "Little Bevel".

On the "Big Bevel" tutorial, press Ctrl and click on the "Cockpit" layer and make the selection. Stroke it by three and location center and Gaussian Blur it by 7.

Press Ctrl and click on the "Cockpit" layer and press Ctrl+Shift+I. Delete the extra blur.

Do this again on the "Little Bevel" layer. Change the stroke size to two and gaussian blur to five.

Go back to the "Cockpit" layer and go back into the layer effects.

Use the settings below for adding a Satin:

Then finally add a Inner Shadow using the info below:

This ends the part of the tutorial I used for the "Cockpit"

Step 17. You're Done!

Well, with the tutorial anyways. The page is still missing content, which is up to you to add. Play around with the effects and see what other things you can create.

Here's my final image: