CSS Sprite Animation

Fredag d. 2 december, havde vi en CSS workshop hvor vi skulle, først, designe et stykke grafik i Adobe Illustrator og derefter animere det vha. en CSS-funktion kaldt Sprite.

Hele opgaven var en forholdsvis simpel proces.
Mikael Seegen foreslog mig at bruge mit eget hoved, og siden jeg længe har gået og tænkt på at lave et “tegnet” selvportræt, øjnede jeg chancen.
Lynhurtigt fulgte idéen med, at animationen skulle illustrere en tegnende effekt.

Storyboard der viser min idé.
Storyboard der viser min idé.

Jeg startede med at tegne omridset, på et billede af mig selv i Illustrator. Sidenhen farvelagde jeg det, så jeg fik en tegnet version af mig selv.
Jeg placerede 12 billeder på en lige linje, og begyndte at tilføje mere og mere fra billede til billede, der så ville skabe effekten. Sprite fungere på den måde, at den skjuler og viser valgte dele af et enkelt billede vha. “navigationskoder”, og på den måde kan man skabe en form for animation. Man skriver også hvor mange frames animationen indeholder og hvor mange sekunder den skal vare.

Frames
Alle frames som animationen indeholder.

Alt i alt, var det som sagt en simpel opgave, men lettere tidskrævende som nybegynder.

 

Se den endelige animation her!

Resolume Arena 5 Intro

I anledning af et upcoming projekt, blev vi i dag introduceret til et program kaldt Resolume Arena 5. Man bruger programmet til at lave grafik, der bliver kastet op på murer el.lig..

Det er svært at forklare med ord, men klik her for et eksempel.

Vi nåede kun at røre overfladen af programmet, men det var sjovt at arbejde med, og jeg kan se mange fremtidige muligheder med det.

André i gang med at tilpasse billedet
André i gang med at tilpasse billedet
Projekter der kaster om sig med lys
Projekter der kaster om sig med lys
Belyste kasser
Belyste kasser

Redesign af Bogomslag om Genmanipulation

I dag stod den på finpudsning af forskellige projekter i faget Visualisering.

Jeg var godt tilfreds med alle mine projekter. Min designunderviser foreslog dog, at jeg lavede et mere spændende bogdesign på en bog om genmanipulation. Jeg var enig og lavede en opdateret version.

gene-manipulation-v2
“Gene Manipulation” Redesign

Det eneste jeg gjorde var, at fjerne “rammen” fra dyret og så forstørre det. Det giver et mere frit og luftigt udtryk i billedet. Jeg flyttede også overskrift og tekst til venstre side for at skabe ligevægt i billedet.

Opslaget om mit originale design kan læses om HER!

Gene Manipulation Bogomslag
Original “Gene Manipulation” Bogomslag

Gem

Gem

Plakat om Mig Selv

I dag skulle vi lave en plakat om os selv. Kravende var at vores navn og et ordsprog, der fortalte noget om hvem vi er som personer, skulle indgå. Foruden det skulle vi følge designreglerne fra bogen Graphic Design Solutions.

Jeg er svært glad for musik, så selvfølgelig er min plakat baseret på det.

One man's noise is another man's music.
One man’s noise is another man’s music.

I centrum af det hele er billedet af en Fender Jazzmaster, som er min favorit guitar über alles. Jeg har blandet billedet med en baggrund af teksturen fra krøllet papir, for at opnå en old school og rå fornemmelse.

Ordsproget er baseret på et citat fra en af mine ynglings filminstruktører, Tim Burton, som engang sagde: “One person’s craziness is another person’s reality.” . Det omskrev jeg til: “One man’s noise is another man’s music.”
Via Google fandt jeg dog hurtigt ud af, at jeg ikke var den første der havde formuleret det på den måde. (ØV-BØV!).

Alt i alt synes jeg, at jeg slap fint afsted med det.

Bogomslag om Genmanipulation

En lille Photoshop-opgave hvor vi skulle skabe et nyt væsen ud af fem dyr.

De andre kriterier var at bogen skulle hede Gene Manipulation, forfatteren var Desmond Morris og forlaget var Tiger Books. Derfra var der ellers frit slag.

Gene Manipulation Bogomslag
Gene Manipulation Bogomslag

Mit dyr består af:

  • Hovedet fra en tukan
  • Øjet fra en hvid leopard
  • En hanekam og krop fra en høne
  • En hale fra en abe
  • Benene fra en kat

Gem

Laserindgraveret Øjne i Træ

Vi fik stillet en opgave for nyligt, der handlede om at få vores øjne på et stykke træ. Opgaven lød på at vi skulle gøre det i vores egen stil og uden brug af computer.

eyes-graphic
Photoshop/Illustrator fil
eyes-4
Begyndelsen.

Uheldigvis havde jeg misforstået computerdelen. Til gengæld kom der dette laserindgraveret stykke træ ud af det, som jeg synes blev meget fedt. Det er lavet i FabLab.

 

Det var rimeligt simpelt det hele. Først tog jeg et billede af mine øjne, og gjorde det meget kontrastfyldt. Derefter blev billedet sendt til “print” i form af laserbrænderen. 18 minutter senere var 3 blevet printet.

eyes-3
In the making….

 

eyes-2
Det færdige resultat. Den i midten er min.

Gem

Gem

Gem

Gem

International Week Kampagne

I mellem uge 39 0g 40 havde vi et nyt projekt der omhandlede International Week. International Week er en kampagne skabt af Erhvervsakademiet Lillebælt, i forsøget på at få undervisere, fra verden over, på besøg. Idéen er at dele viden om undervisning med hinanden, så de sammen kan blive stærkere.

Vores opgave var at designe en hjemmeside der skulle informere potentielle gæster om eventet.

Cup of Knowledge

Cup of Knowledge
Cup of Knowledge

Den første idé jeg fik var et lille stykke grafik der kunne bruges til hjemmesiden. Jeg tænkte at jeg ville finde en fællesnævner for underviserer. I dette tilfælde blev det så til viden og kaffe – sat sammen.
Viden, fordi at det er dét underviserer står for, og kaffe fordi det skaber fællesskab og fordi at underviserer, som man jo ved, drikker ufatteligt meget kaffe. 😉

Det blev så til denne kop, Cup of Knowledge, som tog et godt stykke tid at lave, da jeg ikke har forfærdeligt meget kendskab til at tegne. Ikke desto mindre er jeg tilfreds med resultatet.

Hjemmesiden

International Week Mockup
International Week Mockup

I forhold til hjemmesiden, gik jeg efter det enkelte design, men alligevel pænt at kigge på. Jeg må være ærlig og sige, at der ikke er noget af grafikken der har nogen dybere mening. Den var heller ikke just et hit hos underviserne, som synes den var for rodet. Men de synes at datoen og logoet i højre hjørne så professionelt ud. Logoet er i øvrigt designet af Mikkel Norup.

Animeret Banner

Min kop fik en funktion. Den skulle bruges i det animeret banner, som hjemmesiden obligatorisk skulle indeholde. Simpelt koncept: To kopper støder mod hinanden, og sammen danner de en damp af viden.

Klik på billedet for at se animationen.
Klik på billedet for at se animationen.

Gem

Style Tiles

I sidste uge begyndte jeg på mine mood boards til et nyt design af EAL’s hjemmeside. Denne gang stod det på såkaldte style tiles hvilket, i store træk, er stadiet før selve hjemmesiden.

Jeg valgte at arbejde videre med den professionelle version. Den første jeg lavede, nr. 1, synes jeg var lidt ordinær og mangelfuld i dens design. Jeg er langt mere tilfreds med nr. 2, som har et mere unikt design. Om den så visualisere professionalisme har jeg svært ved at vurdere.

Nr. 1
Nr. 1
Nr. 2
Nr. 2

Moving Art Project / Andy Warhol

The Moving Art Project gik ud på at animere et kendt maleri. I mit tilfælde valgte jeg så, hovedsageligt, at animere Andy Warhols ”Soup Can”.

Andy Warhol var en kunstner der var en af de innovative hoveder i 60’erne, der bl.a. var med til at popularisere kunstformen ”Pop-art”. ”Suppe dåsen” er et godt eksempel på pop-art, da den har det meget særprægede tegneserieudseende.

soup-can-story-board
Mit story board. Serious drawing skills.

 

Jeg valgte dette billede da jeg godt kan lide stilen og især Warhols arbejde. Det kan diskuteres hvad han præcist mente med billedet, men jeg tror personligt at det handlede om at give hverdagsobjekter en form for stjernestatus – som var det almindelige noget unikt. Ironisk nok er dét det, der foregår nu i fjernsynet, men det skal vi ikke ind på her.

Hvis jeg skal knytte en historie/mening til min animation, må det være at vise kontrasten i mellem det mondæne og det overraskende. Om ikke andet, en hyldest til Andy Warhol.

“Art is what you can get away with.”

Min animation kan ses her:

720p (Høj opløsning)
480p (Lavere opløsning, virker til de fleste computere)