Photography Layout

Create a unique layout that centers on photography. Use simple and basic shapes to develop an eye pleasing layout that will be great for any website.

Before beginning, let's sketch out what the layout will look like. This is a rather simple layout that we will be to making. Below is a rough sketch of what the layout will probably consist of.



With a good visual perception of the layout, let's begin by creating a new template about 770x925 and fill it with black.



Select the rounded rectangle tool and set the radius to 10. To create the header, set the size to 750x200 and fill it with the color #1f1f1f.



You can accurately adjust the size of the rounded rectangle tool by going to its options list and inputting the desired length and width.



To create the navigation bar, set the size to 750x40 and fill it with the same color as the header. Also, the spacing between the header and the navigation bar is 10 pixels.



Now onto the display boxes, for the left box set the size to 250x100 and the second box to the size to 490x100. Fill both boxes with the color #1f1f1f. Again, the spacing between the navigation bar and display boxes is 10 pixels.



Do the same thing as above for the content box, but have the size set to 750x400.



For the footer do the same, but have the size set to 750x100.



As it stands, the layout looks rather dull, but we can fix that. Create a new layer and highlight the layer below by holding "ctrl" and clicking on the thumbnail. Now go to the menu on top, then click select -> modify -> contract and set the radius to 10. Fill this layer with white and set the blending option to overlay with opacity of 35%.



Now it's time to make the header image. Create a new template about 750x200. I'm using this stock image for the header since the layout is center around a photography theme. Drag, drop, and resize the stock image to the newly created template.



Duplicate (ctrl + j) the image twice and set the middle layer to overlay with opacity of 50%. Go to the top menu and select filter -> blur -> gaussian blur and set the radius to 3.0.



Now select the top layer and go to filter -> blur -> motion blur and set the angle to -45 and a distance to 150. Then set the blending option to soft light.



Now create a new layer and switch on over to your channels tab. Holding the ctrl button, click on a one of the RGB thumbnails to highlight. Make sure that the RGB thumbnail is selected after you highlighted your image and switch back to the layers tab. Now fill your new layer with white and set the change the opacity to around 30%-50%.



Make a new layer and select a grudge brush set. I went with a set called C4D, which you can download by clicking here. Have the foreground color set to black and start brushing away.



And set the blending option to overlay.



Go to menu -> adjustments -> brightness/contrast and apply the following settings.



Go to menu -> adjustments -> color balance and apply the following settings.



Make a new layer and fill it with white. Set the blending option set to overlay with opacity of 35%.



Copy and paste the header to the layout and crop it so that the edges are round. You can use the rounded rectangle tool for this.



For the footer, it is the same process, but I used the bottom half of the stock image.



Now let’s add some links to the navigation bar. Throughout the layout, I used Verdana as the font. The font size is 14 and color is # efefef. Go to the blending options and apply these settings.



For the display boxes, the font size is 11, set to bold, and color is # 5b7857.



And we're basically done. After coding it and adding some content, this is what the layout will probably look like.