Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Create a Modern Layout in Photoshop

Create a Modern Layout in 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.

Create a Modern Layout in Photoshop image 1

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.

Create a Modern Layout in Photoshop image 2

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.

Create a Modern Layout in Photoshop image 3

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.

Create a Modern Layout in Photoshop image 4

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.

Create a Modern Layout in Photoshop image 5

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.

Create a Modern Layout in Photoshop image 6

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%.

Create a Modern Layout in Photoshop image 7

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.

Create a Modern Layout in Photoshop image 8

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.

Create a Modern Layout in Photoshop image 9

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.

Create a Modern Layout in Photoshop image 10

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.

Create a Modern Layout in Photoshop image 11

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.

Create a Modern Layout in Photoshop image 12

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.

Create a Modern Layout in Photoshop image 13

Step 15

Create another arrow in the left side of the canvas.

Create a Modern Layout in Photoshop image 14

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.

Create a Modern Layout in Photoshop image 15

Step 17

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

Create a Modern Layout in Photoshop image 16

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.

Create a Modern Layout in Photoshop image 17

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.

Create a Modern Layout in Photoshop image 18

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.

Create a Modern Layout in Photoshop image 19

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.

Create a Modern Layout in Photoshop image 20

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.

Create a Modern Layout in Photoshop image 21

Step 23

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

Create a Modern Layout in Photoshop image 22

Step 24

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

Create a Modern Layout in Photoshop image 23

Step 25

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

Create a Modern Layout in Photoshop image 24

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%.

Create a Modern Layout in Photoshop image 25

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.

Step 28

Create two more rectangles like I did. Use the same layer settings which you have used at the previous step.

Create a Modern Layout in Photoshop image 26

Step 29

Add a nice image in the header. I used a Mac OS X wallpaper.

Create a Modern Layout in Photoshop image 27

Step 30

All you have to do now is to select the Type Tool (T) and start writing the content.

Final result

Create a Modern Layout in Photoshop Tutorial: Final Result



Author's URL: amitk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Create a Modern Layout in Photoshop"

Only registered users can write comment

No comments yet...