Oggi costruiremo un fantastico modello di sito Web in Photoshop utilizzando una serie di tecniche avanzate.
Ti illustrerò l'intero processo in dieci semplici passaggi e ti forniremo un link per scaricare il modello finito. Cominciamo!
Anteprima e download
Prima di iniziare, ecco uno sguardo a ciò che costruiremo. Puoi scaricare e utilizzare il PSD come preferisci, ma assicurati di dare credito per lo sfondo come indicato nell'articolo qui sotto.
Scarica Layered PSD
Passaggio 1: crea un nuovo documento
Innanzitutto, crea un nuovo documento in Photoshop. Rendi la tela di 1200 pixel di larghezza per 1700 pixel di altezza. Non preoccuparti, il nostro contenuto non sarà mai così vicino, vogliamo solo darci un sacco di spazio per lavorare.
Per definire l'area del contenuto, disegna una casella larga 960 pixel, centrala orizzontalmente nella tela, quindi trascina le guide verso il bordo sinistro e destro ed elimina la finestra. Il tuo documento vuoto dovrebbe apparire come l'immagine qui sopra (il colore non ha importanza a questo punto).
Passaggio 2: afferra l'immagine di sfondo
L'ispirazione per questo design proviene da una fantastica risorsa gratuita di Matthew Skiles. Matthew ha creato una bellissima trama di sfondo in legno e l'ha distribuita liberamente su Dribbble. Ricorda che se hai intenzione di usare questa texture, devi fornire un link a Matthew.
Prendi la texture in legno dal link qui sopra e ridimensionala in modo che abbia la stessa larghezza del tuo PSD. Si estenderà solo a metà circa del sito in verticale, ma a questo punto è perfetto.
Passaggio 3: aggiungere il gradiente di sfondo
Lo sfondo in legno sembra fantastico in Photoshop, ma ci darà qualche problema sul web a causa della trama infinita del browser. Le nostre due opzioni di base sono convertirlo in un motivo di sfondo senza soluzione di continuità o sfumarlo in un colore a tinta unita.
In questo caso ho scelto la via più semplice e ho deciso di applicare gradienti sul lato sinistro e destro dello sfondo. Per fare ciò, crea un nuovo livello e imposta il colore di primo piano con # 421a0e o qualsiasi altro colore scuro che ti piace dall'immagine in legno. Quindi imposta la sfumatura per passare da questo colore a trasparente e allungare la sfumatura dal lato sinistro al centro, quindi ripetere la sfumatura sul lato destro.
Questo ci dà una transizione gradevole e graduale a un colore solido. Se stessimo codificando questo sito, imposteremo questa immagine sullo sfondo e imposteremo il colore di sfondo nei CSS su # 421a0e. Indipendentemente dalle dimensioni dello schermo su cui si trova lo spettatore, lo sfondo del sito sarà perfetto.
Passaggio 4: il logo
Il logo nella parte superiore del sito è semplicemente testo scritto in Ballpark, un fantastico font gratuito progettato da Mickey Rossi. Digitare una parola, renderla nera e impostare il riempimento a circa il 25%. Successivamente, applica un'ombreggiatura interna e un'ombra esterna per dargli quel look tipografico. Ecco le impostazioni che ho usato:
Si noti che l'ombra esterna è molto diversa dalle impostazioni predefinite. Questo perché in realtà utilizziamo l'ombra esterna come un piccolo trucco per creare uno smusso esterno. Assicurarsi di impostare il colore su bianco e modificare la modalità di fusione da Moltiplica (predefinita) a Schermo (funziona con bianco).
Il trucco per l'ombra interiore è di non esagerare. Vai facile sulla distanza e assicurati che l'opacità non sia troppo scura. Queste impostazioni dovrebbero darti l'effetto fantastico visto qui sotto:
Successivamente, digita un sottotesto per passare sotto il logo e applicare lo stesso effetto. Ho usato un semplice Helvetica Bold e ho inserito tutte le maiuscole.
Passaggio 5: aggiungi alcune luci
Per aggiungere le luci nella parte superiore del modello useremo un trucco super semplice. Prendi un bel pennello bianco morbido e fai clic una volta sulla tela per creare un punto bianco sfocato. Ora premi Comando-T per usare lo strumento Trasformazione libera per allungare il punto come mostrato di seguito.
Per ottenere l'effetto disallineato, tieni premuto Comando-Maiusc-Opzione mentre fai clic e trascini su un controllo d'angolo. Questo dovrebbe spostare entrambe le curve allo stesso modo.
Una volta che hai una forma leggera che ti piace, duplica il layer due volte e allarga le luci. Quindi gettali tutti in un gruppo di livelli e imposta la modalità di fusione del gruppo su Sovrapponi. Puoi anche giocare con l'aggiunta di un bagliore esterno a ciascuna luce per modificare l'effetto.
Passaggio 6: la casella Contenuto in primo piano
Sotto il logo creeremo una grande scatola che fungerà da segnaposto per qualsiasi contenuto che desideri mostrare. Questo sarà un posto fantastico per includere un cursore di immagini jQuery.
Per iniziare, basta disegnare un rettangolo e riempirlo con una sfumatura o un colore a tinta unita, non importa in quanto l'idea è di posizionare il contenuto su di esso. Assicurati di stare bene all'interno delle 960 guide che hai impostato in precedenza.
Successivamente aggiungeremo una di quelle ombre curve alla moda che sono così popolari nel web design in questo momento. Per fare ciò, aggiungi una tipica ombra esterna dal menu degli effetti di livello. Dopo aver applicato l'ombreggiatura, fai clic con il pulsante destro del mouse sull'icona dell'effetto piccolo sul livello e seleziona "Crea livello"? vicino al fondo Come suggerisce il nome, questo trasformerà l'effetto ombra in un livello di ombra reale.
Ora usa la Modalità Warp all'interno della Trasformazione libera per curvare il bordo inferiore dell'ombra, come mostrato nell'immagine qui sotto.
L'effetto complessivo rende gli angoli come se fossero un po 'rannicchiati, pur mantenendo il riquadro del contenuto reale una forma standard facile da riempire con le immagini nella fase di sviluppo.
Step 7: Area di navigazione
Appena sopra la casella di contenuti in primo piano, inserisci alcune opzioni di navigazione di esempio. Ho usato Museo, un font gratuito che può essere facilmente utilizzato con @ font-face in CSS.
Come puoi vedere, il modello sta procedendo bene. Abbiamo terminato la parte superiore e possiamo passare alla sezione successiva.
Passaggio 8: barra dei colori
Appena sotto l'area del contenuto in evidenza dovrebbe essere su dove finisce la trama del legno. Crea un livello e riempi da questa parte in basso con # 3c1306. Quindi inserisci alcuni contenuti segnaposto.Ho scelto un layout a tre colonne che ripeteva il trattamento della scatola di prima e usavo ancora Museo per le intestazioni.
La cosa più complicata qui è impostare la barra dei colori oltre allo sfondo di legno. Se osservi da vicino l'immagine sopra, puoi vedere che ho allungato un gradiente dal nero al trasparente in modo che sembri che la scatola stia proiettando un'ombra sul legno. Per aggiungere ancora più contrasto, ho dipinto un po 'di bianco con un grande pennello morbido, ridotto l'opacità del bianco al 75% e impostato il metodo di fusione su sovrapposizione. Questo è un grande trucco per alleggerire le aree scure di una texture.
Passo 9: La scatola delle quote
Vicino alla parte inferiore della barra dei colori ho incluso una casella per inserire una citazione del cliente. Questo è un processo in tre fasi. Per prima cosa disegna un rettangolo arrotondato che è un po 'più scuro del colore di sfondo. Quindi applica la stessa tecnica inset che abbiamo usato sul logo qui sopra (ombra bianca impostata su schermo + ombra interna). Infine, inserisci del testo. Ho usato una versione italica della Georgia.
Passaggio 10: il piè di pagina
Per completare il modello, ho tirato giù un po 'della struttura in legno e ripetuto molti dei passaggi visti sopra. Innanzitutto, ho aggiunto sfumature sul lato proprio come facevamo all'inizio. Poi ho aggiunto un'altra ombra sul fondo della barra dei colori proprio come abbiamo fatto in alto. Infine, ho ripetuto lo stesso effetto inserto che abbiamo usato tre volte prima per includere alcune icone di base dei social media e il link di attribuzione per la texture di sfondo.
Conclusione
Con questi ultimi ritocchi sei tutto finito! Tra le altre cose, abbiamo appreso come sfumare uno sfondo con texture su un colore solido in modo che funzioni sul web, come creare un effetto tipografica in legno e applicarlo in vari modi, come creare delle fantastiche illusioni di luce e come utilizzare la modalità di fusione Sovrapposizione per schiarire le aree scure di una trama.
Spero che tu abbia imparato molto dal tutorial, non dimenticare di scaricare il PSD! Se lo usi in un progetto, lascia un link nei commenti qui sotto in modo da poterlo verificare (opzionale ma apprezzato).