创建一个三D立体感的主页

Resources you will need to complete this tutorial:

• 960 Grid System
• MacBook PSD

Here is what we will making, click on image for full preview:

Before we get started download first 960grid system for easy Guideline creation.

Open 960_download\templates\photoshop\960_grid_12_col.psd

We also need to make sure that our Rulers and Guides are viewed. By pressing

• CTRL + R  (View Rulers)
• CTRL + ;  (View Guides)

CTRL + SHIFT + C to change the canvas size.

Step1 Working with Background and Header

Rename the layer1 to  Header  (put everything in separate folder like Header, Navigation, Footer to help to be organized better).

Fill the background color to  #131313 .

Create new guide. Click on View > New Guide

Select Rectangular Marquee Toll(M) and make a selection from the guide we made, fill it with #0a0a0a color.

Add this Blending Option:

Stroke

• Size: 1px
• Color: #242424

Select Text Tool(T) and add your navigation links, place it at the top right corner.

Create another folder inside the Header name it  Logo , put all your logo related layers there.

Next we will create our logo. Select Rectangular Marquee Tool(M) make a selection as shown below and fill it with any color.

Add this Blending Option to it:

Drop Shadow

Inner Glow

Gradient Overlay

Stroke

Select Text Tool(T) add up your Site Name.

Add this Blending Option to it:

Drop Shadow

Gradient Overlay

Step 2: Working with Welcome Message

Create another folder  outside  the Header name it  welcome_displays , put all you’re welcome displays related layers there.

• Create new Horizontal Guide 130px.
• Select Text Tool(T) and put up your Welcome Message

For the font I used Verdana,or the Highlighted text color is  #73cef8.

Add this Blending Option:

Drop Shadow

Step 3: Working with Read More Button

Create another folder inside the welcome_displays name it  read_more , put all your read more related layers there.

Select Rounded Rectangle Tool(U) Radius to 15px.

Add this Blending Option:

Drop Shadow

Inner Shadow

Gradient Overlay

Stroke

Add Read More text size to 14pt, add a solid drop shadow 2px.

At the very bottom of  welcome_displays  layers add another layer name it background .

• Select Linear Gradient With a foreground color  #111111  and background  #181818.

Step 4: Working with 3D like Ground/Holder

• At the very top of our layers panel create another folder and name it  3D
• Create another layer and name it  Linear
• Select Rectangular Marquee Tool(U)

Select Gradient Tool and use linear gradient. Foreground Color  #111111  background #181818.

• Now create another layer at the top of linear and name it  radial
• Hit X  to reverse the background color and foreground color
• Make sure you choose radial gradient.
• Drag the gradient starting from the  center  to  right .

Add this Blending Option to it:

Drop Shadow

Stroke

Now Create a 1px line color  #272727

Duplicate the line and place it on the bottom:

Duplicate layer again and place it to the top.

Add this Blending Option:

Gradient Overlay

Create another line and fill it with  #0b0b0b.

You can see now that we’ve got a nice3D effect, ok – let’s use that ground effect and put something on it.

Create another layer at the very top of 3D folder and name it  MacBook.

Open up the Macbook .psd file that I provided in the resources. Replace the image to some of your works and place it in our layout.

• Below the image layer create another layer and name it Shadow
• Select Elliptical Marquee Tool(M) and fill it with  #000000

Go to Filer > Blur > Gaussian Blur;

Step 5: Working with 3 column Information

Create another folder below the 3D folder and name it  3column_info , put all your information related layers there.

Set the foreground color to  #111111  background to  #181818 .

Add this Blending Option:

Drop Shadow

Create a 1px line as shown below.

Create a folder inside 3column_info and name it  About Me .

Here is what we will be making:

Select Rounded Rectangle Tool(U) Radius to 10px.

Add this Blending Option:

Drop Shadow

Inner Glow

Gradient Overlay

Color I used

• #010101
• #242424
• #1d1d1d
• #575757
• #2b2a2a
• #070707
• #525151

Stroke

Color I used

• #000000
• #5f5e5e
• #000000

• CTRL + Click to the layer to make a selection
• Go to Select > Modify > Contract 3px
• Fill it with any color

Add this Blending Option:

Inner Shadow

Stroke

Color I used

• #000000
• #2a2a2a
• #919191
• #2b2b2b

Above the contracted layer add your image.

Select Text Tool(T) and follow the steps as shown in the screenshots:

Grab a copy of read more button.

Create another folder and name it What I Do.

For the bullet style Select Rectangular Marquee Tool(M) and make a little Rectangle.

Add this Blending Option on it:

Drop Shadow

Inner Shadow

Gradient Overlay

Color I used

• #000000
• #191919

Stroke

Color I used

• #8a8a8a
• #000000

Create another folder and name it  My Skills .

For the Photoshop, Illustrator, HTML/CSS WordPress text I used Verdana,bold, size to 18pt.

Select Rounded Rectangle Tool(M). Place it as shown in the screenshot below.

Add this Blending Option:

Drop Shadow

Gradient Overlay

Color I used

• #252525
• #171717

Stroke

Duplicate the layer and clear the layer style by:

• selecting the layer
• right-click
• then select Clear Layer Style

Add this Blending Option to it:

Inner Glow

Gradient Overlay

Color I used:

• #191919
• #282828

Step 6: Working with Recent Projects

Create another folder name it  recent_projects , put all your recent projects related layers there.

Apply the same format as to our headers.

Now select Rounded Rectangle Tool(U) Radius to 10px. Create 3 shapes about  12.5 px distance from the right.

• Apply the same style as we did to our thumbnail image in our about me section.

Contract it to 3pxand use the same process as we did in our thumbnail in about me. Add up your image.

Step 7: Working with Footer

Create another folder name it  footer , put all your footer related layers there.

Select Rectangular Marquee Tool(M). Draw a shape at the very bottom 40px height and fill it with  #0a0a0a .

Add this Blending Option:

Stroke

Now add up your copyright text. I used:

• Verdana
• Size:10px
• Color #999999 and for the link #ffffff.

Finally were done! Hope you learn something on this tutorial and hope you like it. If you haveany questions or tutorial request drop some comments below.

Thank you and keep coming back!

Final Preview

创建一个三D立体感的主页