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.
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 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.
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!
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).
*****************************************
L'immagine principale dell'articolo è stata fornita da @Fotolia
The Author
Related Posts
You may be interested in the following articles:
32 comments
Trackback e pingback
-
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 ... -
60 Web Design Photoshop Layout Tutorials From 2010 - Programming Blog
[...] 49. How to Create a Layout For Your One-Page Portfolio? [...] -
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 ... -
20+ Free Portfolio Templates, Themes And PSDs :: Graficznie
[...] is also a tutorial provided on the design process of the [...] -
60 Photoshop Web Design Dersi |
[...] 49. How to Create a Layout For Your One-Page Portfolio? [...] -
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 ...
Awesome tutorial
Thanks so much for posting & sharing it
Very nice detail tutorial with nice tricks
I learn a lot for this
Keep educating us
God bless you
Hi Tirath, welcome to YIW and thanks for your kind comment.
Thanks for the tutorial sarah!
Hi Imon, welcome to YIW. I hope you enjoy the freebies: the psd file and the xhtml+css version of this template
Cheers,
S.
Hello! Thank you for this tutorial. This is so great for a beginner like me…however, how do you make the contact section work? Would love to know..thank you.
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.
I’ve one qest; What number of cs you use? 3 or 4? bcs, maybe i’m dark but i cannot find rubber tool. Now, your tut is very difficult for me.
Thanks a lot.
Mag
Hi Mag. I use italian cs3 version, i’m sorry that this tut it’s not easy for you. Here you can find one screenshot of rubber tool: i hope you understand.
ohh yeah, thanks once more.
You’re welcome
Hello Sarah,
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?!
Hi Fatih, welcome to YIW.
When you open the the Layer Styles window, dragging with the mouse you can move the shade and put you where you want it, it’s really easy, try
Hi me again,
I dont know what you are using but mine photoshop got no such thing as: Filter >> Out of focus >> Movement effect
Hi, have a patience, please
Now I am out for work. When I return i link you a screenshot, maybe our translator did not translate well in english. See you at April, 12..thanks!
Can you say “sweetness” I love it. When are you going to put our layout into code tutorial? Keep up the good work.
Hi Bobby, welcome to YIW and thanks for your kind comment.
For the moment we don’t put the psd to xhtml tutorial.
But maybe, in the future…
Very good ideas there!
Don’t forget to include this great Single-Page Portfolio http://www.dreamincoloronline.com/design-code-cool-single-page-portfolio-part2/
Hi Sarah.. Your work is simply fun~tastic and truly worth an attribution! YIW is the place that everyone should look for! Thanks for this great tutorial..
Regards..
Sam..
Its not working in Google Chrome… Can any one suggest me..
Hi! thank you for the great tutorial! I can’t find in the site, the tutorial to put this layout into code, Xhtml, css, javascript. Is there a tutorial for this?
I design this layout with my logotype, but I dont know how to transform this into a web page.
Thank you!
Thanks for this!
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.
Cheers,
Fonz
Hi Fonz,
I actually just sent Sarah a comment regarding a similar issue…the icon images in the portfolio section are broken for me, but everything else is fine. I hope this is an easy fix.
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
Hi Sarah, this is a great tutorial, I have to design a website on photoshop for a class I have so this is fun. I was wondering thought where you found the balloon comics style to frame the words.
Thanks,
Deborah
Hey, do you have the tutorial on how to put everything together in Dreamweaver? Like how to layout and add in coding? Would appreciate it.