Add to Flipboard Magazine.
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.
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!
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.
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.