Design a cool 3d block for your website

Posted in: Photoshop Comments Off

Today we will design a black cool looking 3d block for your website. You can use this block on 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 X 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 body”. 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 looks 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 the final image of the block.

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

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati
Both comments and pings are currently closed.

Comments are closed.