En animation med en pige, der sidder på gulvet og trykker på en pauseknap.

Press Pause

En animation med nerve og nærvær.

Format HTML/CSS-animation med spritesheet
Værktøjer: Adobe Illustrator · HTML · CSS

Introduktion

“Press Pause” er en håndtegnet animation, der understreger vigtigheden af stilstand i en verden, der aldrig står stille. Med bløde bevægelser og et enkelt, sanseligt udtryk formidler den en stille opfordring til at stoppe op, trække vejret og hvile et øjeblik.

Udfordringer

Hvordan skaber man følelsesmæssig dybde med få visuelle virkemidler?

Målet var at skabe:

  • En organisk og nærværende animation.
  • En stemningsfuld fortælling uden brug af musik, lydeffekter og tale.
  • En teknisk enkel og weboptimeret løsning med HTML og CSS.

Løsning

Projektet er skabt ud fra et storyboard og visuel research i enkle, stemningsbærende animationsuniverser. Hver bevægelse er tegnet frame-by-frame i Adobe Illustrator og samlet i et spritesheet. Animationen er implementeret med CSS og kører i et loop med uafbrudt afspilning.

Nøgleelementer:

  • Håndtegning med pen tool og fokus på mimik og rytme.
  • Brug af spritesheet og CSS-animation.
  • Anvendelse af klassiske animationsprincipper som slow in/slow out, anticipation og timing.
 Tegning af karakter med pen tool i Illustrator.  Justering af karakter med Puppet Warp tool i Illustrator. Statisk billede af animationen, der viser en pige, der sidder på gulvet, mens lys sværmer omkring hende. Nærbillede af pigens finger på pauseknappen, der viser brugen af Squash and Stretch.

Designmæssige valg

Animationen trækker på de 12 klassiske animationsprincipper for at skabe rolige og flydende bevægelser. Stilen er enkel, varm og kontrolleret med bløde former, der understøtter fortællingens nærvær.

Det visuelle udtryk er kendetegnet ved:

  • Menneskelig mimik og organiske former.
  • Afdæmpet farvepalette, der skaber ro.
  • Langsomme, kontrollerede bevægelser, der indbyder til ro og fordybelse.

Fagligt udbytte

Projektet har givet mig praktisk erfaring med karakterdesign og animation og vist mig, hvordan animationsprincipperne kan gøre bevægelser mere levende og følelsesfulde.

Jeg har opnået:

  • Evnen til at skabe stemning og rytme gennem animation.
  • Styrkede færdigheder i kodning og brug af spritesheets.
  • Erfaring med at konceptudvikle, designe og animere en karakter fra bunden.

Disse erfaringer tager jeg med mig i fremtidige projekter inden for motion graphics og animation.

Tags:

  • CSS-Animation
  • Sanselig formidling
  • SlowMo-Vibes
  • Spritesheet
  • HTML/CSS
  • Karakterdesign
  • Animationsprincipper
  • Storyboarding
  • Pause
  • Frame-by-frame