Photography portfolio
January 21st, 2008 by ART-D Posted in Adobe Photoshop, Web Layout
Awesome photography portfolio design with a lot of content boxes and an attractive look.
Create a new file (File>New) that would have 800×800 px and 72 dpi. Selecting the Paint Bucket Tool (G) may help us to paint the new file with the next color #111111
Next we have to use the Rounded Rectangle Tool (U) (radius 7 px) to represent the primary layer reserved for the menu’s button, situated on the site’s header.
The layer’s parameters are selected by making a mouse click on the necessary layer on the layers’ panel.
Blending Options>Gradient Overlay
Gradient’s parameters:
Blending Options>Stroke
Using the same instrument, it’s possible to represent a highlight on the menu’s button. Firstly we need to represent the zone of the highlight to be and then, holding on Alt button, erase the unnecessary elements.
The layer’s parameters: Fill 0%
Blending Options>Gradient Overlay
Gradient’s parameters:
Using the same instrument and the same radius, try to represent next the zone reserved for the buttons’ indicator of white color. Press Alt button and select the Rectangle Tool (U) to erase the unnecessary elements.












Clay Jackson
21/08/2009
This is great, thanks for posting!
Background Checks International
26/08/2009
Awesome design and post… thanks man!!!!
yac
10/09/2009
Thanks man!!!!!!
Kushan
11/09/2009
THANKS! THANKS! this is better than giving away template…we can learn lots of things like this… actually i grab the pencil tool after ages
THANKS!
Yadav
16/09/2009
Nice tutorial this is helpful for me
Luis Lopez
01/10/2009
Great, your amazing work has been featured here:
http://www.conceptopixel.com/2009/10/47-tutoriales-para-crear-botones-web-layouts-barras-de-navegacin-banners-y-ms.html
I like the camera on the right-bottom corner, special detail, i love it.
Cheers. Luis.
Bigfoot29
06/10/2009
Wow this amazing I can’t wait to try it out thanks so much!!!
Jonocode
25/10/2009
Hi!
I’m very new to photoshop. I was wondering if someone could explain these words:
“Using the same instrument, it’s possible to represent a highlight on the menu’s button. Firstly we need to represent the zone of the highlight to be and then, holding on Alt button, erase the unnecessary elements. ”
I’m stuck on this part! What is it that I need to do?
P
06/11/2009
Wow great thanks for the good work :D:D
jonocode:
you use the SAME instrument. you make another roundedrectangle on top of the existing!
i had the same problem hehe but i figured it out
R
10/11/2009
i thought i knew PS pretty well, but I still can’t follow the steps..
arul karthik
30/01/2010
It was a nice exp to do initial steps..Thank u very much..
Daniel
01/03/2010
thx. awesome!
Where to download the PSD?
rhanzies
14/03/2010
this one is one of a kind..i really love it…thanks a lot dudes
MaXeLL
21/03/2010
Good Work! This layout its very beautiful and professional doing.
3TurtleStudios
26/03/2010
@ Joncode:
using the same instrument means using the same “tool”… which is that rectangle shape tool..
when u create a rectangle with rounded corners and want to subtract another rectangular shape from it, you just hold alt key..
so basically… see it for urself: make a rectangle with the shape tool.. then with the same tool, hold down alt key and make another shape over it… you will see the new shape will be subtracted out..
similarly, holding shift key will add to the shape..
hope this helps…
تطوير الذات
06/04/2010
this is great
but can you give me an example HTML for this template because it’s very beautiful and i want to put it in my own website
thank you a lot
Natalia Resende
07/04/2010
Thank you. I loved this lay!
emdad hossain
18/05/2010
thanks for great tutorial.
Sean
26/05/2010
It seems a great tutorial however I have spent so much time trying to work out exactly what I’m supposed to do… it’s really putting me off.
It would be nice if the steps taken were explained in full detail and in fluent English.
denise
10/06/2010
Poorly explained:
Using the same instrument, it’s possible to represent a highlight on the menu’s button. Firstly we need to represent the zone of the highlight to be and then, holding on Alt button, erase the unnecessary elements.
It would be much more helpful if you actually said what tools you meant and layers you were talking about. you diagram doesn’t follow with what you are saying.
haseeb
29/06/2010
it is a verry good site
haseeb
29/06/2010
you shuld told more for the beginers
beno
02/07/2010
I am stuck on the same spot where Jonocode is at…
Quote: “Using the same instrument, it’s possible to represent a highlight on the menu’s button. Firstly we need to represent the zone of the highlight to be and then, holding on Alt button, erase the unnecessary elements.”
and yes it is poorly outlined … no layers explained.
someone tell me how can i do this part?
CELIN
02/07/2010
THANK U SO MUCH 4 POSTING THIS
Remonty Malowanie
22/07/2010
Very good post. Lots of new things for me, thank you very much!
MICHAL
26/07/2010
All very nice but this is not really a tutorial. it lacks details and descriptions. for a begginer it is impossible to follow…