Cinemagraphs i Web Design
Hvis du læser nogen af de utallige webdesign-trendrapporter, der kom ud tidligere i år, læser du sandsynligvis løftet om store, hero-sized cinemagraphs placeret fremtrædende på hjemmesider overalt. Så hvor er de?
Mens nogle få fashion-forward virksomheder bruger dem på deres hjemmesider, har cinemagraph i høj grad været relegated for at fremvise runde-up artikler og reddit sider.
Nå jeg siger nok er nok. Det er på tide, at filmbilleder stiger op og tager deres rette sted som websideheltene de var bestemt til at blive.
Hvorfor cinemagraphs arbejde
Ideen om at følge en webdesign tendens simpelthen fordi det var forventet aldrig virkelig spændt mig. Men hvad nu hvis du rent faktisk kunne banke en sådan tendens? Og hvad nu hvis det faktisk havde et formål, og løst et problem på samme tid?
Det menneskelige øje elsker bevægelse.
Når det kommer til filmtekster, er alle ovenstående udsagn sande. Selv om det helt sikkert er blevet diskuteret (og endda prognostiseret som en tendens i webdesign), bruger meget få hjemmesider faktisk dem. Som følge heraf er de ikke engang kommet tæt på at nå en kritisk masse, så de er stadig fascinerende for de fleste webbrugere.
Ikke helt et foto, ikke helt en video, filmtekster er iboende øjen-slik, fordi de narrer seeren lige lang nok til at få dem til at tage et andet udseende. I ADD-æraen lever vi i dag, alt hvad du kan bruge til at gøre en bruger pause - selv for et øjeblik - tæller som en lille sejr af en meget vigtig årsag:
Du har fået deres opmærksomhed.
En særlig effektiv måde at tiltrække lidt opmærksomhed på en hjemmeside har altid været video. Det menneskelige øje elsker bevægelse. Men en stor helt video (selv en kort) er så omfangsrig . Sikker på at du kan komprimere den inden for en tomme af sit liv, men så ser det bare ud ... komprimeret. Eller du kan lade det være alene og lide konsekvenserne af en langsom læsning webside.
Men ved at bruge et filmtekst, kan du spare meget båndbredde, mens du stadig opfylder dette bevægelsesbehov. Faktisk står du op for ante, fordi du kan udnytte nyhedsaspektet af en filmtekst. Folk kan bare ikke se dem meget ofte og er imponerede, når de gør det.
Så nu hvor du ved, hvorfor filmtekster fortjener et vigtigt sted på internettet, lad os tage et højt niveau af, hvordan man bringer en til liv.
Glendevon Motors bruger et filmfelt i sit heltområde for at formidle et humør og skille sig ud som et "premium brand" blandt sine konkurrenter.
Valgmulighed 1: Brug en eksisterende filmtekst
Der er mange tilfælde, hvor det er acceptabelt at købe en færdiggjort CG, eller endda foretrukket at lave din egen. Jeg vil sige det, hvis du kan finde hvad du har brug for, og det er i dit budget for at få rettighederne til det, så er det vejen at gå. Det eneste spørgsmål er: Hvor finder du det?
Den gode nyhed er, du har muligheder. De vil i vid udstrækning blive bestemt af dit budget (eller din kundes), men der er mange kilder derude. Der er endda nogle få frie dem at vælge imellem. Men hvis du har halvfems dollars at bruge, har Shutterstock et ret anstændigt udvalg af high definition CG'er.
(Tip: De har ikke en selvstændig cinemagraph sektion, så du skal bare søge efter udtrykket "cinemagraph" plus dine andre søgeord inden for "footage" sektionen.)
Hvis du formår at finde det, du forestiller dig, vil du sandsynligvis stadig komprimere filen til en vis grad. Mere om det i en smule.
Mulighed 2: Lav din egen
Hele punktet ved at bruge en CG i stedet for en video er, at det er meningen at være lidt af et tankespil.
Måske kunne du ikke finde det, du havde afbilledet. Eller måske er du bare en die-hard DIY'er, og jeg respekterer dig for det. Så hvordan laver man lige en film fra bunden?
For det første hjælper det med at få det rigtige udstyr og en plan. Her er hvad jeg anbefaler for at komme i gang:
- Et kamera der kan optage video
- Et stativ
- En model og / eller nødvendige rekvisitter
- En computer
- Adgang til et videoredigeringsprogram (valgfrit)
- Adgang til Adobe Photoshop eller en mere dedikeret filmredigeringssoftware, som f.eks. Flixel
Det er, hvad du skal bruge for at lave et filmtekst. Men for at gøre det effektivt skal du have en god ide.
Hvad laver en stor hero cinemagraph?
Mens det generelle tema for din CG i vid udstrækning vil blive dikteret af hjemmesidenes niche, er der visse universelle punkter at huske på, når du sætter scenen. Vær sikker på:
- Hold det subtilt: Hele punktet ved at bruge en CG i stedet for en video er, at det er meningen at være lidt af et tankespil. Nogle af de bedste CG'er ser meget stille ud, så overrasker seeren med en subtil bevægelse. Når du taler om subtilitet, skal du sørge for, at den samlede sammensætning ikke er for travlt eller farvestrålende, hvis du lægger tekst og en CTA oven på den. Husk, at CG skal afspille disse elementer, ikke distrahere fra dem. Taler om hvilke ...
- Forlad plads til den rigtige helt: Sørg for, at du ved, hvor du vil have din overskrift, subheader og CTA-knap for at gå inden for filmteksten. Dette vil påvirke hvor du placerer hovedaktionen i kompositionen.
- Hold det forankret: Selvfølgelig har en CG noget bevægelse, men scenen generelt skal være meget stille for at kunne kontrastere bevægelsen korrekt. Et stativ bør hjælpe med baggrundsbevægelse og stabilitet i kameraet. Hvis din models øjne er beregnet til at bevæge sig fra side til side, skal du sørge for at hun holder hovedet meget stille samtidig.
- Gør det loop-able: Da du vil have filen til at være relativt lille, skal du sløjfe handlingen, så det gentages så problemfrit som muligt. Planlæg for dette, når du indstiller scenen. Ideelt set bør den første position meget tæt matcher den endelige position og lukke sløjfen.
- Brug en person, hvis det er muligt: Undersøgelser har vist at billeder med folk i dem holder folks opmærksomhed meget mere end dem, der ikke gør det. Dette gælder også for CG'er. Ekstra point, hvis du kan klare din model til at se i retning af CTA. Dette er blevet vist at trække brugerens øje der også.
Når du har alle dine elementer på plads, skal du prøve at skyde omkring 20-30 sekunder video, gentage den ønskede bevægelse flere gange, med cirka 5 sekunder at holde tingene helt ind imellem. Dette bør give dig nok rå optagelser til at blive til en iøjnefaldende filmtekst.
Sætte det sammen
Selvom jeg ikke vil gå på trin-for-trin-processen for at gøre en video til en filmtekst, er der flere muligheder til rådighed for dig. Du kan bruge $ 299 til at bruge et dedikeret filmdesignprogram, men du kan sammensætte en god CG sammen ved hjælp af Photoshop , (som jeg gætter du bruger allerede.)
Komprimering af filen
Uanset om du lavede din CG fra bunden eller hentet en eksisterende, vil du sørge for, at den lastes hurtigt. Uanset om din endelige outputfil er en gif eller video (som jeg anbefaler), vil din kompression være afhængig af to separate faktorer:
- Kvalitet
- Længde
Personligt forsøger jeg at gå for den højeste kvalitet muligt i ethvert stort format helten billede, video eller cinemagraph. Efter min mening er det en skam at ofre kvaliteten af enhver fil, der skal gøre sådan en visuel indvirkning. For at afbalancere dette, forsøger jeg at gøre min filmløjkke så kort som menneskeligt muligt.
Handlingen vil have effekt på, hvor kort sløjfen kan være - et tog, der suger op, kan være meget kortere end et langsomt bevidst øjenblik, som kan se lidt spastisk ud, hvis det gentages for hurtigt. Tag nedenstående eksempel fra web agentur Den dybe ende . Da alt, hvad der er brug for her, er, at en togbil skal matche det næste for at få en smuk sømløs sløjfe, lykkedes det mig at skære det ned til omkring et sekund.
Selvom jeg formåede at holde handlingen ekstremt kortfattet, vidste jeg stadig, at filstørrelsen kunne reduceres for en endnu hurtigere belastning. Jeg endte med at bruge en gratis online videokompressor kaldet ClipChamp . Jeg kunne komprimere videoen ned fra flere megabyte til en svelte 319 KB. Husk, at de fleste brugere vil hoppe fra dit websted efter kun tre sekunder af at vente, så det betaler sig at være hurtig.
Og hvis dit endelige resultat er tilbage med artefakter fra ekstrem kompression, kan du altid ansætte et prøvet og sandt trick, der bruges på ufuldkomne heltevideoer - masker det med en halvgennemsigtig mønstret overlay .
Interesseret i at se, hvordan andre har brugt filmtekster som helt billeder? Jeg har nogle gode nyheder og dårlige - Der er ikke så mange flere at vise, hvilke er de dårlige nyheder. Men den gode nyhed er, hvis du skulle sætte denne plan i aktion, ville du være på forkant af hvad der lover at være en temmelig stor trend.
Her er et par, jeg formåede at finde rundt på nettet:
Gilt Taste [Redaktørens note: Dette websted er lukket.]
Endelige tanker
En filmtekst kan ikke kun sparke et ellers kedeligt webstedsprojekt op ad et par indskæringer, men det kan faktisk også påvirke dets succes. Hvis du kombinerer det med en killer overskrift og overbevisende opfordring til handling, kan du virkelig gribe dine brugeres opmærksomhed. Hvad du gør med den opmærksomhed, er op til dig.