Creare un sfondo


Puoi trovare moltissimi sfondi sulla rete (ci sono molti siti che offrono degli sfondi gratuitamente) o puoi costruirteli da solo. Puoi scrivere una pagina web cambiando il suo sfondo tramite una semplice istruzione HTML (dai un'occhiata al mio corso di HTML per saperne di piu') o puoi costruire un' immagine (in questo caso devi scrivere qualcosa di questo tipo: <body background=tua_GIFoppureJPEG>). Se inserisci un'immagine come sfondo, qualsiasi web browser la usera' per 'piastrellare' l'intera pagina. In questo caso devi costruire un'immagine di 50x50 pixel, 72 pixel di risoluzione, scegliendo 16 milioni di colori come tipo immagine:

Otterrai qualcosa del genere:

Ora puoi modificare la tua immagine come preferisci. Per esempio, potresti usare lo strumento airbrush (Io ho scelto una tinta blu come colore di primo piano, una tinta grigia come colore di sfondo e 'marble' come tessitura):

Questo e' il tuo semplice sfondo! Se stai usando PhotoShop, puoi anche usare l'opzione 'Texture' (menu 'Filters'). Ad ogni modo puoi provare moltissimi effetti e filtri per cambiare la tua immagine, infatti questo e' solo un esempio...Suggerimento: costruisci immagini semplici...per esempio, prova questa:

Infine, metti lo sfondo nella tua pagina (puoi usare un'immagine GIF oppure una JPG):

<body bgcolor="#xxxxxx" background="mybackgr.gif">

Dove <bgcolor="#xxxxxx" e' un colore di sfondo simile al colore di sfondo della tua GIF/JPG. Non dimenticarti questa piccola cosa, perche' ci sono persone che disabilitano le immagini...e si da il caso che ci siano delle pagine web qua e la' i cui webmaster hanno dimenticato cio'. Percio' se tu disabiliti il caricamento automatico delle immagini e visiti alcune di quelle pagine, non vedrai assolutamente nulla! Non e' una grande idea inserire del testo bianco su un' immagine nera usata come sfondo, senza specificare bgcolor="#000000"! Se lo fai, tutte le persone che disabilitano le immagini vedranno del testo bianco su SFONDO BIANCO (di solito il colore di sfondo preimpostato)!

Bene, ci sono parecchie tecniche per creare degli sfondi interessanti, ma il problema vero e' un altro: le cuciture tra le immagini...Cio' che voglio dire e' che se usi un'immagine di 50x50 pixel come immagine di sfondo, il browser web la usera' per 'piastrellare' la pagina, ma potresti vedere delle cuciture tra le immagini. Per esempio:

Non riesci a vedere le cuciture? Certo, non puoi. Ma...guarda qui!

Al contrario, questo e' lo stesso 'pezzo di sfondo' senza cuciture:

La pagina corrispondente e' migliore di quella precedente.

Per poter creare degli sfondi senza cuciture esistono varie tecniche. Ti mostrero' quella che preferisco. Prima di tutto devi dividere la tua immagine in 4 parti uguali, spostarle (secondo uno schema specifico), rifinire i bordi ed infine riassemblare i pezzi nelle loro posizioni originali:

(GIF Originale) (GIF 'modificata')

Ora devi ritoccare i bordi centrali dell'immagine (evidenziati in rosso). Puoi usare lo strumento Retouch per esempio, oppure puoi copiare ed incollare (seleziona un'area all'interno dei 4 quadrati ed incollala SOPRA i bordi centrali da ritoccare). Infine, riassembla il tutto:

(Ritocca questa...) (Poi riassembla i pezzi...)

Se stai usando PhotoShop:

  1. Crea una nuova immagine (50x50 pixel)

  2. Filter -> Other -> Offset (Horizontal=25, Vertical=25, Wrap Around, poi clicca su OK

  3. Seleziona lo strumento Rubber Stamp, poi seleziona un'area dell'immagine (come area sorgente dalla quale copiarne una parte)

  4. Rifinisci i bordi centrali orizzontale e verticale (scegli un pezzo dell'immagine 'regolare' e selezionalo premendo il tasto ALT e cliccando col tasto sinistro, poi clicca sopra i bordi...)

  5. Per riassemblare il tutto: Filter -> Other -> Offset (o semplicemente Ctrl-F)...fatto!

Se stai usando PaintShop:

  1. Duplica l'immagine (creane una nuova vuota delle stesse dimensioni della GIF originale)

  2. Taglia il quadrato in alto a sinistra della GIF di partenza (numero 1) ed incollalo sull'immagine vuota, costruendo cosi' il quadrato in basso a destra (numero 4)

  3. Taglia il quadrato in alto a destra della GIF di partenza (numero 2) ed incollalo sull'immagine vuota, costruendo cosi' il quadrato in basso a sinistra (numero 3)

  4. Taglia il quadrato in basso a sinistra della GIF di partenza (numero 3) ed incollalo sull'immagine vuota, costruendo cosi' il quadrato in basso a destra (numero 2)

  5. Taglia il quadrato in basso a destra della GIF di partenza (numero 4) ed incollalo sull'immagine vuota, costruendo cosi' il quadrato in basso a sinistra (numero 1)

  6. Ritocca i bordi centrali usando lo strumento 'retouch' (puoi anche zoomare l'immagine ed usare lo strumento 'Brush')

  7. Riassembla i quadrati ritoccati nelle loro posizioni originali

Oh, dimenticavo una cosa: credo che scegliere delle immagini come sfondo non sia una grande idea, perche' diventano troppo pesanti per la vista e, ovviamente, troppo pesanti da caricare! Ad ogni modo, se vuoi realmente usarle, scegli delle immagini leggere...


      Home  Pag. prec.       Chi siamo?  Scrivici!

Copyright (c) 1998-2006 Wowarea