Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Layout con sfondo grafico

Applichiamo una delle tecniche più trendy del moderno web design
Applichiamo una delle tecniche più trendy del moderno web design
Link copiato negli appunti

Per
ottenere un design ad alto impatto grafico si è soliti ricorrere ad un
massiccio uso della proprietà background dei fogli di stile.

In particolare, un metodo molto di moda è quello di applicare un
grande sfondo grafico al body del documento in modo tale che risulti
un'estensione del layout propriamente costruito secondo i classici
canoni di sviluppo (codice HTML e CSS). Evangelista storico di questa
tecnica è stato, e tuttora è, Nick La -- autore di nDesign Studio e Web
Designer Wall
. Come al solito, uno screenshot vale più di mille parole:

Figura 1 - Screenshot dal sito Web Designer Wall (click per ingrandire)
Figura 2 - Screenshot dal sito N Design Studio (click per ingrandire)

Vediamo come è possibile ottenere tale risultato.

Il layout, requisiti e sviluppo

Prima fase del progetto è lo sviluppo del layout. Visto che lo scopo
sarà  quello di integrare visivamente uno sfondo grafico con la
struttura, quest'ultima dovrà  sottostare ad un indispensabile
requisito: dovendo "unirsi" ad un'immagine, dovrà  essere
obbligatoriamente di dimensione fissa. Di conseguenza tutti i
posizionamenti (posizione rispetto al viewport, posizione di elementi
interni come box e barre laterali etc...) dovranno essere calcolati in
pixel (px).

Durante la progettazione di un layout si è soliti predisporre
un elemento, in genere chiamato wrapper, che funga da contenitore per
tutti gli altri elementi: anche se è una tecnica largamente diffusa, è
possibile che in alcune situazioni essa non debba essere
necessariamente utilizzata. Nel nostro caso però, la presenza di un
wrapper semplificherà  enormemente il lavoro di dimensionamento e
posizionamento e quindi il suo utilizzo è obbligatorio.

<div id="wrapper">
<div id="header">...</div>
<div id="main">...</div>
<div id="footer">...</div>
</div>

Impostiamo la dimensione del layout con un po' di CSS:

#wrapper { background: #fff; ; margin: 200px auto 0 auto; }

Come abbiamo detto la larghezza deve essere fissa (può essere quello
che volete, io ho scelto 750px). Con la proprietà  margin abbiamo
posizionato il layout centralmente e abbiamo lasciato 200px di spazio
in alto (per dare visibilità  all'artwork di sfondo).

Visto che ci siamo scegliamo anche un colore di sfondo:

body { background: #8dd145; }

Per quanto riguarda #header, #main e #footer le loro caratteristiche
sono ininfluenti: nella pagina di esempio ho scelto una classica
struttura "a blog" (corpo più una barra laterale), ma ovviamente siete
liberi di scegliere qualsiasi composizione.

Ecco l'esempio funzionante.

Lo sfondo grafico: requisiti

Lo sfondo grafico è una grande immagine che andrà  applicata al
body del documento attarverso la proprietà  background e anche
esso dovrà  sottostare ad alcuni requisiti:

  • Per prima cosa la sua dimensione dovrà 
    essere maggiore della dimensione del wrapper.
  • Inoltre, agli estremi dovrà  uniformarsi al resto della
    pagina. Ovvero è importanto che l'artwork non venga troncato nettamente
    ai limiti dell'immagine, ma vada a sfumare sul colore di sfondo della
    pagina. (vedi figura 3):
Figura 3 - Schema del layout (click per ingrandire)

Il secondo requisito si rende necessario per supportare i visitatori con risoluzioni dello schermo molto elevate.

Lo sfondo grafico: realizzazione

Armiamoci di un qualsiasi programma di grafica raster (Photoshop,
Paint Shop Pro, Gimp...) e creiamo una nuova immagine di dimensione
950x500 pixel Dopodiché riempiamo con il colore di sfondo che abbiamo
precedentemente impostato per il body.

Disegnamo un rettangolo al centro dell'immagine di larghezza 750px e
lasciamo 200px di distanza dal bordo superiore (vedi figura 4). Questo
rettangolo, che riempiamo di bianco, rappresenta il nostro wrapper e ci
servirò  da guida per costruire il layout (vedi figura 5).

Figura 4 - Creazione del rettangolo (click per ingrandire)
Figura 5 - Schema del wrapper come guida per il layout (click per ingrandire)

È importante che sia perfettamente centrato, altrimenti quando
andremo a mettere lo sfondo nella pagina potrebbe risultare sfalsato
rispetto al resto del documento. Per esserne sicuri lo proviamo subito:

body { background: #8dd145 url(sfondo.png) top center no-repeat; }

Per la creazione dell'artwork non ci sono altre regole da seguire,
se non quella di rimanere il più possibile fuori dalla sagoma del
wrapper (lavorare sullo spazio "verde"), specialmente ai lati.

Ecco come si presenta il nostro esempio sviluppato:

Figura 6 - Screenshot del nostro layout (click per ingrandire)

Come si può notare, l'artwork utilizzato va a sovrapporsi alla
sagoma del wrapper, e quindi quando viene applicato al body del
documento il layout propriamente costruito risulterà  sovrapposto.
Per risolvere basta aumentare il margine superiore nella regola
#wrapper:

#wrapper { background: #fff; ; margin: 330px auto 0 auto; }

Ecco il layout corretto:

Figura 7 - Screenshot dell'esempio completo e corretto (click per ingrandire)

Conclusioni, approfondimenti e ottimizzazione

La costruzione del layout portata avanti in questo articolo è solo
un esempio delle mille possibili realizzazioni. L'obiettivo di questa
tecnica è quello di realizzare layout molto complessi superando i
limiti imposti dai CSS attraverso la grafica. Ricordate sempre che la
vostra realizzazione risulterà  funzionante soltanto quando non si
noterà  il punto di unione tra la struttura realizzata con fogli
di stile e lo sfondo grafico.

Lo scopo di questo articolo era quello di dare una visione d'insieme
delle varie fasi di realizzazione, e quindi l'artwork portato come
esempio è stato scarsamente ottimizzato (e si vede).

In realtà i layout realizzati attraverso gli sfondi grafici
sono molto pesanti: è quindi obbligatorio tenere sotto controllo
l'ottimizzazione dello sfondo sia durante la sua realizzazione
(attraverso gli strumenti inclusi in qualsiasi programma di grafica
raster) sia durante la sua implementazione, ricorrendo magari a
tecniche efficaci come quella degli sprite.

Se siete in cerca di approfondimenti, il miglior modo di imparare ad
affinare la tecnica rimane quello di osservare il lavoro altrui: se vi
imbattete in un sito come Web Designer Wall, non c'è niente di meglio
che osservarne il codice e guardare come è stato realizzato l'artwork.

Tutto il materiale proposto è disponibile per il download.

Ti consigliamo anche