Animation

Jeg valgte at lave et rundt logo, og fik den ide at det skulle dreje rundt – ligesom når man spinner en mønt. Når det så spinner, ville jeg gerne have, at man ser mine initialer på den ene side, og på den anden side skal der være en slags blænde -effekt. På den måde viser logoet det jeg gerne vil repræsenterer nemlig fotografering, med et kreativt udtryk.

Lavede 10 frames, hvor jeg drejede loget gradvis.
Jeg brugte “Expand” så teksten drejede med cirklen rundt. Fik sat en stroke på, så der kom mere effekt på siden af logoet når den drejede. Satte blændefunktionen på efterfølgende, og fik til sidst sat et billede ind, hvor den lukker i og åbner sig igen.

Jeg arbejde meget med stroken, fordi det skulle se ud til at kanten var firkantet og ikke spids i enden. Så jeg blev nød til at sætte en brede på i top og bund. Når man drejer en mønt, så kan man også se at den har en dybde fra siden af.

For hvert billede jeg lavede, roterede jeg billedet, og min stroke skulle fylde mere for hvert billede, for at give en større effekt. Lidt hen af en 3D.

Oprettede et HTML dokument, hvor jeg referer til mit CSS stylesheet.

• Link href=”logo.css ( dette er mit style sheet)
• rel=”stylesheet” ( HTML siger at det har en relation til et CSS stylesheet)
• Type er en attribut som angiver en værdi.

Jeg bruger en class i mit HTML dokument, fordi jeg gerne vil style på mit element i en CSS fil.

I CSS dokumentet har jeg angivet en højde, wide som har samme størrelse som i adobe illustrator.

Jeg har skrevet URL(“logo”) fordi jeg referer til mit billede- “sprite”

(sprite er en animation af flere billeder)

Har angivet animation, play3 sek, for hvor hurtigt den skal køre rundt og infinite fordi den kører i et loop.

Keyframes play:

00 angiver, at baggrunden skal starte øverst til venstre

no-repeat sikre at billedet ikke svæver rundt, men holder sig øverst til venstre.

100% er animationens slutpunkt

-5000px er at billede frame rykker fra venstre og slider til højre.

Hver billede frame er 500px og der er 10 billeder = 5000px

Vi fik at vide, at det var vigtigt at det lå helt præcis for ellers ville man kunne se at den “hopper” lidt ud, og der gør min en smule. Det var lidt en udfording fordi jeg havde valgt at lave et rundt billede, så havde ikke nogen kanter at kunne må op med.

Jeg havde allerede forberedt mig lidt hjemmefra, af forskellige tanker hvad skulle lave og i forbindelse med projekt 3, og var kommet frem til en logo som jeg ville benytte. Den første tanke jeg havde, var faktisk noget meget mere simpelt end hvad det endte ud i. Det skulle “bare” være et logo hvor noget af teksten blev mere synligt. Men det endte ud i at jeg valgte at lave noget helt andet, hvor jeg blev ret stolt over hvad jeg kom frem til. Lidt ligesom WS Moving Art. Dog havde jeg sat begrænsninger for mig selv. Det skulle kun fylde 10 farmes, selvom jeg godt kunne se, at med den effekt jeg havde i tankerne havde brug for flere farmes for at bevægelserne blev mere smooth. Men det kan jeg så arbejde videre med. Jeg nåede det, inden vi skulle fremvise vores animation. Vigtigst af alt! Jeg forstod projektet. Ideen med at lave noget kreativt i Ai, tage det med videre til CSS for at få en animation til sidst. Man giver sig selv en tilfredsstillelse når man kommer i mål. 

Er blevet bedre til Ai, og har fået en bedre forståelse af programmet. Prøver også at væne mig til, at når “muligheden” byder sig for at bruge adobe programmet så tager jeg den for at blive bedre. Jeg er dog ikke blevet helt gode venner med HTML og CSS endnu. Håber at det kommer, og at jeg lærer mere og får en bedre forståelse. Lige nu, ja så følges det uoverskueligt. Ville have ønsket at de timer med Thomas havde lagt mere op ad hinanden. Så tror jeg, at det med at man får det hurtigt efter hinanden, ville gøre at man (måske) fanger det hurtigere – hvem ved. Næste udfordring bliver at få det ind på ens hjemmeside!