Create a simple web layout using Photoshop

Hello my friends. In this tutorial I will show you how easy is to create a dark layout for your business perpose web layout in just a few steps. You can use this layout for any type of web business or personal related with small and simple modifications you can create also a portfolio layout. As usual I will create a new document with the following size: 1000 x 1100 pixels. I will set my foreground color to #333333, and then with Paint Bucket Tool I will fill the background color with this color.

I will select Rectangle Tool, and I will create a shape like in the following image. I will use this image to create the header of the layout.

For the white shape I will add the following layer styles

After you add the layer style your layout will look like this one.

I will create a similar shape under this one , and I will use the layer style as above, but I will un check the Reverse button

Here is the result

I will use one more time Rectangle Tool, and I will create another shape.

For this shape I will add some layer styles

Please click on the following image to see how it looks.

Now please download the following set of pixel patterns. Please note that this set is available only for VIP members. Load the patterns in Photoshop, and then create a new layer ( press on CTRL+SHIFT+ALT+N ) in the same time. With Rectangular Marquee Tool I will make a selection on the top of the layout.

I will choose the following pixel pattern, and I will click with my left mouse button inside the selection ( please note that you need to select also the new layer )

This is my result

With Eraser Tool I will delete the bottom part of the shape with this thin stripes. I will use a smooth round brush. This is my result.

I will use one more time Rectangle Tool, to create a shape where I will add later some buttons.

I will add some layer styles

Here is the result

In the middle of the layout I will create a new shape with Round corners. I will use Rounded Rectangle Tool, with a radius corner of 5 or 6 pixels

You can see a small line around this shape. this was made with a simple layer style

I will use Pen Tool to create a shadow under this shape. I will use a dark color to create some shapes.

please note that you need to place the layers under the round shape. Then I will select both layers in my layer palette, and I will press on CTRL+E to merge them into a single layer. I will go to Filter > Blur > Gaussian Blur, and I will use a value of 10 in the radius field. the shadow will look like in the following image.

In the middle of the round shape I will create two thin lines ( 1 pixel each ) with different colors. I will select both layers and I will merge them ( CTRL+E ). Then with Eraser Tool I will delete the extremities of the lines

In the middle of the layout I will create a new shape with Rectangle Tool.

I will add the following layer styles

This is my result

I will duplicate this layer one time, and I will select both layers in my layer palette. If you skip this step you will not be able to create the same effect as mine. After you have two layers in your layer palette, you need to merge them into a single layer. The reason I merged both layers is because I want to delete the bottom part of the shape with Eraser Tool like in the following image. Please use a big smooth brush.

I will add some text, menu buttons, and also some icons. All this icons are available for download if you are a VIP member. Please click on the following image to see better my result.

I will create another shape with Rectangle Tool, and I will place it under the text layer.

I will use the following layer styles

This is my result

My final step is to create another two thin lines ( 1 pixel each ) and I will place them like in the following screen shot

This is my final result.

I hope you like this type of layout.

If you want to download this layered PSD

-:- Download PSD -:-

1 2 3

Pages: « 1 2 3 »

Most Related Tutorials

• Create Tile in Disco Mode Using Photoshop
• ‘Bee Movie’ Text Effect Recreate Here
• Multiply with Layer Mask Photoshop Tutorial
• Vivid Glow Using Photoshop
• Create Romantic Couple Painting
• Use Photoshop to Design Aurora
• Design a Stylish Retro Game Boy Poster in Photoshop
• Design a Simple Snowman in Photoshop
• Simple Navigation Bar n Button Using Phtoshop
• Shiny n Glossy Effects Using Photoshop