Design Studio Web Layout in Photoshop

Graphic Design Studio Web Layoutes

In this tutorial i will show you how easy is to create a layout with transparent buttons. This type of layout was used lately a lot because it is the latest trend in website design. For start i will show you how to create a colorful background then i will transform this background into a nice layout.

Preview full screen

Let’s start our tutorial by creating a new document with the following size : 960 x 900 pixels.I will set my Foreground color to #141414, 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

Please note the brush size should be 600 pixels

I will go to Filter > Noise > Add noise

I will use the following settings

Your layout will look like this one

I will go to Filter > Blur > Motion Blur

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

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

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

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

I will use one more time a big smooth brush

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

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

Now i will start to create another shapes. I will create a navigation bar. For this i will need theRectangle Tool
With this tool i will create a simple shape at the top

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

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

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

Now i will add for all layers some layer styles

Click on the following image to see my result better

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

For all these shapes i will add the following layer styles

This is my result

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

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

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

This is my final layout. I hope you like it. If you want to see how it is made please apply for a VIP account and download this layout to see better how it is made