Design a cool 3d block for your website

Today we will design a black cool looking 3d block for your website. You can use this block in your website to display sliding featured posts or sliding images.

Final preview
below is the the final preview of the block.

Step 1:
Create a new document, roughly about 600 px by 400 pixels, with white background. Fill the layer with #4c4c4c color using “Paint bucket tool”.

Step 2:
Create a new layer and name it “block boly”. Select “Rectangle Tool” and create a rectangle shape with #303030 color as shown below.

And apply following layer style to this shape.

Step 3:
Create a new layer but below “block body”. select “Pen Tool” and draw a shape as shown below with black color.

Now go to Filter >> Blur >> Gaussian Blur, and use a value of 12 in the radius field. Our block now look like this.

Free transform this layer using “CTRL + T” and stretch the shape to both left and right side to get desired look.
This is final image of the block.

I hope you like the tutorial. below you can download PSD file.

We Recommend

About the Author

Name: Ravi Shekhar
Designing is part of my life. I love designing and writing related tutorials.

Share this post

You can leave a response below, or trackback from your own site.

1 Comment to "Design a cool 3d block for your website"

Add Comments (+)

Deelux says:

December 23, 2010 at 2:13 am

Thnk for this nice and simple tutorial. Made a website title block with this idea:
http://www.kortenkrachtig.eu

Reply