Portfolio Layout #4

Posted On April 20th, 2008 In Photoshop Tutorials

Portfolio Layout #4

1 Star2 Stars3 Stars4 Stars5 Stars37 Votes, Rating: 4.41
Loading ... Loading ...

Create a new document 900×800, fill your background layer with a linear gradient using the colors #1f1f1f & #000000. Create a new layer above your background layer and label it “pattern” Create a new document 4×4pixels with a transparent background. Select the pencil tool with a 1pixel brush size. Zoom in 1600% and create these markings.

Now goto “edit > define pattern” save your pattern and return back to your orginal canvas. Select the fill tool, then at the top change from “forground” to “pattern”, select your pattern in the box next to this option. Fill your “pattern” layer with your pattern.

Now select the rectangle marquee tool and draw a rectangle the whole length of the canvas but only about 70 or so pixels wide. Fill with a linear gradient using light grey. Add this drop shadow.

Now over the top of this rectangle create another smaller rectangle using the colors #fe1176 & #ff056c and the linear gradient tool. Also add your portfolio text.

Now select the rounded rectangle tool, at the top of the canvas create a small naviagtion bar, add these layer styles to your naviagtion.

You should have something like this.

Now using the rectangle and circle marquee tools and the layer mask tool add two highlights over the naviagtion. Would also be a good time to add our naviagtion text.

Now select the rounded rectangle tool and create a box under your navigation box, add the same layers styles as your navigation.

Now add your content box title. The colors i used were white, #8fc101 and #ff066d.

Now duplicate the pink and green text, right click the duplicated layer and goto “rasterize”. Drag your duplicated layer underneath your orginal layer then goto “edit > transform > flip vertically”. Place the text underneath so it resembles a reflection. Add a layer mask and drag a linear gradient over the top.

Now add your content box content.

Repeat the above steps for every other content box you create.

You should have something similar to this.

You may download this layout as a “PSD” or “FULL CSS TEMPLATE” by using the buttons at the top of this page.

Stay Connected...

Subscribe Via RSS

Subscribe Via RSS

Subscribe Via Twitter

Subscribe Via Twitter

Subscribe Via E-Mail

Subscribe Via E-Mail

40 Responses to “Portfolio Layout #4”

  1. Lol Says:

    Lol the side bar says ‘Carenter’ instead of ‘Carpenter’ :D

  2. ADMIN Says:

    haha well spotted

  3. Bart a.k.a. O2TX Says:

    Nice tut thanks! But how do edited this online / how do you use it? Thanks for the andswer in advanced!

    Grtz

  4. ADMIN Says:

    well you can download the CSS template, just click “download css” button at the top, OR download PSD if you want to code it yourself

  5. Bart a.k.a. O2TX Says:

    Thanks for the replie! But is there a tutorial for a program to learn it? thanks agian for your andswer!

    Grtz

  6. ADMIN Says:

    well all’s you need to know is CSS and html, learn those 1st and your onto a winner. the program id recommend is dreamweaver. but you’l need some coding knowledge to code the layout. there is a tutorial on my site using my car layout as an example check the “CSS/HTML” category

  7. Abid Says:

    WOW thanks

  8. Bart a.k.a. O2TX Says:

    Thanks agian! I will give it a go!

    Grtz

  9. mark Says:

    great tutorial. thanks. :)

  10. chricke Says:

    What’s the name of FONT?

  11. ADMIN Says:

    “shoom vertical”

    its included in the PSD

  12. chricke Says:

    I know. But I dont want to bought it. Cause I’m not in trust with buying things on the web. Sorry.

    But really nice and good tutorials over all.

  13. ADMIN Says:

    well i can assure you no information is collected of you and all payments are dealth throu paypal.

  14. Shaibani Says:

    Hey,

    Nice tutorial!!! REALLY NICE!!! But what font did you use for the nav???

  15. aziz Says:

    hello
    i need some one do to me web site Design for me
    thanks

  16. Zargam Says:

    Well…That was CooL…n does it fall under the web 2.0 design categoryy???

  17. Vegas Underground Says:

    I tried this out and added my own tweaks to the layout, thanks for the inspiration, I had a pretty nasty case of creative block! Look for a preview on my deviant art page later.

  18. Vegas Underground Says:

    Ive managed to create something of this! Such a fantastic tutorial, really helped me break free from my creative block! My version of this tutorial can be seen here, thanks so much!!!

    Link below

    http://vegas-underground.deviantart.com/art/Portfolio-Layout-Updated-87442155

  19. Matthew Says:

    I love this. What font did you use I absolutely LOVE it!

  20. Matthew Says:

    wow. I’m too lazy to read the comments where you answered “shoom vertical”. :(

    Awesome tutorial though. :)

  21. mj Says:

    THANKS A LOT!

  22. Tamica Says:

    thanks a lost!

  23. Sebastian Says:

    WOW
    Thanks for this amazing tut =)

  24. wicked Says:

    Amazing Tutorial.. tnx…

  25. Jake Says:

    What font did you use for the bar at the top and the bar at the side?
    i really want those fonts if you could say that would be great!

  26. Jake Says:

    Also what font size do you use for the side bar, top bar and the information writing?

  27. ADMIN Says:

    font is

    “shoom vertical”

    as in my last couple of comments, i cant remember the text size.

  28. Jelle Says:

    Hello,

    I have a question ADMIN.

    If I follow your tutorial and create this layout myself, it would not be against the law to sell it/use it/give it away, right?

    Thanks,
    Jelle

  29. Jake Says:

    Right cool, also i sent you an e-mail about myself, having a go at this, i failed misrebly, sent the e-mail to webmaster@hv-designs.com or something like that, there is a link which i would like you to look at and tell me what the hell went wrong!

    Kind regards.

    Jake

  30. ADMIN Says:

    @ jelle

    ALL WORK is licensed under a Creative Commons Attribution-No Derivative Works 2.0 UK: England & Wales License.

    you are FREE TO:
    to copy, display, and perform the work

    UNDER THE FOLLOWING CONDITIONS:
    You must give the original author credit, You may not alter, transform, or build upon this work.

    Any of these conditions can be waived if you get permission from the copyright holder.

    AND you MAY NOT sell the work.

  31. Chaska Says:

    In addition to Jelle’s question: I don’t understand the license. If I go to the library and get a book on how to sponge paint my walls and then I do it, when I sell my house I don’t have to say the author’s name of the technique on the walls.

    If I do the tutorial and I create the web template, why do I have to have your permission to sell the template on my site, and why can’t I put my own personality in addition to the “standard technique”? This is very confusing.

    Thanks from a newbie.

  32. ADMIN Says:

    You are free to sell your own template, but if its identical to mine, then your going to run into trouble.

    My tutorials teach you ways on how to create certain things. Once you’ve learned the ways then you should be able to go away and create something of your own. if you make something exactly the same as mine then you decide to sell it, then in theory your selling something that i orginally created.

    If you make this template and its exactly the same as mine and you want to use it (e.g. to use as your portfolio website), then you can. But you must give the orginal author (ME), credit.

Leave a Reply

Name:

E-Mail:

Website:

Your Reply:

Trackbacks

  1. 27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts
  2. Hidden Pixels - Website Layout Design - Photoshop Tutorials
  3. ???? » 27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts
  4. Design Ideas / Links « s3rajkarnikar’s Weblog: College HND
  5. 60 ??? Web ??????
  6. 365????? » Blog Archive » 60 ??? Web ??????
  7. 25+ Best Photoshop Web Layout Design Tutorials | Free Tutorial 4 All
  8. 50+ Best Photoshop Web Design Tutorials | Themeflash

search

Learn more about advertising with us.

write for us

Intrested in publishing some articles, tutorials or freebies on hv-designs.? We welcome anyone who is intrested, we'll even return the favour by sending you aload of goodies. Learn More

Learn more about advertising with us.

Recent Comments