Användandet av rörlig grafik, så kallad motion design, har exploderat de senaste åren inom produktdesign. Keyshape är enkelt att lära sig, samtidigt precis så kraftfullt det behöver vara.
Subtilt animerade illustrationer, ikoner som vaknar till liv när du interagerar, eller något att titta på ett par sekunder medan din sega backend gör sitt jobb, adderar till upplevelsen, inte tvärtom. Du behöver inte vara en After Effects ninja för att skapa enkla animationer.
Idag ska vi titta på ett av mina absoluta favoritverktyg för att skapa rörlig grafik, en liten finsk pärla som går under namnet Keyshape.
Keyshape är ett vektorbaserat animationsverktyg för macOS som jag använt i flertalet projekt, både som konsult men också i många av mina egna sidoprojekt.
9 av 10 gånger använder jag den här fantastiska animationsappen istället för After Effects eftersom den gör så många saker rätt:
- Lättanvänt gränssnitt som påminner lite om gamla Flash (på ett bra sätt)
- Fantastiska exportalternativ (CSS, Lottie, Android Vector Drawables, MP4, GIF, PNG sekvenser)
- Kodexporten är ren och enkel att implementera i projekt
- Lottie import och export!
Lottie är ett enormt populärt animationsformat som fungerar överallt. Via det officiella Keyshape Lottie-pluginet lägger du till animerade superkrafter till en redan mycket användbar app.
Många gånger när jag behöver animera något komplext brukar jag göra så här:
Nu när jag har animationen skapad inuti Keyshape, är det enkelt att exportera den och anpassa den för flera användningsområden. Det kan vara att ha den som en animerad CSS på en produktsida och samtidigt skicka ut den till iOS och Android-utvecklare i formatet Lottie.
När jag började använda animationsappen 2017 fanns det totalt 0 videotutorials om Keyshape. Jag kände ett stort behov av att börja visa världen hur fantastisk denna lilla animationspärla var. Det gör jag fortfarande!
Så utan vidare förvarning kommer här ett par fina tips och tricks som jag har samlat på mig genom åren.
/Juan Maguid