One-page-folio: How to create a layout for your portfolio?

One-page-portfolio, how it is said in English. In Italian, and in practice, a website showcase for one’s portfolio which is developed in a single page, thanks to the javascript effects on call.

Some time ago while playing around on the web I stumbled on this showcase and, since then, the idea of designing and making a template on the style of those proposed never abandoned me.

Weeks after, here it is. The first free theme that we of YIW are offering to you is exactly projected for a portfolio and will be developed in a single xhtml page. A layout simple to be created and personalized yet, at the same time, is aesthetically captivating.

In the end of the article you can find the psd with all the layers but, if you are a beginner and you want to learn to work in photoshop, I advise you to roll up your sleeves and try to make this template in first person: the tutorial that follows is very clear and will guide you step by step.

3,2,1…we start!

Let’s open a document of 1680px in width and 2000 px in height. Obviously, given that we intend to compress the entire website in a single page, the latter will be considerably developed in vertical.

Even though the effect on Photoshop aesthetically is not one of the best no worries: thanks to the javascripts we are going to integrate at the moment of putting into code, the website will have a functional and captivating graphic effect.

As first thing we start positioning our guides: we know that the main container of our portfolio should not exceed the 960px, so that it can be correctly displayed with the main video resolutions.

Given that math is not an opinion, that 1680-960=720 and that 720/2=360, we know that the guides should be positioned sideways, at 360px from the edges of the document.

The basic content of our website thus should not spill from the sections delimited by the edges.

Advice: While working on the document it may happen to move the guide lines of different pixels even without being aware of it. This can lead to the website being projected with wrong dimensions and that in the phase of cutting and exporting for the code, things don’t fit. Personally I have got the habit of blocking the guides (Display >> Block guides) just positioned, so as to avoid unpleasant imprecisions.

Let’s assign a light shade to our background layer: double click on the layer to unblock it and to open the window of the layer styles.

Select “Shade overlay” and create a shade from light grey (#eaeaea) to white (#fff). The shade has a radial style, with an angle of – 146° and has climbed to 39%. With these settings you will have a small glare on top left, where we will place the logo.

On top we want to put a pleasant “clouded shade” effect. Let’s open a new document, of 1680px in width and 300px in height.

As a background color we choose a darker grey (#828181) and as a close-up color a lighter grey (#d8d8d8).

We select Filter >> Rendering >>Clouds. You should have a similar result:

Then we click on Filter >> Disturb >> Ocean ripple and we set a ripple size of 7 and a width of 14.

Your document should look like this:

To finish, we click on Filter >> Out of focus >> Movement effect. Select as you wish angle and distance: in our case we have set an angle of 90° and a distance of 312px.

The result is this:

Now we import this document in the document of our portfolio and we position it at the top. We lower a bit the opacity (70%) and with the rubber tool set as faded brush we cancel a little the edges, to avoid that the gap between this image and the grey of the background layer can be easily noticed.

This is how our portfolio will appear now:

The logo

We position the logo on top left, to start giving a form to the layout

As you can see, I have already delimited with a guide what will be the left section of our layout: In this section, large 250px, we will insert logo, navigation menu, information on copyright. In the right section instead we will design the pages of the website.

Let’s proceed in order.

The navigation links

Below the logo we insert the items of our menu. We start with the requirement that our website will contain 4 standard pages: Home page, About, Portfolio, Contacts.

For the menu (and for all other layout scripts) we have chosen the dustismo font: totally legible, simple and attractive. In grey (#7d7c7c) non-active links, in red (#b03a2e) the current link.

The Home page

Now we design our homepage. I was thinking of something simple: a cute writing of rather big dimensions, to trace the “Welcome!” style which is so en vogue at the moment. And maybe the text framed in a more original way, and not simply written on the background.

What do you say about something like that?

I’d say that here we are at last! I have used a white balloon comics style to frame the text, and to give a little bit of color and at the same time I have colored some words in red to grasp the attention on the most important concepts of our activity.

The About page

Now, on the same style, we design the page about also. We duplicate the balloon (right key >> duplicate level), we mirror it (Modify >> Transform >> Horizontal mirror) and we color it with a full-bodied grey (#d2d1d1).

By alternating the balloons in color and direction, when the pages will scroll vertically with the javascript we will have a less dull appearance, a more lively one.

We have inserted some text inside the cloud about: who you are, what you do, your experiences, your skills…in the about page you can expose yourself and let others know about who you are and what your skills are. It might be a good idea to insert a small picture, or at the limit, a cute illustration: my cartoon has been created with Face Your Manga.

Portfolio

The portfolio page can be developed in ten different ways: we have decided to insert, always inside a balloon for graphic coherence reasons, the thumbnails of our works.

We design the thumbnails with the rounded rectangle tool.

When we put the layout into code we will make sure that, if the user clicks on one of the thumbnails, with a javascript effect the detail of a bigger image will open.

It is a simple but efficient solution, which gives a broad range to your works and enables you to insert, inside the window which opens with the javascript, a description of the work performed. But we will get back to this in another instance.

On top left we write a small catch phrase.

Our portfolio has finally taken shape.

Now inserting the images of your works in the rectangles is very simple: Open in Photoshop the image of your work and cut a section with the cutter tool, the one you consider as the most purposeful.

We set the image size (Image >>Image size) as the same size of the thumbnails, in our case 85px in height and width.

Then click on Modify >> Define Pattern and save the image as a pattern.

Return to the template, double click on the rounded rectangle in the portfolio balloon and from the layer styles window choose “Pattern Overlay”.

It is not that difficult, right? Repeat the operation for all your thumbnails, until each rectangle will contain a thumbnail of your works.

Before going on, we open a small but necessary parenthesis. Watch your layers on the right: are they chaotic, confused, with no name and logical order?

Keeping layers in order is oneof the essential aspects for working well and fast in Photoshop. Always make sure to have correctly renamed each layer you create and, when possible, gather layers in groups.

At this point, we move on to create the contact page.

The contact page

With the rectangle tool, we create rectangles for the form and the send e-mail button. We assign to the button a shade from dark grey (#cccccc) to light grey (#eeeeee) and a trace of 1px (#aeaeae).

Given that the rectangles like this are a little bit anonymous and it’s not clear which data the user has to insert in the various sections, we add some small icons and a text content for the various input data: Name, e-mail, message.

In the right section we insert some data and a little bit of text. You can put eventual contact telephone numbers, addresses, or simply urge users to contact you.

Let’s take a look at our layout, now that it’s almost complete.

We add some “energy sphere” effect to the edges, so that in monitors of a higher resolution users can see some extra graphic ornaments.

Set the brush with a rounded tip to a size of 40px, open the brush palette and choose the item “dispersion”. In this way with a single click of the brush you will apply in the document many spheres of different sizes.

Lower the opacity of the spheres until you obtain a similar effect:

In this template we have used white spheres, if you want you can experiment with colored spheres in your projects. In a few moves you can obtain very original effects.

The last touch is the adding, in the left column below the navigation link, of something which livens up the whole and which, at the same time, is useful to our layout.

We have decided to add our skype contact, a button which links the profile to twitter and another one which invites the user to write us an e-mail. Let’s see how to integrate all this in a pleasant way, and why not, even colored.

With the rectangle tool we design three rectangles of red color (#901003) and on top we write the texts of the various sections.

If we add any icons the effect is even more fascinating!

Under the skype rectangle we design another rectangle, smaller and of orange color (#ea5707). On this rectangle we write with a calligraphic font (Fabulous 50) our skype contact.

Should we take a look at our home page?

Minimal, modern, with a little bit of color here and there. Exactly the effect we wanted to achieve! Once put into code the left column of the website will remain, and to scroll vertically, with be the balloons on the right.

In this way we will have a simple but aesthetically attractive portfolio.

Nothing is left to be done but put our layout into code. Xhtml, css, javascript..you don’t know where to start from? Don’t worry, we will do it next week!

The Author

Web designer, has been working in the field of graphics and web development for six years and at the moment besides collaborating with a web agency successfully manages her freelance activity under the name of mascara design.
Like many freelancers she is used to handling more roles, ranging from paper graphics to the development of html and css codes; nonetheless this passion of hers remains, always and however, web graphics.

Hello Sarah (what a wonderful name! )
Do you have downloaded the XHTML-CSS version of this template? In the support pdf file you can find how work the contact section. It’s easy, you have to change only the e-mail address.

The tut is kinda dificult for me also..
When I come to the 3th step, with the Gardiant-overlay (Shade-overlay), Mine galore won’t come to the top left, he stays in the middle, even if I play with the angle?!

Quick question… Anyone experiencing problems displaying the javascript in ie9? Or better again, have a solution for it?! It’s working perfectly in every other browser I’ve tested, even older versions of ie.

Hello from Stan, Liverpool uk. just completed the the web tutorial using photoshop which was very good. however i have not been able to find the follow on where i transfer the design to xhtml etc, i notice other users have had a similar problem, is there a solution to this. look forward to you reply.

Hello again from Stan Liverpool.uk, further to my comment on Feb 10th…
I notice on a reply from Sarah on April 2, 2010 at 8:05 am. that the psd to xhtml tutorial has not been carried out. What a shame, When can we expect this to take place. look forward to your kindly reply.. Regards Stan

Hello, thanks for this work of yours, I find this a great template I will give credits for you because I am using this as my work, but I have a question hope you can have some advice: I copy the whole code for the gallery but when i launched it, it is not the same like the other one because i see a loading images in the copy, that is my only problem, I hope you can help me… Thank you so much