Photographer portfolio layout
May 15th, 2009 by ART-D Posted in Adobe Photoshop, Web Layout
In this tutorial I will show you how to create a nice looking Photographer portfolio layout.
Final Image Preview
Start working by creating a new file (File>New) of 1200x768px/72 dpi. Select after that the Paint Bucket Tool (G) and give the new backgroung layer black color.
Then we’ll insert the web site name:
Select these parameters for the layer containing the site’s name by making a click on the layer we work with on the layers’ panel: Blending Options>Outer Glow
Blending Options>Gradient Overlay
Gradient’s parameters:
Next we’ll represent the panel reserved for the menu’s buttons situated on the site header. In this case we’ll apply the Rounded Rectangle Tool (U) with a radius of 5 px.
The layer’s parameters: Blending Options>Gradient Overlay
Gradient’s parameters:
Blending Options>Stroke
Gradient’s parameters:
We’ll create a new layer under the layer containing the menu’s buttons and select here the Brush Tool (B) to represent a spot colored with #666666
Then we’ll apply the Free Transform option and compress the spot on its vertical position and then stretch it out by horizontal line. Place it the same way demonstrated below:
Continue representing the menu’s panel, applying the Rounded Rectangle Tool (U) with a radius of 5 px and white color. The layer’s parameters: Fill 10%
Using the Line Tool (U) (weight 1 px), try drawing a line of white color on the bottom part of the panel:
The layer’s parameters: Blending Options>Gradient Overlay
Gradient’s parameters:
Choose the same Line Tool (U) (weight 1 px) to draw a line on the top part of the menu’s panel:
The layer’s panel: Blending Options>Gradient Overlay
Gradient’s parameters:
Let’s divide the buttons, using a vertical line made with the Line Tool (U) (weight of 1 px)
The layer’s parameters: Blending Options>Gradient Overlay
Gradient’s parameters:
Make a copy of the layer containing the vertical line and choose Free Transform option to place the copy on the left side of the previous line. The copy layer’s parameters should be changed with those from below: Blending Options>Gradient Overlay
Gradient’s parameters:
Post Pages: 1 2
Tags: layout, photographer, Photoshop, portfolio, tutorial, Web Layout, web-page
Serafina
13/09/2009
I love it! thank you!
AC
10/10/2009
AMAZING!!!!!!!!
We’ve done it
and it was awesome , even better than yours!
THANX ALOT!
(K)(K)(K)(K)(K)(K)(K)(K)(K)
Andrey
21/10/2009
Awesome tutorial except i don’t know how to make it online or on a website? can you please help me?!
Mamun_bangladesh
18/12/2009
Its Really awesome tutorial.keep it up
faith
21/02/2010
Hey. I really have loved your tutorials. I have a question though. How do you get them from photoshop to the web? I’m wanting to use blogger or blogspot to host my page. What program do you use or how do you get the buttons to link to different pages too? Does this make sense.. I would love any help of advise you could share!
Thanks so much
nilesh
23/03/2010
excelent tutorial…..
very helpfull for new designers……………
thanks
Dimon
16/05/2010
Thanks ! it is very nice tuts !!!
Texture plus
29/05/2010
Yea the right moment i found your tutorial about photographer portfoglio! thanks alot!
Sharon W
04/06/2011
Nice dark layout.
Schime
10/10/2011
thx for helping me to create my own photography portfolio…
i know u have a lot of questions but can u help me to make that portfolio to work (its not a copy i made it similar)
aehmmm … my problem is how to get that buttond alive and by clicking on it to slide next image ? something like plash photo gallery..
thx for any help
nice work
Schime
10/10/2011
sry i mean “something like flash photo slideshow”
Kelly
03/07/2012
Great job !
What program did u make this on?
Gayu
25/04/2013
I need the complete version of this tutorials.. Like how this “SERVICE”, “CONTACT” pages will be looking????
Pls help me.