Varje bild, varje duk, har varje ram en form. Och ofta är den formen en rektangel. Ännu vanligare är en rektangel av en viss andel baserad på medium.
Från kameror till tv till filmer till dataskärmar har varje medium en nästan distinkt form på sig själv. Det kan vara en utmaning för designers, särskilt när du måste beskära och konvertera innehåll och information för att passa en mängd olika medier. På grund av alla dessa olika former kan förstående bildförhållanden hjälpa dig att enkelt flytta bilder och mönster från ett medium till ett annat.
Bildförhållande Definierat
Enkelt är ett bildförhållande proportionerligt mellan bredden och höjden av en rektangel. När man arbetar med bildförhållanden i de flesta moderna designprojekt, kommer ett bildförhållande att ha en horisontell orientering, eftersom de flesta skärmar är bredare än de är långa. (Och vi designar på skärmar och ofta för skärmar.) Men inte varje bildförhållande måste ha en större bredd än höjden.
Ett bildförhållande definieras i ett matematiskt förhållande, med två tal separerade av ett kolon.
- bredd höjd
- Så att 4 tum bred vid 3 tum hög är 4: 3
Bildförhållandet är dock inte bara en mätning av bredd och höjd. Den reduceras till det minsta användbara förhållandet (med hjälp av matematiska begrepp från grundskolan). Så för en rektangel 12 tum bred med 9 tum hög, är bildförhållandet också 4: 3 (ett gemensamt bildförhållande i stillfotografering).
Bildförhållande och foton
En av de ställen som det är lättast att se och förklara aspektförhållandena är i fotografering. Även din iPhone-kamera kan du välja ett visst bildförhållande innan du snapar ett foto, och sedan kan du ändra bildförhållandet i beskärning.
Bildförhållanden i fotografi är ofta kopplade till hur ett foto ska användas. Bildförhållandet bestäms av medianens begränsningar. Om du skickar bilder till Instagram, till exempel tillåter du bara bilder med ett 1: 1-förhållande (kvadrat).
Traditionellt togs fotografier vanligtvis med ett bildförhållande på 3: 2 eftersom utskrifter gjordes i storlekar av 3 tum med 2 tum, 6 tum med 4 tum och så vidare. Traditionellt resulterade den här gemensamma formeln i kamerasensorer och utskriftsmetoder för bilder som mesh, vilket gör det super lätt för den genomsnittliga personen att ta och skriva ut bilder.
Det är lite mer komplicerat idag med fler alternativ för digital manipulation. Men konceptet fungerar fortfarande och det finns fortfarande en handfull storlekar som brukar användas. Utanför professionella fotografer, designers och artister skördar några personer ett foto till något annat än en av de gemensamma aspekterna.
Men varför skörda utan ett gemensamt förhållande alls? Att skapa dramatiskt visuellt intresse. Tänk på en panoramabild för en stund. Det har en känsla av drama och spänning a? Normal? formen gör det inte. Att använda en standardform innebär harmoni och balans medan en icke-standardform kan vara dramatisk och spännande.
Bildförhållande och video
Bildförhållanden i video är väldigt mycket som fotografering fortfarande. Formen är helt annorlunda för moderna bildskärmar, medan historiskt stillbilder och rörliga bilder baserades på liknande bildförhållanden.
Videoskärmarna faller i två ganska olika kategorier med avseende på bildförhållande: Cinema- eller filmskärmar och TV- eller skrivbordsskärmar. Formerna på dessa skärmar börjar komma närmare samma bildförhållande med fler hemskärmar som faller in i widescreen-kategorin, men det finns fortfarande en signifikant skillnad mellan de två, varför brevboxning vanligtvis används mellan formaten.
- Cinema skärmar är ofta 1.85: 1 eller 1.43: 1 (IMAX)
- TV-skärmar är ofta 4: 3 eller 1,33: 1 (äldre format) eller den nyare vanliga bredbildsfördelningen 16: 9 eller 1,77: 1.
När det gäller webben varierar utformningen av video för skärmstorlek mycket, men ofta används formatet 16: 9. Ett annat vanligt alternativ för webbdesigners, om inte användandet av en helskärmsfilm, är standard för video med 16: 9-förhållandet eftersom det är den standard som används för de flesta webbaserade spelare och appar, inklusive YouTube.
Med ett gemensamt bildförhållande gör det enkelt att flytta ett element från plats till plats och mellan projekt. En video som är beskuren till 16: 9-förhållandet, spelar till exempel sömlöst på en tv-skärm, datorskärm (stationär eller mobil) och i en online videospelare. Detta sparar tid eftersom du inte behöver redigera eller skära videon för olika format eller enheter eller oroa dig för delar av bildområdet som inte kommer att ses på grund av skillnader i skärmstorlek.
Aspect Ratio och Responsive Design
Bildförhållanden spelas också in i spel när man tänker på responsiv design för webbplatser. Detta gäller speciellt om du vill att bilder och video ska behålla en viss form på flera enheter.
Att behålla ett visst bildförhållande för bilder i CSS säkerställer att innehållet i ditt innehåll inte ändras på grund av att en bild beskärs. (Tänk på hur annorlunda ett foto känns om hela bilden är av två personer med sina armar runt varandra och i den beskurna versionen ser du bara en person och en del av armarna på den andra. Bilderna har mycket olika betydelser.)
När du arbetar på lyhörda webbplatser har du några beslut att göra om bilder, bildförhållande och hur du vill att saker ska visas på olika skärmar. Designers kan ändra storlek på varje bild för hand för olika enheter eller använda lite kodning för att göra tricket. Craig Buckler har en bra handledning om exakt hur man gör det här? Hur man behåller bildförhållanden i Responsive Web Design.?
Detta är extra matte kan komma in i spel också. Du kommer sannolikt att behöva tänka på aspektförhållanden i procent av procenten. Här är några vanliga konverteringar:
- 4:3 = 75%
- 3:2 = 66.66%
- 16:9 = 56.25%
- 8:5 = 62.5%
Göra livet enkelt
Så varför gör allt detta? Varför kan vi inte bara beskära bilder men vi gillar och fortsätter med våra liv? Du kan, men förståelse aspekt förhållanden kommer att göra ditt liv enklare.
Tänk på hur många projekt som inkluderar flera mönster på flera canvases - visitkortdesign, vykortdesign, webbdesign, affischdesign, videoannonsering. Om du arbetar inom ett gemensamt bildförhållande eller att designa element med den skalan är det enkelt att blanda och matcha bitar och du behöver inte uppfinna designen för varje nytt element.
Tänk på den tid du kan spara.
En annan tidsbesparare? Prova denna kalkylatorn för bildförhållande. Det är speciellt praktiskt om du inte känner dig bra om att göra beräkningar själv.
Vanliga bildförhållanden
Medan bildförhållandestandarder tenderar att förändras över tiden - titta bara på den dramatiskt olika formen av TV-skärmar från 1950-talet och idag - du kan planera för några av de vanligaste formerna och storlekarna.
- 4: 3 (1,33: 1) - Gamla TV- och datorskärmformat (1024? 768 pixlar)
- 3: 2 (1,5: 1) - Vanligt fotoutskriftsformat, som även används för vykort, visitkort och vanliga mailings
- 1: 1 - Kvadratisk bildstandard (vanligt i sociala medier och webbdesign)
- 16: 9 (1,77: 1) - HD-videostandard, standard för datorskärmen kommer nära men är oklar (1366? 768 pixlar)
- 5: 3 (1,66: 1) - Europeisk widescreenstandard
- 1.618: 1 - Gyllene förhållandet
Slutsats
Förstå bildförhållanden kan spara tid och omarbeta som designer. Tänk på alla vanliga tillämpningar att veta en bit eller arbete eller projekt har samma andel som något annat. Det kan också hjälpa dig att förstå var du ska beskära och vilka delar av en bild eller ett projekt som ska tappas eller klippas ut baserat på medium.
Även om det kan tyckas som mycket matematik och beräkning vid starten, kommer många av de projekt du arbetar med troligen att använda gemensamma bildförhållanden. Använd checklista ovan för att se vilka delar och kompletta mönster du kan mixa och matcha.