Featured Posts

Create Outstanding Light Effects in Photoshop In this tutorial I want to show you how to create outstanding light effects in photoshop. In this interesting light effects tutorial I like to give you good guidance on how to deal with an illustration...

Read more

Create an Amazing Rain Effect using Photoshop In Today’s tutorial I would like to present how to create an amazing rain effect using photoshop. In this fantastic tutorial we use noise, motion blur, custom brushes, blending modes to create a...

Read more

Create a Fantastic Abstract Design in Photoshop In this tutorial I would like to present how to create a fantastic abstract design in photoshop. We use very simple and amazing method for beginners to create easily abstract design that looks so awesome....

Read more

Create an Amazing Poster using Photoshop In today’s tutorial I am presenting how to create an amazing poster using photoshop. In this awesome tutorial you will learn how to combine a good set of techniques to create a crisp piece of art...

Read more

Fantastic Glossy Lighting Effects in Photoshop Today I am presenting how to create fantastic glossy lighting effects in photoshop. In this fantastic tutorial we are going to put together a sunset image mixing some vector shapes and dusky lighting...

Read more

clipping path

Follow us

on Twitter

ClippingDesign.com

Clipping Design

is an Outsourcing

Clipping Path ,

Image Masking &

Graphics Design

Service Provider.

Image editing

services at very

low prices. Visit

our website: ClippingDesign.com

Create A Transparent Web Layout Using Photoshop

Category : Photoshop Tutorials, Web Design

Create A Transparent Web Layout Using Photoshop

Today i would like to share how to create a transparent web layout using photoshaop. In this tutorial we will show you how easy to create enormous web layouts with a stylish transparent buttons and simple transform background into a fantastic effect. We think it may help you to create your own blog more stylish. So, why not have a try….

At first create a new document with the following size: 960 x 900 pixels. I will set my Foreground color to #141414, and then with Paint Bucket Tool i will press one time over my document.

I will grab Brush Tool, and with a Smooth Round brush i will create 3 points over my layout with the following colors:

#a864a8

#ed1c24

#662d91

Create A Transparent Web Layout Using Photoshop

Please note the brush size should be 600 pixels.

Create A Transparent Web Layout Using Photoshop

I will go to Filter > Noise > Add noise.

Create A Transparent Web Layout Using Photoshop

I will use the following settings.

Create A Transparent Web Layout Using Photoshop

Your layout will look like this one.

Create A Transparent Web Layout Using Photoshop

I will go to Filter > Blur > Motion Blur.

Create A Transparent Web Layout Using Photoshop

In the Motion blur window i will set the angle to 90 degrees, and distance to 998.

Create A Transparent Web Layout Using Photoshop

This is a very easy way to create a nice background for your website. This is my background. In the following image i will show you only a part of my entire screen.

Create A Transparent Web Layout Using Photoshop

I will create a new layer (press CTRL+SHIFT+ALT+N),

Create A Transparent Web Layout Using Photoshop

I will select one more time Brush Tool, and then i will set my foreground color to white.

Create A Transparent Web Layout Using Photoshop

I will use one more time a big smooth brush.

Create A Transparent Web Layout Using Photoshop

Then with this brush i will create another point over my layout.

Create A Transparent Web Layout Using Photoshop

Then i will change the blending mode for this layer to Overlay.

Create A Transparent Web Layout Using Photoshop

Now i will start to create another shape. I will create a navigation bar. For this i will need the Rectangle Tool

With this tool i will create a simple shape at the top.

Create A Transparent Web Layout Using Photoshop

I will select Rounded Rectangle Tool, and i will set the radius to 6 pixels.

Create A Transparent Web Layout Using Photoshop

I will turn on the Grid, because i want to align better my layout in the next steps.

Create A Transparent Web Layout Using Photoshop

I hope you still have the Rounded Rectangle Tool selected. Please create 3 shapes like in the following image.

Create A Transparent Web Layout Using Photoshop

Now i will add for all layers some layer styles.

Create A Transparent Web Layout Using Photoshop

Create A Transparent Web Layout Using Photoshop

Create A Transparent Web Layout Using Photoshop

Click on the following image to see my result better.

Create A Transparent Web Layout Using Photoshop

I will create another shape with the same tool: Rounded Rectangle Tool.

Create A Transparent Web Layout Using Photoshop

For all these shapes i will add the following layer styles.

Create A Transparent Web Layout Using Photoshop

Create A Transparent Web Layout Using Photoshop

Create A Transparent Web Layout Using Photoshop

This is my result

Create A Transparent Web Layout Using Photoshop

Now it is time to add some text. As usual with Horizontal Type Tool i will write some dummy text.

Create A Transparent Web Layout Using Photoshop

Then i will add a image on top of the layout. I will use the 3D Blueprint image. You can see the tutorial here.

Create A Transparent Web Layout Using Photoshop

In the same area i will add two arrows with Custom Shape Tool

Create A Transparent Web Layout Using Photoshop

Final Result:

Create A Transparent Web Layout Using Photoshop

Hope you can learn something new from this tutorial.

I feel really glad if you give me feedback through comment below. Soon i am going to show more interesting & innovative tutorials so please keep visit our blog. That’s for now.

Have fun!

For clipping path service, image masking service or design support please contact ClippingDesign.com.

Thank you…  :)

Reference: grafpedia.com

Share

Comments (3)

Yes, I did learn something new. Thanks for the tutorial. As I also design email campaigns I am sure to use this in some of my work.

Its Really good! thank you so much for sharing with us!

Thanx for this tutorial. It is very good and easy to understand. A non Photoshoper can also used it…

Post a comment

*