Creare pattern grafico
 Creare pattern personalizzati in The Sims 3
|
|
Indice
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:
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 Photoshop sia per Gimp e sono entrambi gratuiti.
- 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 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:
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:
Ecco, questi sono gli stessi canali che deve avere un pattern. Ora azzeriamo e torniamo al nostro pattern.
Vediamo quali dovrebbero essere i canali:
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.
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
- 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!
- 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
- Se non l'avete ancora attivata, attivate ora la Finestra→Livelli
- Vedrete apparire questa finestra nel layout di Photoshop
- 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.
- 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)
- 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):
- 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.
- 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.
- 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.
- 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.
- 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.
- 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!
Creare un pattern complesso da separare
Vediamo come fare se il pattern è un po' più complesso da dividere in livelli differenti. Prendiamo questo:
è già seamless e 256x256pixel.
- Proviamo a desaturarlo e vedere come esce. Per farlo andate in Immagine→Regolazioni→Togli saturazione
- Questo è il risultato, che non è male, ma c'è troppa poca differenza fra le parti chiare...
- 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.
- Con contrasto e curve siamo arrivati a questo, ma ancora non siamo soddisfatti.
- 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.
- 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:
- 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:
- 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:
- Da qui non resta che seguire le indicazioni del procedimento precedente a partire dal punto 8)
- Alla fine avremo:
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
- .NET Framework 3.5 che serve per farlo funzionare
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.
-
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.
 ATTENZIONE!!
|
| 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:
- Delphy e HystericalParoxysm per la loro guida con immagini vettoriali
- Murano con How to Create RGBA Stencil Mask @TSR
- JaneSamborski con Separating patterns without vectors @MTS
- Sarane con Making Patterns Using Psp @MTS
- Misty2004 con Four-Color Patterns In Paint Shop Pro 9~Graphic Intensive! @MTS
- MetalKat0642 con Tutorial: A Fast Way to Create Patterns with Gimp @MTS
 The Sims 3
| ||
 Conosci meglio il gioco! |
 Be Creative! |
 Espandi i tuoi orizzonti! |
