Template Show: How to Design a Gallery Layout in Photoshop

Posted in Quick Tips, Tutorials, Web Interface • Posted on 12 Comments

In this week’s tutorial we will create a gallery layout. I will not be using the 960 grid in this tutorial, the purpose is to show beginners out there how important the Ruler Tool is when you are designing in Photoshop. We will also tackle how to create and use patterns and using mask and filters.

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

Step 1: Setting up the Document

Start by creating a 1200px x 1850px document in Photoshop.

As I mentioned earlier we will be using the Ruler Tool. Make sure that rulers and guides is turned on.

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

Also one thing important in using Ruler Tool is the Info(Information) Panel. The use of this is when you are measuring using the ruler the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.

The total width of your site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 120px. Repeat the step of create a guide but now change the value to 1080px, this will make a total of 960px in the center of our canvas.

Step 2: Creating the Header

The Header section is composed of Logo, Navigation, and Search. First thing you need to do is to create a folder name it Header and inside of it create sub folders and name them Logo, Navigation, and Search. It is important that you group all the things you do properly in order to be organized and easily locate things in the future for coding purposes.

Inside Header folder create a new layer and name it bg. Using Rectangle Tool create a 100% x 100px. By looking at the Info Panel you can view the dimension of the shape that you’re making. Or you can do this by creating a new guide by going to View – New Guide – 100px Horizontal. It’s up to you what way you choose.

Add this Blending Option

  • Gradient Overlay: #dcdcdc, #ffffff

Next thing you do is create two lines using Line Tool 55px distance from the top. But I suggest to use Rectangular Marquee Tool to make the line pixel perfect.

  • Line 1: #cfcfcf
  • Line 2: #ffffff

As you can see in the preview of our header there is a pattern above the lines. Create a new document 9px x 7px, background content Transparent. Using Pencil Tool with a fill color of #cfcfcf create a pattern as shown in the screenshot below. When you are done go to Edit – Define Pattern and name it whatever you wish to call it.

Using Paint Bucket Tool instead of foreground change it to pattern and select the pattern we made. Apply this pattern by making a selection and fill with pattern using Paint Bucket Tool.

Step 3: Creating Logo

This is just a simple site name logo. Start by using Text Tool and type your desired site name.

Add this Blending Option

  • Inner Shadow: #000000

Step 4: Creating Navigation

Again using Text Tool lets place our navigation links.

Add this Blending Option

  • Drop Shadow: #ffffff

Step 5: Creating Search

To create our search bar use Rounded Rectangle Tool and set the radius to 10px, then create a shape as shown in the screenshot below.

As you can see in the preview above, the left side of our search bar is slanting. So, we need to transform our shape by selecting the layer and press Ctrl + T then Right Click to the work area and select Distort.

Next we need to mask the bottom part of our shape to be equal in our header. First set the foreground to #000000, then select the layer bg in our header and make a selection of it. While it is selected select the shape of our search the press the Mask Icon in the layers panel area beside the fx icon. Just refer to the screenshot below.

Add this Blending Option

  • Inner Shadow: #000000

  • Inner Glow: #fff

  • Gradient Overlay: #e6e6e6, #dcdcdc

Now let’s create the search button. Make a selection of the search bar, contract it by 2px, and fill it with any color. To contract go to Select – Modify – Contract.

Select Rectangular Marquee Tool, by pressing Alt key you will notice that there is a - sign beside the selection pointer, this sign means to deselect selection. Now you can deselect the section you want to deselect.

Add this Blending Option

  • Inner Glow: #ffffff

  • Gradient Overlay: #dcdcdc, #f9f9f9

  • Stroke: #c2c2c2

Open up the search icon, align it and add a 1px drop shadow #ffffff.

Step 6: Creating Slider

Create a folder above Header folder and name it Slider. Using Rectangle Tool with a fill color of #413f6b create a 100% by 250px.

Add this Blending Option

  • Inner Shadow: #ffffff


Convert the shape layer to Smart Filters by going to Filter – Convert for Smart Filters. Now, go to filter again and add noise

Controls

Create a folder inside Slider and name it Controls. Controls should have sub folders named: NextPrev and Slider Control. Inside NextPrev let’s create our Next and Previous buttons start by selecting Ellipse Tool with a fill color of #676589 and create a shape 40px x 40px.

Download the arrow icon provided in the resources and place it on our canvas. Resize and position it as shown in the screenshot below.

We are going to mask the shape, first set the foreground color to #000000, next make a selection of the arrow icon by Ctrl + Click to the layer and Inverse the selection by pressing Ctrl + Shift + I. While it is selected select the Ellipse shape and press the Mask Icon beside the fx icon in the layers panel.

Duplicate the shape and place it on the other side. Grab some sample images to put in our slide. Also, using Text Tool add some text: a sample title and a little content just follow the formatting of the text as shown in the screenshot below.


Now we are going to work on our Slider Controls. Using Rounded Rectangle Tool with a 10px radius create a shape as shown in the screenshot below. Transform the shape the same as we did in our Search bar.

Also mask the layer as we did previously, refer to Step: 5 Creating Search.

Add this Blending Option

  • Gradient Overlay: #dcdcdc, #ffffff

Using Ellipse Tool create a shape as shown in the screenshot below.

Add this Blending Option

  • Drop Shadow: #ffffff

  • Inner Shadow: #000000

This will be the result.

Using Rectangle Tool with a fill color of #000000 create a 100% by 5px shape, then set the layer mode to multiply and opacity to 30% in the layers panel.

Make a selection of the slider control shape and expand it by 5px by going to Select – Modify – Expand.

Final step to create our slider is to add highlights. First make a selection of our slider base, then select Brush Tool set the hardness to 0% and size about 400px. Fill the selection in a separate layer with #ffffff color and set the blend mode to Soft Light in the layers panel.

Step 7: Featured Gallery

Create a new folder and name it Featured Gallery. Using Rectangle Tool with a fill color of #ededed create a shape 100% by 200px. Also, create two 1px lines, first line color #ffffff will be placed on the top of our shape and the second line color #c2c2c2 will be on the bottom.

Create a new layer above the shape and name it highlight. Then, make a selection of the shape. Using Brush Tool with a fill color of #ffffff brush in the center of the selection then, set the layer mode to Soft Light.

Now let’s work on our sample post for our featured gallery. First, create a folder named post then put a 100px x 100px sample thumbnail on our canvas. Also, Using Text Tool add a Title and Content.

Create a new layer below the thumbnail and name it shadow, using Pen Tool create a shape as shown in the screenshot below. Then, go to Filter – Blur – Gaussian Blur 1px, and set the Opacity to 50% in the layers panel.


Create a new folder and name it rate. Now, open up the star icon and place it to our canvas and place it as shown in the screenshot below.

Add this Blending Option

  • Drop Shadow: #000000

  • Gradient Overlay: #e7e918, #fffd76

  • Stroke: #eaec25

Make a selection of the star and deselect starting from the middle to bottom and in a separate layer fill it with Linear Gradient #ffffff to Transparent then, set the Opacity to 70% in the layers panel.

This will be the result.

Duplicate the star four times.

Duplicate the post folder two times a position it as shown in the screenshot below.

Step 8: Posts

Fill the Background layer with #ededed. Create a new folder and name it Body Posts, create a sub folder and name it post. Now, create a sample 300px by 200px image thumbnail for our post and place it in our canvas. Using Rectangle Tool create a 300px by 45px shape just fill it with any color. Just refer to the screenshot below.

Add this Blending Option

  • Drop Shadow: #000000

  • Gradient Overlay: #f7f7f7, #ffffff

Duplicate rate folder from our featured gallery and place it in the post folder. Also, using Text Tool create a sample title, just follow the settings in the screenshot below.

For unrated star style just remove the Gradient Overlay and replace it with Inner Shadow.

Duplicate post folder five times and align it as shown in the screenshot below.

Step 9: Pagination

Select Rounded Rectangle Tool and set the radius to 5px then, create a 620px by 45px shape below those posts.

Add this Blending Option

  • Inner Shadow: #000000

Using Text Tool place the number of pages as shown in the screenshot below.

Step 10: Sidebar

Create a #c2c2c2 1px line 40px distance from our post, Mask the line and make the tip faded using Brush Tool with a fill color of #000000. You may have something that looks like the screenshot below.

Duplicate the line and move it to the left and change the color to #ffffff. Create a Horizontal line with the same color place it as shown in the screenshot below.

Next, create a new layer below those lines we have just created and name it shadow. Using Selection, Gradient Tool, and Eraser Tool perform what you have seen in the screenshot below. The set the shadow layer to Multiply, Opacity to 50%.

Duplicate the layer and place it on the top as shown in the screenshot below. It’s up to you to make adjustments, just erase the portion that you don’t like.

Select Rounded Rectangle Tool then set the radius to 10px. Create a shape as shown in the screenshot below. The width of the shape is the remaining width of our canvas and the height will be 40px.

Add this Blending Option

  • Gradient Overlay: #494367, #6b6393, #494367

Using Text Tool add a header title.

Next open up the social icons and place them on our canvas, align them as shown in the screenshot below, and also add their corresponding social icon names using Text Tool.

Create two new folders and name them: Categories and Our Partners. Using Text Tool and Line Tool perform what you can see on the screenshot below.

Step 11: Footer

Create a new folder and name it Footer. Inside footer there are sub folders named: About, Most Love, and Site Links. Using Rectangle Tool with a fill color of #413f6b create a footer that is the right size to you.

Add this Blending Option

  • Inner Shadow: #ffffff

Convert the shape layer to Smart Filters by going to Filter – Convert for Smart Filters, go to filter again and add noise.

We were going to add info text in our about folder. Using Text Tool put in some dummy text and for the formatting of the text just refer to the screenshot below.

Using Text Tool add links on Site Links folder.

Using Text Tool add a Post Title, Love this, and comments. Create also a 50px x 50px thumbnail and place it as shown in the screenshot below.

Final steps are adding copyright and back to top button. Open up the arrow icon and rotate it facing top.

Add this Blending Option

  • Drop Shadow: #000000

  • Gradient Overlay: #dcdcdc, #ffffff


Finally we’re done!

Glad that we finished it all together. I hope you learn something from this tutorial. I would love it if you would post your outcome below. Cheers all :)

37 Written ArticlesWebsiteGoogle+

Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.

12 Comments Best Comments First
  • Robbakel

    Saturday, July 2nd, 2011 13:18

    1

    Eny noticed that in the navbar, it says ‘tampaltes’, in stead of ‘templates’?

    +3
  • Gavin

    Monday, July 4th, 2011 16:35

    4

    Wow! One of the best tutorials I have read in a long time!! So in depth, an excellent read. Well done 1stwd – you never fail to impress. I think I’ll be giving this a go on my next project!

    +1
  • Sofia

    Sunday, July 3rd, 2011 03:23

    2

    This gives me what I was looking for! Thanks God I came across this blog. Thousand thanks!

    +1
  • Sadd

    Tuesday, July 5th, 2011 14:53

    5

    Incredibly in-depth, thanks so much for taking the time to make this so detailed and easy to understand…I was looking for pretty much exactly this and you’ve hit the nail on the head. Thanks again

    0
  • Wintfield

    Sunday, July 3rd, 2011 10:07

    3

    wow great tutorial and very helpfull for me thanks Michael Burns for this great article.

    0
  • Walter

    Thursday, July 7th, 2011 08:23

    6

    Thank you very much for this detailed and easy to understand tutorial. THANKS!

    0
  • Sven

    Friday, July 8th, 2011 22:44

    7

    Very detail tutorial and usefull too. Thanks for sharing.

    0
  • Trent

    Monday, September 5th, 2011 06:22

    12

    Hi, very nice tutorial . I can practice step by step . I made one for me hehe. Sorry , who can tell me know what difference between template and theme ? please help me, thank you so much ?

    0
  • irfan

    Saturday, August 6th, 2011 17:18

    10

    thats why i like this website keep the good work please also start some psd to xhtml/css tutorials so that we can learn css

    0
    • M. Hashim

      Monday, August 22nd, 2011 20:23

      11

      It is so nice template…………. I really like this… please post new templates same as it…

      0
  • andrew

    Thursday, July 14th, 2011 23:44

    8

    so now how can i make it work as a full webstite? thanks

    0
  • Ahmed

    Sunday, July 17th, 2011 18:29

    9

    Smooth, comfortable, clear and easy explanation ;)
    Really I liked so much how you go through your steps.
    And yes, we need the next project, how to make the site through this.
    I noticed a tool called “Slice”. Many “PSD sites” do it within.

    We are waiting….. :)

    S.M.i.L.E :D

    0
  • Trent

    Monday, September 5th, 2011 06:22

    12

    Hi, very nice tutorial . I can practice step by step . I made one for me hehe. Sorry , who can tell me know what difference between template and theme ? please help me, thank you so much ?

    0
  • irfan

    Saturday, August 6th, 2011 17:18

    10

    thats why i like this website keep the good work please also start some psd to xhtml/css tutorials so that we can learn css

    0
    • M. Hashim

      Monday, August 22nd, 2011 20:23

      11

      It is so nice template…………. I really like this… please post new templates same as it…

      0
  • Ahmed

    Sunday, July 17th, 2011 18:29

    9

    Smooth, comfortable, clear and easy explanation ;)
    Really I liked so much how you go through your steps.
    And yes, we need the next project, how to make the site through this.
    I noticed a tool called “Slice”. Many “PSD sites” do it within.

    We are waiting….. :)

    S.M.i.L.E :D

    0
  • andrew

    Thursday, July 14th, 2011 23:44

    8

    so now how can i make it work as a full webstite? thanks

    0
  • Sven

    Friday, July 8th, 2011 22:44

    7

    Very detail tutorial and usefull too. Thanks for sharing.

    0
  • Walter

    Thursday, July 7th, 2011 08:23

    6

    Thank you very much for this detailed and easy to understand tutorial. THANKS!

    0
  • Sadd

    Tuesday, July 5th, 2011 14:53

    5

    Incredibly in-depth, thanks so much for taking the time to make this so detailed and easy to understand…I was looking for pretty much exactly this and you’ve hit the nail on the head. Thanks again

    0
  • Gavin

    Monday, July 4th, 2011 16:35

    4

    Wow! One of the best tutorials I have read in a long time!! So in depth, an excellent read. Well done 1stwd – you never fail to impress. I think I’ll be giving this a go on my next project!

    +1
  • Wintfield

    Sunday, July 3rd, 2011 10:07

    3

    wow great tutorial and very helpfull for me thanks Michael Burns for this great article.

    0
  • Sofia

    Sunday, July 3rd, 2011 03:23

    2

    This gives me what I was looking for! Thanks God I came across this blog. Thousand thanks!

    +1
  • Robbakel

    Saturday, July 2nd, 2011 13:18

    1

    Eny noticed that in the navbar, it says ‘tampaltes’, in stead of ‘templates’?

    +3

Comments are closed.

54.196.225.45 - unknown - unknown - US