Con questo breve tutorial impareremo oggi uno dei tricks fondamentali nella gestione grafica di un sito web: la creazione di un custom pattern con Adobe Photoshop. Sebbene la maggior parte dei web-designers si affidi a siti specializzati nella condivisione di risorse grafiche, riteniamo importante la conoscenza del metodo, anche per qualcosa che si dà “per scontato” come un pattern.

Creare Pattern Photoshop

Apriamo Photoshop e creiamo un nuovo file, 8×8 pixels a 72 dpi.

Cancelliamo il livello di sfondo, selezionandolo con Ctrl+A e premendo Canc. Rimarrà il livello trasparente.

Selezioniamo lo strumento Matita, Diametro 1, Durezza al 100%, colore nero. Zoomiamo sul foglio sui 3200% e riempiamo coi pixels come da immagine seguente, 5 pixels nel lato sinistro e in quello superiore, 5 nel lato inferiore e 5 nel lato destro:

Passiamo ora a definire il pattern: operiamo su Modifica/Definisci pattern. Assegnamogli un nome che possiamo facilmente ricordare. Ora creiamo un nuovo file, delle dimensioni 700×400 pixels. Operiamo su Modifica/Riempi e selezioniamo il pattern che abbiamo appena creato.

Modifichiamo il colore di sfondo e il colore del pattern per ottenere differenti risultati.

Un metodo alternativo per collocare un pattern sul layout è quello di intervenire sulle Opzioni di fusione dal pannello dei livelli, e selezionare il box Sovrapposizione pattern. Selezioniamo il pattern che vogliamo sovrappore al livello e diamo l’ok.

Per cancellare un pattern, operiamo su Modifica/Gestione predefiniti e dal menù a tendina selezioniamo pattern: scegliamo l’oggetto da cancellare col tasto destro, e clickiamo Elimina pattern.

Speriamo di esservi stati utili. Alla prossima!