Share
È piuttosto sorprendente quanto colore e sfondo possano cambiare l'aspetto di un sito web. In questo tutorial creeremo un layout rapido, semplice ma efficace e quindi creeremo le variazioni utilizzando sfondi, foto e motivi. Vedremo anche come creare sfondi piastrellati senza soluzione di continuità da una foto, i metodi per terminare una singola foto e semplici modi per creare modelli di pixel. In breve è un tutorial pieno zeppo!
Questo post è il primo giorno della nostra sessione di Web Design. Sessioni creative Sessione Giorno 2 "
Quindi il nostro primo compito è progettare un layout per la nostra pagina. Non faremo nulla di particolare perché il tutorial riguarda gli sfondi più che i layout. Ancora dovrebbe apparire bello ed essere un vero e proprio layout lavorabile. Quindi nell'immagine qui sopra puoi vedere il mio piano di componenti grezzi della pagina. Ho pianificato in un menu e sottomenu, un pannello per introdurre la sezione e un'area di contenuto. Ho anche programmato che dovrebbe essere inferiore a 1000px in modo che quando una persona su uno schermo piccolo visualizza il sito, vede ancora lo sfondo correttamente (poiché questa sarà una grande caratteristica del design).
Ora dovrei sottolineare in realtà che in realtà non ho disegnato questo set di scatole come questo. Era più come se fossi solo in giro fino a quando ho pensato "oooh è un bel layout". Ma per gli scopi di questo tutorial ha più senso spiegarlo in questo modo!
Quindi quel layout sono le nostre ossa, ora abbiamo bisogno di arricchirlo con qualche contenuto fittizio e una combinazione di colori.
Come puoi vedere, non ho fatto nulla di veramente incredibile qui, ho appena inserito gli elementi sulla pagina in modo abbastanza ordinato e uniforme. Quindi nota questa spaziatura. Nell'immagine ho provato a mostrare come si allineano elementi diversi (linee gialle), come la spaziatura è approssimativamente anche verticalmente e orizzontalmente così come sopra e sotto gli elementi.
Si noti che queste sono solo delle guide approssimative e in realtà lavoro solo ad occhio finché le cose non sembrano corrette. Ma se non sei sicuro di spaziatura, fare le cose in modo equo non è un brutto punto di partenza. Quando ti senti più a tuo agio con la spaziatura puoi variare le cose e giocare con equilibri irregolari.
Nell'immagine sopra puoi vedere che ho scelto un carattere tipografico di visualizzazione principale chiamato Rockwell che useremo nel pannello dell'intestazione per dare alla pagina un po 'di carattere. Se stavo costruendo questo sito che potrebbe essere un'immagine o inserito usando sIFR. Il resto del testo è Helvetica e Arial, che ovviamente è adatto all'utilizzo HTML. Inoltre ho gettato in una illustrazione vettoriale di un aereo di carta che ho disegnato anni fa e venduto come magazzino. Ovviamente in un progetto reale, questa immagine sarebbe qualcosa a che fare con il sito invece di essere gettato casualmente come ho fatto qui.
Finalmente ho usato una tavolozza di colori caldi e caldi. Sono un po 'un fan dei colori beige e terra e scoprirai che li uso molto. Penso che facciano molto per rendere i siti web più amichevoli e più accessibili.
Quindi la pagina sembra OK, ma non c'è ancora niente di memorabile a riguardo ed è un po 'di base. Nel prossimo passaggio aggiungeremo un po 'di smalto.
OK, quindi qui puoi vedere lo stesso identico layout ma l'ho rifinito e aggiunto due elementi visivi per dargli un po 'di stile. Il primo elemento è la freccia ritagliata dal menu laterale. Questo fa sì che il pannello centrale assomigli ad una specie di fumetto troppo cresciuto. La seconda visuale che vedrai quando guardi da vicino è una sorta di tema a punti.
Quindi in tutto abbiamo utilizzato tre elementi visivi per dare alla pagina un certo stile: un'illustrazione, un'interessante forma a griglia e un tema sottile basato su una forma semplice. Successivamente aggiungeremo un quarto elemento visivo, uno sfondo, per completare lo stile del sito.
Nell'immagine sopra ho indicato tutti i pezzi di lucidatura che ho aggiunto. Sono solo piccole evidenziazioni e gradazioni a colori, punti e, naturalmente, la freccia tagliata. Potresti anche essere interessato a un precedente articolo che ho scritto un anno fa sulla lucidatura dei progetti web qui su Psdtuts+.
Quindi con questo abbiamo il nostro layout di base!
Quindi, il primo sfondo in cui stiamo per passare è un'immagine affiancata. In questo caso usiamo una foto di erba che ho usato su quel tutorial di testo sull'erba (una serie che non ho ancora finito :-) Puoi ottenere la foto dell'erba originale su Flickr.
Certo, se provi a piastrellare la foto originale non sembra molto buona e sarà ovvio che stai ripetendo la stessa immagine più e più volte. Invece è necessario modificare l'immagine in modo che tegoli perfettamente. Per fortuna ho appena messo su un tutorial su questo argomento, quindi vai a leggere e leggi:
Insieme al cambio di sfondo ovviamente ho aggiornato la colorazione per adattarla al nuovo look. Notare che ho evitato di usare la stessa tonalità di verde chiaro e brillante come l'erba: fare così sarebbe stato opprimente. Invece, le sfumature dei verdi più spenti più scure e più chiare completano lo sfondo.
Ora sfondi come questo sono perfetti per aggiungere strati trasparenti nella parte superiore. Qui sia il pannello Informazioni che il menu hanno una certa trasparenza e sembra fantastico perché puoi vedere un po 'dell'erba che entra e aggiunge un po' di profondità. Anche se puoi semplicemente abbassare l'opacità del livello appropriato verso il basso, un'altra opzione è aggiungere un paio di strati in più - uno con un leggero gradiente che sfuma nel nulla e l'altro con un evidenziatore 1px.
Nell'immagine qui sopra puoi vedere ad esempio sul menu che ho un blocco di bianco impostato al 70% di opacità, in più c'è un gradiente dal bianco al nulla, e in cima c'è una linea bianca da 1px sul bordo inferiore. Questi strati aggiuntivi enfatizzano la trasparenza e danno profondità all'immagine.
Quindi tutta questa trasparenza è facile da fare in Photoshop, ma ti starai chiedendo quanto sia fattibile costruire un tale progetto.
Fortunatamente è possibile grazie al formato di file .PNG che ti consente di utilizzare la trasparenza delle tue immagini. Una cosa da tenere presente è che mentre si può fare trasparenza (ad esempio un'opacità del 60%) non è possibile eseguire i metodi di fusione dei livelli (ad esempio moltiplicare o sovrapporre). Dato che in un design di Photoshop è importante non fare nulla che non sia effettivamente realizzabile, tutto ciò che ho usato sono le impostazioni di opacità. È più limitante ma puoi ancora ottenere effetti piacevoli.
Creiamo quindi un test HTML rapido per assicurarci che tutto funzioni davvero come lo immaginiamo. Per creare un PNG trasparente, per prima cosa uniremo i livelli per la nostra forma di pannello grande in uno. Poiché tutti i livelli hanno una certa trasparenza, il risultato finale dopo l'unione è anche semitrasparente.
Ora basta copiarlo in un nuovo documento di Photoshop, quindi disattivare il livello di sfondo (vedi l'immagine sopra) e dovresti vedere la trasparenza che mostra attraverso.
Ora vai a File> Salva per Web e dispositivi e scegli PNG-24 dalle opzioni. Dovresti vedere la stessa trasparenza apparire nella finestra di anteprima.
Poi farò la stessa cosa per alcuni altri elementi dell'immagine, perché nel nostro test vogliamo dimostrare che è possibile posizionare un PNG trasparente sopra un PNG trasparente su uno sfondo.
Con tutte le nostre immagini create, ora si tratta solo di mettere insieme un po 'di codice HTML:
Test sullo sfondo / trasparenza
Quindi tutto ciò che stiamo facendo qui è impostare l'immagine di sfondo come il nostro JPG affiancato. Quindi posizionare un
Lo farò per dimostrare che questo design è realizzabile. In realtà avresti bisogno di fare qualche aggiustamento per farlo funzionare in IE6, a La ricerca di Google rivela molti articoli sull'argomento, ma dato che questo è Psdtuts + e non NETTUTS, finiremo qui :-)
Ciò che si ottiene facilmente con uno sfondo di texture resistente come l'erba è ancora più facile da fare con trame più semplici come questa trama di carta di Bittbox. Poiché l'immagine di origine è migliore, puoi creare tessere molto più grandi per lo sfondo che hanno meno probabilità di apparire ripetute.
Un'altra opzione per gli sfondi sono semplici pattern di pixel che, una volta ripetuti, danno uno sfondo un po 'di texture. Lo schema mostrato in questa variante del layout è quello che ho usato su Creattica Daily.
È possibile creare modelli come questo in modo molto semplice. Per ottenere questo effetto, crea una nuova immagine di 4 px di larghezza di 5 px in altezza e ingrandisci il più possibile, quindi disegna questi pixel:
Quindi, premere CTRL-A per selezionare tutto e andare a Modifica> Definisci modello, dargli un nome, quindi puoi applicare il modello con a Sovrapposizione di modelli attraverso le opzioni di fusione di un livello. Quindi, sul tuo file PSD principale fai clic con il pulsante destro del mouse sul livello a cui desideri aggiungere il modello, quindi seleziona Opzioni di fusione quindi scegli Sovrapposizione di modelli. Nell'immagine sopra ho impostato il modello Moltiplicare su uno sfondo grigio scuro.
In realtà è piuttosto divertente giocare con questi tipi di modelli di pixel. Le persone che amano i pixel in K10K hanno una libreria di Pixel Patterns e puoi anche cercare disegni molto più avanzati.
L'ultima variazione che vedremo è l'utilizzo di una foto singola. Qui sto usando una bella foto di West Bay Cliffs di Cristiano Betta che ho trovato su Flickr:
È una bella foto ampia e fatta per una bella combinazione di colori. Quindi ecco alcuni passi veloci che ho preso per posizionare l'immagine.
Qui è solo seduto sullo sfondo del nostro design. Con un po 'di trasparenza è già abbastanza pulito, ma cosa sta succedendo in alto a sinistra?
Spostando la foto verso l'alto di circa 50px si spinge le parti scolorite strane fuori dalla pagina. Il prossimo problema è che non possiamo avere uno sfondo di foto infinite, quindi lo sfumeremo in un colore.
Selezionando un colore più scuro dal mare, creiamo un nuovo livello e disegniamo un gradiente che si dissolve dal colore al trasparente. Questo si trova sopra lo sfondo dell'oceano e lo mescola bene.
Ora lo sfondo sembra un po 'piatto, quindi sarebbe bello ravvivare un po' i colori. Per fare questo, sovrapponiamo la foto con una sfumatura di colori abbinati all'immagine.
Nell'immagine sopra puoi vedere che ho disegnato un gradiente usando i viola e le arance dell'immagine originale.
Impostazione del livello sfumatura su copertura e 70% illumina davvero il tramonto e lo fa sembrare molto più vibrante.
Ora il prossimo problema è che dobbiamo eliminare la foto sui lati. Questo sarà complicato perché da una parte abbiamo una montagna e dall'altra è solo il cielo. Quindi probabilmente la soluzione migliore è sfumare nei colori scuri. Per la maggior parte delle persone non lo vedranno, è solo per tutte quelle persone che usano uno schermo gigante e aprono i loro browser.
Quindi la prima cosa che faremo è prendere una selezione verticale di 1px da ciascun bordo estremo dell'immagine e premere CTRL-T per trasformarlo. Il motivo per cui lo facciamo è che se qualcuno dello sfondo mostra il colore che sto per aggiungere, non sembrerà strano.
Quindi dopo aggiungiamo un nuovo livello e disegniamo un'ellisse gigante sullo sfondo, premete CTRL-SHIFT-I per invertire la selezione e riempirla con lo stesso colore scuro usato in precedenza.
Ora deselezioniamo il livello e andiamo a Filtro> Sfocatura> Sfocatura gaussiana per sfumare il nostro colore, usando un raggio di 80 px. Quindi duplica questo livello e sfocatura nuovamente utilizzando un raggio di 120 px, quindi una terza volta con un raggio di 160 px. Questo dovrebbe dare una bella gradazione morbida.
Quindi il nostro progetto finale con uno sfondo fotografico per la maggior parte delle persone sarà simile all'immagine mostrata sopra. Ma possiamo stare tranquilli che anche un'enorme finestra del browser non rivelerà nulla di stupido.
Puoi imparare di più sulla progettazione con grandi immagini di sfondo leggendo questi tre grandi articoli:
Come puoi vedere, abbiamo ottenuto un sacco di chilometri dal nostro unico layout semplice e, auspicabilmente, dal modo in cui hai ottenuto qualcosa di utile dal processo!
Questo post è il primo giorno della nostra sessione di Web Design. Sessioni creative Sessione Giorno 2 "
Accentsconagua
