KeyShape è una applicazione per creare grafica vettoriale animata.
I file SVG stanno prendendo sempre più piede, cosi come le animazioni sul web.
Stanno aumentando i software che ci permettono di creare queste animazioni in modo molto semplice.
Keyshape può essere scaricata dal sito in versione di prova. E’ una applicazione disponibile esclusivamente per MacOs. Può essere acquistata tramite l’App Store ad una modica cifra.
L’applicazione di per se è piuttosto semplice da utilizzare ed abbastanza intuita. Appena aperta permette di selezionare alcuni template già pronti come dimensione di immagine.
Keyshape, l’interfaccia utente
La schermata è divisa in quattro parti.
Nella prima colonna troviamo tutte le icone con i principali strumenti per creare e modificare l’immagine.
Nella parte centrale abbiamo la finestra di disegno. Qui vengono presentati i vari progetti aperti tramite delle schede come nei comuni browser o in quasi tutti i programmi di grafica moderni.
Sempre nella parte centrale troviamo sotto alla schermata centrale la timeline.
Qui visualizziamo tutti gli elementi che abbiamo inserito e che possiamo animare.
Ricorda molto i programmi di editing video. In effetti è possibile lavorare pensando di creare un piccolo video.
Nella colonna di destra si trovano le informazioni dell’oggetto selezionato con tutte le proprietà. Qui è presente la scheda dei livelli con la possibilità di ordinarli e rinominarli o raggrupparli.
Animiamo i disegni
Con Keyshape, come detto, possiamo creare delle immagini animate da condividere online. Possiamo creare banner pubblicitari, immagini interattive (con l’uso di JS) o semplicemente piccole animazioni.
Possono essere utili utilizzati magari in concomitanza con degli slider, per animare queste immagini al loro caricamento.
Le immagini possono essere animate come detto sfruttando la timeline. Creare una animazione basilare è piuttosto semplice:
- Creiamo il primo oggetto (ad esempio un rettangolo) e lo posizioniamo nell’angolo alto a sx dell’immagine
- Quindi sfruttando il pulsante REC presente nella timeline, andiamo a registrare le animazione successive.
- A questo punto spostiamo il rettangolo in una seconda posizione. Noteremo la creazione automatica di due keyframe nella timeline.
- Spostiamo la barra del tempo avanti di un secondo e spostiamo nuovamente il rettangolo in una nuova posizione.
- Ora possiamo cliccare sul pulsante play per veder l’animazione del nostro rettangolo
Allo stesso modo possiamo cambiare tante proprietà dei nostri oggetti: il colore, la dimensione, l’alpha, il bordo eventuali filtri aggiunti ecc.
Esportiamo il risultato
I nostri file possono essere salvati con diverse estensioni, ma per avere l’animazione dobbiamo usare il formato .svg oppure il formato .webp. E’ sempre possibile ottenere una GIF animata salvando in formato .gif oppure un filmato salvando nel formato MPEG-4 con estensione .mpg.
Attenzione poiché ad oggi ancora non tutti i Browser supportano il formato WebP
Tutti invece supportato il formato SVG essendo ormai ufficialmente riconosciuto.
Come consiglio di esportazione, conviene scegliere il formato SVG e optare come animazioni gestite dai CSS. In questo modo siamo sicuri che la nostra immagine sarà visibile in tutti i siti web.