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.

Create a new document

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.

Add guidelines

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.

Fill background

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

Add noise

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.

Resize photo

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

Delete selected=

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

Gradient map

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

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.

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

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.

Website title

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

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.

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.

Descriptive sentences

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

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.

Rectangle

Reduce rectangle layer’s Opacity to 10%.

Rectangle opacity

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

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.

Dots

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.

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

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.

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.

Grey line

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

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.

Cat

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

Rectangle shape

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

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.

Category name

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

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.

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.

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.

Select

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

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.

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.

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.

Copyright

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?