Photoshop Tutorial : Create an Elegant Photography Web Layout
WP Rocket - WordPress Caching Plugin

Photoshop Tutorial : Create an Elegant Photography Web Layout

In this Photoshop tutorial, you will learn how to make a beautiful web page design PSD that is dark-themed and perfect for a web portfolio that is centered around photographs. It’s a pretty simple tutorial that aims to illustrate some great techniques to adapt into your current web design workflow.

Don’t forget to Photoshop Tutorial : Create a Simple Gaming Layout  Subscribe to Email NewsletterPhotoshop Tutorial : Create a Simple Gaming Layout  Follow us on Twitter and Photoshop Tutorial : Create a Simple Gaming Layout  Like us on Facebook – for recent updates.

Preview

You can click on the image below to see the web design in full scale.

Preview

Tutorial Resources

Step 1: Set Up the Photoshop Document

Create a new layer in Photoshop (Ctrl/Cmd + N) with dimensions of 1200×910px.

Set Up the Photoshop Document

Step 2: Incorporate the 960 Grid System

We will be basing our layout on the 16-column 960 grid system. You can download the free PSD template from their website.
Once you have finished downloading the PSD template, open the PSD in Photoshop and drag it onto our canvas. Remember to keep this grid layer as the topmost layer in the Layers Panel, as this will serve as our guide for alignments.

Incorporate the 960 Grid System

Step 3: Make the Layout’s Background

Temporarily hide our grid layer and create a new layer beneath it. In the Tools Panel, set your Foreground color to a brown-orange color (#bc7821) and Background color to a dark brown (#362a21).

Select the Gradient Tool (G) and set your option to Radial Gradient. Create a gradient at the center of the canvas.

Make the Layout's Background

The gradient looks a bit plain, so let’s add some texture to it. Go to Filter > Convert for Smart Filter. By doing this, we are able to make changes to the filters applied to this layer later on.

Now let’s add some noise to this gradient by choosing Filter > Noise > Add Noise.

Make the Layout's Background

Let’s add more glow to the top area of our background. Take out your Brush Tool (B) and set the Master Diameter option to around 700px; also set your Foreground color to white.

Create a new layer on top of our gradient and click on the canvas once to apply the brush stroke.

Make the Layout's Background

Change the Blend Mode of this layer to Overlay and adjust its Opacity to 34%.

Make the Layout's Background

Open the Rust Texture suggested in the Tutorial Resources listing (or browse the Design Instruct Freebies
section for something similar) in Photoshop. Drag the image onto our canvas and resize it using the Free Transform command (Ctrl/Cmd + T) so that it is slightly smaller than the canvas.

Using an ordinar0y rounded, feathered brush, slightly erase off the sides and the bottom area using the Eraser Tool (E). Alternatively, you can use a layer mask if you don’t want the changes to be permanent.

Make the Layout's Background

Change the rust texture’s Blend Mode to Overlay and its Opacity to 16%.

Make the Layout's Background

Next, open the Scratched Metal Texture
in Photoshop, and also drag this texture onto our canvas and slightly erase off the sides and bottom. Set this layer’s Blending Mode to Multiply and adjust its Opacity to 15%.

Make the Layout's Background

Step 4: Add the Site Name

Unhide our grid layer. Select the Horizontal Type Tool (T) and set the Font option to ITC Avant Garde CE (or your preferred font). Also set the text color to a brown color (#523117). Then type “JohnDoe Photography” (or any site name you would like) at the center of the layout.

Add the Site Name

Duplicate the text layer and then set the duplicated text layer’s color to white (#ffffff), change its Blend Mode to Overlay and adjust its Opacity to 32%. Move it 1px down using the Move Tool (V) in combination with your Down Arrow key; this will create some sort of
etched effect.

Add the Site Name

Step 5: Create the Navigation Menu

Create a new layer. Use the Horizontal Type Tool (T) (options settings shown below) to type out your navigation text underneath your site name. Make sure it’s centered on the canvas.

Create the Navigation Menu

Create the Navigation Menu

Let us now design the hover state of each item on the navigation. Select the Rounded Rectangle Tool (U). Set the tool’s option to Shape Layers and Radius to 30px. Draw a rounded rectangle on a new layer underneath the navigation link item (“Home”).

Create the Navigation Menu

Next, apply a Color Overlay and Inner Shadow to the rounded rectangle’s layer (double-click on its thumbnail in the Layers Panel to
access the Layer Style dialog window).

Color Overlay

Set the color to a yellow (#f9a81f).

Color Overlay

Inner Shadow

Set the color of the inner shadow to black (#000000).

Color Overlay

Also, set the rounded rectangle layer’s Opacity to about 30% to show our background through it slightly.

Color Overlay

Let’s make the rounded rectangle look more etched. Place a selection around the rounded rectangle by pressing Ctrl/Cmd and then clicking on the rounded rectangle from the Layers Panel.

On a new layer, go to Edit > Stroke.

Color Overlay

Change the layer’s Blend Mode to Overlay and adjust its Opacity to 18%. Erase off the left and top stroke using the Eraser Tool (E) set with a small, feathered tip.

Color Overlay

Step 6: Add the Slideshow Section

Turn our grid layer back on. Using the Rectangular Marquee Tool (M), draw a rectangular selection below our navigation and then fill (Shift + F5) the selection with black (#000000). Make sure the rectangle is 14 grid columns wide and centered on our layout.

Add the Slideshow Section

Change this rectangle layer’s Blend Mode to Soft Light to let some of the background show through it.

Add the Slideshow Section

Time to place an image inside our slideshow. Open a photo (such as the Sunset stock photo
mentioned in the Tutorial Resources listing) in Photoshop and drag it onto our layout. Scale it down appropriately with Free Transform.

Hide the photo’s layer temporarily and then draw a rectangular selection inside the slideshow area with the Rectangular Marquee Tool (M).

Add the Slideshow Section

Let us mask the photo by hitting on Add vector mask button from the Layers Panel, which should create a mask with your selected area. You can now unhide the photo layer again. You should notice that, if done correctly, any parts of the image that lays outside of the masked area will be hidden.

Add the Slideshow Section

Step 7: Make the Slideshow Controls

Create a new layer group underneath the slideshow layers and name it “arrow” (for organization). Create a new layer inside this newly-created layer group.

Select the Ellipse Tool (U) and draw a circle on the left side of the slideshow.

Next, add an Outer Glow and Gradient Overlay on the circle.

Outer Glow

Set the outer glow’s color to black (#000000).

Make the Slideshow Controls

Gradient Overlay

Have the gradient go from a dark brown (#271303) to a slightly less dark brown (#3a2102).

Make the Slideshow Controls

This is what our left slideshow control looks like now.

Make the Slideshow Controls

We will need to remove the unnecessary shadow of the circle. To do this, we need to flatten this shape by going to Layer > Rasterize > Shape. After it’s flattened, select the area underneath the slideshow using a Rectangular Marquee Tool (M) and then hit Delete to remove the unwanted area below the rectangular selection.

Make the Slideshow Controls

Let us now create the arrows for our buttons. On a new layer, select the Rounded Rectangle Tool (U), and then set its options so that it’s set up for Shape Layers and Radius at 30px. Having a high value for the Radius option makes each end look circular.

Draw a diagonal shape that represents the left part of the arrow. Change this shape’s color to a dark muted orange (#b56d1b) by giving it a Color Overlay layer style.

Make the Slideshow Controls

To create the bottom side of the arrow, duplicate this shape and go to on Edit > Transform Path > Flip Horizontal.

Select the two layers that make up the arrow in the Layers Panel and then go to Edit > Transform > Rotate; rotate the arrow -90o so that it is pointing to the left.

Merge these two layers by selecting them in the Layers Panel and then pressing Ctrl/Cmd + E. Duplicate the merged layer.

Give the duplicated layer a black (#000000) Color Overlay layer style to change its color, and also move it 1px to the left using the Move Tool (V); this will create an etched look.

We will now be creating the right arrow. Select our “arrow” layer group in the Layers Panel, duplicate the group, and then flip its
orientation by going to Edit > Transform > Flip Horizontal. Move the duplicated slideshow control to the right side.

We should now have something like this:

Step 8: Create the Small Photo Thumbnails

Turn the grid layer back on. Using the Rectangular Marquee Tool (M), draw a selection about 4 and half columns wide below the slideshow. Fill it with the color black (#000000). Change the Blend Mode to Soft Light.

Create the Small Photo Thumbnails

Open a photo (such as the Sunflower stock photo), place it on our canvas, and then resize it to about 80% of its original size.

Hide the sunflower’s layer temporarily and, using the Rectangular Marquee Tool (M), draw a smaller selection inside our first rectangle. Unhide the Sunflower photo and click the Add layer mask icon in the Layers Panel. This will make it so that only the selected area of the sunflower shows.

Create the Small Photo Thumbnails

Let us now create the label for our thumbnail. Using the Rectangular Marquee Tool (M), create a selection at the bottom of the photo and fill it with our dark brown color (#261103). Change this layer’s Opacity to 85% to let parts of the photo behind it show.

Using the Horizontal Type Tool (T), add a label to it (such as “NATURE”). I used the Helvetica font with a yellow text color (#ffbf47).

Create the Small Photo Thumbnails

Add some text below our thumbnail; this will serve as some sort of description for this particular thumbnail.

Create the Small Photo Thumbnails

Repeat the same process to add 2 more thumbnail photos (you can use the Baby boy and Bokeh stock images suggested in the Tutorial Resources listing, or use some of your own photos).

Create the Small Photo Thumbnails

Step 9: Make the Footer

As the final step in the process, we will create the footer area. Create a new layer. Select the Pencil Tool (B) and set its color to a dark brown color (#2c1303). Draw a 14-column wide division below the three thumbnails that will serve as our divider between the main content and the footer area.

Tip: Holding the Shift key ensures we create a straight line.

Create the Small Photo Thumbnails

Duplicate the line layer you just created and change its color to white (#ffffff) using a Color Overlay layer style. Move the duplicate 1px down. Change its Blend Mode to Overlay and reduce its Opacity to 18% to create some sort of etched effect.

Create the Small Photo Thumbnails

Finally, use the Horizontal Type Tool (T) to add your footer text (you can include, for example, some copyright information).

Tutorial Summary

We have successfully created an elegant photography site design mockup! We used various techniques and methods that are common in
developing site layouts, including the use of selection tools, shape tools, applying grunge textures and filters, tweaking blending modes of layers, and so on. I hope you found this tutorial useful and feel free to leave any questions in the comments.

Download Source Files

elegant_photography_layout (ZIP, 9.31 MB)

Don’t forget to Photoshop Tutorial : Create a Simple Gaming Layout  Subscribe to Email NewsletterPhotoshop Tutorial : Create a Simple Gaming Layout  Follow us on Twitter and Photoshop Tutorial : Create a Simple Gaming Layout  Like us on Facebook – for recent updates.

Written by
AsHok Jain
Join the discussion

4 comments
  • You stat converting the HTML and feel free to ask if you face difficulty while doing so. We are going to post the article for HTML tutorial very soon.. Do subscribe our RSS for the new posts.

  • Excellent resource. It would be even better if the follow-up tutorial gave the steps to get this layout into HTML/CSS.

  • I’m on CS3 and can’t find Radial Gradient. Actually I need to simplify these techniques to go through the motions first. I’d like to start with a solid color background and am unable. I’m stuck.

  • I’m on CS3 and can’t find Radial Gradient. Actually I need to simplify these techniques to go through the motions first. I’d like to start with a solid color background and am unable. I’m stuck.

Let’s get social

Web design blog for professionals with topics focusing on useful design techniques, design best practices and design inspiration. Subscribe for updates!

15585

JOIN OUR GROWING LIST OF SUBSCRIBERS!

Following our blog is a great way to make sure that you are up to date on the latest and greatest Freebies and WordPress news.

15856