Cristina: /* Creare il pattern */

2009-06-14T22:55:06Z

‎Creare il pattern

Nuova pagina

{{pattern}}

==Introduzione==
Per creare un pattern esistono diversi metodi differenti. Alcuni usano soltanto programmi di grafica raster come ad esempio Photoshop o Gimp, altri usano programmi di grafica vettoriale, come Illustrator o Inkscape.

Potreste pensare che se avete un'immagine di questo tipo:

[[File:Pat_Example.png]]

Potrebbe bastare usare uno dei programmi per inserila in un package, ma non è così. Un pattern per funzionare nel ''Crea uno stile'' ha bisogno di diverse caratteristiche.

Pensiamo sia più semplice prendere la via della grafica raster. Poichè il risultato finale è inferiore, se volete usare la grafica vettoriale, troverete un link di approfondimento in basso.

==Cosa vi serve per iniziare==
*Un programma di editing immagini, come [[Adobe Photoshop]] (a pagamento o con versione free/demo per un mese) oppure [[Gimp]] (gratis).

*DDS Plugins per il programma di editing immagini. Disponibile sia per [http://developer.nvidia.com/object/photoshop_dds_plugins.html Photoshop] sia per [http://registry.gimp.org/node/70 Gimp] e sono entrambi gratuiti.

<div class="tipsk">Se avete [[Adobe Photoshop]] in italiano, l'installazione del plug-in fa un po' di confusione, che dovreste sistemare a mano. Una volta terminata l'installazione andate nella cartella di installazione di ''Photoshop''. Solitamente ''C:/Programmi/Adobe/Adobe Photoshop'' (C: indica il disco fisso su cui avete installato). Dovreste vedere una cartella '''Plug-In''' e un'altra '''Plug-Ins''. La seconda è sbagliata, viene letta solo dalla versione in inglese. Apritela, troverete due cartelle ''File formats'' e ''Filters''. Dovete prendere i file qui dentro e spostarli in ''Plug-In→Formati di file'' e ''Plug-In→Filtri'' rispettivamente.
Fatto questo, aprendo Photoshop, e andando in ''Salva con nome'' dovreste vedere l'estensione '''D3D/DDS''' in cui salvare</div>

*Un'immagine da convertire o un'idea di pattern da realizzare... tenete conto che non tutti i pattern sono facilmente convertibili... Se non avete idee potete partire da questo sito [http://www.colourlovers.com/ Colour Lovers]. Ma potete anche scaricare pennelli da aggiungere a Photoshop ad aesempio e creare da voi i vostri pattern.

==Difficoltà==

Creare pattern ed importarli non è un processo facile e bisogna quanto meno aver già pratica a maneggiare programmi di grafica di questo tipo. Se non li sapete usare probabilmente finireste per arrabbiarvi e non riuscire... Magari chissà se riusciremo a fare un tutorial che vi insegni...

Se non avete le basi vi consigliamo di cercare anche tutorial su google su come usare questi programmi.

==Come è fatto un pattern==

Vi abbiamo mostrato l'esempio:

[[File:Pat_Example.png]]

i colori in questo caso vi aiutano a capire meglio. Se fossimo nel ''Crea uno stile'' avremmo bisogno di modificare 4 colori, i diversi fiori e lo sfondo.
Spero che in questo modo vi sia più chiaro il perchè dobbiamo procedere in un certo modo, anche se magari di grafica ne capite poco e niente.

Come si può fare in modo che un'immagine piatta sia personalizzabile in 4 colori diversi? La risposta sta nel creare '''diversi canali'''.

Prima di entrare nel dettaglio, cerco di farvi capire ancora meglio....
Magari pastrocchiando in [[Adobe Photoshop]] vi è capitato di imbattervi in questi senza capire bene cosa fossero. Ad esempio tramite ''Immagini→Regolazioni→Curve'' potete aprire un menù che si chiama proprio così, '''Canali''' e vi appare:

[[File:Photoshop_curve.jpg|link=]]

Ecco, questi sono gli stessi canali che deve avere un pattern. Ora azzeriamo e torniamo al nostro pattern.

Vediamo quali dovrebbero essere i canali:

[[File:Stack_canali_color.jpg|link=]]

Come vedete abbiamo quattro livelli trasparenti uno sull'altro, dal basso lo sfondo e poi gli altri dettagli.

Torniamo a [[The Sims 3]]: '''ogni pattern può avere al massimo 4 canali'''. Bene, quindi il nostro esempio potrebbe andare. In realtà potete anche creare pattern con un solo canale. L'intervallo di canali è appunto 1-4, e più canali usate più la texture è difficile da creare.

Da ciò che sappiamo di ''Crea uno stile'' il nostro pattern deve adattarsi a tutti i colori RGB. Quindi non di certo bene lasciare i colori come nel nostro esempio.

Se avete vaghi ricordi di Bodyshop e gli alpha potrebbero tornarvi utili. Comunque ripetiamo. In un canale alpha, ciò che in nero è trasparente e ciò che è in bianco è totalmente opaco, ovvero visibile. Il grigio detta la misura della trasparenza.

Prendiamo il nostro pattern: il canale sfondo sarà vicino al bianco, i fiori evidenziati in bianco su sfondo nero, su tre canali diversi a seconda del colore che vorremo dargli.

[[File:Stack_canali_wn.jpg|link=]]

Sembra tutto facile... vediamo il dettaglio di come si fa.

==Creare il pattern==

#Aprite [[Adobe Photoshop]] o [[Gimp]] e create un nuovo file RGB a 8bit di dimensione 256x256 pixel
#: 
#:[[File:Pattern_psp_01.jpg|link=]]
#: 
#Aprite l'immagine del pattern che avete trovato e incollatela qui, oppure create voi stessi il pattern che preferite. Se usate un'immagine l'ideale sarebbe partire da un'immagine 256x256 pixel o quantomeno multiplo di questa dimensione. Se le dimensioni sono diverse farete fatica ad adattarla mantentendo le proporzioni. Un buon pattern deve anche essere ''seamless'' ovvero se lo ciclate ed affiancate il motivo deve continuare senza interruzioni.
#:Per capire meglio vediamo qui sotto due esempi, il nostro pattern e un altro preso da un sito... come vedete il primo va bene, si cicla senza segni, il secondo no!
#: 
#:[[File:Seamless.jpg|link=]][[File:No_seamless.jpg|link=]]
#: 
#:Potreste anche cercare di tagliare il pattern e cercare di renderlo seamless... vedete voi se ne vale la pena..
#:
#Proseguiamo, avete il vostro pattern seamless. In questo caso è molto semplice separare i canali, quindi vediamo come si fa ''manualmente''. Dopo vedremo un'alternativa valida quando non è così facile.
#:
#Abbiamo parte di fiore rosso, verde e marroni, più uno sfondo bianco. Duplicate il livello e createne 2 copie. Aggiungete in fondo un livello sfondo e che sarà il bianco.
#:''Livello→Duplica Livello''
#: 
#:[[File:Duplica_livello.jpg|link=]]
#: 
#Se non l'avete ancora attivata, attivate ora la ''Finestra→Livelli''
#: 
#:[[File:Finestra_livelli.jpg|link=]]
#: 
#:Vedrete apparire questa finestra nel layout di Photoshop
#: 
#:[[File:Finestra_livelli2.jpg|link=]]
#: 
#Ora dovete lavorare su ogni singolo livello, isolando le parti di un colore e dell'altro. Per farlo potete usare la gomma e la bacchetta magica. Vi consigliamo di zoomare molto sull'area, solo in questo modo potrete togliere ogni frammento bianco.
#: 
#:[[File:Pattern_psp_02.jpg|link=]]
#: 
#:Dopo aver ripulito il risultato sarà qualcosa del genere, per il livello verde ad esempio (nota: il bianco che si vede è del livello di sfondo non del livello dei fiori)
#: 
#:[[File:Pattern_psp_03.jpg|link=]]
#: 
#Procedete separando tutti e 4 i livelli.
#:
#Una volta separati, nel nostro caso, i fiori dovranno essere totalmente opachi, ovvero bianchi. Trasformateli in bianco usando ''Immagine→Regolazioni→Luminosità e contrasto''. Regolate e rieseguite l'operazione fino ad avere il fiore bianco.
#:
#Create un nuovo livello sotto al fiore bianco, coloratelo tutto di nero e poi unite i due livelli. Il livello di sfondo sarà un grigio chiaro, quasi bianco. Alla fine dovreste avere qualcosa di simile (ogni quadrato rappresenta un livello):
#:
#:[[File:Stack_canali_wn.jpg|link=]]
#:
#Una volta che il file è pronto, procediamo con i canali.
#:
#Create una nuova immagine, sempre 256x256 RGB a 8bit.
#:
#Nello stesso box dei livelli, potete vedere che è inclusa anche una scheda '''Canali'''. I canali di default sono 4: '''RGB, Red, Green, Cyan''' ovvero ''RGB, Rosso, Verde, Blu'' in italiano. Se avete però un pattern a 4 livelli, dovete aggiungere un canale, che in automatico sarà chiamato '''Alpha'''.
#: 
#:[[File:Pattern_psp_04.jpg|link=]]
#: 
#Nel nostro caso abbiamo 4 livelli, quindi clicchiamo sull'icona indicata dall'immagine precedente e aggiungiamo un canale.
#:Nota: i canali non vanno mai rimossi, anche nel caso in cui ne userete solo 2.
#:
#Tornate al file in cui avete i 4 livelli del pattern. Selezionate tutto e copiate (CTRL+A per selezionare e CTRL+C per copiare, oppure ''Seleziona→Seleziona Tutto'' e ''Modifica→Copia''
#:
#Andate alla finestra del nuovo file creato. Attivate la vista '''Canali''' dal box ''Livelli/canali'' e incollate qui il contenuto copiato.
#:
#Continuate a spostarvi fra una finestra e l'altra selezionando ogni volta un livello diverso del pattern e incollando poi su un canale differente. '''Importante''' che il canale a tinta unita di sfondo sia sempre incollato sul canale alpha.
#:
#Una volta incollati tutti i livelli dovreste ottenere qualcosa di simile a questo nel nuovo file in cui avete incollato sui livelli.
#: 
#:[[File:Pattern_psp_05.jpg|link=]]
#: 
#In realtà così è sbagliato. Solo dopo vari test a volte si riesce a capire un errore. Il livello di sfondo deve sempre essere il canale ''Red''. La pila dei canali è:
#:*Alpha
#:*Blue
#:*Green
#:*Red
#:Questo vuol dire che il canale caricato per ultimo, più in alto è ''alpha''. Se rendiamo ''alpha'' tutto bianco, per renderlo il colore opaco di sfondo, otterremo che nulla dei canali inferiori si vedrà. Se lo coloriamo in grigio, darà un tono di opacità di quel colore su tutti gli altri livelli.
#:
#:Pertanto, nel caso di questi semplici fiori su sfondo opaco, lo sfondo con opacità totale deve stare sul canale ''red'' e sul canale ''alpha'' metteremo un livello dei fiori.
#: 
#:[[File:Pattern_psp_05b.jpg|link=]]
#: 
#Visto così pare orribile, e sembra che non ci azzecchi niente, ma abbiamo fatto giusto. Generalmente al di là di questo caso, se guardate alla scheda ''Livelli'' vedrete che dipende tutto da un unico livello, ''Background''. Mi raccomando, fate attenzione che il canale ''alpha'' sia visibile (l'icona con l'occhio deve essere attivata).
#:
#E' giunto il momento di salvare il file! La parte della creazione è terminata... o quasi. Avete già installato il plugin DDS toold di Nvidia come scritto a inizio pagina vero?
#:
#Andate su ''File→Salva con nome''. Nel box di scelta del formato, scegliete '''D3D/DDs'''.
#: 
#:[[File:Pattern_psp_06.jpg|link=]]
#: 
#Vi apparirà un pop-up delle opzioni di '''Nvidia DDS Tool'''.
#:
#Scegliete dal menù a tendina il formato '''8.8.8.8 ARGB 32bpp'''. E poi cliccate su '''Salva'''. Mi raccomando attenzione a scegliere il formato giusto.
#: 
#:[[File:Pattern_psp_07.jpg|link=]]
#: 
#Bene, questa parte è finita, ora dovete creare il package tramite un tool e potete procedere con la lettura. Un ultimo consiglio è quello di salvarvi anche i file in [[PSD]] sia del pattern a livelli che del pattern su canali RGB, così se qualcosa non va non dovrete ripartire da capo!

<div style="width:70%; margin:auto; text-align:center; font-size:1.2em; font-weight:bold; color: #F6175B; border: 1px solid #F6175B; line-height:3em;">Ora dovete creare il package del pattern... [[Creare package pattern|LEGGETE QUI PER SAPERE COME FARE]]</div>

==Creare un pattern complesso da separare==

Vediamo come fare se il pattern è un po' più complesso da dividere in livelli differenti. Prendiamo questo:

[[File:Example2.png|link=]]

è già ''seamless'' e 256x256pixel.

#Proviamo a desaturarlo e vedere come esce. Per farlo andate in ''Immagine→Regolazioni→Togli saturazione''
#: 
#:[[File:Pattern_psp_08.jpg|link=]]
#: 
#Questo è il risultato, che non è male, ma c'è troppa poca differenza fra le parti chiare...
#: 
#:[[File:Pattern_psp_09.jpg|link=]]
#: 
#Torniamo indietro annullando l'operazione (CTRL+Z oppure ''Modifica→Annulla'')
#: 
#Proviamo ad aumentare il contrasto, tramite ''Immagine→Regolazioni→Luminosità e contrasto'' e tramite ''Immagine→Regolazioni→Curve''. Cercate di fare in modo che i colori siano differenti fra loro.
#:
#:[[File:Photoshop_curve.jpg|link=]]
#:
#Con contrasto e curve siamo arrivati a questo, ma ancora non siamo soddisfatti.
#: 
#:[[File:Pattern_psp_10.jpg|link=]]
#: 
#Usiamo ''Immagine→Regolazioni→Sostituisci Colore'' e andiamo a modificare quei colori che ci sembrano troppo simili. Prendete con il contagocce il colore da sostituire e poi spostate i livelli delle opzioni in basso. Ad esempio schiariamo il giallo facendolo diventare quasi bianco.
#: 
#:[[File:Pattern_psp_11.jpg|width=600px]]
#: 
#Bene, ora proviamo a desaturare di nuovo.
#:
#Ora create una copia del livello da ''Livello→Duplica livello''
#:
#Selezionate ''Immagine→Regolazioni→Livelli''. Vi si aprirà una schermata come questa:
#: 
#:[[File:Pattern_psp_12.jpg|link=]]
#: 
#Dovete spostare i triangoli evidenziati dal riquadro, fino a cercare di evidenziare ciò che dovrebbe essere un livello di canale della texture. Ad esempio, ci siamo focalizzati sulla parte più scura:
#: 
#:[[File:Pattern_psp_13.jpg|link=]]
#: 
#Purtroppo il nostro pattern era davvero difficile, ed è rimasto un alone che dovremo togliere a mano, per lasciare solo la parte scura. Abbiamo potuto operare in questo modo solo per le due aree più scure. Non siamo riusciti a recuperare i fiori, per cui torniamo al livello con il massimo contrasto e selezioniamo con la bacchetta magica tutti i fiori per poi copiarli su un nuovo livello.
#:
#Non stiamo a entrare nei dettagli che sono solo questione di maneggiamenti con photoshop, selezioni e copie livello. Alla fine arriveremo a qualcosa del genere:
#: 
#:[[File:Pattern_psp_14.jpg|link=]]
#: 
#Da qui non resta che seguire le indicazioni del procedimento precedente a partire dal punto 8)
#:
#Alla fine avremo:
#: 
#:[[File:Pattern_psp_15.jpg|link=]]
#: 

==Creazione pattern veloce==

La versione aggiornata il 12/06/09 di [[The Sims 3 Workshop Pattern Tool]] permette di importare anche file [[PNG]] e [[BMP]] e ci consente in questo modo di creare nuovi pattern, anche se molto più imprecisi.
I realizzatori non hanno ancora redatto un tutorial relativo a questa funzione, perciò quanto riportato di seguito è solo frutto di qualche tentativo.

===Cosa vi serve===
*[http://www.thesimsresource.com/workshop/downloads The Sims 3 Workshop Pattern Tool]

*[http://www.microsoft.com/downloads/details.aspx?FamilyId=333325FD-AE52-4E35-B531-508D977D32A6 .NET Framework 3.5] che serve per farlo funzionare

*Un'immagine [[PNG]] o [[BMP]] 256x256 pixel

===Come procedere===

# Aprite [[The Sims 3 Workshop Pattern Tool]].
#:
# Caricate un'immagine in formato [[PNG]] o [[BMP]] 256x256 pixel.
#:
# Iniziate a modificare i colori aggiungendo i canali cliccando sui quadrati che vedete sotto ''Red'', ''Green'', ''Blue''.
#:'''Nota''': utilizzando questo metodo non potete inserire 4 canali, ovvero non potete inserire il canale ''Alpha''
#:
# Se l'immagine si presta e riuscite a isolare i canali ottenendo un risultato passabile, allora inserite i dati del vostro pattern, titolo, descrizione e categoria in cui apparirà nel gioco.
#:
# Infine scegliete se attivare o no la compressione DXT (se l'attivate il file peserà meno ma perderà un pochino di qualità) e poi esportate.
#:
# Se volete caricare i file su TSR potete farlo in automatico tramite il bottone apposito.
#: 
#:[[File:Ts3workshop_use.jpg|link=]]
#: 
Note:
Potete usare il metodo di creazione del pattern e divisione dei livelli anche in questo caso. Se lo fate, e poi salvate in [[PNG]] o [[BMP]] la qualità della texture sarà superiore a quella che otterreste senza separare i canali.
Tenete presente che il risultato migliore è sempre quello usando DDS Tool.

{{warning|
|messaggio=Il colore che scegliete come ''Background'' in [[The Sims 3 Workshop Pattern Tool]] resta fisso. Nel ''Crea uno Stile'' nel gioco potrete modificare gli altri colori ma non quello. Fate quindi attenzione quando selezionate i vari canali a cosa corrispondono. Ciò che non cambia colore nell'anteprima non sarà modificabile nel gioco.|
}}

==Credit==

Sono stati di ispirazione nella redazione di questa guida:
*[http://www.sims2wiki.info/wiki.php?title=User:Delphy Delphy] e [http://www.sims2wiki.info/wiki.php?title=User:HystericalParoxysm HystericalParoxysm] per la [http://www.sims2wiki.info/wiki.php?title=Sims_3:Custom_Patterns loro guida con immagini vettoriali]
*Murano con [http://www.thesimsresource.com/workshop/articles/view-post/post/11712/How%20to%20create%20a%20RGBA%20Stencil%20Mask How to Create RGBA Stencil Mask] @TSR
*JaneSamborski con [http://www.modthesims.info/showthread.php?t=343264 Separating patterns without vectors] @MTS
*Sarane con [http://www.modthesims.info/showthread.php?t=345562 Making Patterns Using Psp] @MTS
*Misty2004 con [http://www.modthesims.info/showthread.php?t=345731 Four-Color Patterns In Paint Shop Pro 9~Graphic Intensive!] @MTS
*MetalKat0642 con [http://www.modthesims.info/showthread.php?t=346544 Tutorial: A Fast Way to Create Patterns with Gimp] @MTS

{{ts3}}

Creare pattern grafico - Cronologia

Cristina: /* Creare il pattern */