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

UPDATE: We have released for free an XHTML/CSS version of this template. Download it now!

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.

001

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.

002

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.

003

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.

004

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:

005

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:

006

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:

007

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:

008

The logo

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

009

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.

10

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?

11

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).

12

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.

1314

1314b

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.

slogan

Our portfolio has finally taken shape.

14

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.

taglierina

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”.

thumb

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?

15

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.

16

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).

contatti

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.

iconecontact

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.

contatti2

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

17

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.

dispersione

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

18

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.

19

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

20

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.

21

Should we take a look at our home page?

22

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!

Thus, you’ll have a free original and creative template for your portfolio, in xhtml and css. Download it now!

download
Versione: 1.0
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).

Master per Web Designer Freelance
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 »
[pdf]Scarica articolo in PDF[/pdf]
Tags: , , ,

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.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

35 comments

  1. Tirath
  2. sarah
  3. Mag
  4. Mag
  5. Fatih
  6. Fatih
  7. Bobby
  8. Sam
  9. Val
    • Christina
  10. Deborah
  11. Michelle
  12. Friv
  13. friv

Trackback e pingback

  1. uberVU - social comments
    Social comments and analytics for this post... This post was mentioned on Twitter by SergioArantes: One-page-folio: How to create a layout …
  2. 60 Web Design Photoshop Layout Tutorials From 2010 - Programming Blog
    [...] 49. How to Create a Layout For Your One-Page Portfolio? [...]
  3. Over 10 free portfolio themes, templates and psd files | webozaurus.com | from dinosaurs to web age - programming, seo and more
    [...] has an integrated Lightbox to display images  zoom and an ajax contact form. There is also a tutorial on the design process …
  4. 20+ Free Portfolio Templates, Themes And PSDs :: Graficznie
    [...] is also a tutorial provided on the design process of the [...]
  5. 60 Photoshop Web Design Dersi |
    [...] 49. How to Create a Layout For Your One-Page Portfolio? [...]
  6. Free website template: present your portfolio online in a single webpage | Your Inspiration Web
    [...] demonstrating to you, step by step, how to design it in Photoshop, we have codified the graphic layout and …

Leave a Reply

Current day month ye@r *