Portfolio Web Layout

April 18th, 2007 by ART-D Posted in Adobe Photoshop, Web Layout

Do the same with the rest of them:

Create Portfolio Web Layout in Photoshop CS

Then choose the known Ellipse Tool (U) to create a layer reserved for the scrolling button, which color should be FD9B00.

Create Portfolio Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Drop Shadow

Create Portfolio Web Layout in Photoshop CS

Blending Options>Stroke

Create Portfolio Web Layout in Photoshop CS

Create a new layer. Represent on the already made scrolling button a white pointer directed to the left side, choosing the usual Pencil Tool (B) for these operations:

Create Portfolio Web Layout in Photoshop CS

Create Portfolio Web Layout in Photoshop CS

Merge down in a group all the layers composing the scrolling button (keep pressed the Ctrl button to mark out the necessary layers and press simultaneously the left mouse’s button to move the marked layers lower on Create a new group option). Make a copy of the new made group and select the Free Transform option to turn the copy over and place it the way you may see below:

Create Portfolio Web Layout in Photoshop CS

The final result is this one!

View full size here.

  •  

  •    

  •  

 

Post Pages: 1 2 3 4 5 6 7 8 9

  • Cem

    05/09/2009

    Hi!

    Which version do you use on photoshop?
    For example, cs 4 or extended version?
    Because, i use cs4 extended version but i’can’t do gradient tool. =(

    Sincerely,

    Cem

  • Addon Solutions

    06/08/2010

    Hey,

    Its more interesting information that how anyone can design best layout from this tutorials thanks for sharing here

    Thanks

  • Nuß

    04/09/2010

    -Cem, Photoshop has had the gradient tool going all the way back to 3.0 I believe. You will find it as an alt tool of the paint bucket. Click and hold over the different tools, to get the other options or just press apple + G (mac) Ctrl+G (PC)

  • Hire PHP Developers

    19/10/2010

    this nice …… and thnks

  • kenichifc

    17/12/2010

    thanks for tutorial. Love it, simple and effective :D

  • Adam

    01/02/2011

    I dont get this:

    (make a mouse’s click, pressing the Alt button simultaneously between the window’s layer and the screenshot’s one)

  • Dana

    22/02/2011

    Thanks for all the tutorials. They are very helpfull, no extra details.. so I don’t get bored… reading 10000 steps :) . Short and clear.
    Regards

  • J. Hendrix

    17/03/2011

    Thanks for sharing, this is a nice tutorial :)

  • Chicken

    24/05/2011

    (make a mouse’s click, pressing the Alt button simultaneously between the window’s layer and the screenshot’s one)

    I don’t understand this step.
    Can someone help me clear this up?
    Thanks a lot!

  • Piotr Plachta

    30/05/2011

    Great tutorial :)

  • guest

    22/06/2011

    Step – (make a mouse’s click, pressing the Alt button simultaneously between the window’s layer and the screenshot’s one) , is not at all clear.. I could not get the screen shot in ecllipse.

  • Steven H

    26/06/2011

    Hey. i have followed this tutorial and where the links will be in the tabs there is no way of turning them into a role over image and placing them inside the tabs and linking them in dreamweaver. can anyone help me out on how to make a rollover image and placing them into the tabs for the links.
    i want to keep the slant look but i dont know how to make the rollovers to place in them tabs.