[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!

[Tutorial] Creiamo una texture per il web

Messaggioda Stemby » lun lug 11, 2016 8:17 pm

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 lug 21, 2016 4:44 pm, modificato 4 volte in totale.
Stemby
Apprendista
Apprendista
 
Messaggi: 11
Iscritto il: sab ott 06, 2012 7:49 pm

Re: [Tutorial] Creiamo una texture per il web

Messaggioda Lazza » lun lug 11, 2016 9:31 pm

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?
Attenzione! Per aiutarvi meglio, vi consiglio:
  • CERCATE prima di postare, la soluzione potrebbe già esserci
  • RISPONDETE se vi chiediamo chiarimenti
  • SEGNATE i topic risolti con l'apposito tag
  • MEDITATE su cosa postare nelle domande di base
Avatar utente
Lazza
Amministratore
Amministratore
 
Messaggi: 6017
Iscritto il: dom set 05, 2004 1:06 pm
Località: Borso del Grappa, Treviso

Re: [Tutorial] Creiamo una texture per il web

Messaggioda Stemby » lun lug 11, 2016 9:52 pm

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!
Stemby
Apprendista
Apprendista
 
Messaggi: 11
Iscritto il: sab ott 06, 2012 7:49 pm

Re: [Tutorial] Creiamo una texture per il web

Messaggioda Lazza » lun lug 11, 2016 9:54 pm

Ecco cosa succede a leggere di fretta. :roll: :mrgreen:
Attenzione! Per aiutarvi meglio, vi consiglio:
  • CERCATE prima di postare, la soluzione potrebbe già esserci
  • RISPONDETE se vi chiediamo chiarimenti
  • SEGNATE i topic risolti con l'apposito tag
  • MEDITATE su cosa postare nelle domande di base
Avatar utente
Lazza
Amministratore
Amministratore
 
Messaggi: 6017
Iscritto il: dom set 05, 2004 1:06 pm
Località: Borso del Grappa, Treviso

Re: [Tutorial] Creiamo una texture per il web

Messaggioda Stemby » lun lug 11, 2016 10:16 pm

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!
Stemby
Apprendista
Apprendista
 
Messaggi: 11
Iscritto il: sab ott 06, 2012 7:49 pm

Re: [Tutorial] Creiamo una texture per il web

Messaggioda Lazza » lun lug 11, 2016 10:44 pm

Dipende anche dal tipo di texture comunque. :) Quelle più fotografiche vanno meglio in JPG, le altre in PNG.
Attenzione! Per aiutarvi meglio, vi consiglio:
  • CERCATE prima di postare, la soluzione potrebbe già esserci
  • RISPONDETE se vi chiediamo chiarimenti
  • SEGNATE i topic risolti con l'apposito tag
  • MEDITATE su cosa postare nelle domande di base
Avatar utente
Lazza
Amministratore
Amministratore
 
Messaggi: 6017
Iscritto il: dom set 05, 2004 1:06 pm
Località: Borso del Grappa, Treviso



Torna a Contest, creatività e tutorial

Chi c’è in linea

Visitano il forum: Bing [Bot] e 2 ospiti

 
Web hosting generosamente offerto da Fabrizio Balliano