Oggi per la sezione Tutorial Photoshop ti mostro come creare una bellissima vcard elegante e pulita in modo estremamente semplice e veloce utilizzando Photoshop.
Ispirandomi ad un tutorial di YourInspirationWeb ho deciso di riprenderlo personalizzarlo e renderlo più facile anche per i meno esperti.
Anteprima del lavoro:
Ecco quello che ci serve:
- Pixel Pattern che puoi trovare qui
- Font Telegrafico che puoi scaricare da qui
- Icone Social Network ad esempio queste
Passo 1
Inserisci il pattern appena creato nella apposita cartella Patterns di Photoshop, se utilizzi Windows molto probabilmente sarà C:\Program Files\Adobe\Adobe Photoshop CS5\Presets\Patterns
Creiamo un nuovo documento di 900px x 1000px.
Impostiamo 2 guide verticali, la prima a 212px la seconda a 688px, in maniera tale che il nostro contenitore di 476px sia racchiuso esattamente al centro dalle linee guida.
Infine tracciamo una guida vrticale esattamente al centro a 450px ci servirà succcessivamente.
Per farlo andiamo su Visualizza >> Nuova Guida scegliamo Verticale e impostiamo il valore ricordandoci di inserire anche l’unità di misura, nel nostro caso px.
Dovresti ottenere questo:
Per prima cosa dobbiamo scegliere uno sfondo. Qui hai la totale libertà di scegliere secondo le tue preferenze.
Selezioniamo lo strumento Sfumatura (G) e impostiamo una sfumatura radiale. Io ho scelto una sfumatura dal verde (#26b829) ad un verde più chiaro (#dcf9dc). Mettiamo la spunta su inverti.
Ora posizionandoci al centro del nostro documento nella parte alta, tenendo premuto Shift tracciamo la nostra sfumatura per tutta l’altezza del documento.
Dovresti ottenere qualcosa di simile:
Passo 2
Creiamo un nuovo livello Livello >> Nuovo >> Livello, subito dopo andiamo su Modifica >> Riempi e tra le opzioni scegliamo pattern. Quindi impostiamo il pattern appena scaricato.
Rinominiamo questo livello “pattern” e definiamo la sua opacità al 10%.
Dovresti ottenere qualcosa del genere:
Passo 3
Ora inseriamo come visto in precedenza altre 4 guide (2 verticali e due orizzontali). Quelle verticali rispettivamente a 217px e 693px. Quelle orizzontali a 105px e 895px.
Creiamo un nuovo livello Livello >> Nuovo >> Livello.
Selezioniamo lo strumento Rettangolo (U) con un colore di primo piano impostato a bianco e tracciamo il rettangolo seguendo le guide più esterne. Possiamo tracciarlo approssimativamente successivamente premendo Ctrl+T possiamo adattarlo in modo preciso.
Dovresti ottenere questo:
Allo stesso modo, creiamo un ulteriore livello e scegliendo un altro colore (scegli pure a caso) per vedere meglio tracciamo un altro rettangolo. Questa volta seguendo le guide più interne.
Impostiamo il riempimento di questo livello a 0% (Fai attenzione a non confonderti con l’opacità del livello).
Dovresti ottenere questo:
Passo 4
Ora inseriremo delle ombre nella parte bassa per rendere il tutto ancora più gradevole.
Selezioniamo lo srumento Pennello (B), scegliamo un pennello morbido con dimensione 40px e durezza 0%. Creiamo un nuovo livello Livello >> Nuovo >> Livello e tenendo premuto Shift tracciamo una linea orizzontale dal centro verso destra.
Premiamo Ctrl+T e ruotiamo leggermente l’ombra di qualche grado.
A questo punto duplichiamo questo livello con Ctrl+J. Andiamo su Modifica >> Trasforma >> Rifletti orizzontalmente e spostiamolo sul lato sinistro.
Selezioniamo questi 2 livelli ombra e fondiamoli assieme premendo Ctrl+E. Rinominiamo questo livello “ombra” e posizioniamolo subito sopra al livello “pattern”.
Passo 5
Ora possiamo iniziare ad inserire i contenuti. Utilizzando un font che ci piace andiamo ad inserire per prima cosa il nostro nome. Io ho utilizzato il font Telegrafico e un font standard come il Verdana con colore (#6c6c6c).
Passo 6
A questo punto possiamo creare le sezioni della nostra vcard. Ad esempio possiamo creare una sezione Chi sono?,Curriculum Vitae, Lavori, Contatti utilizzando lo strumento Testo Orizzontale (T).
Per abbellire ulteriormente possiamo utilizzare delle icone per le varie sezioni. Io ad esempio ho utilizzato queste.
Inseriamo nuove guide per facilitare il posizionamento delle icone
Inseriamo un titolo e un sottotitolo.
Una immagine con la nostra descrizione.
Tocco finale
Completiamo il tutto con le icone dei Social Network in cui siamo raggiungibili (Facebook, Youtube, Twitter, Google+, ecc.), io ho utilizzato queste.
Ecco il risultato finale:
Fine!
Ti è piaciuto questo tutorial? Hai incontrato difficoltà? Non esitare a chiedere se qualcosa non ti è chiaro!
Non dimenticare di condividerlo con i tuoi amici!
[adsense]
28 Ottobre 2012 il 12:42
Almeno mettete le fonti, Yourispirationweb.com
28 Ottobre 2012 il 12:44
Salve Davide, terza riga (almeno leggere le prime tre righe).