Photography portfolio

January 21st, 2008 by ART-D Posted in Adobe Photoshop, Web Layout

Apply for the layer the next parameters: Fill 20%

Create Photo Portfolio Web Layout in Photoshop CS3 

Create Photo Portfolio Web Layout in Photoshop CS3 

Combine in a group all the layers composing the menu’s button of the site to be created (press Ctrl button to mark out the appropriate layers and hold on the left mouse’s button while moving the marked layers on Create a new group selection). Make a copy of the last made group and choose as usually the Free Transform option to place the copy exactly the same way demonstrated below. On the copied button we have to change the layers’ parameters:

1) the parameters of the primary layer: 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

2) The parameters of the highlight 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

3) The parameters of the zone reserved for the button’s indicator: Fill 10%

Create Photo Portfolio Web Layout in Photoshop CS3 

Create Photo Portfolio Web Layout in Photoshop CS3

Make three copies of the grey button and select the Free Transform option to place the copies as it is demonstrated next picture:

Create Photo Portfolio Web Layout in Photoshop CS3 

Create Photo Portfolio Web Layout in Photoshop CS3

Using the earlier applied instrument, Rounded Rectangle Tool (U) (radius 7 px), represent on the next stage the panel reserved for the logotype and the menu of the site’s searching system:

Create Photo Portfolio Web Layout in Photoshop CS3

The layer’s parameters: Blending Options>Gradient Overlay

Create Photo Portfolio Web Layout in Photoshop CS3

Post Pages: 1 2 3 4 5 6 7 8

  • Clay Jackson

    01.21.08

    This is great, thanks for posting!

  • Background Checks International

    01.21.08

    Awesome design and post… thanks man!!!!

  • yac

    01.21.08

    Thanks man!!!!!!

  • Kushan

    01.21.08

    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

    01.21.08

    Nice tutorial this is helpful for me

  • Luis Lopez

    01.21.08

    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

    01.21.08

    Wow this amazing I can’t wait to try it out thanks so much!!!

  • Jonocode

    01.21.08

    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

    01.21.08

    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

    01.21.08

    i thought i knew PS pretty well, but I still can’t follow the steps..