Share
In questo tutorial, metteremo insieme un design Web di alto livello utilizzando un carattere nitido e sottile, splendide immagini di sfondo e un uso intelligente dello spazio e del layout. Puoi facilmente utilizzare la tecnica per creare i tuoi design unici.
Quindi quando hai finito di leggere questo tutorial, puoi passare al nostro sito gemello NETTUTS e seguirlo man mano che costruiamo il progetto in HTML pulito e semplice. OK, facciamo rock'n'roll!
È un progetto abbastanza elegante, che probabilmente si adatta a un sito di tipo portfolio di design, ma potrebbe davvero essere modificato per tutti i tipi di scopi. Si basa su un'elegante tipografia, un layout strutturato e uno sfondo visivamente interessante.
Il vero potere di questo design è quello di mostrare ciò che può essere realizzato mantenendo semplice. Alla fine di questa parte di Photoshop del tutorial, ti mostrerò come possiamo facilmente scambiare sfondi e caratteri e spiegare perché questo design funziona bene.
È una struttura semplice: menu orizzontale, pannello della direzione principale e area del contenuto. Sebbene si tratti di un design per la homepage, è possibile immaginare che una pagina interna abbia semplicemente un pannello di direzione diverso e una nuova area di contenuto. Ai fini della semplicità, metteremo insieme solo il design della homepage.
Prima di tutto, crea un nuovo documento. Il mio è di 1100 px di larghezza x 1100 px di altezza. Questo è così che posso creare un sito Web creato per 1024px di larghezza, ma ho ancora spazio per decidere cosa succederà al di fuori dell'area visibile in modo che si degradi piacevolmente anche su schermi più grandi.
Ora il nostro primo compito è creare un bel sfondo astratto. Per fare ciò disegneremo una sfumatura lineare verso il basso usando questi due colori: # 1b204c a # 472373.
Ora vogliamo uno sfondo visivamente interessante che sia abbastanza astratto da non distrarre dal testo. Fortunatamente, c'è una fantastica immagine dell'acquerello disponibile gratuitamente tramite l'Arsenale di GoMedia, fai clic sulla sezione Freebie e troverai due acquerelli; quello che vogliamo è quello verdastro.
Ora, anche se è molto piacevole, è molto più interessante se premiamo CTRL + I e lo invertiamo in modo che sia bello quel rosa / viola sul nero.
Ora copia l'acquerello sulla nostra tela principale e premi Ctrl + T per trasformarlo in una dimensione ragionevole. Il nostro scopo qui è di farlo svanire in nero a destra (in modo che possiamo costruire il nostro HTML in seguito con maggiore facilità). Inoltre, non lo vogliamo troppo a lungo in verticale, quindi è meglio cancellare un po 'dell'eccesso. Per fare questo prendi un pennello e dipingi di nero per rimuovere solo le parti inferiori.
Si noti che è meglio ottenere un pennello con qualche texture, quindi non è ovvio che abbiamo cancellato le parti. Se scorri verso il basso l'elenco dei pennelli, c'è un pennello fornito con Photoshop simile a quello mostrato. Non è un cattivo pennello da usare. Certo, potresti avere dei pennelli ancora più belli e sentiti libero di usarli.
Quando hai finito, riempire le aree a destra e in basso con il nero in modo che l'intera tela sia coperta da questo livello.
Ora riduci l'opacità del livello dell'acquerello a circa il 70% e imposta la modalità di fusione su Sovrapponi. In questo modo, una parte della colorazione passa attraverso per creare un aspetto più gradevole.
Ora, in un nuovo livello sopra il livello dell'acquerello, e disegnando verso l'alto, fai un gradiente lineare passando dal nero alla trasparenza in modo che in seguito la tua tela diventi fondamentalmente nera sul fondo.
Successivamente in due nuovi livelli, disegna un paio di gradienti radiali dal bianco alla trasparenza, uno più grande dell'altro. Impostali su Sovrapponi e opacità del 40% e del 100% rispettivamente per i più grandi e più piccoli.
Fondamentalmente, dovresti fare un punto forte sulla nostra immagine per dargli un po 'più di consistenza.
Quindi ecco lo sfondo finito. È scuro, astratto e abbastanza elegante con la colorazione. Naturalmente, il rosa potrebbe non essere la tua particolare scelta di colori di solito, e se è così, sentiti libero di aggiungere un livello di regolazione del colore sulla parte superiore e usarlo per regolare la colorazione. Mi piace il rosa / viola, quindi ho intenzione di correre con esso!
Ora creiamo un nuovo livello e aggiungiamo un "logo". Non ho proprio uno scopo con questo design, quindi ho deciso di inserire del testo e far finta che fosse il mio logo. Poiché questo tutorial è per metà Psdtuts + e poi per metà NETTUTS, ho scritto un piccolo "psd vs net".
I font che sto usando qui sono Egyptian505 BT Bold e Egyptian505 LT BT Light (la versione più leggera del font è ciò che ho usato per il 'vs').
Per aumentare leggermente il bit 'vs' puoi usare il controllo della linea di base nella tavolozza dei personaggi (mostrato nella seconda immagine sotto).
Infine, ho aggiunto anche un piccolo stile di livello al testo con una leggera sfumatura di gradiente come mostrato e un bagliore interno 1px con bianco.
A questo punto, ho acceso i miei Righelli (Ctrl + R) e ho disegnato un paio di guide. Ho diviso la mia pagina in tre colonne con linee a 50px, 320px, 610px, 900px. Almeno quelli sono i numeri che avrei dovuto usare. Guardando il mio screenshot ho appena realizzato che la mia terza linea è spenta ... d'oh!
Ad ogni modo, il punto è che sto definendo lo spazio in cui metterò tutti gli elementi, e se dovessi creare più pagine potrei usare questa griglia in modi diversi. Per come è, con la sola homepage progettata, userò queste tre colonne una volta, un po 'più tardi.
OK, quindi ora disegniamo nella nostra prima scatola nera. Con i righelli e le guide ancora attivi, crea un nuovo livello e disegna una selezione rettangolare (M) passando da una parte all'altra. Riempi di nero, quindi imposta questo livello all'Opacity dell'80%, fai clic con il pulsante destro del mouse sul livello e scegli Opzioni di fusione. Quindi fai clic su Tratto e aggiungi un tratto bianco di 1px sull'esterno e imposta Sovrapponi. Questo ci darà un bordo davvero interessante che renderà la scatola molto più nitida.
Ora duplica il livello della scatola e, usando Ctrl + T, trasforma la scatola in modo che abbia la stessa larghezza ma molto più breve (come mostrato sotto). Questa sarà la nostra scatola di navigazione.
Cambia l'opacità al 40% e Riempi al 50%. Questo renderà la nostra scatola molto più debole e darà un po 'di profondità alle due scatole, facendo sembrare uno più importante e imponente dell'altro.
Questo tipo di contrasto tra le due caselle è un ottimo modo per stabilire la precedenza visiva tra gli elementi. Quando l'utente arriva alla pagina, vogliamo che vedano prima il nostro grande messaggio e poi la barra di navigazione. Facendolo svanire, diciamo all'utente che si deve guardare il secondo meno importante.
OK, ora aggiungiamo del testo. Ancora una volta ho usato Egyptian Light qui per la grande copia headline (che sarà un'immagine nell'HTML finale) e Arial per le voci di menu (che saranno collegamenti di testo HTML).
Ora una parola sulla tipografia. Questo design si basa molto sul fatto che abbiamo usato un carattere semplice e pulito. Avere il testo bello e grande lo fa sembrare molto audace, ma allo stesso tempo perché è un tipo di carattere molto sottile, risulta elegante.
Se stai cercando un design di fascia alta, i caratteri tipografici sottili e classici sono difficili da battere. Quando ho scoperto per la prima volta Helvetica Ultralight, ricordo che sono diventato pazzo a disegnare tutti questi disegni che sembravano davvero minimi e di alto livello.
Inoltre, questo particolare tipo di carattere egiziano ha un serif molto affilato, combinato con una sorta di squilibrio che lo fa apparire abbastanza bello (credo).
Ci sono molti altri fantastici font che potresti usare. Come regola generale, però, vuoi qualcosa di più classico. O in altre parole, a meno che tu non sappia cosa stai facendo, vorrai stare lontano da caratteri davvero bizzarri, ad esempio. qualcosa che sembra molto futuristico. In realtà, come regola generale valida, a meno che tu non sia super confidente, tende a essere migliore per virare verso caratteri più ordinari.
Un altro tipo di carattere tipografico che funzionerebbe molto bene qui è qualcosa che ha un aspetto tecnologico simile a quello utilizzato da Chris Garrett Media. Non ho idea di quale font sia, o di quale tipo di font si chiami, ma è abbastanza pulito. Forse un tipofilo gentile potrebbe illuminarci nei commenti :-)
Comunque, dopo aver visto il sito di Chris Garrett Media, ho deciso che sarebbe stato fantastico aggiungere un overlay sfumato al mio tipo e dargli un po 'di lucentezza. Quindi, come puoi vedere qui sotto, qui stiamo aggiungendo una sovrapposizione sfumatura da nero a bianco, sfumata un po 'e in modalità Sovrapposizione.
Ora possiamo disegnare un'ulteriore grande scatola nera per l'area del contenuto. In realtà, puoi semplicemente duplicare il livello precedente e trasformarlo di nuovo.
E questo ci porta al punto mostrato nell'immagine qui sotto. Sembra piuttosto bello!!
Ora aggiungiamo un po 'di contenuto fittizio nella casella del contenuto. Qui ho usato di nuovo Arial per la maggior parte del testo, ma per i titoli invece di usare Egyptian, sono andato con la Georgia. Georgia non è abbastanza elegante, ma è un font standard, il che significa che posso creare questi titoli in un vecchio codice HTML invece di fare affidamento su immagini (o Flash).
In realtà, con il rilascio di Windows Vista c'è anche un altro font semi-standard che funzionerebbe bene qui chiamato Cambria. Ma Cambria ha alcuni strani problemi di rendering in Firefox su Mac di determinate dimensioni, quindi per il momento ci metteremo con il buon vecchio Georgia.
Alla fine, ho creato un nuovo livello nella parte inferiore, lo ho riempito con un colore violaceo scuro, ho aggiunto un bordo 1px in cima e voilà abbiamo un piè di pagina.
Mettendo tutto insieme, il sito è pronto per essere costruito.
Ora, una delle cose interessanti di questo design è che possiamo facilmente scambiare lo sfondo e il design sembra ancora fantastico. Ecco che l'ho sostituito per un'immagine di iStockPhoto chiamata Passion, con una combinazione di colori simile. È un fantastico rendering 3D della luce e, come il nostro attuale background, è anche astratto e visivamente bello.
Qui ho usato un'altra immagine astratta di iStockPhoto chiamata Blue Energy. Poiché il colore è cambiato, ho anche esaminato e modificato i colori in alcuni punti, in particolare il testo, e ho anche aggiunto un grande bagliore alla copia principale.
Ora è improbabile che tu abbia mai avuto bisogno di questo esatto design, ora che ho scritto un intero tutorial su di esso. Parliamo un po 'di perché funziona bene, perché ciò ti aiuterà a usare i principi per creare il tuo look unico.
Ci sono diverse cose che si uniscono per realizzare un design che funziona qui:
Naturalmente, ci sono molte altre cose di cui potremmo parlare come il colore e la precedenza, ma penso che le principali cose di design che dovresti guardare qui siano la tipografia in congiunzione con lo sfondo. Come ultima affermazione a tal fine, ecco una piccola immagine che dice tutto :-)
Ora basta questo materiale per Photoshop nambi-pambi, andiamo a fare un po 'di HTML / CSS! Segui la seconda parte di questo tutorial in cui creiamo il nostro design in un sito Web funzionante su NETTUTS-Web Development Tutorials!
Accentsconagua