How to design a layout in vintage style? tutorial and psd
Two weeks ago we analyzed the features of the vintage style in web design and we gathered plenty of resources and inspiration for creating our layout in this style. Thus, today we are going to design a simple homepage in vintage style for a business which sells/rents classic cars. Are you ready?
As usual we open a new document in Photoshop, 1680px in width and 1050px in height. We position the directories at 360px from the edges, so that we have our usual section of 960px within which we are going to enclose the home page of the website.
As we saw, one of the peculiarities which distinguishes many of the layouts in vintage style is the use of patterns and paper, old postcard and newspaper background effects. While browsing on some free resource websites (Deviant Art, for example), we were able to recover some resources which will definitively be useful during the design of our layout.
First of all we have two different cardboard textures:
Then a strip of paper with a paper-clip:
Another strip with “t0rn” effect along the edge:
And finally a polaroid:
We equip ourselves also with some pin up images and some vintage – retrò brushes (in the previous article you can find the links of many similar resources). Once all the material is prepared, we start creating the homepage.
First step: preparing the background
First of all with the rectangle instrument we create a central section of the website, 960px in width and 1050px in height. We open the lighter paper effect texture in a new document and transform it into a pattern (Modify >> Define pattern). Once done that we return to the main document, open the window of the layer styles of the designed rectangle (enough double clicking on layer) and from the item “pattern overlay” we assign the paper pattern once saved in the rectangle.
We follow the same procedure with the other paper texture: we open it in a new document, save it as a pattern and, in the main document, assign it as a pattern to the background layers (layer 0r, if still blocked enough double clicking with the mouse):
As you can see in order to bring out the container we have assigned it a little lateral shading; the background of our home page is practically ready.
Second step: logo and navigation menu
We take our “torn paper” effect image, slightly rotate it anti-clockwise (Modify >> Transform >> Rotate) and we position it aloft, as shown in the following image:
We select the form instrument, then choose a full sphere and design a circle in red (#c41004): this will be the background of our logo. We write the logo with a proper font (Vintage has been written with the “Candice” font, Car & Moto with the “Eccentric” font) and with a light color, in our case a cream color (#fef0b6). The result should be the following:
We insert the navigation items on the right of the logo, using even in this case a beautiful font in retro style: the Diehl Deco.
Third step: the header, the images of products
Now we want to create a header, putting in the foreground some images of our products (in our case classic cars & such). We have to pay attention to set a graphics pertaining to the layout we are about to design, using the same style even for this very important section, which will attract the attention of the user immediately.
I have often seen well-realized grunge or vintage layouts but with a slider in modern style in the header, or a non-personalized contact module (with a white standard form), and the result is really anti-aesthetic. In our case we are going to use the polaroid we saw previously and, in order to recall the vintage style of the layout, we will make use of the fusion methods.
I’m thinking of writing an in-depth article regarding the fusion methods of Photoshop (what are they and how they work), since they allow you to create, in a few steps, remarkable graphic effects. Meanwhile, I’m going to limit myself into explaining what I have done in the making of this layout, else this article would get way too long.
We import the polaroid in our document and we slightly re-size it:
As you can see the polaroid has white adornments and, besides, has got a grey color which doesn’t match our graphics. By using the layer methods we fuse the polaroid image with the background layer and thus rendering it closer to our chromatic tonalities, eliminating at the same time all the white background of the image.
From all the fusion methods available the most appropriate for our scopes is the “color burn”, as you can notice in the following image:
At this point we duplicate the polaroid layer, set smaller dimensions compared to the previous one and repeat the procedure with fusion methods, so that we have two boxes next to each other where we can insert our pictures.
We insert the pictures inside the polaroids:
And with the pleasant font (Little days) we write two captions below:
Finally, in order to graphically enrich this section, we design a classic car under the polaroid:
Fourth step: the lateral menu with the contact data
Let’s suppose we want to create, on the right, a section with the contact data and the address of the business. Something that is useful and, which at the same, enriches the aesthetics of our home page. We import in the document the image of the paper strip with the staple, as shown in the following image:
Obviously, even in this case it is necessary to work on the fusion methods to make sure that the element perfectly merges in our graphics. By setting the fusion on the method “linear burn” the result should appear like this:
Now, by means of the rectangle instrument, we create three rectangles (#79531e) above the background just created, making sure they are slightly asymmetrical between them:
You must surely be thinking: “but this color got nothing to do with the layout, it’s awful!”: you’re 100% right, that’s why we have to work again with the fusion methods, in order to transform that olive green into a more appropriate color for the aesthetics of our homepage.
By setting the fusion method of single rectangles t0 “Color burn” the result is the following:
A great effect, right? Now in the external section of the rectangle we are going to write the contact fields (e-mail, telephone, address), in the internal section (the darker one), we are going to insert the data out-and-out, using a more legible font (in this case our beloved Georgia).
A great and original way to insert our data and integrate them to the fullest into the graphics we just designed, don’t you think so?
Fifth step: the inferior section and contents
Now there’s nothing left but insert the text content of our homepage:
On the right, in order to give a touch of color, we insert the image of a pin-up (pertaining to our activity given that on the background image there’s a vespa):
The last touch? With a portion of the same paper effect used on top, we create two small boxes at the bottom, for the copyright it’s an invitation to ask for a free preventive. In this way we will have a small graphic footer where we can insert the contact data, the VAT number, or something else.
Our layout has been completed: let’s take a look!
In a few steps we have designed a layout in vintage style, extremely graphic but, at the same time, simple and clear. In the next article of this column we are going to analyze the features of another wonderful design style: the magazine style. Do not miss it!
Pubblicato: 23 May 2010
Dimensione: 5.51 MB
Other articles in our guide:
- Styles in webdesign: the features of corporate/business layout | How to create a corporate style website?
- Styles in webdesign: the features of a grunge layout | How to create a grunge style layout?
- Styles in webdesign: the features of a web 2.0 layout | How to create a web 2.0 style layout?
- Styles in webdesign: the features of a vintage layout | How to create a vintage style layout?
- Styles in webdesign: the features of a magazine layout |
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 »