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.
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)
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
Click on the image below to see the work in full scale.
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.
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.
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.
Now go to Filter > Noise > Add Noise… and set Amount to 1%, Distribution to Uniform. An example shown on the picture below.
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.
Pick Rectangular Marquee Tool (M) and select area under the horizontal guideline and delete it.
Go to Layer > New Adjustment Layer > Gradient Map… name it “Gradient Map” and select gradient from purple (#290A59) to orange (#FF7C00).
Set blending mode to Soft Light. After that click right mouse button on Gradient Map layer and select Create Clipping Mask.
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.
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%.
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.
Click right mouse button on title layer and select Blending Options… and apply following option.
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.
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.
Now click right mouse button on text layer and select Blending Options… after that apply following option.
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.
Reduce rectangle layer’s Opacity to 10%.
Draw two more rectangle shapes and place them below the text layer and reduce Opacity to 10%.
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.
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.
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”.
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.
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.
Click Ctrl+J on “Grey line” layer to duplicate it, then place it 4 px lower.
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.
Change foreground color to black (#000000) and grab Rectangle Tool (U). After that draw rectangle shape and place it above “Cat” layer.
Now reduce rectangle shape layer’s Opacity to 50%.
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.
Now create other 3 categories using the same techniques shown before. Girl photo from sxc.hu.
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.
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.
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.
Now delete selected area. After that duplicate short line by clicking Ctrl+J and move it 4 px lower than the first one.
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.
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.
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.
Congratulations! You’ve finished your photography portfolio design.