One-page-folio: How to create a layout for your portfolio?
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.
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.
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:
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).
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.
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.
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 one of 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.
Pubblicato: 07 December 2009
Dimensione: 5.8 MB
Download: Your Inspiration Folio
*Please bear in mind that the downloadable files in this article are released under Licenza Creative Common (CC 2.5 Attribuzione Italia).
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »