Learn How To Create A Web Gallery Style Layout

Good evening everybody welcome to another tutorial by photoshop plus. In this tutorial I’ll be showing you how to create a gallery/showcase style web layout. Lets get started.

In Interface

What We’ll Be Creating

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

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

Quick Tip:

Holding down the shift key on keyboard whilst dragging will ensure the gradient is 100% vertical.

You should have something like this.

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

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.

Quick Tip:

Holding down the shift key on keyboard whilst dragging will ensure the gradient is 100% vertical.

You should have something like this.

Inspiration Styled Web Layout

Creating The Layout

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

Inspiration Styled Web Layout

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

Quick Tip:

To load a selection around an object click the little thumbnail in the layers window on your desired layer whilst holding down the CTRL key on the keyboard. Another way is to go to “Select > Load Selection”.

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.

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

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

Quick Tip:

To load a selection around an object click the little thumbnail in the layers window on your desired layer whilst holding down the CTRL key on the keyboard. Another way is to go to “Select > Load Selection”.

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.

Inspiration Styled Web Layout

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”.

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

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

Inspiration Styled Web Layout

Inspiration Styled Web Layout

You should have something like this.

Inspiration Styled Web Layout

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

Inspiration Styled Web Layout

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

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

Inspiration Styled Web Layout

You should have something like this.

Inspiration Styled Web Layout

Creating The Featured Area

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

Inspiration Styled Web Layout

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

Inspiration Styled Web Layout

Inspiration Styled Web Layout

You should have something like this.

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

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

Inspiration Styled Web Layout

Inspiration Styled Web Layout

You should have something like this.

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

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

Inspiration Styled Web Layout

Inspiration Styled Web Layout

Inspiration Styled Web Layout

Inspiration Styled Web Layout

Inspiration Styled Web Layout

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

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

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

Inspiration Styled Web Layout

Inspiration Styled Web Layout

Inspiration Styled Web Layout

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

Inspiration Styled Web Layout

Inspiration Styled Web Layout

Inspiration Styled Web Layout

You should have something like this.

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

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

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

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

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

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

Inspiration Styled Web Layout

Creating The Artist Section

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

Inspiration Styled Web Layout

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”.

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

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.

Inspiration Styled Web Layout

Purchase Psd Now

  1. November 18, 2010 at 3:55 AM

    Really nice tutorial! I’m always looking to learn new techniques with Photoshop.

  2. Tirath
    November 18, 2010 at 2:38 PM

    Awesome tutorial with Nice Detail explanation with superb screenshot with excellent End result
    it’s very easy to follow
    your all web layouts tutorials are amazing
    hat’s off to your kind effort for sharing your Grate ideas and educating people.
    on this layout tutorial I like use of pattern and pen tools so much
    I learn so much new tips and trick from you Richard
    you are genus person
    keep up good work
    God bless you ;-)

  3. November 19, 2010 at 10:34 PM

    That was quite easy to follow, thanks !! :)

  4. November 30, 2010 at 8:31 AM

    i like the style

  5. frank
    December 2, 2010 at 4:07 PM

    Hi Richard. I have seen this layout on another website. I think on DeviantArt. I am trying to search it.

  6. Michael Wright
    February 20, 2011 at 1:03 AM

    Dear Richard if its possible can you create some some country icons like a cowboy hat and rope with the icon a country style latest news icon i also need some icons for winamp media player and realplayer and itunes let us know if you keen for the job must be done in photoshop cs 5
    regards Michael

  7. February 25, 2011 at 9:56 PM

    This was a great tutorial! Thanks for the help.

  8. April 12, 2011 at 11:01 AM

    Amazing Tutorial!
    I’m a beginner but this helped and inspired me a lot!
    I’ve only got some problems to include the JQuery Scripts to the page :(
    Well i’ll just learned HTML/CSS not JQUERY ^^
    Anyway thank you very much and sry for my bad English I’m from Germany :)

  9. May 5, 2011 at 11:55 PM

    nice and easy to follow , keep it up

  10. Zukes
    April 1, 2012 at 6:56 AM

    thanx heaps have a long period of bein offline ahead & am tryin to get as many good tutorials as I can so as I can keep learning :)

  11. October 29, 2012 at 3:59 PM

    Nice design. Great tutorial. Thanks for sharing..

  12. December 8, 2012 at 4:05 PM

    How to donwload it?when i’ll press “Download Source”then the paypal website appered.

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 12 Comments On Learn How To Create A Web Gallery Style Layout, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Auto Scroll To The Top
css.php