Come disegnare un layout in stile vintage? tutorial e psd
Due settimane fa abbiamo analizzato le caratteristiche dello stile vintage nel web design e abbiamo raccolto un sacco di risorse e di ispirazione per realizzare il nostro layout in questo stile. Oggi disegneremo quindi una home page semplice e in stile vintage per un’attività che vende/noleggia autoveicoli d’epoca. Sei pronto?
Come di consueto apriamo un nuovo documento in Photoshop, largo 1680px e alto 1050px. Posizioniamo le guide a 360px dai bordi, in modo di avere la nostra solita sezione di 960px entro cui racchiuderemo la home page del sito.
Come abbiamo visto, una delle peculiarità che contraddistingue molti dei layout in stile vintage è l’utilizzo di pattern e background effetto carta, vecchie cartoline e giornali. Girovagando su alcuni siti di risorse gratuite (Deviant Art, per esempio), siamo riusciti a recuperare alcune risorse che ci torneranno certamente utili durante il disegno del nostro layout.
Prima di tutto abbiamo due diverse texture di cartone:
Poi una striscia di carta con una clip:
Un’altra striscia con effetto “strappo” lungo il bordo:
E infine una polaroid:
Ci muniamo anche di alcune immagini di pin up e di alcune brush vintage – retrò (nell’articolo precedente puoi trovare i link di moltissime risorse simili). Una volta preparato tutto il materiale, cominciamo a realizzare la home page.
Primo step: prepariamo il background
Prima di tutto con lo strumento rettangolo creiamo la sezione centrale del sito, larga 960px e alta 1050px. In nuovo documento apriamo la texture effetto carta più chiara e trasformiamola in un pattern (Modifica >> Definisci pattern). Fatto questo torniamo al documento principale, apriamo la finestra degli stili di livello del rettangolo disegnato (basta fare doppio click sul livello) e dalla voce “ sovrapposizione pattern” assegniamo il pattern carta appena salvato al rettangolo.
Seguiamo lo stesso procedimento con l’altra texture carta: apriamola in un nuovo documento, salviamola come pattern e, nel documento principale, assegniamola come pattern al livello di background (livello 0, se ancora bloccato basta cliccare due volte con il mouse):
Come puoi vedere per far risaltare il container gli abbiamo assegnato una piccola ombreggiatura laterale; il background della nostra home page è praticamente pronto.
Secondo step: logo e menù di navigazione
Prendiamo la nostra immagine effetto “carta strappata”, la ruotiamo leggermente in senso antiorario (Modifica >> Trasforma >> Ruota) e la posizioniamo in alto, come mostrato nella seguente immagine:
Selezioniamo lo strumento forma, scegliamo una sfera piena e disegniamo un cerchio di colore rosso (#c41004): questo sarà lo sfondo del nostro logo. Scriviamo il logo con un font adatto (Vintage e’ stato scritto con il font “Candice”, Car & Moto con il font “Eccentric”) e con un colore chiaro, nel nostro caso un colore crema (#fef0b6). Il risultato dovrebbe essere il seguente:
A destra del logo inseriamo le voci della navigazione, utilizzando anche in questo caso un bellissimo font in stile retrò: il Diehl Deco.
Terzo step: la testata, le immagini dei prodotti
Adesso vogliamo realizzare una testata, mettendo in primo piano alcune immagini dei nostri prodotti (nel nostro caso macchine d’epoca & simili). Dobbiamo stare attenti a impostare una grafica attinente al layout che stiamo realizzando, utilizzando lo stesso stile anche per questa importantissima sezione, che attirerà l’attenzione dell’utente in modo immediato.
Ho visto spesso layout grunge o vintage ben realizzati ma con uno slider in stile moderno in testata, o un modulo contatti non personalizzato (con il form bianco, standard), e l’effetto è veramente antiestetico. Nel nostro caso utilizzeremo la polaroid che abbiamo visto in precedenza e, per richiamare lo stile vintage del layout, ci serviremo dei metodi di fusione.
Ho intenzione di realizzare un articolo di approfondimento su cosa sono e come lavorano i metodi di fusione di Photoshop, poiché permettono di realizzare, in pochi passi, degli effetti grafici veramente notevoli. Intanto mi limiterò a spiegare che cosa ho fatto nella realizzazione di questo layout, altrimenti questo articolo si dilungherebbe troppo.
Importiamo la polaroid nel nostro documento e la ridimensioniamo leggermente:
Come puoi vedere la polaroid ha delle smarginature bianche e, inoltre, ha un colore grigio che poco si adatta alla nostra grafica. Utilizziamo i metodi di livello per fondere l’immagine della polaroid con il livello di sfondo e renderla quindi più vicina alle nostre tonalità cromatiche, eliminando allo stesso tempo tutto il background bianco dell’immagine.
Fra tutti i metodi di fusione disponibili quello piu adatto ai nostri scopi è il “colore brucia”, come puoi vedere dalla seguente immagine:
A questo punto duplichiamo il livello della polaroid, ne impostiamo le dimensioni un po’ più piccole della precedente e replichiamo il procedimento con i metodi di fusione, per avere due box uno accanto all’altro dove poter inserire le nostre foto.
Inseriamo le foto all’interno delle polaroid:
E con un font grazioso (Little days) scriviamo due didascalie sotto di esse:
Infine, per arricchire graficamente questa sezione, con una brush disegniamo una macchina d’epoca sotto le polaroid:
Quarto step: il menu laterale con i dati di contatto
Poniamo il caso di voler creare, a destra, una sezione con i dati di contatto e l’indirizzo dell’attività. Qualcosa che sia utile e, allo stesso tempo, che arricchisca l’estetica della nostra home page. Importiamo nel documento l’immagine della fascetta di carta con la spilla, come mostrato nell’immagine seguente:
Ovviamente anche in questo caso è necessario lavorare sui metodi di fusione per far si che l’elemento si fonda perfettamente nella nostra grafica. Impostando la fusione sul metodo “brucia lineare” il risultato dovrebbe apparire cosi:
Adesso, con lo strumento rettangolo, creiamo tre rettangoli (#79531e) sopra il background appena creato, facendo in modo di disegnarli leggermente asimmetrici tra di loro:
Sono certa che starai pensando: “ma questo colore non c’entra niente con il layout, è pessimo!”: hai pienamente ragione, per questo andremo di nuovo a lavorare con i metodi di fusione, per trasformare quel verde oliva in un colore decisamente più consono all’estetica della nostra home page.
Impostando il metodo di fusione dei singoli rettangoli a “Colore brucia” il risultato è il seguente:
Bell’effetto, vero? Adesso nella sezione esterna del rettangolo andremo a scrivere le sezioni di contatto (e-mail, telefono, indirizzo), nella sezione interna (quella più scura), inseriremo i dati veri e propri, utilizzando un font più leggibile (in questo caso il nostro amato Georgia).
Un modo bello e originale per inserire i nostri dati e renderli integrati al massimo nella grafica che abbiamo realizzato, non trovi?
Quinto step: la sezione inferiore e i contenuti
Adesso non resta che inserire i contenuti testuali nella nostra home page:
A destra, per dare un tocco di colore, inseriamo l’immagine di una pin-up (attinente alla nostra attività visto che sullo sfondo dell’immagine vi è una vespa):
L’ultimo tocco? Con una porzione dello stesso effetto carta utilizzato in alto, creiamo due piccoli box in basso, per il copyright e un invito a richiedere un preventivo gratuito. In questo modo avremo un piccolo footer grafico dove potremo inserire i dati di contatto, la partita iva, o altro.
Il nostro layout è completato: diamogli un’occhiata!
Conclusioni
In pochi step abbiamo realizzato un layout in stile vintage, estremamente grafico ma, al tempo stesso, semplice e chiaro. Nel prossimo articolo di questa rubrica analizzeremo le caratteristiche di un altro bellissimo stile di design: lo stile magazine. Non mancare!
DownloadGli altri articoli di questa guida:
- Gli stili nel web design: le caratteristiche del corporate style | Come realizzare un sito in corporate style?
- Gli stili nel web design: le caratteristiche del grunge style | Come realizzare un sito in grunge style?
- Gli stili nel web design: le caratteristiche del web 2.0 style | Come realizzare un sito in web 2.0 style?
- Gli stili nel web design: le caratteristiche del vintage style | Come realizzare un sito in vintage style?
- Gli stili nel web design: le caratteristiche del magazine style | Come realizzare un sito in magazine style?
- Gli stili nel web design: le caratteristiche dell’organic style | Come realizzare un sito in organic style?
- Gli stili nel web design: le caratteristiche dello stile tipografico | Come realizzare un sito in typography style?
- Gli stili nel web design: le caratteristiche dell’illustration style | Come realizzare un sito in illustration style?
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
33 commenti
Trackback e pingback
-
Come disegnare un layout in stile web 2.0? tutorial e psd | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del vintage style | Come realizzare un sito in vintage style? [...] -
Come realizzare un layout in stile grunge? | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del vintage style | Come realizzare un sito in vintage style? [...] -
Gli stili nel webdesign: le caratteristiche dello stile web 2.0 | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del vintage style | Come realizzare un sito in vintage style? [...] -
Pochi trucchi per realizzare effetti vintage in Illustrator | Your Inspiration Web
[...] rubrica sugli stili del webdesign, dove ne spiega le caratteristiche, oppure su come disegnare un layout in stile vintage…
Ciao Sara, che bel layout!
Ho una domanda: Come tradurre in XHTML questa navigazione “inclinata”? A me l’unica cosa che viene in mente é ritagliare un’unica immagine che comprende la navigazione e poi mapparla. Esiste un metodo più razionale-mantenibile?
io taglio le immagini rettangolari e poi gli applico il link… così se voglio posso fare un rollover senza problemi….
se me la vedo brutta uso le mappature… :)
Ciao Maurizio,
per mettere in codice la navigazione possiamo esportare le singole voci come rettangoli, stando ben attenti a posizionarli al pixel nella fase di sviluppo. Non e’ complicato, te l’assicuro ;)
Molto, molto, molto carino!
Grazie :)
Bellissimo template ;) se può esservi utile ho proprio realizzato un tutorial oggi su come dare un effetto vintage alle foto.
Grazie per la segnalazione, ogni risorsa e’ ben accetta :)
Molto carino davvero!
Noi abbiamo appena lanciato un progetto che ha un layout un po’ vintage, se vi va date un’occhiata: http://www.festeggiano.it
Ma che bella idea! Ma lo sai che proprio pochi giorni fa io e Nando, dopo aver visto in cssmania.com questo sito, ci siamo detti che sarebbe stato bello se esistesse questo servizio anche “made in italy”? :)
In bocca al lupo e complimenti per l’iniziativa ;)
Ma è possibile che ti devo fare sempre i complimenti?
Basta, mi sono stufato!
:D
:) daiii, neanche un complimentino piccolino? :D
Ma sono obbligato a farli… è perfetto sto template, come faccio a non farteli? :D
Complimenti!! :)
Bellissimo Template, complimenti! ;)
Grazie :)
Complimenti anche a te per il tuo blog, ho trovato alcune risorse molto interessanti.
A presto
Sicuramente è carino!
Però avrei una domanda.
Una volta tagliato quanto arriva a pesare il tema?
Così a occhio con diverse ottimizzazioni del peso sulle immagine e sprite “a manetta” solo la home statica i suoi 1 o 2 secondi li impiega.
Non è tanto, però poi aggiungici codice e qualche effetto e fai presto ad arrivare a 3 secondi!
E arrivi ad essere più lento di circa il 60% dei siti sulla rete.
Quindi la domanda è la seguente come faccio a realizzare un tema super vintage ottimizzando anche la velocità di caricamento?
Domanda a FedeWeb! Quanto è accessibile un sito del genere?
Sarebbero dei consigli ottimi per chi come me ha l’esigenza di creare temi leggeri e flessibili!
Grazie a tutti!
Ciao Alberto, benvenuto su YIW!
Ti ringrazio per le domande che hai posto, sono sicura che sono molto interessanti anche per gli altri lettori della nostra community.
Intanto direi di partire dal presupposto che un tempo di caricamento di 3 secondi non e’ assolutamente da demonizzare, come e’ possibile leggere in questo interessante articolo di usabile.it, di cui riporto un piccolo sunto:
e anche
Credo quindi che 3 secondi siano un buon compromesso per un sito dalla resa estetica/grafica molto accattivante. Per rimanere su 1-2 secondi non ho idea di che tipo di layout potremmo disegnare, riducendo grafica ed effetti al minimo e quindi perdendone di immagine.
Detto questo, possiamo sempre cercare di ottimizzare non solo le immagini ma anche il codice (html, css, javascript) e utilizzare la compressione GZip lato server. Consiglio a tutti la lettura di questi due articoli sull’argomento di Smashing Magazine:
How To Automate Optimization and Deployment Of Static Content
Website Performance: What To Know and What You Can Do.
Per quanto riguarda l’accessibilita’, anche se la domanda e’ stata posta a FedeWeb, mi intrometto :D
Posso assicurarti che, con una buona conoscenza di xhtml e css e con l’applicazione di tutte le specifiche suggerite dal w3c, anche un sito che fa ampiamente uso di elementi grafici puo’ essere reso accessibile. Non commettiamo l’errore di pensare che, dato che ci sono molti elementi grafici, il sito non possa essere accessibile: le specifiche di accessibilita’ WCAG indicano chiaramente di fornire delle alternative testuali per tutti gli elementi grafici/audio/video, NON di eliminare gli elementi grafici dai siti, sarebbe un vincolo creativo ed estetico improponibile :)
Davvero un ottimo lavoro, complimenti sarah
Grazie Ma’ :)
Complimenti, lavoro eccezionale! Siete davvero grandi!!! :-)
Ciao Valentina, benvenuta su YIW e grazie :)
ps. I tuoi lavori sono bellissimi!!!! Mi sono fatta una full immersion in mezzo alle tue illustrazioni. Per caso ti occupi anche di vettoriale?
Ciao Sarah, grazie infinite per il tuo caloroso benvenuto!
Sono lusingata, davvero.
Il vettoriale è un campo che sto approfondendo da poco, sono ancora alle prime armi! :-)
Penso comunque che mi vedrete spesso qui, mi avete rapito!
Valentina
Complimenti, lavoro eccezionale! Siete davvero grandi!!! :-)
Grazie Steve ;)
Io non ho parole ma siete davvero molto bravi e mi riferisco a tutti…Da quando uso PHOTOSHOP mi sono reso conto di poter fare cose davvero eccezionali,ma spesso escono con estrema casualità e non da un progetto ben preciso e magari scritto precedentemente tipo disegnato…
Oggi uso molto ADOBE per fare template ma non ho mai capito come realizzare un unica pagina (TEMPLATE) a scorrimento per tutte le altre pagine…Mi piacerebbe fare una pagina molto lunga mettendo dei segnalibri per arrivare in modo istantaneo da una parte all’altra magari facendola scorrere con un piccolo scatto…Ok mi sarò spiegato male ma chiedo che la vostra fantasia e tolleranza magari riesca ad intuire cosa chiedevo
Intanto davvero 1000 grazie!
SARAH sei incredibile
Sarah, posso farti i miei più sentiti complimenti? Sei davvero brava :)
Vi ho trovato per caso, vagando nel web e adesso chi vi lascia più??! :D
Sn nuovo di queste tecniche…e chiedendoti scusa per la mia domanda che potrebbe risultare alquanto stupida…ti chiedo:
“Esiste una guida, in questo sito, che spieghi come rendere poi funzionante il tutto?”.
Non saprei da dove iniziare :D pur avendo nozioni di programmazione
ciao fragaleo e benvenuto su YIW. ti rispondo io per sara in quanto lei al momento è impossibilitata perchè fuori sede e senza connessione.
trovi una descrizione molto semplice e chiara di come trasformare un psd in xhtml e css nel nostro ebook che viene ancora offerto in omaggio a chi si iscrive alla nostra newsletter.
Nando, grazie per la risposta tempestiva…la sto già iniziando a leggere.
Se avrò qualche problema non esiterò a chiederti :)
Anzi, inizio subito…da quello che ho capito, voi inserite il testo già direttamente in photoshop. Quindi presumo che esso sia un sito statico…con siti dinamici questa tecnica non va?
p.s. scusami ancora se dico qualche bestialità :S
a prescindere dal testo inserito su photoshop (che è a puro scopo dimostrativo, poi in fase di sviluppo verrà inserito manualmente su ogni singola pagina) stiamo comunque realizzando un sito statico e non un CMS.