Featured Posts

Cute Adorable Newborn Baby Photography Babies are the gift of god. Especially Newborn baby appears with full of emotions and surprise for their parents. Every parent knows the value of newborn photography because they want to memories their...

Read more

Impressive Spring Photography that Must Energize Your... Every photographer are the host of mother nature. They don't miss any scope to focus the single beauty of all seasons. Spring is one of the favorite season to photographers because flowers are blooming,...

Read more

Most Famous Fine Art Photographers and Their Immortal... Today we are presenting the second and final part of Most Famous Fine Art Photographers and Their Immortal Art Photography post. In this post we are introducing world's most famous fine art photographers...

Read more

Most Famous Fine Art Photographers and Their Immortal... Fine art Photography also known also as “artistic photography” refers the expression of artist's perceptions and emotions and to share them with others though the art of photography. It is the best...

Read more

Most Famous Portrait Photographers and Their Great... Everyone can take photos but only some are considered as famous photographers. Take a creative & outstanding portrait photographs is not an easy task. A famous portrait photographer can combine...

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

[ad#AdBrite]

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

[ad#AdBrite]

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

[ad#AdBrite]

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

[ad#AdBrite]

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

[ad#AdBrite]

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

*