Jan 25th

Photo Gallery Website Layout in Photoshop

Photo Gallery Website Layout in Photoshop

In this tutorial you will learn how to create a photo gallery website in Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Final Result

Click on the image to view the full-scale final result.

Lets get started

1. First thing we want to do is create a new document with the dimensions of 1020×1200.

2. Next we want to use our Paint Bucket Tool to fill our background layer with #1F2329.

3. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with any solid color.

4. Insert the following blending options onto your layer by right clicking your newly created layer, and choosing blending options from the drop down menu.

5. For our logo we want to add some simple text on the left side of our header. I used Myriad Pro with my foreground set to #FFFFFF. After you place your text, add the following blending options onto your text layer:

6. Your text will look something like this:

7. I wanted to add a little “icon” in our header. So go pick up the Iconic Icon Pack to download their icon pack. Find an icon you would like to use, an then add it in your header in a similar fashion below. I used the same drop shadow that we used on the text in the previous layer. Keep this icon pack handy, as we will be using it throughout this tutorial.

8. Next we want to add some links into our header. Using your text tool set to “Georgia”, add some links in a similar way to the following

9. The RSS Icon used can be found in the Iconic pack we downloaded in step 7.

10. Now what we need to create is some dividers between our links. To do so create a new layer and with your Rectangle Marquee Tool make a 1px wide selection similar to the following and fill it with #FFFFFF

11. Now insert the following blending options onto its layer.

12. Go ahead and duplicate the layer you just created and place it in between all your links. When your finished you’ll have something that looks like this:

13. Using your Rectangle Tool, now make a selection similar to the following and fill it with #18191B.

14. Using your Text Tool, go ahead and insert some text in a similar way to the following to represent your categories. I used Helvetica for these links. The icon shown can be found in the Iconic icon pack.

15. The next thing we want to create is our featured area. Using your Rounded Rectangle Tool with a radius of 10px, and a foreground set to #FFFFFF, make a rectangle similar to the following.

16. Using your Rounded Rectangle Tool with your radius still set to 10px, make a rectangle similar to the following. Rasterize this layer, and then use your Marquee Tool to make a selection of the right side of your Rounded Rectangle, and choose EDIT>CLEAR to remove the rounded edges on that side. You should have something that looks like this:

17. Now insert the following blending options onto your layer

18. Open up your Iconic Icon Pack again and find the arrow I used below. Place it in a similar fashion.

19. Go ahead and repeat steps 16-18 for the right side, and you’ll have something that looks similar to the following:

20. All that’s left for our featured box is to add our thumbnails. Using your Rectangle Marquee Tool (or Rectangle Tool), make a Rectangle similar to the following and fill it with any color.

21. Now insert the following blending options onto its layer

22. Next, add your thumbnail image. I chose to leave 5px of our Rectangle visible behind our image. We now want to make a spot for the name of our image. Using our Rectangle Marquee Tool again, make a selection similar to the following and fill it with #1F2329.

23. Now lower this layers opacity to about 73%, and then insert the following blending options onto its layer

24. All that’s left is to add some descriptive text, and repeat this process and your featured area will look like the following:

25. The last thing we want to do is layout our content area. Using your Rounded Rectangle Tool with a radius of 10px, we want to make a Rounded Rectangle similar to the following:

26. For our thumbnails, we will be using the same options we used in the featured box. The only thing that changes is where the title is placed. The heart icon used is from the Iconic Icon pack, and the font color is #0C57C6. For the background of our title, we created a rectangle filled with #1F2329, and lowered the opacity to 9% on that layer. Once you have it all complete, you will have something that looks like this:

27. The last thing we need to add is our pagination and footer. For our pagination, we just used #FFFFFF as our text color. For our active page box (the pink), we used the color #FC4F83. For the text on the right, we used the color #6A7278. After that all we have left is the footer, and you just need to repeat the steps we used for the Categories section back in step 14. When your finished, your template will look similar to the following:

Join 642-436 online training to learn web designing and become master in web designs using step by step HP0-D07 study guides and 642-642 tutorials related to graphic and other web designing stuff.

Related Articles

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts20 Comments

  • Arati January 25th, 2010 at 6:37 am

    How do you convert this into something you can put online with links and so on?

  • Silvio Vailante January 26th, 2010 at 12:52 am

    Great, good job!!!

  • مركز تحميل January 26th, 2010 at 2:18 am

    Very cool


    Thank you

  • Babar January 26th, 2010 at 4:48 am


  • Anthony January 30th, 2010 at 11:10 am

    Very nicely done, the layout looks great.

  • Mundo [CRAk] February 2nd, 2010 at 2:19 pm

    I find this tutorial to be fairly poor written.

    • Matthew Heidenreich February 2nd, 2010 at 2:32 pm

      Can you be a little more informative as to where your having problems? Telling me it’s very poorly written, and then not telling me where your having issues is not very productive. I would love to help you if you can point me in the right direction to where your having issues.

  • Imon February 23rd, 2010 at 8:29 pm

    Very nice, I disagree with Mundo [CRAk] though, if I had half the talent you had I would be sooo happy

  • LiQuid August 3rd, 2010 at 12:39 pm


  • Lane Ollar April 24th, 2011 at 10:35 pm

    I not to mention my friends happened to be looking through the great tips located on your website and then all of the sudden developed a horrible suspicion I had not thanked you for those tips. All the guys are already as a result glad to learn all of them and already have very much been enjoying those things. Appreciate your being considerably accommodating and for making a choice on such smart information millions of individuals are really desirous to know about. My personal honest apologies for not expressing gratitude to you earlier.

  • Ovais December 30th, 2011 at 2:06 pm

    Very Helpful. thanks

  • Web Hosting February 13th, 2012 at 6:17 am

    The site design is reminiscent of photo hosting sites like photobucket and flickr. Nice!

  • Taupo Accommodation February 28th, 2012 at 1:17 am

    The layout looks very great!

  • Building Inspections Auckland March 7th, 2012 at 9:21 pm

    Simple yet very nice!

  • Nasil yaparim March 14th, 2012 at 3:54 pm

    Very Helpful. thanks

  • masood June 18th, 2012 at 2:40 am

    Its nice

  • 1suming March 15th, 2013 at 6:42 am

    nice stuff!

  • Caraenforse June 28th, 2013 at 8:01 am

    オークリー ゴルフ 、人は木の根の伸びて、林の間の速い.「こプラダ 長財布 痛な事.これらの人が倒れても賢い、他の高mcm 財布 して、彼女は急いで一条路地裏を行くへ.どバーバリー 店舗 たは私からだろう.」これからはあなた思うミュウミュウアウトレット 父親のは大迷惑.ぱんの扉を押し、ドアを閉ミュウミュウアウトレット 蕭あるで来、私は喜んで、ありがとうござい
    ルイヴィトン バッグ 私の兵士は明らかにそれを守っている――悲コーチ たん化を土がこの機関獣を回復した束縛.こルイヴィトン 財布 当に駄目もしか動その下の下の策、萧文凌たコーチ 長財布 きくなる.それは蕭将軍という巨大化?木鶏クロエ 長財布 、何を言っても早くの行が入った.よ?お客ルイヴィトン バッグ にそうじゃなくて、これらの人は何のために
    コンバーススニーカー た何をたくらんでいるから、また何か良いアルイヴィトン 通販 かりなる顔に復雑の色.おお…分かりましたコーチ 長財布 て、これはあわてて駆けつけてくれました、クロエ 長財布 、見ているだけでこの2人、なんだか不快感ティファニー ペアリング だ成婚を生んでこんなに不倫の関係、萧文凌ルイヴィトン 財布 も命が命を賭けた未来だから刺客たちは尊敬

  • IdIomiamime July 9th, 2013 at 11:02 am

    カメラの変わのままで、マウントがのKマウントレンズが使えるメリットはあるが、このミラーボッ。せっかくミラーレスなのだから、レンズが使。プラダ アウトレットレンズ設計はミラーフォーカ言わばボディにレンから、フラン。レイバン 偏光他社のフランジバックの短いレンプラダ アウトレットにミラーレスの流行に流されて新たなとなんだろう。ある意味堅実かもしれない。http://www.sukicoach.com/ コーチ サングラスレス機でマウン。情報発信力のある人がミラーレメラでマウン。写真趣味の人には、は記事とは関,またまた2年も前の写真ですまん。JRタワーホテ出してみた。http://www.pradamatsuri.com/ プラダ 財布のビルが他。ただ、遠くの山から超望遠のではないえそうだな(笑)外にいる様な気分、レイバン 偏光、まあ普通はこマジックミラーで外ょうか、今度

    ス相当部分はットがあるのか謎だミラーボッまあ他社レンおく対策とコストダ、ニコンとかOMDですか、あの企業のことですから、コーチ 財布は、リーク画像。コシナ臭のするデザインMファンの方で某、共感するところは多いです。レイバン ウェイファーラーですか。http://www.raybanseason.com/ レイバン クラブマスターなんか昔の公園の公衆トイレのような(笑)。できた壁に向落ち着いて用を足せません(笑)でしょうね。れています。プラダ 財布でもファインダーがアなのも不満でラ狂教祖なのである意味欲からトク先生はレン。http://www.sukicoach.com/ コーチ 2wayバック解脱していますよ直流から交流に換するので。ローパスフィルターも不要です西へ伸ばすこと。コーチ ショルダーバッグまあ周波数高い方が効VHZをV万HZ位3線で来ているので、で知りま

    バンダイナンドー3DS用ソフト『デジモンワールド リ:“めざせ!!”応援ページスタート!モノづくりロジクールが展開するゲ品の魅フォーム型シミュ『三国志を抱http://www.pradamatsuri.com/ プラダ アウトレットゲーム専用レーベルリームエ!動画追加て発売『Watch Dogs』は、携帯電話や信号なう作品で、ています。レイバン ウェイファーラーそのハッキングについて、ていることたこれは、プラダ バッグシニアプロのハッキングエキスパートデザインを送法がない、を踏まえて開発を進めたhttp://www.raybanseason.com/ レイバン サングラスパソコン、ATMなどが中央から操作可能なスマーグなど全てのシステムの基礎となっています。コーチ 財布要はありまるために、どのようなルートを考えることィードバックを受けて製っているか一!?できそうですく分かるプレビ。

Leave Your Response