Forstå og jobbe med aspektforhold
Hvert bilde, hvert lerret, hver ramme har en form. Og ofte er den formen et rektangel. Enda mer vanlig er et rektangel med en bestemt andel basert på medium.
Fra kameraer til TV, filmer til dataskjermer, har hvert medium en nesten distinkt form på seg selv. Det kan være en utfordring for designere, spesielt når du må beskjære og konvertere innhold og informasjon for å passe til forskjellige medier. På grunn av alle disse forskjellige formene, kan forståelse av forholdstall hjelpe deg med å flytte bilder og design fra et medium til et annet.
Aspektforhold definert
Enkelt er et aspektforhold det proporsjonale forholdet mellom bredden og høyden på et rektangel. Når du arbeider med sideforhold i de fleste moderne designprosjekter, vil et aspektforhold ha en horisontal retning, fordi de fleste skjermene er bredere enn de er høye. (Og vi designer på skjermer og ofte for skjermer.) Men ikke alle bildeforhold må ha større bredde enn høyde.
Et sideforhold er definert i et matematisk forhold, med to tall atskilt med en kolon.
- bredde høyde
- Så 4 cm bred og 3 inches høy er 4: 3
Bildeforholdet er imidlertid ikke bare et mål på bredde og høyde. Det reduseres til det minste anvendelige forholdet (ved bruk av matematikkbegreper fra barneskolen). Så for et rektangel som er 12 tommer bredt og 9 tommer høyt, er størrelsesforholdet også 4: 3 (et vanlig sideforhold i stillbildefotografering).
Bildeforhold og bilder
Et av stedene det kan være enklest å se og forklare aspektforhold er i fotografering. Selv iPhone-kameraet ditt lar deg velge et spesifikt sideforhold før du klikker på et bilde, og deretter kan du endre sideforholdet ved beskjæring.
Bildeforhold i fotografering er ofte knyttet til hvordan et bilde skal brukes. Bildeforholdet bestemmes av begrensninger for mediet. Hvis du legger ut bilder på Instagram, tillater det bare bilder med forholdet 1: 1 (firkantet).
Tradisjonelt ble fotografier ofte tatt med et størrelsesforhold på 3: 2 fordi utskrifter ble laget i størrelser 3 inches x 2 inches, 6 inches by 4 inches og så videre. Tradisjonelt resulterte denne vanlige formelen i kamerasensorer og utskriftspraksis for bilder som masker seg, noe som gjorde det superenkelt for den gjennomsnittlige personen å ta og skrive ut bilder.
Det er litt mer komplisert i disse dager med flere alternativer for digital manipulasjon. Men konseptet fungerer fremdeles, og det er fremdeles en håndfull størrelser som er mest brukt. Utenfor profesjonelle fotografer, designere og kunstnere beskjærer det få mennesker et bilde til noe annet enn en av de vanlige sideforholdene.
Men hvorfor avling utenfor et vanlig forhold i det hele tatt? For å skape dramatisk visuell interesse. Tenk på et panoramabilde et øyeblikk. Det har en følelse av drama og spenning en "normal" form ikke gjør. Å bruke en standardform innebærer harmoni og balanse, mens en ikke-standard form kan være dramatisk og spennende.
Bildeforhold og video
Bildeforhold i video ligner veldig på stillfotografering. Formen er ganske annerledes for moderne videoskjermer, mens historisk stillbilder og bevegelige bilder var basert på lignende størrelsesforhold.
Videaskjermer faller inn i to ganske forskjellige kategorier når det gjelder størrelsesforhold: Kino- eller filmskjermer og TV- eller stasjonære dataskjermer. Formene på disse skjermbildene begynner å komme nærmere det samme størrelsesforholdet med flere hjemmeskjermer som faller inn i widescreen-kategorien, men det er fremdeles en betydelig forskjell mellom de to, og det er derfor bokstavboksen ofte brukes mellom formatene.
- Kinoskjermbilder er ofte 1, 85: 1 eller 1, 43: 1 (IMAX)
- TV-skjermer er ofte 4: 3 eller 1.33: 1 (eldre format) eller den nyere vanlige bredskjermandelen på 16: 9 eller 1.77: 1.
Med tanke på nettet varierer utforming av video for skjermstørrelse mye, men ofte brukes 16: 9-formatet. Et annet vanlig alternativ for webdesignere, med mindre du bruker en fullskjermvideo, er å standard til video ved å bruke forholdet 16: 9 fordi det er standarden som brukes for de fleste nettbaserte spillere og apper, inkludert YouTube.
Ved å bruke et vanlig sideforhold gjør det enkelt å flytte et element fra sted til sted og mellom prosjekter. En video beskåret til 16: 9-forholdet, for eksempel, vil spille sømløst på en TV-skjerm, dataskjerm (stasjonær eller mobil) og i en online videospiller. Dette sparer deg for tid fordi du ikke trenger å redigere eller beskjære videoen for forskjellige formater eller enheter, eller bekymre deg for deler av bildeområdet som ikke blir sett på grunn av forskjeller i skjermstørrelse.
Aspektforhold og responsiv design
Bildeforhold kommer også inn når man tenker på responsiv design for nettsteder. Dette gjelder spesielt hvis du vil at bilder og video skal opprettholde en spesifikk form på flere enheter.
Å opprettholde et spesifikt sideforhold for bilder i CSS sikrer at betydningen av innholdet ikke endres på grunn av et bilde som beskjæres. (Tenk på hvor annerledes et bilde føles hvis hele bildet er av to personer med armene rundt hverandre og i den beskjære versjonen ser du bare én person og en del av armene til den andre. Bildene har veldig forskjellige betydninger.)
Når du jobber med responsive nettsteder, har du noen få beslutninger å ta om bilder, størrelsesforhold og hvordan du vil at ting skal vises på forskjellige skjermer. Designere kan endre størrelsen på hvert bilde for hånd for forskjellige enheter eller bruke litt koding for å gjøre susen. Craig Buckler har en flott tutorial om nøyaktig hvordan du gjør dette i "Hvordan opprettholde bildeforhold i responsiv webdesign."
Dette er ekstra matematikk som kan komme i spill også. Du vil sannsynligvis trenge å tenke på størrelsesforhold når det gjelder prosent. Her er noen vanlige konverteringer:
- 4: 3 = 75%
- 3: 2 = 66, 66%
- 16: 9 = 56, 25%
- 8: 5 = 62, 5%
Gjør livet enkelt
Så hvorfor betyr alt dette? Hvorfor kan vi ikke bare beskjære bilder, men vi vil og gå videre med livene våre? Det kan du, men å forstå aspektforhold vil gjøre livet ditt enklere.
Tenk på hvor mange prosjekter som inkluderer flere design på flere lerreter - visittkortdesign, postkortdesign, webdesign, plakatdesign, videoannonse. Hvis du jobber innenfor et vanlig sideforhold eller designer elementer ved bruk av den skalaen, er det enkelt å blande og matche brikker, og du trenger ikke å finne opp designet for hvert nytt element på nytt.
Tenk på tiden du kan spare.
En annen tidsbesparende? Prøv denne størrelsesforholdskalkulatoren. Det er spesielt nyttig hvis du ikke har det bra med å gjøre beregninger selv.
Vanlige aspektforhold
Mens standardforholdsstandardene har en tendens til å endre seg over tid - bare se på den dramatisk forskjellige formen på TV-skjermer fra 1950-tallet og i dag - kan du planlegge for noen av de mer vanlige formene og størrelsene.
- 4: 3 (1, 33: 1) - Gamle TV- og dataskjermformat (1024 × 768 piksler)
- 3: 2 (1, 5: 1) - Vanlig fotoutskriftsformat, også brukt for postkort, visittkort og standardutsendelser
- 1: 1 - Firkantet bildestandard (vanlig i sosiale medier og nettsteddesign)
- 16: 9 (1.77: 1) - HD-videostandard, dataskjermstandard kommer nær, men er upresis (1366 × 768 piksler)
- 5: 3 (1.66: 1) - Europeisk bredskjermstandard
- 1.618: 1 - Golden ratio
Konklusjon
Å forstå aspektforhold kan spare deg for tid og omarbeide som designer. Tenk på at alle vanlige bruksområder for å kjenne et stykke, et verk eller et prosjekt har den samme andelen som noe annet. Det kan også hjelpe deg å forstå hvor du skal beskjære og hvilke deler av et bilde eller prosjekt som må slipp eller kuttes basert på medium.
Selv om det kan virke som mye matte og beregning ved begynnelsen, vil sannsynligvis mange av prosjektene du jobber med bruke vanlige sideforhold. Bruk sjekklisten over for å se hvilke deler og komplette design du kan mikse og matche.
