Create an Elegant Photography Web Layout in Photoshop

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 1200x910px.

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 ordinary 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

Tags: browser-compliance, trends

  • Very nice work!!!!

  • I love this tutorial! So easy and simply explained! 🙂 Great choice for Photography layout! 🙂 I`m excited!

    Thanks for this great article 🙂

    Dainis

  • This was a very good tutorial, and useful as well. I have seen some similar tuts before, but the end result is way better than most. I would be very interested in seeing another tutorial picking things up where this one gets left off. What I mean is maybe slicing and coding or bringing the images together to make a live site, I think that would be really great as well! Nice work =)

  • Good job. I like the carousel.

  • Good job. I like the carousel.

  • Eric, that’s a possibility I brought up with Jan (me writing a slice ‘n dice tutorial follow-up of her template). I’ll see what I can do.

  • Thanks for your nice words on Jan’s tutorial Dainis, hope all is well over at 1stwebdesigner!

  • Excellent tutorial here!! Very detailed and beautiful design work too!

  • Paul Amoah

    What a wonderful tut. I like the background and i will lean how to do it. Thank you for this.

  • Hi Paul, please share your results with us! We’d love to see it!

  • That would be awesome! I have seen some tutorials on how to do the design and layout part, but most usually stop there. I think by doing a continuation of this it would really go beyond!

  • Hello Jacob!

    It is very nice if you would code the other parts of the site (about, portfolio, contact, etc.)

    Keep up the good work.

    More thanks!

  • Thanks for the great feedback everyone! 🙂

  • Tony F.

    Hi, great tutorial. I’m new to Photoshop and I too would like to see a tutorial of slicing it up and converting to html/css, hopefully real soon. Great job again. Well done.

  • michael echague

    i love the author lol,
    shes pretty, lovely and creative,

    i love your tutorial maam,

  • Hehe, thanks, Michael 🙂

  • Conrad

    Jan Cavan & Jacob Gube,

    You guys rock! And Jan, I always look forward to your tutorials. Jacob, thank you for opening these sites for us to learn!

    You guys make the world go round!

  • Conrad

    Oh, I also forgot to ask…

    Will there be a part 2 of this tutorial? (for slicing…)

  • Thanks for your kind comments Conrad. As for a part 2 (your comment below), we don’t have a definite plan for it, however, it’s not out of the question. We sort of react by reader requests; if people want it enough, we’ll see what we can do.

  • nice tutorial as always! are you a filipino?

  • you did not mention your nationality in your website be proud if you are a Filipino because we are very proud of you. again really nice design!

  • Chris

    I frequently come across tutorials like these but Jan’s tutorials always stand out!!

    Keep up the good work!

  • Valerie

    I agree completely! I’ve enjoyed the tut but for the most part I know what I’m doing with photoshop. However, I am completely clueless with translating that information to a website…. which is what I thought i was working on… guess I should have read ahead to the end.

  • Ken

    Thank you for sharing!

  • nice desigm!

    i have a question…

    why you do you use 300 pixel for web design? i know that 72 pixel is enough.

    thanks!

  • When you save for the web in Photoshop, the original resolution won’t matter. But you are correct, 72px/inch is enough.

  • Jamie Craven

    This is by far the best photoshop tutorial for designing a website that I have found on the internet, because its a step by step process that anyone from novice to expert can follow

    I only hope there is a follow up tutorial for slicing your design..

    I myself have been trying to create a basic website during this summer for when i go back to university but didn’t know where or how exactly to start, this has given me a decent amount of useful information to enable me to look at how I should be doing things and has inspired me to push myself harder to create my own online portfolio for my graphic design work.

    many thanks.

  • Thank you Jamie. We’re very glad you like the site.

    We’ll definitely have more follow up tutorials on slicing designs. In the meantime, please head over to our other website, http://www.SixRevisions.com for more great quality content on web development and web design.

  • arnold

    Thanks for the tuts , I found new techniques here , really cool effect.
    guys about the slicing , I think sixrevisions have a tutorial about converting a PSD to XHTML , you can grasp idea there and create one.

  • Excellent tutorial, love the fact that you have explained everything in minute detail and it’s very well written.

    Like many of the other readers I would have liked it a follow up ‘converting the PSD to HTML’ tutorial.

    Thanks again.

  • Nice . . . and well explained, this will sure help out with inspiration for us in the future 🙂

  • ramit walia

    Hi, Ma’am. I am a sophomore student taking up BS IT… I was just curious that if we could make up any sites using a photoshop ? I mean there were no codes at all ? 🙂 Kindly explain me on that and what is 960 Grid System ? Thanks 😀

  • Branden Parker

    the rust picture isnt there

  • Roger Cadillo

    Hi This is an excellent tutorial so far, I am getting stuck at the Vector mask step . I am using CS4 can you tell me if i am missing something? I made my secection iside the black slidehow are then I tried adding cector mask and I had no change. I am not too knowledgeable in masks and can you tell me what menu i am looking under.

    Thanks a lot

    (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.)

  • Matt Healy

    Once you have the selection based on the thumbnail shadow box (I just CTRL + clicked the layer thumbnail) I went to the Select menu and contracted the selection by 3 pixels, depending on how thick you want your border to be. Then I just used the layer mask button on the Layers Panel BUT… Just make sure the *photo* layer is active again when you do this or it won’t work…

  • Sidney

    Hey,

    Great tutorial! I was wondering what you would do with the background when converting to HTML. Wouldn’t it be kind of hard to have a page that scrolls (more content) in combination with the background noise?

  • Thanks for the great feedback everyone! 🙂

  • this is great article. thanks

  • shilpa

    Hallo Friend,

    Thanks for such a great tutorial.
    Here is one more request for its continuation on slicing & hml css aspects.

    Thanks
    SR

  • shad

    yes, I found it extremely useful, it contains all the steps with clear guidance even though i am a newbie but by going through this tutorial I created a layout_________feeling great and got an idea about photoshop tools__ I am thinking how to convert it into as webpage__ I have no__ hope you will give a tutorial on that too..
    thanks a lot

  • that is good way for training .

    Thanks !

  • Yi-Yuan, Chia

    Awsome !
    can you tell me how to html the background image?
    except one big image way.
    thanks!

  • camara claxton

    NICE ; good fine work

  • Muchtar Ramadhan

    Nice tutorial, I permite for discussing this tutorial in my class.
    Thanks!

  • Mofo Me

    This is too much confusing from the beginning. For beginner doing drag and drop grid is too hard to do. Sorry but this tutorial is crap.

  • Jay

    Very, very, very nice and useful tutorial. I’m usually the first to let a designer know if his tut is crap. Well done.

  • Wow Thanks. ..
    i want to try it. . .
    BTw you Know how to make web design Responsive…

  • Here’s a good primer that I’d personally recommend to get you started with responsive web design: Beginner’s Guide to Responsive Web Design (on the Treehouse Blog).

  • Thank’s admin 🙂

  • Designer Due

    Wow, Thank you very much, this tutorial alone has helped me to complete a mock-up that I had to do the same day.

  • Abhishek

    I have one confusion. How will we add coding to “Home”, “Portfolio”, “Logout”, etc, texts after the designing is completed? As far as I’m concerned, these texts are now part of the images, we can’t select them using any development environment like ASP.NET, PHP etc.

  • Sherry Zeng

    Does this comp have HTML code as well, cause I want to do a real web design like this one.

  • Umesh

    great artical… its helps lot to the begainer..

    Thanks for sharing..

  • babli

    Hello sir can you please explain me you have design this slider in photoshop but how it will work if you make this website live.Please explain.Thanks

  • samiron

    What a nice & easy technique you used. I created one for me. 🙂

  • Dina alaa

    Thank you so much , it is really so elegant and easy … I got to learn a good info. also …THANKS FOR SHARING 🙂

  • Madhu Sudhana Pandian

    Thank you so much…… Very Useful.

  • mustafa

    Thanks very goodt. After finish saved som psd. How can I saved som html or how can I change from psd to html ? I can but teks so some picture cant change tekst boks. Templates size how can I change to small ?

  • Tevin

    is it possible to use this kind of layout with wordpress?

  • Sergio

    A very nice tutorial. Explained very concise and easy to follow. Great job!!! Keep up the work.