Portfolio Layout #5

Create a new document 850 x 800, create your own wood texture or use a premade one and add that as your background, im going to use a premade one (included in PSD download).

Select the rectangular marquee tool and create a rectangle the width of your canvas, leaving about 10 or 15 pixels from the top.

Add these layer styles to your rectangle.

You should have something like this.

Create another rectangle on a new layer the same width as the last one but not has high. Fill with the color #199ad1.

Add your website title, then add a shine on the header using the elliptical marquee tool set layer opacity of your shine to 7%.

The layer styles for the website text are.

Select the rounded rectangle tool and create a small rectangle underneath your website header.

Fill with the color black then add these layer styles.

Now add your navigation text and simple outer glow.

Now select the rectangular marquee tool and create a big white square like this.

With the lasso tool randomly cut off the edges to give the effect of ripped paper.

Do this for TWO rectangles, also rotate then squares slighly by press “ctrl + T”.

Create a third rectangle but dont cut around it. Add these layer styles.

Also add the above “drop shadow” to the other 2 peices of paper. Now add your content onto the main square.

Now go and find a picture of some stationary such as scissors, ruler, pencil etc.. (ive added some in the PSD), remove the background from the items and place around your main content area.

30 thoughts on “Portfolio Layout #5”

  1. Lovely. VERY nice. Funny thing .. I’m using this texture as my desktop wallpaper this very moment!

    I gave you a shout out on a previous tutorial .. I may do the same for this one also! Well done!

  2. @ Admin:

    “- Attribution. You must give the original author credit.

    – Non-Commercial. You may not use this work for commercial purposes.

    – No Derivative Works. You may not alter, transform, or build upon this work.”

    If I’ll do a template based in this tutorial, the final result is not a 100% of your work, so I must do a copyright footer with your link, or can only do a reference to your tutorial (or site) in the about page?

    I’m not using any tutorial to do my work, but anyway, maybe a day I want to use one to get a great result.

    😉 Hv-Designs, Great Tutorials!

    David Carreira

  3. Pingback: Tutorial
  4. Thanks for this tutorial! It was really helpful. I am just starting out and it was really helpful for me!!

  5. This is a great tutorial, but I had one problem,
    I could not find the wood texture.
    Where is it located?

    Thanks for your help

  6. OK. I went through these steps in Photoshop and they were quiet helpful. Got a pretty nice setup. Now I need help getting this split up to CSS/HTML format. What’s a good tutorial site to get help on exporting PSD to HTML/CSS?

  7. Never mind. I figured it out a while ago.

    Once I got everything into dreamweaver, it was a lot more complex than I imagined to enter text over images. Thought it was going to be as simple as clicking a mouse and a tapping of the keyboard in a split second. LOL. Boy was I wrong. I’m slowly getting it. Check out what I got so far at bushisfat.com. Eventually going to move this over to my name once I’m all done (and yes, I will reference you). I’m not a graphic designer, simply just want to get my resume out there. I do IT work (desktop support).

Leave a Reply

Your email address will not be published. Required fields are marked *