Home Photoshop Web Layout Create a Modern Layout in Photoshop

Create a Modern Layout in Photoshop

Added: May 07, 2010 Level: Experienced Software: Photoshop

Step 1

Open a new document with the sizes 960px x 1200px. Then select the Paint Bucket Tool (G) and fill the background with the color #5b6974.

Step 2

Download this image and open it in Photoshop. Then go to Filter > Blur > Radial Blur and use the settings from the next image.

Step 3

Use the Move Tool (V) to move this image in the document which you have opened at the beginning of this tutorial. Then go to Edit > Free Transform, hold down the Shift key and scale this layer down.

Step 4

Use the Pen Tool (P) to draw a shape like I did. Fill it with the color #215261. Then go to Layer > Layer Style > Drop Shadow. Set the opacity to 40% and leave the rest of the settings as they are.

Step 5

Move the water layer above the shape. Right-click on the water layer and select Create Clipping Mask. Now the water layer is using the shape as a mask.

Step 6

Make sure that you have the water layer selected, then go to Edit > Transform > Warp. Take a look at the next image for reference.

Step 7

Go to Layer > New Adjustment Layer > Brightness/Contrast. Check the Use Previous Layer to Create Clipping Mask option and click OK. Use the settings from the next image.

Step 8

Create a new layer above all the other ones, right-click on it and select Create Clipping Mask. Use a white soft brush with the diameter of 50px to draw a white line at the top of the shape. Then set the blend mode for this layer to Overlay and the opacity to 50%.

Step 9

Repeat the previous steps to create the other shapes. The technique is the same.

Note: After you create the first two shapes, duplicate them, go to Edit > Transform > Flip Horizontal and use the Move Tool (V) to move the last two shapes in the right side of the canvas.

Step 10

Now we are going to create the arrows. Select the Pen Tool (P) and create an arrow in a new layer using the color #0d2235. Double-click on the arrow layer to open the Layer Style window, and use the settings from the next image for Inner Shadow and Gradient Overlay.

Step 11

Create a new layer and use the Pen Tool (P) to create a white shape above the arrow. Then right-click on this layer and select Create Clipping Mask. Set the opacity to 35% and the blend mode to Overlay.

Step 12

Now we will create a button above the arrow. Use the Elliptical Marquee Tool (M) to create an elliptical selection. Create a new layer, fill the selection with #0d3747 and hit Ctrl+D to deselect. Double-click on the circle layer to open the Layer Style window and use the settings from the following image.

Step 13

Create a new layer and use the Elliptical Marquee Tool (M) to create a white little circle. We will put this circle on the button. Change the opacity of this layer to 20% and the blend mode to Overlay.

Step 14

Create a new layer and make a new white circle, but this time a little bit bigger. Set the blend mode for this layer to Overlay. Then select the Eraser Tool (E), select a soft brush with the diameter of 40px and erase the circle's top part.

Step 15

Create another arrow in the left side of the canvas.

Step 16

Create a new layer, select the Elliptical Marquee Tool (M) and create an elliptical selection. Fill the selection with white using the Paint Bucket Tool (G). Then go to Select > Modify > Contract, contract the selection with 20px and hit the Delete key.

Step 17

Double-click on the circle layer to open the Layer Style window and use the settings from the next image.

Step 18

Duplicate the circle layer (Ctrl+J), right-click on the new layer and select Clear Layer Style. We need to apply different settings this time. Now double-click on this layer and use the settings from the next image for Inner Shadow.

Step 19

Create a new layer and use the Elliptical Marquee Tool (M) to create a new selection like I did. Take a look at the next image for reference. Fill the selection with white and move this layer beneath the other two ones which create the metal circle. Then double-click on this layer to open the Layer Style window and use the settings from the next image.

Step 20

Now we are going to create some metal rings. Use the Rounded Rectangle Tool (U) with the Radius set to 5px to create a small and black rounded rectangle. Then double-click on the rectangle's layer and use the settings from the next image for Gradient Overlay and Stroke.

Step 21

Duplicate the rounded rectangle as many times as you want. Use the Move Tool (V) to put the rectangles where you want them.

Step 22

Now we are going to create the menu. Create a new layer, use the Pen Tool (P) to create a shape like I did and fill it with black.

Step 23

Double-click on the menu layer to open the Layer Style window and use the settings from the following image.

Step 24

Duplicate the metal rings which you created before and move them at the bottom of the menu.

Step 25

Use the Rectangular Marquee Tool (M) to create a selection like I did and fill it with white.

Step 26

Download this texture pack and put one of these textures above the white rectangle. Use Free Transform (Ctrl+T) to scale it. Then go to Image > Adjustments > Desaturate and set the opacity for this layer to 40%.

Step 27

Use the Rectangle Tool (U) to create a rectangle like I did. Use the color #76459a. Then double click on the rectangle's layer to open the Layer Style window and use the settings from the next image.