Line25

Create a Stylish Portfolio Site Design in Photoshop

Read the full post

This first of a two part tutorial series will go through the process of building a simple and stylish portfolio website design. We’ll begin by designing the concept in Photoshop and fleshing out every little detail before cutting up the design and building it all into a working website next week.

Design portfolio concept

The design we’ll be building is a simple single page website that’s made up of basic header with a short introductory sentence, a series of portfolio items each with a title and description, then the page ends with a stylish contact form in the footer. The idea for the portfolio items is to show the letterbox style thumbnail, then use some jQuery magic on the finished site to expand the letterbox to show the whole graphic, but you’ll have to wait until next week for that!

View the portfolio design concept

Begin by opening up Photoshop. I tend to create document that resembles a typical screen resolution of around 1680px width. Fill the background of the document with a base colour, such as a mid-blue.

Textures help give a tactile and realistic feel to a website design. Use the Noise (Filter > Noise > Add Noise) filter to add a subtle 2.5% amount of noise texture to the background.

We’ll also add a cool grid like repeating pattern to the design for a touch of visual interest. Create a new 24x24px document and draw a grid outline as shown with the Pencil tool. Go to Edit > Define Pattern to save this swatch into the pattern palette.

Fill a new layer with the recently created pattern swatch, then change the blending mode to Multiply and lower the opacity to tone down the effect so it subtly blends into the background.

Go to Edit > Select All, then right click on the selection and choose Transform Selection. In Photoshop’s top toolbar, right click and change the units in the width(W) box to Pixels and change the size to 760px. Drag out guides to each edge and the centre of this selection.
Begin creating an introductory header by typing out the title of the portfolio. Use a subtle Drop Shadow to lift the text from the design. Then plan here is to use CSS image replacement to render the title, so the non-web font of News Gothic is used.

Draw a long thin rectangle to form the base of the title ribbon. Use the Polygonal Lasso tool to clip out triangular selections from each end.

Add a Gradient Overlay to fill the ribbon with dark to light green tones running vertically, then manually add a thin highlight across the top edge on a new layer. Fill this highlight selection with white and change the blending mode to Soft Light.

Use some Photoshop brushes to paint in some subtle textures over the ribbon to add realism and authenticity. This Subtle Brush Set from Function does the job perfectly.

Load the selection of the ribbon layer by CMD+Clicking on the layer’s thumbnail. Inverse the selection (CMD+Shift+I) then delete out the excess from the texture overlay layer. Change the texture layer to Overlay at 7% to tone down the effect until it’s barely visible.

Add a Drop Shadow layer style to the ribbon layer, then in the layers palette right click the effect and select Create Layers. This will convert the Drop Shadow into a layer of its own, which can then be manipulated with the Warp tool. Press CMD+T to Transform, then right click and select Warp. Bend the outer edges downwards to give the impression of depth and three dimensions with clever shading. Reduce the opacity of the shadow layer to tone down the effect.

Finish off the ribbon by typing out your name. Here I’m still using the News Gothic font, along with a subtle Drop Shadow. A couple of star graphics were quickly imported from Adobe Illustrator to finish off the header.

The introductory sentence is nothing more than text with a subtle drop shadow. The Helvetica font is certainly web safe, and the shadow can be replicated with CSS3 so this section will be coded manually in the final design. Mock up the text in Photoshop to plan out the alignment and line height.

Paste in the first of your portfolio pieces and scale it to fit the width of the design. Remember to hold the Shift key while scaling to keep the angles constrained.

The idea for these portfolio items is for them to expand to show the full graphic on hover as a little touch of fancyness. This can be replicated in the Photoshop document with a quick layer mask, which will show the narrow version while keep the original intact.

Use a duplicate of the top ribbon banner to create a smaller sub-heading. Clip off the edge on the left side and add an extra highlight line, then type out a brief description of the portfolio item in Helvetica. Match the line height to the subtle grid background.

Fill out the concept with a few more portfolio items. If you’re following this tutorial to create your own portfolio you might want to include a few more design samples, but the key is to show a fairly small number of items that show your best work.

Paste in another little star graphic to signify the end of the portfolio section. Blend this into the design with a few Layer Styles. A Color Overlay using a slightly darker shade of the background and an Inner Shadow create a cool inset appearance.

Use the same text styling as the introductory sentence to create a closing message, then lay out the contact form fields and labels with basic white graphics. Use the guides to keep everything aligned.

Add a Gradient Overlay and Stroke layer style to blend the form fields into the theme of the design. A dark to light vertical gradient can help create subtle shading on the input fields to give an inset appearance.

Use a copy of the banner graphic to create a submit button. Clip off the ribbon type ends and follow the highlight onto the edges to form a typical button graphic.

Design portfolio concept

Take a step back to check over the design and tweak the details. The design concept is all ready for chopping and coding up into a working website. Come back next week when we’ll cover the HTML and CSS aspects, and get those fancy image hovers working with some progressively enhanced jQuery.

View the portfolio design concept

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

28 Comments

  1. Sait says:

    Nice tutorial, thanks

  2. Emiliano says:

    very nice post. Thank you

  3. ksin303 says:

    Ahh, it's the "noise" you guys make those stunning backgrounds with… I never had the time to analyze them, now i have the answer! Thank you!

  4. rada says:

    Excellent tutorial. I tried a few times to build web site in PS, but never was successful. Now I know that I can do it! Thanks a lot and best wishes :)

  5. Red says:

    Very nice, I love the concept!

  6. Krishna says:

    Excellent Tutorial..!
    Hope u make a tutorial on creating a website or a Blog with customized design !!
    Thank You..!!

  7. Bryan Abad says:

    I saw it on Dribbble (invite me me me!!!!)
    And it was awesome, absolutly awesome. I really love the header.
    Thanks!

  8. great concept. awesome tutorial. really loved it.

    Thanks for sharing!!!!

  9. IllMakeItshine says:

    Excellent tutorial Chris, thank you… Again :)

  10. Photoshop really does seem to be the way to go for websites. This is a great tutorial. Thanks!

  11. Eko S says:

    I like the layout, simple design but beautiful.
    Thanks for share the tutorial

  12. byme says:

    wow nice layout brother.

    simple and make me style this layout with css. thanks you brother.

  13. Mike says:

    Great tutorial, some good tips and hints, I like the end result, looks professional without looking corporate!

  14. Idraki M. says:

    Man, nice piece. But I hope the part 2 tutorial will include the slicing parts. Sometimes there's some part I don't know how to slice them. :P

  15. Mits says:

    Chris, did you do any planning and sketching with pen and paper before you started the mock-up in Photoshop? Or did you just open Photoshop and create it? Awesome by the way

  16. Sajan says:

    Hello Chris, love your tutorial. It's awesome

  17. Adie says:

    This is a cracking simplistic design Chris.
    This style of portfolio page you have created here would work great with a JQuery script such as ScrollTo (If you wanted to add a little more content on a single page, such as an about section or more examples of work that is)

  18. saqib sarwar says:

    Nice share Chris

    I am just missing demo link or button for each portfolio item.

    I think it might be even better if you could have given portfolio images little shadow on both edges like your title banner.

    well, these are just my thoughts …

  19. Simon Hall says:

    Superb work Chris. Do you want a job?

  20. I like the drop shadow effect on the header, thanks, great tuts :D

  21. Sean says:

    This is really great, will there be a coded part to follow?

  22. Tina Ta says:

    Very nice, thanks, it helps me a lot with my website!

  23. Robert says:

    Great tutorial!

  24. Ronald H says:

    Amazing stuff.

  25. Jon says:

    Hi Chris,
    Another awesome tutorial.. I have one question… when you make the document you make 1680px wide, how long is the page you created? or does it go on how many projects you choose to include?

    Thanks

    Jon

  26. Hans says:

    It's not very often you find a tutorial that shows you both photoshop and html/css at the same time. Keep up the good work!

  27. $LYNCH says:

    very excellent tutorial………

    Chris Spooner haha classic

  28. dreamincolor says:

    Very good work!
    Here is a Single-Page Portfolio very cool too take a look: http://www.dreamincoloronline.com/design-code-cool-single-page-portfolio-part1/

Comments are now closed