Subscribe Via RSS

3174 Subscribers

Subscribe Via RSS
Subscribe Via Twitter

Followers

Subscribe Via Twitter
Portfolio Layout #5

June 10th, 2008 in Photoshop Tutorials by Richard Carpenter

Portfolio Layout #5

1 Star2 Stars3 Stars4 Stars5 Stars51 Votes, Rating: 4.67
Loading ... Loading ...
About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of HV-Designs. You can follow me on twitter HERE. You may also view my portfolio HERE.

 

Richard Carpenter has written 322 posts.

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.

Be Part Of The Community!

Become part of the hv-designs community.

Subscribe Via RSS or Follow Us On Twitter.

Subscribe Via RSS Follow Us On Twitter

40 Responses to “Portfolio Layout #5”

  1. Momo says:

    :)

  2. Rhys says:

    damn nice =]

  3. Great tutorial!

    Your tutorials are under any tipe of license?

    Or we can use it for any purposes (excepted selling the template)

    David Carreira

  4. Dule says:

    This is awesome! I give you 10 outta 10!

  5. ADMIN says:

    This work is licenced under a Creative Commons Licence

    check the website footer ;)

    thx for the comments

  6. Tadd says:

    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!

  7. ADMIN says:

    CSS template now added

  8. @ 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

  9. ADMIN says:

    do a reference to my tutorial (or site) in the about page! as long as my link is somewhere on the site.

    ;)

  10. @ Admin:

    Ok, continue with your great tutorials, the people thanks ;)

    David Carreira

  11. Simply Aweosome.

  12. KSandra says:

    great tutorial, thank you very much!

  13. Lauren says:

    Thanks for this tutorial! It was really helpful. I am just starting out and it was really helpful for me!!

  14. Derick says:

    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

  15. ADMIN says:

    have you downloaded the PSD?

  16. Derick says:

    Oh I see thanks!

  17. sumit says:

    Just perfect

  18. Very Nice

  19. Sraddha says:

    Good work, keep it up…
    thnx for this amazing tutorial

  20. cicekci says:

    internet üzerinden çiçek sipari?i çiçekçi çiçekçiler.

  21. chuka says:

    killer font…what’s the name?

  22. vic says:

    if you buy it then can you us it or what

  23. ADMIN says:

    course you can providing a link back to my site is placed somewhere on the page

  24. Alex Kim says:

    This is very nice design, and thank you for your time to make tutorial. Really learn alot from this.

    Alex,

  25. Devan says:

    Veri nuys

  26. kapil says:

    usual thing only… nothing new….. but a very effective tutorial for beginers

  27. 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?

  28. 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).

  29. Amazing result. Nice work!

  30. Rachid says:

    easy an simple. very nice work, bravo !!

  31. mikey says:

    if i make my own site off this tutorial can i sell it? or maybe something kinda similar?

  32. @mikey,

    no you cann out replicate this layout and sell it. but you are free to use the effects used in this tutorial.

Leave a Reply