Create a Photography Portfolio Website Design



Every artist, designer or photographer should have a digital portfolio. Sometimes promotional products and word-of-mouth can’t get the point across like a digital portfolio will. Today I would like to show you how to design an elegant and clean photography portfolio website in Photoshop.

You will see how to implement a photo into full design layout, how to play with typography to achieve clean and elegant look. Hope you will find this tutorial useful and you will learn something new. Please share your opinion about this tutorial in comments section below.

Source File

To download the source file, you must be a member of the Web Design Fan Club. Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. Read more about our club here.
photography-fan.zip (2,7 MB)

Tutorial Resources

Fonts: Neuton and Georgia

Icons: Vector Social Media Icons

Main photo: girl pushes the car taken on credit

Cat photo: red cat in a car 3

Girl photo: girl poses on a coastal line

Preview

Click on the image below to see the work in full scale.

preview

Step 1: Create a new document

Open Adobe Photoshop and start by creating a new document CTRL+N. Then make the document 1200 px by 1000 px with a white background.

step01 create new document1

Step 2: Guidelines

We need to add some guidelines. Go to View > New Guide… and add following guidelines: vertical at 120 px and 1080 px, horizontal at 530 px.

step02 add guidelines1

Step 3: Background

At first create a new group (Layer > New > Group…) called “Background”. After that click twice on background layer and unlock it, then move it inside the group and set foreground color to grey (#F6F6F6) and fill your background with it by clicking Alt+Backspace.

step03 fill background1

Now go to Filter > Noise > Add Noise… and set Amount to 1%, Distribution to Uniform. An example shown on the picture below.

step03 add noise1

Now go to sxc.hu and download free photo of a girl pushing the car. After that drag it to your Photoshop window and then using Move Tool (V) drag it into your design document. Click Ctrl+T and resize photo to fit in your design.

step03 photo

Pick Rectangular Marquee Tool (M) and select area under the horizontal guideline and delete it.

step03 delete selected area

Go to Layer > New Adjustment Layer > Gradient Map… name it “Gradient Map” and select gradient from purple (#290A59) to orange (#FF7C00).

step03 gradient map

Set blending mode to Soft Light. After that click right mouse button on Gradient Map layer and select Create Clipping Mask.

step03 gradient map blending mode

Step 4: Header

Now minimize “Background” group by clicking a small grey arrow next to the group name. After that create a new group (Layer > New > Group…) and name it “Header”. Change foreground color to black (#000000) and then pick Rectangle Tool (U) and draw 1200×100 px size rectangle. An example shown on the picture below.

step04 draw rectangle

Move your rectangle shape 20 px from the top by holding Shift and clicking down button twice. Then change rectangle layer’s Opacity to 30%.

step04 rectangle opacity

Now change foreground color to white (#FFFFFF) and choose Horizontal Type Tool (T), select Neuton font, set font size to 24 pt and write your website title.

step04 website title

Click right mouse button on title layer and select Blending Options… and apply following option.

step04 website title drop shadow

Now pick Horizontal Type Tool (T) again, select Neuton font and set size to 14 pt and make your top navigation. After that apply Drop Shadow option as used for the website title layer.

step04 top navigation

Step 5: Body

Now minimize “Header” group by clicking a small grey arrow next to the group name. After that create a new group (Layer > New > Group…) and name it “Body”. Using Horizontal Type Tool (T), 24 pt size Neuton font write 2-3 descriptive sentences about your website. Place your description 20 px to the right from the first vertical guideline.

step05 descriptive sentences

Now click right mouse button on text layer and select Blending Options… after that apply following option.

step05 descriptive sentences drop shadow

Change foreground color to white (#FFFFFF) and pick Rectangle Tool (U). Then create a new layer (Shift+Ctrl+N) and place it above descriptive text layer. After that draw a rectangle shape much bigger than text. An example shown on the picture below.

step05 rectangle

Reduce rectangle layer’s Opacity to 10%.

step05 rectangle opacity

Draw two more rectangle shapes and place them below the text layer and reduce Opacity to 10%.

step05 rectangle shapes

Pick Horizontal Type Tool (T), choose Times New Roman font and set font size to 100 pt. Then write only four dots. After that click right mouse button on descriptive text layer and select Copy Layer Style and then go back and click right mouse button on dots layer and select Paste Layer Style. These dots will be our slider changers.

step05 dots1

Create a new layer (Shift+Ctrl+N) called “Bright line”. After that change foreground color to bright grey (#FDFDFD) and pick Pencil Tool (B), set brush size to 1 px and holding Shift button draw horizontal line below horizontal guideline.

step05 bright line

Set foreground color to grey (#878787) and pick Horizontal Type Tool (T), then choose 24 pt size Neuton font and write something like “Welcome to Photography Fan Portfolio”.

step05 welcome

Download Vector Social Media Icons and select following 32 px size icons: twitter.png, flickr.png and facebook.png. Drag them to Photoshop window and click Shift+Ctrl+U to desaturate them. After that using Move Tool (V) drag them into your “Body” group and place as shown on the example below.

step05 icons

Create a new layer (Shift+Ctrl+N) titled “Grey line”. After that change foreground color to bright grey (#DDDDDD) and select Pencil Tool (B), set brush size to 1 px and draw (holding Shift button) horizontal line between the vertical guidelines.

step05 grey line

Click Ctrl+J on “Grey line” layer to duplicate it, then place it 4 px lower.

step05 duplicate grey line

Go to sxc.hu and download cat photo. Then drag it to your Photoshop window and resize by clicking Ctrl+Alt+I. After that pick Crop Tool (C) and crop it to 223×114 px size.

step05 cat

Change foreground color to black (#000000) and grab Rectangle Tool (U). After that draw rectangle shape and place it above “Cat” layer.

step05 rectangle shape

Now reduce rectangle shape layer’s Opacity to 50%.

step05 reduce opacity

Set your foreground color to white (#FFFFFF) and pick Horizontal Type Tool (T). Then choose Neuton font and set size to 24 pt after that write photos category name for example “Animals” and place it on just created rectangle.

step05 category name

Now create other 3 categories using the same techniques shown before. Girl photo from sxc.hu.

step05 categories

Now change foreground color to dark grey (#878787) and select Horizontal Type Tool (T), choose 24 pt size Neuton font and write “About Photography Fan” or something similar. Move your text 30 px below the images.

step05 about headline

Now find “Grey line” layer and click Ctrl+J to duplicate it. After that move it on the same level as your “About” headline text. An example shown on the picture below.

step05 duplicate

Now pick Rectangular Marquee Tool (M) and select area from first horizontal guideline to the place where the text ends and leave about 20 px gap.

step05 select

Now delete selected area. After that duplicate short line by clicking Ctrl+J and move it 4 px lower than the first one.

step05 duplicate line

Grab Horizontal Type Tool (T) and choose 15 pt size Georgia (Italic) font. After that write about 3 full width (between the vertical guidelines) lines of description. An example shown on the picture below.

step05 description

Now find “Grey line” layer again and duplicate it twice by clicking Ctrl+J. After that move duplicated lines under the description text. Finally move one line 4 px lower.

step05 bottom lines

Select Horizontal Type Tool (T), choose 13 pt size Georgia font and write your copyright information and place it below the two lines at the bottom of your design.

step05 copyright1

Congratulations! You’ve finished your photography portfolio design.

Final Result

preview

We offer up to date practice questions for MB6-827 and MB6-817. We also provide your MB6-202 with highest score using up to date products of 70-557 is not a challenge for everyone.



Comments
  1. sawebdesigns said:

    wow two my favorite passion web design and photography I make something like this

  2. Nice tutorial. I’d be tempted to give it a try but there are so many WordPress Portfolio themes it’s hardly worth the effort anymore!

  3. Great tutorial! Love the layout! I think the font choice could be better but.. great job!

  4. Very nice tutorial!

  5. I would love to have a website that looks like this for my photography, and this is probably a silly question to most of you.. but what do you do with this after you create it? I host on Smugmug now, because it’s pretty much the easiest way I could figure out to get my work online. But Smugmug says there is no way to put any sections of text information on my ‘site’ without knowing HTML, which I don’t. Is there any hope I can have a cool looking site without learning HTML or hiring someone?

    • You will either have to learn html or be prepared to learn to use wordpress, joomla or 1 of the many available content management systems.

  6. This is very simple but looks cool. Can be work here a little more to make it more attractive. Isn’t it?

  7. Thanks a lot for sharing this nice post!
    You’ve done really excellent job!

  8. VERY NICE TECHNIQUES! Learnt something new today:-)

  9. Once again a great Tut, many thanks.

  10. Nice post. As a web design company we can’t stress just how big an impact a professional portfolio can make. Keep up the good work!

  11. Nice Article
    beneficial for step by step learning

    thanks for the share

  12. Hey,You article is excellent and quite in derived oriented for everybody who are in the field of designing especially. Thank You,

  13. Great tutorial and well explained.

  14. Awesome end result :) This was a really interesting tutorial. Love the short step by step description, makes it a lot easier to understand. Very well done !

  15. Nice Tutorial also share on my website Linetoweb.com

  16. Great tutorial. Thanks for sharing.

  17. nice…. cool………..gr8 tuts…. its very educational….

  18. can this be used for blogger and how do you make the links for the portfolio and such?

  19. Great tutorial Tomas. Really worth doing it. Keep it up.