[Tutorial] Creiamo una texture per il web

Volete indire un contest o ne siete messaggeri? Volete far vedere cosa siete riusciti a fare o vi domandate come ottenere un determinato risultato? Trascinate con voi nella discussione gli altri utenti in questa sezione del forum!
Rispondi
Stemby
Apprendista
Apprendista
Messaggi: 12
Iscritto il: sab 6 ott 2012, 19:49

[Tutorial] Creiamo una texture per il web

Messaggio da Stemby » lun 11 lug 2016, 20:17

In questo tutorial illustrerò passo passo come creare una texture da utilizzare come sfondo per un sito web.

Prerequisiti:
  • GIMP :)
  • una macrofotografia ad altra risoluzione del materiale da cui si vuole estrarre la texture (carta, tessuto, ecc.) ottenuta ponendo l'obiettivo dell'apparecchio fotografico perpendicolarmente alla superficie ritratta
  • Resynthesizer
Per ottenere una foto adeguata occorrono attrezzature professionali e buona maestria; probabilmente conviene cercare in rete (LibreStock, ecc.) un'immagine liberamente utilizzabile per i propri scopi (attenzione alla licenza!). Nel mio caso sfrutterò la foto di un foglio di carta di riso trovata su Flickr:

Immaginerice paper swans medium. Autore: Scott Moore; licenza: CC-BY.

Scarichiamola alla massima risoluzione (6478x4177) e rinominiamola come rice.jpg.

Per l'installazione di Resynthesizer invito a cercare le istruzioni più indicate per il proprio sistema operativo tramite un motore di ricerca; nel caso di Debian e derivate è sufficiente installare il pacchetto gimp-plugin-registry:

Codice: Seleziona tutto

# apt-get install gimp-plugin-registry
Lanciamo GIMP.

Apriamo l'immagine:
File → Apri... → rice.jpg → Converti

Creiamo la nostra piastrella vuota:
File → Nuova... → impostiamo la risoluzione → OK

Consiglio di creare una piastrella quadrata (quindi stesso numero di pixel sia per l'altezza che per la larghezza) larga e alta quanto il valore del lato più corto dell'immagine originale (nel nostro caso 4177 px). La densità dei pixel, trattandosi di un'immagine destinata al web, è totalmente irrilevante; si può lasciare il valore di default 300 ppi, oppure mettere 96 per marcare il fatto che la destinazione non sia la stampa, o quel che si preferisce (il risultato sarà sempre identico).

Apriamo la finestra di Resynthesizer:
Filtri → Mappa → Resynthesize...

Impostiamo l'input:
[rice] (importata) [...]

Impostiamo l'output:
Togliere la spunta da "Fit output to bordering pixels" e metterla su "Make horizontally tileable" e su "Make vertically tileable"; lasciare tutto il resto come da default e cliccare su OK.
Immagine

Attendiamo:
Per immagini così grosse, anche usando computer performanti, occorrerà un po' di pazienza.

Riduciamo l'immagine alle dimensioni volute:
Immagine → Scala immagine...

La risoluzione ottimale va trovata per tentativi; nel mio caso ho scelto 800x800. Cliccare poi su "Scala".

Esportiamo l'immagine:
File → Esporta come... → background.jpg → Esporta → lasciare le impostazioni di default → Esporta
Immagine

Chiudiamo GIMP, anche senza salvare.
Immagine

Usiamo l'immagine prodotta:
A questo punto si può utilizzare la nostra piastrella semplicemente impostando la proprietà CSS background-image in modo che richiami il file ottenuto; per i dettagli consultate le indicazioni che potete trovare in rete.

Il browser scaricherà l'immagine (abbastanza leggera, appena sopra i 100 kB) e comporrà automaticamente il pattern. [EDIT]Su questo sito si può apprezzare il risultato. Su quel sito ho nel frattempo adottato un nuovo sfondo, sempre creato seguendo questa guida ma basandomi su un'altra immagine.[/EDIT]

Ringrazio Lazza per i consigli che mi ha passato, e gli sviluppatori di GIMP e di Resynthesizer per aver creato questa magnifica accoppiata.
Ultima modifica di Stemby il gio 21 lug 2016, 16:44, modificato 4 volte in totale.

Avatar utente
Lazza
Amministratore
Amministratore
Messaggi: 6192
Iscritto il: dom 5 set 2004, 13:06
Località: Borso del Grappa, Treviso
Contatta:

Re: [Tutorial] Creiamo una texture per il web

Messaggio da Lazza » lun 11 lug 2016, 21:31

Grazie per aver condiviso il tutorial! :D

Domandina 1: dato il tipo di immagine ottenuta, non converrebbe salvarla in PNG e passarla sotto a pngquant, tipo così?

Codice: Seleziona tutto

pngquant texture.png
Domandina 2: scalandola nella forma di un quadrato non l'hai resa schiacciata?
Consigli:
  • Cercate prima di postare
  • Rispondete se vi chiediamo chiarimenti
  • Segnate la risposta che vi ha risolto il problema, con l'apposito bottone
  • Valutate cosa si può postare nelle domande di base

Stemby
Apprendista
Apprendista
Messaggi: 12
Iscritto il: sab 6 ott 2012, 19:49

Re: [Tutorial] Creiamo una texture per il web

Messaggio da Stemby » lun 11 lug 2016, 21:52

Lazza ha scritto: Domandina 1: dato il tipo di immagine ottenuta, non converrebbe salvarla in PNG e passarla sotto a pngquant, tipo così?

Codice: Seleziona tutto

pngquant texture.png
Non conoscevo pngquant. Avevo scartato il formato PNG in quanto mi veniva un'immagine estremamente pesante, ma se ci si riesce a portare ad un peso simile al mio JPEG con qualità migliore, o qualità analoga e peso inferiore, allora potrebbe essere interessante. Provo ed eventualmente modifico la guida.
Domandina 2: scalandola nella forma di un quadrato non l'hai resa schiacciata?
No, perché ho scalato un quadrato (sono passato da 4177x4177 a 800x800). Vedi passaggio "Creiamo la nostra piastrella vuota".

Ciao!

Avatar utente
Lazza
Amministratore
Amministratore
Messaggi: 6192
Iscritto il: dom 5 set 2004, 13:06
Località: Borso del Grappa, Treviso
Contatta:

Re: [Tutorial] Creiamo una texture per il web

Messaggio da Lazza » lun 11 lug 2016, 21:54

Ecco cosa succede a leggere di fretta. :roll: :mrgreen:
Consigli:
  • Cercate prima di postare
  • Rispondete se vi chiediamo chiarimenti
  • Segnate la risposta che vi ha risolto il problema, con l'apposito bottone
  • Valutate cosa si può postare nelle domande di base

Stemby
Apprendista
Apprendista
Messaggi: 12
Iscritto il: sab 6 ott 2012, 19:49

Re: [Tutorial] Creiamo una texture per il web

Messaggio da Stemby » lun 11 lug 2016, 22:16

Ho provato ad esportare in PNG e a trattare l'immagine con pngquant, ma ottengo un file da 626 kB.

Non so se sia possibile aumentare la compressione in qualche modo (immagino di sì) e con che risultati.

[EDIT]
Trovato:

Codice: Seleziona tutto

pngquant --quality=XX background.png
Risultato: non ne vale la pena. A parità di peso la qualità percepita dell'immagine è sensibilmente inferiore.
[/EDIT]

Ciao!

Avatar utente
Lazza
Amministratore
Amministratore
Messaggi: 6192
Iscritto il: dom 5 set 2004, 13:06
Località: Borso del Grappa, Treviso
Contatta:

Re: [Tutorial] Creiamo una texture per il web

Messaggio da Lazza » lun 11 lug 2016, 22:44

Dipende anche dal tipo di texture comunque. :) Quelle più fotografiche vanno meglio in JPG, le altre in PNG.
Consigli:
  • Cercate prima di postare
  • Rispondete se vi chiediamo chiarimenti
  • Segnate la risposta che vi ha risolto il problema, con l'apposito bottone
  • Valutate cosa si può postare nelle domande di base

Rispondi