Cinemagraphs i webdesign

Hvis du leser noen av de utallige webdesign trendrapporter som kom ut tidligere i år, leser du sannsynligvis løftet om store, helt-sized cinemagraphs plassert fremtredende på hjemmesider overalt. Så hvor er de?

Mens noen få motefremmende selskaper bruker dem på deres nettsteder, har kinematikken i stor utstrekning blitt forvist for å fremheve opprullede artikler og reddit-sider.

Vel, jeg sier nok er nok. Det er på tide at cinemagraphs stiger opp og tar sitt rette sted som nettsideheltene de var bestemt til å bli.

Hvorfor cinemagraphs jobber

Ideen om å følge en webdesign trend rett og slett fordi det var forventet aldri virkelig opphisset meg. Men hva om du faktisk kunne banebrytende en slik trend? Og hva om det egentlig hadde en hensikt, og løst et problem samtidig?

Det menneskelige øye elsker bevegelse.

Når det kommer til filmtekster, er alle de ovennevnte uttalelsene sanne. Selv om det absolutt er blitt diskutert, (og selv prognostisert som en trend i webdesign), bruker svært få nettsteder faktisk dem. Som et resultat, har de ikke engang kommet nær å nå en kritisk masse, så de er fortsatt fascinerende for de fleste nettbrukere.

Ikke helt et bilde, ikke helt en video, filmtekster er iboende øye-candy fordi de lure seeren akkurat lenge nok til å få dem til å se et annet utseende. I ADD-epoken vi lever i i dag, alt du kan bruke til å gjøre en bruker pause - selv for et øyeblikk - teller som en liten seier av en svært viktig grunn:

Du har fått sin oppmerksomhet.

En spesielt effektiv måte å tiltrekke seg litt oppmerksomhet på et nettsted har alltid vært video. Det menneskelige øye elsker bevegelse. Men en stor heltvideo (selv kort) er så stor . Sikker på at du kan komprimere den innen en tomme av livet, men så ser det bare ut ... komprimert. Eller du kan la det være alene og lide konsekvensene av en sakte laste nettside.

Men ved å bruke en cinemagraph, kan du spare mye båndbredde mens du fortsatt tilfredsstiller det behov for bevegelse. Faktisk er du oppe ante, fordi du kan kapitalisere på nyhetens aspekt av en filmtekst. Folk ser dem ikke så ofte, og er imponert når de gjør det.

Så nå som du vet hvorfor filmtekster fortjener et sted av betydning på nettet, la oss ta en oversikt over hvordan du kan bringe en til livs.

Glendevon Motors bruker en kino i sitt heltområde for å formidle en stemning og skille seg ut som et "premium merke" blant sine konkurrenter.

Alternativ 1: Bruk en eksisterende filmtekst

Det er mange tilfeller når man kjøper en ferdig CG, er akseptabel, eller foretrukket å lage sin egen. Jeg vil si at hvis du finner det du trenger, og det er i budsjettet ditt for å få rettighetene til det, så er det veien å gå. Det eneste spørsmålet er: Hvor finner du det?

Den gode nyheten er at du har muligheter. De vil i stor grad bestemmes av budsjettet ditt (eller kundens), men det er mange kilder der ute. Det er enda noen få gratis å velge fra. Men hvis du har åtti dollar å bruke, har Shutterstock et ganske anstendig utvalg av high-definition CGs.

(Tips: De har ikke en frittstående cinemagraph-seksjon, så du må bare søke etter begrepet "cinemagraph", pluss andre søkeord i delen "Opptak".)

Hvis du klarer å finne det du var envisioning, vil du sannsynligvis fortsatt komprimere filen til en viss grad. Mer om det i litt.

Alternativ 2: Lag din egen

Hele poenget med å bruke en CG i stedet for en video er at den er ment å være litt av et sinnssnakk.

Kanskje du ikke kunne finne det du hadde avbildet. Eller kanskje du bare er en dø-hard DIY'er, og jeg respekterer deg for det. Så hvordan gjør man en film fra grunnen?

Først hjelper det å ha det riktige utstyret og en plan. Her er det jeg anbefaler å komme i gang:

Et kamera som kan ta opp video
Et stativ
En modell og / eller nødvendige rekvisitter
En datamaskin
Tilgang til et videoredigeringsprogram (valgfritt)
Tilgang til Adobe Photoshop eller en mer dedikert filmredigeringsprogramvare, for eksempel flixel

Det er det du trenger for å lage en filmtekst. Men for å gjøre det effektivt, trenger du en god ide.

Hva gjør en flott helt Cinemagraph?

Mens det generelle temaet til CG-en din vil bli stort sett diktert av nisje på nettstedet selv, er det visse universelle poeng å huske på når du stiller scenen. Husk å:

Hold det subtilt: Hele poenget med å bruke en CG i stedet for en video er at det er ment å være litt av et sinnssnakk. Noen av de beste CG-ene ser veldig stille ut, og så overraske betrakteren med en subtil bevegelse. Når du snakker om subtilitet, må du sørge for at den samlede sammensetningen ikke er altfor opptatt eller fargerikt hvis du er layering-tekst og en CTA på toppen av den. Husk at CG skal spille av disse elementene, ikke distrahere fra dem. Når vi snakkar om det…
La rom for den virkelige helten være: Sørg for at du vet hvor du vil ha overskriften, underheader og CTA-knappen for å gå inn i kinografen. Dette vil påvirke hvor du legger hovedhandlingen i komposisjonen.
Hold det forankret: En CG har selvfølgelig litt bevegelse, men scenen generelt må være veldig stille for å kunne kontrastbevegelsen riktig. Et stativ bør hjelpe med bakgrunnsbevakning og kamerastabilitet. Hvis modellens øyne er ment å bevege seg fra side til side, sørg for at hun holder hodet veldig stille samtidig.
Gjør det loop-able: Siden du vil at filen skal være relativt liten, må du sløyfe handlingen så det gjentas så sømløst som mulig. Planlegg dette når du stiller scenen. Ideelt sett bør den første posisjonen meget nøye matche den endelige posisjonen, og lukke sløyfen.
Bruk en person om mulig: Studier har vist at bilder med folk i dem holder folks oppmerksomhet mye mer enn de som ikke gjør det. Dette gjelder også for CGer. Ekstra poeng hvis du klarer å få modellen til å se i retning av CTA. Dette har blitt vist å trekke brukerens øye der også.

Når du har alle elementene på plass, kan du prøve å skyte om 20-30 sekunder med video, gjenta ønsket bevegelse flere ganger, med ca 5 sekunder å holde ting helt mellomrom. Dette bør gi deg nok rå opptak til å bli en iøynefallende filmtekst.

Sette det sammen

Selv om jeg ikke vil gå på trinnvis prosess for å konvertere en video til en filmtekst, er det flere alternativer tilgjengelig for deg. Du kan shell ut $ 299 for å bruke et dedikert cinemagraph designprogram, men du kan sette sammen en fin CG sammen bruker Photoshop , (som jeg gjetter at du allerede bruker.)

Komprimere filen

Enten du har laget CG fra grunnen, eller hentet fra en eksisterende, vil du sørge for at den lastes raskt. Om din endelige utdatafil er en gif eller video (som jeg anbefaler), vil kompresjonen stole på to separate faktorer:

Kvalitet
Lengde

Personlig prøver jeg å gå for den høyeste kvaliteten som er mulig i ethvert stort format helten image, video eller cinemagraph. Etter min mening er det synd å ofre kvaliteten på enhver fil som er ment å gjøre en slik visuell innvirkning. For å balansere dette ut, prøver jeg å gjøre min kinematiske sløyfe så kort som menneskelig mulig.

Handlingen vil ha effekt på hvor kort sløyfen kan være - et tog som suger opp kan være mye kortere enn et sakte, bevisst øyeblikk, noe som kan se litt spastisk ut hvis det gjentas for fort. Ta nedenstående eksempel fra web byrå The Deep End . Siden alt som trengs her er det for en togbil å matche den neste for en fin sømløs løkke, klarte jeg å kutte den ned til omtrent et sekund.

Selv om jeg klarte å holde handlingen ekstremt kortfattet, visste jeg fortsatt at filstørrelsen kunne reduseres for en enda raskere belastning. Jeg endte opp med å bruke en gratis online video kompressor kalt ClipChamp . Jeg var i stand til å komprimere videoen ned fra flere megabyte til en svelte 319 KB. Husk at de fleste brukere vil hoppe fra nettstedet ditt etter bare tre sekunder med å vente, så det lønner seg å være rask.

Og hvis sluttresultatet ditt er igjen med gjenstander fra ekstrem komprimering, kan du alltid ansette et prøvd og sant triks som brukes på ufullkomte heltvideoer - masker det med en halvtransparent mønstret overlegg .

Interessert i å se hvordan andre har brukt cinemagraphs som heltbilder? Jeg har noen gode nyheter, og dårlige - Det er ikke så mange flere å vise, hvilke er de dårlige nyhetene. Men den gode nyheten er at hvis du skulle sette denne planen i handling, ville du være på forkant av det som lover å være en ganske stor trend.

Her er et par som jeg klarte å finne rundt på nettet:

Gilt Taste [Redaktørens notat: Dette nettstedet er stengt.]

Nature Conservancy

Siste tanker

En filmkunst kan ikke bare sparke et ellers kjedelig nettstedprosjekt opp noen få hakk, men det kan faktisk også påvirke suksessen. Hvis du kombinerer det med en killer overskrift og overbevisende oppfordring, kan du virkelig ta tak i brukerens oppmerksomhet. Det du gjør med den oppmerksomheten, er opp til deg.

grafisk design webdesign video cinemagraphs animerte gifs cinemagraphs i webdesign gifs