White Layout Photoshop Tutorial

1. With this photoshop tutorial, you will learn how to create a clean looking web layout. The 1st thing to do is to create a 600×600 sized document in Photoshop, with white background. Make a selection on left hand side like the one in the image below.

2. Choose the gradient tool and open up the gradient editor at the top left of photoshop. Make the the middle pointer white and the left and right pointers a very pale grey, such as F8F8F8.

3. Drag from left to right to create the gradient on a new layer. Duplicate it and move it over to the right side. In teh gradient editor change the preset back to “foreground to background”. Set white for the foreground and a darker grey for the background, such as E4E4E4. Make a new layer and then create a reflected gradient in a rectangular selection, by dragging from the center of the selection to the bottom of it. You can see the progress in the second image below.

4. Create a new layer and set the gradient tool to linear gradient. Set the foreground to a darker grey, such as DDDCDC, and the background to white. Create a selection, like in the first image below, and then drag from from bottom to top of the selection. Next duplicate it the layer, flip it vertically by going to edit / transforms /flip vertical, and then move it below like in the 2nd image below.

5. Now we’re going to create the content area. Make a new layer and then create a large linear gradient, using white for the foreground and a darker grey for the back such as ECECEB. Drag down to create the gradient. Next create a white rounded rectangle, with 10 pixel radius corners.

6. Create some smaller rounded rectangles at the top, of the larger rounded rectangle, for the tabs.

7. Choose the custom shape tool and select “flower 3?, by opening the drop down menu at the top of Photoshop. Create a white version of the shape to the right of the tabs

8. Create a lerge versions just above and overlapping it, and then a light grey one at the bottom left of the layout.

9. And now hopefully you will have created a clean layout with this Photoshop tutorial!