E’ passato un bel po’ di tempo da quando Patty mi chiese di fare un tutorial su un puzzle con qualche pezzo staccato. Purtroppo, per esaudire le richieste precedenti, mi ci è voluto parecchio tempo, non sempre facile da trovare ed ora mi trovo addirittura senza il mio pc, passato a miglior vita proprio oggi, mentre preparavo questo tutorial…e mi tocca rifare tutto in questo pc a prestito una seconda volta, sperando che almeno questa volta fili tutto dritto senza perdere nulla… Incrocio le dita 🙂
.
.
Come disse allora a Patty, il puzzle a cui lei si riferiva quasi sicuramente era stato fatto con Photofiltre Studio. Io ovviamente farò una mia versione di puzzle adatta a ciò che si può fare con Photofiltre nella sua versione gratuita che sarà diverso avendo meno possibilità, ma spero sia anche carino… Eccone qualche altro esempio simile di puzzle anche in posizioni diverse 🙂
.
Per fare questo tutorial vi serve:
-
Photofiltre che se non avete trovate nel sito ufficiale.
-
Un immagine su cui fare il vostro puzzle… Io ho usato questa…

-
Uno sfondo su cui disporre poi il vostro puzzle… In questo caso ho usato questo…

.
Vediamo ora come fare…
.
-
Aprite la vostra immagine in Photofiltre: File – Apri (FILE – OPEN) (imm.1)
-
Aprite ora un documento nuovo: File – Nuovo (FILE – NEW) (imm.2) bianco con le stesse misure della vostra immagine, in questo caso 600 di larghezza e 392 di altezza (imm.3).
-
Ora procederemo a creare le tessere del nostro puzzle ma, per facilitarci la selezione in seguito, lo faremo sul nostro documento bianco invece che sull’immagine e così cliccheremo su Filtro – Creativo – Puzzle (FILTER – STYLIZE – PUZZLE) (imm.4)

-
Nella finestra che vi appare mettete Nero come Colore, 1 di larghezza, 150 come Dimensione Oggetto (PIECES SIZE) come nel nostro esempio, (se per caso la vostra immagine fosse più piccola e di conseguenza ci volessero un numero maggiore di tessere, più piccole, dovrete mettere una dimensione minore), deselezionate rilievo (RELIEF) e cliccate sull’anteprima per vedere se la misura delle tessere va bene e quando sia così, confermate con Ok (imm.5). Chi, finito questo turorial, volesse fare il puzzle animato deve salvare questo documento imprescindibile per realizzarlo.
-
Ora dovremmo mettere le nostre tessere sull’immagine ma, se provate a fare come fatto nei punti 3 e 4 vi uscirebbero tessere con forme diverse da quelle che abbiamo nel nostro documento bianco, per questo motivo dovremmo trasferire le tessere da questo documento alla nostra immagine e per farlo ingrandite il documento con la Lente d’Ingrandimento che trovate nel Menù in Alto (punto 1 imm.6) finché vi sia facile cliccare poi con la Bacchetta Magica sulle righe nere che delimitano le tessere, e solo su quelle, per selezionarle.
-
Andate ora al Menù di Destra e cliccate sulla Bacchetta Magica (punto 2 imm.6). Metterete tolleranza 30 (punto 3 imm.6), selezionate la casellina colore in basso del Menù di Destra (punto 4 imm.6) e tornate sul vostro documento bianco, cliccherete con la bacchetta sulle righe nere che disegnano le tessere (se lo fate sul bordo nero in alto vi sarà più facile farlo) (punto 5 imm.6). Ora le righe nere che separano le tessere sono selezionate (punto 6 imm.6).
-
Cliccate ora su Modifica – Copia (EDIT – COPY) (imm.7)
-
Toccate ora la vostra immagine per attivarla e poi cliccate su Modifica – Incolla (EDIT – PASTE) (imm.8 ).

-
Ora le righe nere che formano le tessere del puzzle appariranno anche sulla vostra immagine. Mentre avete ancora la selezione attorno alla vostra immagine portate il puntatore del mouse dentro la selezione, cliccate col tasto destro e nella finestra che vi appare su Incolla Opzioni (PASTE OPTIONS) (imm.9).
-
Nella finestra che vi appare deselezionate Antiailiasing automatico (AUTOMATIC ANTIALIASING) e confermate con Ok (imm.10). Ora con un semplice invio potete confermare l’incollatura. Faremo ora un semplice effetto perché le nostre tessere sembrino un pochino più scure nei bordi e con un minimo di volume.
-
Toccate ora il vostro documento bianco, che avrà ancora selezionate le righe che separano le tessere, per attivarlo e cliccate su Selezione – Copia Forma (SELECTION – COPY SHAPE) (imm.11)
-
Toccate l’ immagine per attivarla e cliccate su Selezione – Incolla Forma (SELECTION – PASTE SHAPE) (imm.12).

-
Ora anche sulle righe nere della vostra immagine apparirà la selezione. Cliccate ora su Selezione – Inverti (SELECTION INVERT) (imm.13).
-
Sul menù in alto cliccate su Selezione – Contrai (SELECTION – CONTRACT) (imm.14).
-
Nella finestra successiva mettete 3 come Larghezza (WIDTH) e confermate con Ok (imm.15). La selezione nelle vostre tessere ora non apparirà più sulle righe nere ma al loro interno.
-
Cliccate ora su Filtro – Creativo – Ombreggiatura (FILTRE – STYLIZE – DROP SHADOW) (imm.16).

-
Nella finestra che appare mettete il grigio più scuro come Colore (punto 1 imm.17), 70 di opacità (punto 2 imm.17), 3 nel valore della “x” (punto 3 imm.17) e 3 nel valore della “y” (punto 4 imm.17), selezionate se non lo fosse Antialised (punto 5 imm.17) e contrallate l’anteprima (punto 6 imm.17), vi appariranno delle ombreggiature grigie sulla destra e nella parte superiore delle vostre tessere (punto 7 imm.17) e confermate, se tutto va come dovuto, con Ok (punto 8 imm.17).
-
Cliccate di nuovo su Filtro – Creativo – Ombreggiatura (FILTRE – STYLIZE – DROP SHADOW) (imm.18 ).
-
Metterete ora come Colore il grigio più chiaro (punto 1 imm.19), 70 di Opacità (punto 2 imm.19), -3 nel valore della “x” (punto 3 imm.19) e -3 nel valore dalla “y” (punto 4 imm.19) e con Antialised selezionato (punto 5 imm.19) controllate l’anteprima (punto 6 imm.19). Ora vi appariranno delle ombreggiature molto chiare, in grigio chiaro, sulla sinistra e nella parte superiore delle vostre tessere (punto 7 imm.19). Confermate con Ok (punto 8 imm.19).
-
Togliete la selezione del puzzle cliccando su Selezione – Nascondi Selezione (SELECTION – HIDE SELECTION) (imm.20).

-
Ora ricopieremo le righe nere delle tessere per renderle più evidenti. Logicamente se preferite il vostro puzzle così come è ora potete non farlo, ma se i colori della vostra immagine sono molto vivaci si renderà necessario per togliere l’effetto che io chiamo “salame” che può apparire sulle righe. Nel nostro esempio quell’effetto non appare troppo evidente e così potete decidere se lasciarlo così come è e incollarci sopra di nuovo le righe per renderle più evidenti. Per farlo toccate il documento bianco (che dovrebbe ancora avere la selezione sulle righe) per attivarlo e cliccate poi su Modifica – Copia (EDIT – COPY) (imm.21).
-
Toccate il puzzle attivandolo e cliccate su Modifica – Incolla (EDIT – PASTE) (imm.22).
-
Ora nuovamente le righe sono un po’ più evidenti. Confermate con un semplice invio (imm.23). Il nostro puzzle sarebbe finito e se non vogliamo staccargli qualche tessera per sistemarle altrove lo possiamo salvare….Chi volesse fare il puzzle animato deve salvarlo, ma noi continuiamo ed ora staccheremo qualche tessera per sistemarle attorno…
-
Tornate a toccare il documento bianco e togliete la selezione cliccando su Selezione – Nascondi Selezione (SELECTION – HIDE SELECTION) (imm.24).
Ora procederemo a togliere qualche tassello del nostro puzzle, quelli che poi metteremo sparsi attorno. Toglieremo la prima tessera in alto a sinistra procedendo in questo modo: -
Toccate il documento bianco, quello diviso in tessere, per attivarlo (punto 1 imm.25). Andate nel Menù a Destra e cliccate sulla Bacchetta Magica (punto 2 imm.25), Tolleranza 30 (punto 3 imm.25) e, deselezionata la casellina colore in fondo (punto 4 imm.25) cliccate con la Bacchetta dentro la parte bianca della tessera che vogliamo togliere (punto 5 imm.25), quella in alto a sinistra. La parte bianca della vostra tessera rimane selezionata. (punto 6 imm.25).
-
Cliccate ora su Selezione – Copia Forma (SELECTION – COPY SHAPE) (imm.26).
-
Toccate, attivandolo, il vostro puzzle e cliccate poi su Selezione – Incolla Forma (SELECTION – PASTE SHAPE) (imm.27).
-
La Selezione ora appare sul vostro puzzle, la spostate sulla tessera in alto a sinistra sistemandola al meglio possibile (punto 1 imm.28 ). Andate ora al Menù di Destra e selezionate un Colore che non appaia nel vostro puzzle (punto 2 imm.28 ). Cliccando sulla Freccia Nera (punto 3 imm.28 ) passiamo il Colore scelto (rosa in questo caso) da primo a secondo Colore (appare nella casella colore grande in alto a destra) (punto 4 imm.28 ).

-
Ora per togliere dal puzzle la prima tessera, toccate il puzzle per attivarlo e dopo aver controllato che la vostra tessera sia selezionata al meglio, cliccate su Modifica – Copia (EDIT – COPY) (imm.29).
-
Cliccate poi su Modifica – Incolla Come Nuova Immagine (EDIT – PASTE AS A NEW SHAPE) (imm.30).
-
La vostra tessera vi appare in una immagine separata con lo sfondo rosa. Salvate ora la vostra prima tessera che vi servirà dopo, come immagine jpeg col nome tessera 1(imm.31).
-
Tornate ora a toccare il vostro puzzle e con la prima tessera ancora selezionata cliccate su Modifica – Pulisci (EDIT – CLEAR) (imm.32).

-
La vostra tessera è scomparsa ed al suo posto potete vedere uno sfondo rosa. Ora togliete la Selezione della tessera cliccando su Selezione – Nascondi Selezione (SELECTION – HIDE SELECTION) (imm.33).
-
Procedete ora a togliere il secondo tassello del puzzle, la seconda tessera a sinistra della fila di mezzo nello stesso modo che avete fatto con la precedente come dal punto 25 al 33 compresi. Ovviamente salverete la tessera come tessera 2. Il vostro puzzle apparirà ora così (imm.34).
-
Ora togliete la seconda in alto da destra nello stesso modo e la salvate come tessera 3. Il vostro puzzle ora è come nell’imm. 35.
-
Togliete ora l’ultima tessera, quella nella fila in basso più a destra, procedendo come prima e salvando la tessera 4. Ed il vostro puzzle rimarrà come nell’im. 36.

-
Aprite ora un documento nuovo, rosa, più grande del puzzle: File – Nuovo (FILE – NEW). In questo caso io ho aperto un documento di 800 di larghezza e 630 di altezza (imm.37).
-
Toccate il puzzle per attivarlo e cliccate su Modifica – Copia (EDIT – COPY) (imm.38).
-
Toccate ora il documento nuovo per attivarlo e cliccate dopo su Modifica – Incolla (EDIT – PASTE) (imm.39).
-
Ora il puzzle è sul vostro documento nuovo. Confermate l’incollatura con un semplice invio (imm.40 ).

-
Ora dovrete togliere le righine che sono rimaste dei bordi delle tessere e per quello cliccando sulla Freccia Nera in alto del Menù a Destra, passate il colore rosa da secondo colore a primo (apparirà nella casella di sinistra) (punto 1 imm.41). Cliccate sul Pennello (punto 2 imm.41) e poi sotto sulla misura più grande del Pennello (punto 3 imm.41) e tornando al vostro puzzle togliete la maggior parte delle righe di contorno delle tessere che avete tolto passandoci sopra col Pennello Grande ed il Colore Rosa (punto 4 imm.41). Per togliere i bordini vicino alle tessere, cliccate sulla misura più piccola del Pennello (punto 5 imm.41), ingrandite se vi serve l’immagine cliccando sulla Lente d’Ingrandimento e togliete con molta attenzione gli ultimi pezzi delle righe passandoci sopra con questo pennellino (punto 6 imm.41). Il vostro puzzle dovrà essere come nell’immagine 41.
-
Cliccate ora sulla Bacchetta Magica e con tolleranza 30 e selezionando la casellina colore tornate al vostro puzzle e cliccate sullo sfondo rosa. Vi rimarrà selezionata tutta la parte esterna delle tessere ancora complete del vostro puzzle e l’esterno di tutta l’immagine. (imm.42).
-
Aprite ora lo sfondo che dovrà avere il nostro puzzle: File – Apri (FILE – OPEN) (imm.43).
-
Cliccate su Modifica – Utilizza come Trama (EDIT – DEFINE PATTERN) (imm.44).

-
Toccate ora l’ immagine col puzzle incollato che verrà selezionata e cliccate su Modifica – Riempi con la Trama (EDIT – FILL WITH PATTERN) (imm.45)-
-
Ora avete lo sfondo sotto il vostro puzzle. Con la Selezione ancora attiva cliccate su Selezione – Inverti (SELECTION – INVERT) (imm.46).
-
Ora farete l’ombreggiatura attorno il vostro puzzle. Cliccate su Filtro – Creativo – Ombreggiatura (FILTER – STYLIZE – DROP SHADOW) (imm.47).
-
Nella casella che si apre: Colore Nero, Opacità 70%, “x”=10, “y”=10, Antialised selezionato, controllate l’anteprima e se va bene confermate con Ok (imm.48 ).

-
Aprite ora la tessera 1 e cliccate su Immagine – Ruota – Libera (IMAGE – RUOTATE – FREE) (imm.49).
-
Nella finestra successiva mettete 45 in Angolo, Colore di Sfondo rosa, selezionando Regola Direzione ed Antialias e confermate con Ok (imm.50).
-
Cliccate ora sulla Bacchetta Magica, tolleranza 30 e casella colore selezionata e tornando alla tessera cliccate con la Bacchetta sul colore rosa. Vi rimane selezionata tutta la parte al di fuori della tessera ed il bordo esterno. Cliccate su Selezione – Inverti (SELECTION – INVERT) (imm.51).
-
Cliccate ora su Selezione – Contrai (SELECTION – CONTRACT) (imm.52)
e nella finestra successiva mettete come Larghezza 1 confermando con Ok (imm.53) per evitare che lo sfondo rosa appaia nei contorni della tesserina. -
Cliccate su Modifica – Copia (EDIT – COPY) (imm.54).
-
Toccate ora lo sfondo con il puzzle per attivarlo e cliccate su Modifica – Incolla (EDIT – PASTE) (imm.55).
-
Spostate la tesserina sullo sfondo nell’angolo superiore sinistro e confermate una volta sistemata con un semplice invio. Ritornate a toccare la tessera ancora selezionata per attivarla e cliccate su Selezione – Copia Forma (SELECTION – COPY SHAPE) (imm.56).

-
Toccate per attivarlo il puzzle e cliccate su Selezione – Incolla forma (SELECTION – PASTE SHAPE) (imm.57).
-
Sistemate la Selezione sopra la tesserina al meglio e cliccate poi su Filtro – Creativo – Ombreggiatura (FILTER – STYLIZE – DROP SHADOW) mettendo gli stessi valori messi nel punto 48 e confermate con Ok (imm.58). Anche la vostra tessera ora ha l’ombra.
-
Togliete la selezione cliccando su Selezione – Nascondi Selezione (SELECTION – HIDE SELECTION) (imm. 59).
-
Procedete nello stesso modo con le altre tesserine come spiegato dal punto 49 al 58 inclusi. Cambiate solo l’inclinazione delle tesserine per avere un miglior effetto finale .Io ho inclinato la seconda di -15, la quarta l’ ho messo diritta e la terza sopra alla quarta inclinata di -20.
-
Il vostro puzzle è pronto e potete ora salvarlo: File – Salva con Nome (FILE – SAVE AS ) (imm.60)
Eccolo qua il nostro puzzle finito e salvato… 🙂 
.
Come sempre per ogni dubbio guardate Tutorials per caso dove troverete il materiale le spiegazioni che vi possono servire per fare al meglio i vostri lavori di grafica e se volete, vi invito a guardare le nostre Gallery, in particolare quella di Halloween, con le ultimissime cards e le 3 nostre nuove Gallery di Scritte: Gallery 1: Saluti, Gallery 2: Auguri, festività e ricorrenze e Gallery 3: Ringraziamenti e varie 🙂









Ma è bellissimoooooooo! Sol sei sempre la migliore! un bacio e un abbraccio…
Ciao Nadia, grazie 🙂
Ho provato questo tutorial e il mio puzzle è venuto benissimo, ma se volessi far muovere le tessere? Sol sei davvero GRANDE!!Grazie per i tuoi splendidi tutorial!
Ciao Terry… in questo caso si potrebbe fare una cosa tipo questa qua
perchè come puoi vedere le tessere sono di forme diverse… Nel caso fossero uguali potrebbero girare tutte fra di loro, non so tipo quello che ti avevo fatto vedere con le tessere quadrate… 🙂
T.T
sono arrivata fino al passo dove dici di cliccare su ombreggiatura…
ma l’opsione OMBREGGIATURA è disattivata
uffii sono una frana…
Non so cosa dirti Martunia, se hai la selezione sull’immagine e sei riuscita ad invertirla e contrarla dovrebbe apparirti attiva l’ombreggiatura del filtro creativo… Prova di nuovo, forse qualcosa di ciò che hai fatto fino a quel punto non è giusta… Controlla che la casellina RGB color inmediatamente a destra delle freccie in alto sia grigia e se non lo è cliccaci sopra, ma se dici di aver fatto tutto fino a quel punto dovrebbe esserla o non avresti potuto vedere la selezione…
Ciao i tuoi tutorial sono davvero splendidi… Complimenti!!!Sono arrivata fino al passo dove tu dici di cliccare sulla bacchetta magica e selezionare le righe nere …. ma c’è qualcosa che nn va. Quando faccio modifica copia e poi modifica incolla, le tessere si incollano alla mia immagine facendola restare sotto. dove sbaglio? Grazie mille
Ciao Simona, benvenuta e grazie 🙂 Per essere sicura di cliccare bene sulle righe nere e non sul bianco e non incollare le tessere bianche ma solo le righe nere ingrandisci di quanto ti sia necessario l’immaggine con lo sfondo bianco e le tessere cliccando nel menù in alto sulla lente d’ingrandimento segnata col “+” per così centrare con la bacchetta proprio le righe nere e soltanto quelle…. vedrai che se riesci a centrarle incollerai soltanto quelle e non le tessere … sono sicura che ci riuscirai… 🙂
Evviva….. Finalmente ci sn riuscita! Grazie ai tuoi splendidi tutorial sto imparando tante cose fantastiche. Sol 6 GRANDE!
Ah…stupendo!! 🙂 … mi sa che si sono incrociate la mia risposta e la tua buona notizia 🙂
ciao Sol!!! Scusami tanto tanto tanto se ho abbandonato il sito (sarà un secolo che non vengo più!!!) ma ho avuto dei problemi enormi con il computer (e non solo)
adesso però ho ricomciato a graficare e ho provato a fare un puzzle…naturalmente grazie a te e ai tuoi fantastici tutorial è venuto una meraviglia =)
volevo farti una domanda…ne sai qualcosa della pixel art???
ciao ciao
(ancora scusa x aver abbandonato il tuo bellissimo sito)
Ciao Rugiada ben tornata da noi 🙂 Sono felice che il tuo puzzle sia venuto bene e, pc permettendo, sai comunque sempre dove trovarci. Per quanto riguarda la pixel art ne so qualcosa ma sinceramente, non essendone appassionata , non me ne dedico trovando molto laboriosa la realizzazione di immagini che alla fine a me particolarmente non dicono nulla… La cosa più carina che trovo, (non so dire quanto carina sia affatto 😆 ,) è “pixelare” un’ immagine come in questi esempi…
https://conme.files.wordpress.com/2010/08/original.jpg
https://conme.files.wordpress.com/2010/08/esempio-1.jpg
https://conme.files.wordpress.com/2010/08/esempio-3.jpg
… ma questo non è pixel art 🙂
no, in effetti non intendevo quello ma grazie comunque (sei sempre gentilissima)
non mi interessavano foto modificate con “effetto pixel” ma immagini completamente in pixel tipo queste
http://graficastregata.forumfree.it/?t=37637664
non voglio assolutamente che tu perda tempo a spiegarmi l’argomento della pixel art ma se magari avevi qualche guida o tutorial online sarebbe stato fantastico…
(se non ce l’hai è lo stesso, ma te lo chiedo solo perchè tu ne sai mooooolto più di me in fatto di grafica)
un bacio
purtroppo, come ti dicevo, non amando particolarmente la pixel art non mi ci sono tanto occupata e non ne conosco guide… Ci sono tanti tutorials in giro nel web che t’insegnano i rudimenti delle forme geometriche, le prospettive e le proporzioni… Sinceramente io non credo siano così fondamentali, per me più che la conoscenza della geometria serve il colpo d’cchio, io almeno potrei solo fare qualcosa in pixel art seguendo ciò che “vedo” come idea nella mia testa di ciò che vorrei fare, ed andrei ad occhio sistemando uno ad uno i pixels che comporrebbero l’immagine.
Qua per esempio ne trovi qualcuno, ma sicuramente tu ne avrai trovati moltissimi e forse ancora più interessanti…
http://www.pixeljoint.com/pixels/tutorials.asp
gentilissima sol, ho bisogno del tuo aiuto, perche vorrei fare un pussle ed estrarre le varie tessere salvandole, per poi fare un video animato, ma non riesco. Apro il file ridimensiono,apro nuovo file bianco con le stesse dimensioni, faccio tutta la trafila che insegni,ma poi trovo tutto sballato dove sbaglio? per me è importante capire per poi fare. ciao ti seguo da sempre,
ti prego aiutamiiiiiiiiiiiiiiii
cara sol, non hai forse il tempo per rispondere?
Ciao Anna, scusami, è sempre un problema trovare il tempo… da ciò che mi dici io non riesco a capire dove tu possa aver sbagliato, se puoi inizia da capo e controlla passo passo se tutto ti viene come detto nel tutorial per, nel momento in cui, non venga come dovesse dirmi almeno cosa non ti riesce perchè come capirai bene io non vedendo come ti rimane né come procedi non posso capire l’errore che non ti fa continuare senza problemi…