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 Photo Portfolio Web Layout in Photoshop CS3

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

Create Photo Portfolio Web Layout in Photoshop CS3

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.

Create Photo Portfolio Web Layout in Photoshop CS3

The layer’s parameters are selected by making a mouse click on the necessary layer on the layers’ panel.
Blending Options>Gradient Overlay

Create Photo Portfolio Web Layout in Photoshop CS3

Gradient’s parameters:

Create Photo Portfolio Web Layout in Photoshop CS3

Blending Options>Stroke

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

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.

Create Photo Portfolio Web Layout in Photoshop CS3

The layer’s parameters: Fill 0%
Blending Options>Gradient Overlay

Create Photo Portfolio Web Layout in Photoshop CS3

Gradient’s parameters:

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

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.

Create Photo Portfolio Web Layout in Photoshop CS3

  •  

  •    
  •  

 

Post Pages: 1 2 3 4 5 6 7 8

  • 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…

  • Jack

    01/08/2010

    Damn good one! Very nice portfolio site!

  • pencil art

    04/08/2010

    This is really very good tutorial. I love it..

    Now I will design a website with the help of this…

  • Natanela

    04/08/2010

    Thank you. This is beautiful.

  • Sunil

    12/08/2010

    I really apreaciate this site for helping new web designers
    for imagination of good site layout.

  • Debbie

    25/08/2010

    I agree with Denise above regarding this and and your other tutorials…your designs are great, but the writing needs to be improved significantly. There are a couple of things in this one that I don’t understand what you are saying to do. Suggest using one-third of the words and clear, simple English. Then these tutorials would be top notch.

    For example: “Press Alt button and make a mouse’s click between the photos’ layers and the photo’s layer”….huh?

    And this: “Press Alt button when using the same instrument to move off the unnecessary elements.” Have no clue what you mean there.

    As I say, love your designs, but am staying away from more tutorials because they are just too hard to follow.

    If you need to hire a writer for your tutorials, please contact me.

  • Debbie

    25/08/2010

    Three Turtle Studios, thank you for your clear explanation using the ALT key to create a subtracted rectangle. BTW, I *love* your site…very clear and clean, yet very attractive :)

  • Ramaly

    25/08/2010

    This was great. !!! Thanks a lot for sharing your knowledge.

  • minh luan

    28/08/2010

    this tutorial very good .thank you very much

  • Dean

    07/09/2010

    Guys I hate to be the muppet of the group, first let me say ahuge THANK YOU! I have been looking for a template like this for ages. I admit I am still new to CS5. The only thing I can’t seem to find is the “Graient Editor”. I have triedfinding some kind of layout image etc on-line but no joy… PLEASE help ;-)

  • chirag

    16/10/2010

    thanx i love this web

  • chirag

    16/10/2010

    tanx for trike

  • tonyhoang

    31/10/2010

    It will very very good if you add a step about Dreamweaver at the end, thank you very much

  • Frank

    12/11/2010

    Hello i am new at photoshop, so can somebody please explain this part it could be obvious but i dont get it:

    Next we have to select the Pencil Tool (B) (1 px) to picture the symbols on the menu’s buttons situated on the site’s header. The color should be white in this case.

    Thanks!

  • stayalive

    14/11/2010

    thanks a lot for this nice article !

  • TAIMOOR JAWIAD

    26/11/2010

    Thanks for this post very beuitifull traning for web
    NICE ASSOUM .

  • kenichifc

    17/12/2010

    It will very very good if you add a step about Dreamweaver at the end, thank you very much.

  • Balloon printer

    21/12/2010

    It will be good if you add a step about cssr at the end, thank you

  • balloon decorating

    21/12/2010

    this tutorial very good .it is helpful to me

  • Farhina

    22/12/2010

    http://www.facebook.com/Photoshop#!/photo.php?fbid=112791922125374&set=o.6147239684

    I made this, hope you all like it.

  • raja

    23/12/2010

    This web site is very helpful i alwys use it

  • raja

    23/12/2010

    mind-blowing tutorials in this web site
    thanks for help

  • Arif

    09/01/2011

    good work …………..

  • Aaron

    18/01/2011

    Would love to see the coding side of this done. I can make amazing layouts/themes but.. coding, whole different story.

  • Chris

    26/01/2011

    jeez, you had me till the bit that lost a few other people.

    That is, “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 tried instructions posited by other commentators, and various other things but it never seemed to work (on CS3).

  • wiyono

    29/01/2011

    Really great…
    Thank you for sharing…

  • Ramesh

    02/02/2011

    Its really help for me!!

  • vivek

    05/02/2011

    great work. But Can u post PSD for this or can u please mail it me?

  • artred

    05/02/2011

    Great work man!

  • edy

    02/03/2011

    Nice Tutorial..
    I like this tutorial..
    thanks a lot…

  • abdul azeez

    07/03/2011

    Thank u teacher?

    Good lessons ……..

  • jj

    28/03/2011

    it is very useful. thank u

  • Werel

    06/04/2011

    Helpful and nice, but difficulty for newbie like me ;)

  • Asifa

    14/04/2011

    Thanks for posting great tutorial.

  • doan trung kien

    22/04/2011

    very good! i like it!

  • pham thuy anh

    20/05/2011

    thanks a lot of!
    it’s very interesting. i learned a lot from it.
    Great!

  • Sachin

    07/08/2011

    How do you creat “layer group” for creating multiple button of menu.

  • masomeh

    12/08/2011

    Thank you. This is beautiful.

  • chirag

    14/08/2011

    th.

  • Pope

    08/10/2011

    Hi ,
    Thanks immensely for providing this tutorial. I’ve never felt I could put together a theme from scratch, but this has given me the confidence to start using Photoshop.
    Much appreciated,
    Pope

  • amrew

    04/12/2011

    very nice

  • Ian

    10/12/2011

    Hi, I have no such symbols for my pencil tool. If I’m looking in the right place, I chose the pencil tool from the tool box and then in the top left on the options bar for the pencil there is a dropdown second from the left with a very small collection of shapes (mostly smudges and smears and a star. Where do the symbols you used come from?

    Thanks

  • KATANO

    09/01/2012

    thanks 4 your post. it nice

  • yan

    20/01/2012

    nice tutorial,…thanks

  • Nav

    30/03/2012

    Great !!!!!!! Really Very happy to see such well explained and Free Tutorial…… Again Thanks very much for posting and sharing your knowledge with beginners.

  • allen

    08/04/2012

    i really need this concept for my project.thanks for the idea.btw im just a new at this
    ..but how can i add roll over to the navbars when its already an image?

  • armonius

    10/04/2012

    Like many others i feel that the following part needs to be more descriptive. It’s not easy for beginners to figure this out alone.

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

    Thanks for the tutorial.

  • mohsen

    16/08/2012

    Big Thanks Guys :D

  • Hussain

    20/11/2012

    Very Great Work.Thanks

  • UGG 直営店

    31/12/2012

    Howdy, I do believe your site may be having internet browser compatibility problems.
    Whenever I look at your web site in Safari, it looks fine however when opening in I.
    E., it has some overlapping issues. I simply wanted to give you a quick heads up!

    Besides that, excellent site!

  • coolyiru

    24/03/2013

    Thank you very much,I learned a lot.

Once you enter our 70-680 and N10-004 practice exams questions,you will be definetely interested in our 220-701, 000-115 and HP0-M38 too for making your certifications more easier.