Subscribe to our rss feed

Clean Portfolio Layout Tutorial

Posted in Photoshop Tutorials, Web Layouts by John Ward on the August 23rd, 2007

Using the text tool bar with Arial Black as your font in 60pt size add your name to the top of the portfolio.
Photoshop Portfolio Layout Tutorial

Apply the following Blending Options to the text:
Drop Shadow:
Photoshop Portfolio Layout Tutorial

Gradient Overlay:
Photoshop Portfolio Layout Tutorial

Here is the gradient (to get to this double click on the Gradient bar in the on the screen pictured above)
Photoshop Portfolio Layout Tutorial

Drop Shadow:
Photoshop Portfolio Layout Tutorial

Now we will save this style so that we can use it again later. Click on the New Style Button, then give your style a name and click ok.
Photoshop Portfolio Layout Tutorial

Apply the settings and you site template should look like this
Photoshop Portfolio Layout Tutorial

Now using the text tool bar at the words Online Portfolio just under your name using Arial Black 24point.
Photoshop Portfolio Layout Tutorial

Now go into your blending option and apply the following settings.

Drop Shadow:
Photoshop Portfolio Layout Tutorial

Gradient Overlay:
Photoshop Portfolio Layout Tutorial

Here is the gradient:
Photoshop Portfolio Layout Tutorial

Stroke:
Photoshop Portfolio Layout Tutorial

Apply the changes and your header should look like this.
Photoshop Portfolio Layout Tutorial

Ok. Now lets apply the links to our header. Using the text tool bar with Arial Black 22 point add the text picture below.
Photoshop Portfolio Layout Tutorial

Now apply the following Blending Options.

Color Overlay:
Photoshop Portfolio Layout Tutorial

Stroke:
Photoshop Portfolio Layout Tutorial

Apply the changes. Then lower the opacity of the layer to 80%.
Photoshop Portfolio Layout Tutorial

So now we have the links added and the page should look like this.
Photoshop Portfolio Layout Tutorial

Popularity: 41% [?]

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • BlogMemes
  • Fark
  • Furl
  • Live
  • NewsVine
  • Reddit
  • Slashdot
  • StumbleUpon
  • TwitThis
  • YahooMyWeb

Pages: 1 2 3 4


Go Daddy $1.99 Domains

3 Responses to 'Clean Portfolio Layout Tutorial'

Subscribe to comments with RSS or TrackBack to 'Clean Portfolio Layout Tutorial'.

  1. Sunite said,

    on November 28th, 2007 at 3:07 pm

    WOw Nice man cool :D

  2. Daniel said,

    on January 30th, 2008 at 2:08 am

    Good one

    Regards Daniel


  3. on June 7th, 2008 at 4:09 pm

    Pretty basic, but usefull for those who want to learn how to use gradients :)

Leave a Comment