torna alla home

Utilizzando questo sito e proseguendo la navigazione acconsenti all'uso dei cookies. Approfondisci


graffetta Porta con te il segnalibro.

19 - Creare un pattern per sfondi web.
Il pattern è un’immagine che viene ripetuta più volte per creare uno sfondo.
Il suo uso è ideale per le pagine web, dove occorre realizzare immagini leggere senza rinunciare all’estetica.
In questo tutorial vedremo come si realizza.
Creare un nuovo documento  File/nuovo su fondo trasparente
Impostare nella finestra le dimensioni del pattern, per maggior leggerezza creeremo un’immagine piccola 4 x 4 pixel, zoomiamo anche a 3200 % per vedere bene il lavoro.
Scegliere il colore dello sfondo e riempire il quadrato. Io ho usato una sfumatura di azzurro
Su un altro livello tracciare con lo strumento matita un motivo a piacere. Io ho usato un colore blu scuro e ho tracciato 4 punti da 1 pixel trasversali.
Unire i due livelli
A questo punto creiamo il pattern che ci servirà per riempire lo sfondo della nostra pagina web.
Modifica/definisci pattern – dare un nome al pattern e salvare
tutorial photoshop creare un pattern per sfondi
Una volta salvato il pattern, il file di lavoro possiamo anche chiuderlo senza salvare.
Vediamo ora come si presenta il nostro sfondo.
Apriamo un nuovo lavoro di 500 px x 500
Selezionate lo strumento secchiello e scegliete pattern, scorrete la finestra che si apre e in fondo troverete il pattern appena creato.
Rovesciate il secchiello nella tela vuota e il gioco è fatto.
tutorial photoshop creare un pattern per sfondi
Naturalmente potete creare tutti i motivi che volete, colori a piacimento e grandezze anche maggiori
Sbizzarritevi con la fantasia e soprattutto le prove.

CREARE PATTERN  seconda parte
Abbiamo visto come creare pattern per il riempimento di uno sfondo disegnandolo da zero per avere sfondi geometrici, ma possiamo anche creare uno sfondo da una foto o immagine.
Prendiamo ad esempio questa immagine che ho ritagliato da una foto in 200 px x 200 px
tutorial photoshop creare un pattern per sfondi
Se noi definissimo subito un pattern da questo quadrato, quando andremmo a riempire la tela avremmo una cosa del genere:
tutorial photoshop creare un pattern per sfondi
Il che è una cosa improponibile, quindi dobbiamo preparare la nostra immagine in modo da non vedere quelle brutte divisioni.
Dal nostro ritaglio quadrato andiamo su Filtro/ altro/ sposta e impostare come valori la metà do quelli dell’immagine ( in questo caso 100)
tutorial photoshop creare un pattern per sfondi
Ottenuta questa immagine dobbiamo col timbro clone mascherare le giunte a croce che si vedono nel mezzo.
Praticamente potete fare tutte le modifiche che volete però solo al centro senza toccare i bordi dell'immagine che sono impostati per combaciare alla ripetizione del motivo.
Un po’ di pazienza e abbiamo questo risultato
tutorial photoshop creare un pattern per sfondi

Ora definiamo il pattern:
Modifica/definisci pattern  diamo un nome al pattern OK
Ora facciamo la prova in una tela vuota e avremo il nostro sfondo decisamente migliore del primo che abbiamo creato.
tutorial photoshop creare un pattern per sfondi

Torna all'inizio del tutorial


 Click e Paciughi  Google

css Valid HTML 4.01 Transitional CSS Valido! webdesigngroup webpam