Learn How To Create A Web Gallery Style Layout

What We’ll Be Creating

Getting Started

Create a new (Ctrl + N) document 1200 x 955 pixels with a white (#ffffff) colored background. Select the “Gradient Tool” (G) then set your foreground color to #e5e5e5 and background color to #ffffff, while the gradient tool is selected select a linear gradient from the menu at the top.

Drag the linear gradient from the top of the canvas to about 100 pixels down.

You should have something like this.

Were now going to create our custom diagonal pattern, create a new (Ctrl + N) document with the dimensions 25px by 25px. Select the “Zoom Tool” (Z) and zoom in on the canvas 3200%, select the “Pencil Tool” (B) with a black (#000000) brush size. Now replicate the image below.

Once you’ve finished creating the pattern go to “Edit > Define Pattern” then save the pattern. Close your canvas and head back over to your original canvas, create a new layer above your background layer, select the “Fill Tool” (G) then in the options box at the top change the fill type from foreground to pattern.

On your new layer fill (G) your canvas with the pattern. Once filled set the patterns layer blend mode to “Divide” and opacity to “30%”. Now add a layer mask to the pattern later and drag a linear gradient from about 500 pixels down from the top, upwards.

You should have something like this.

Creating The Layout

Select the “Rounded Rectangle Tool” (U), then drag out a rounded rectangle about 950 pixels wide and about 840 pixels high.

Once you’ve created the rounded rectangle load a selection around it.

Once the selection has been loaded drag a linear gradient from the top of the rectangle to about 300 px down. Use the colors #212121 and #171717 as your foreground and background.

Were now going to cut away some of our rectangle using the “Pen Tool” (P). Go a head a select the “Pen Tool” (P) then on the right side of the content box draw a path like the image below.

Once you’ve made the path load a selection around the path.

Once the selection has been loaded select the rectangle layer and hit the delete key. You can now delete your paths layer, you should have something like this.

Creating The Header

Above your rectangle on the left side add your desired logo, website title and slogan. For my logo i used a simple shape from photoshops “Custom Shapes”.

Select the “Rounded Rectangle Tool” (U) then in the part of the layout where we cut it away draw three rounded rectangles, two the same size and one smaller one.

Once you’ve created the rectangles add the following layers to all three.

You should have something like this.

Now turn the rectangles into a login form by adding the labels inside each of the rectangles.

Were now going to create a simple navigation, select the “Text Tool” (T) and type out your navigation.

Behind one of your text links create a rounded rectangle using the “Rounded Rectangle Tool” (U), this will be our hover state of the navigation. Once you’ve created the rectangle add the following layer styles.

You should have something like this.

Creating The Featured Area

With the “Rounded Rectangle Tool” (U) create yet another rectangle underneath your navigation.

Once you’ve created the rectangle add the following layer styles.

You should have something like this.

Inside the rectangle you just created insert an example image for your featured item. Now Select the “Type Tool” (T) and add an example title and paragraph for your featured image.

Were now going to spice up the featured title a bit so, select your example title layer and add the following layer styles.

You should have something like this.

Finish off the dummy content by adding a chrome read more button underneath the paragraph text. Select the “Rounded Rectangle Tool” (U) then drag out a small button sized rectangle.

Once you’ve created the rectangle add the following layer styles.

Once you’ve labelled your button you should have something like this.

Next, were going to imitate that our featured area is a jQuery slider. Select the “Ellipse Tool” (U) and create 5 ellipse’s next to each other underneath the paragraph text.

Now add the following layer styles to four of the circles leaving out the middle one.

Select the middle circle layer and add the following layer styles.

You should have something like this.

Creating The Gallery

Select the “Rectangular Marquee Tool” (M) then create two 1 pixel lines on top of each other. Fill (G) one line in black and one line in white. The lines should be underneath your featured area and span the width of the content area.

Once you’ve created the lines set the layer blend mode to “Overlay”. You should have something like this.

Add a layer mask to your lines layer then drag a “Reflected Gradient” from the middle of the line outwards towards the end of the canvas. For this to work correctly make sure the color white #ffffff is set as your foreground color.

Duplicate your lines layer then shift it downwards until the gap in between each line is about 200px in height.

Now, set your foreground color to #121212 then select the “Rectangular Marquee Tool” (M). With the “Rectangular Marquee Tool” (G) selected make a selection directly underneath one of the lines.

Once you’ve made the selection, select the “Gradient Tool” (G) with a linear gradient. Change the gradient to “Foreground to Transparent” then drag the gradient from the line.

Now add a layer mask to the gradient then drag a reflected gradient from the middle outwards just like we did with our lines. Repeat these steps for both sets if lines.

With the foundations of our gallery complete, simply add a title then add the same layer styles to it as we did our featured title.

Finally fill your gallery with some special thumbnail images for effect. On the right hand size of the gallyer add two little buttons with arrows in them to imitate a jquery scroller. The little buttons are duplicated from the jquery slider from the featured area (the middle circle).

Creating The Artist Section

Start off with the title for the section using the same layer styles as we did for the last one.

For the artist section add your thumbnails of your desired artist’s then add some text around the images. Underneath the thumbnails add the same chrome button as we used in the featured area, with the text “Read Bio”.

Creating The Footer

At the beginning of this tutorial i explained how we cut out our login box, now were going to do the same for our footer. Select the “Pen Tool” (P) then begin to cut away at the content area like the image below.

Once the path has been created righ-click with the “Pen Tool” (P) and select “Make Selection”, once the selection has been made hit the delete key. You should have something like this.

Now the footer has been cut add your footer information and maybe some spiffy social icons. In my footer I’ve also add some shading for effect using the same method as we did when we created the gallery.

Conclusion

That’s it all done you’ve now completed the tutorial. If you enjoyed this tutorial i would love to hear your comments about it.