3D Web Design

7/28/2019 3D Web Design

1/9

In this tutorial I will show you some very easy techniques, using gradients and layer styles, that we canuse to produce nice subtle 3D effects in our web designs.

Step 1

Create a new document with 1000x750px. Double click on the backgrounds layer and in Color Overlayand choose a dark brown.

Step 2

Enable the rulers (View>Rulers) on your document and add some guides as shown below. Create 2horizontal guides, the first at 30px and the second at 250px. After that add 2 vertical guides at 100px and900px.

Step 3

Create a rectangle with the Rectangle Tool (U). Use the guides for reference. Rename the layer toheader .


2/9

Step 4

Choose black for your foreground color. Select the Ellipse Tool and create the shape that will be theshadow. Make it a bit higher than the white rectangle as shown. Rename the layer to shadow and put it

below the headerlayer.

After that, convert it to Smart Filters, apply a Gaussian Blurand change the opacity to 60%.


3/9

Step 5

With the headerlayer selected, double click it to open the Layer Style dialog box. Select GradientOverlay. Change the gradient style to radial. For the colors I used dark reds.


4/9

Step 6

Next, select the Line Tool (U) and choose the lighter color of the header gradient and create a line. Afterthat choose black and create another line just 1 pixel above the red line. Select the 2 lines and groupthem. Rename the group the "vDivider".

Go to Layer>Layer Mask>Reveal All. Using the Gradient Tool, select a Radial Gradient from Black toWhite and apply a mask to our group. Start the gradient from the center of the group.


5/9

Step 7

Create the menu using the Horizontal Type Tool (T). Use white for the text color. Select all links and

group them. Rename the group White Links

.

Duplicate the group and place it below the white links, change the text color to black and move the group1 pixel up and left. That will create a nice 3D effect, exactly like the one we did with the lines.


6/9

Step 8

Repeat the Step 6, but this time create the horizontal dividers for the links. Use the line tool to draw a redline and 1 pixels to the left draw a black line. Group them and duplicate the group 5 times. Distribute thegroups as shown below.

Step 9

Select all groups of lines and group them. Rename the group toDividers . After that apply a layer mask,Layer>Layer Mask>Reveal All. But this time use Linear.

Step 10

Open the pattern file, or get any pattern you like. Select all and go to Edit>Define Pattern. Call itwebPattern.

Duplicate the header layer and rename it to pattern. Go to its Layer Styles and disable the GradientOverlay and set a Pattern Overlay. Choose the webPattern we created and change the Blend Mode toColor Overlay.


7/9

After that apply a layer mask to the pattern layer using a Radial Gradient.

Pattern

Step 11

Now we can add the logo and the spoon.

For the text, type Psdtuts+, select a bold typeface for the PSD and a regular or light for the TUTS. Go toLayer Styles and apply a Drop Shadow, Gradient Overlay, and Stroke. Thats a very common andbeautiful effect.


8/9


9/9

Conclusion

When we work with web design we have to consider file sizes, browser compatibilities and many otherissues. Sometimes little details like subtle gradients or borders using 2 colors can create a very nice

visual effect or unique style without requiring many hacks and adjustments.

3D Web Design

Documents

Transcript of 3D Web Design