Ogni immagine, ogni tela, ogni cornice ha una forma. E spesso quella forma è un rettangolo. Ancora più comune è un rettangolo di una particolare proporzione basata sul mezzo.
Dalle fotocamere alla televisione, dai film agli schermi dei computer, ogni mezzo ha una forma quasi diversa su se stesso. Questa può essere una sfida per i progettisti, soprattutto quando devi ritagliare e convertire contenuti e informazioni per adattarli a una varietà di mezzi. A causa di tutte queste diverse forme, la comprensione delle proporzioni può aiutarti a spostare facilmente immagini e disegni da un supporto all'altro.
Rapporto di aspetto definito
Semplicemente, un rapporto di aspetto è la relazione proporzionale tra la larghezza e l'altezza di un rettangolo. Quando si lavora con proporzioni nella maggior parte dei progetti di design moderni, un rapporto di aspetto avrà un orientamento orizzontale, poiché la maggior parte degli schermi è più larga di quanto siano alti. (E progettiamo su schermi e spesso per schermi.) Ma non tutte le proporzioni devono avere una larghezza maggiore dell'altezza.
Un rapporto di aspetto è definito in un rapporto matematico, con due numeri separati da due punti.
- larghezza altezza
- Quindi, 4 pollici di larghezza per 3 pollici di altezza è 4: 3
L'aspect ratio però non è semplicemente una misura di larghezza e altezza. Viene ridotto al più piccolo rapporto utilizzabile (utilizzando i concetti matematici della scuola elementare). Quindi, per un rettangolo di 12 pollici di larghezza per 9 pollici di altezza, anche il rapporto di formato è 4: 3 (un rapporto di aspetto comune nella fotografia in movimento).
Rapporto di aspetto e foto
Uno dei luoghi in cui può essere più facile vedere e spiegare le proporzioni è la fotografia. Anche la tua fotocamera iPhone ti consente di selezionare un rapporto aspetto specifico prima di scattare una foto, e quindi puoi cambiare il rapporto aspetto nel ritaglio.
I rapporti di aspetto nella fotografia sono spesso legati al modo in cui verrà utilizzata una foto. Il rapporto di aspetto è determinato dai vincoli del mezzo. Pubblicare foto su Instagram, ad esempio, consente solo le immagini con un rapporto 1: 1 (quadrato).
Tradizionalmente, le fotografie venivano comunemente scattate con proporzioni di 3: 2 perché le stampe venivano realizzate in dimensioni di 3 pollici per 2 pollici, 6 pollici per 4 pollici e così via. Tradizionalmente, questa formula comune ha portato a sensori di fotocamere e pratiche di stampa per le foto che si intrecciano, rendendo estremamente semplice per la persona media prendere e stampare le immagini.
Oggi è un po 'più complicato con più opzioni per la manipolazione digitale. Ma il concetto funziona ancora e ci sono ancora una manciata di dimensioni che sono più comunemente utilizzate. Al di fuori di fotografi professionisti, designer e artisti, poche persone ritagliano una foto per qualcosa di diverso da uno dei rapporti di aspetto comune.
Ma perché ritagliare al di fuori di un rapporto comune? Per creare un interesse visivo drammatico. Considerare un'immagine panoramica per un momento. Ha un senso di drammaticità ed eccitazione? Normale? la forma non lo fa L'uso di una forma standard implica armonia ed equilibrio mentre una forma non standard può essere drammatica ed eccitante.
Rapporto di aspetto e video
I rapporti di aspetto nei video sono molto simili alla fotografia. La forma è abbastanza diversa per i moderni schermi video, mentre le immagini storicamente ferme e in movimento erano basate su proporzioni simili.
Gli schermi video si dividono in due categorie ben distinte in termini di proporzioni: schermi cinematografici o cinematografici e schermi televisivi o desktop. Le forme di questi schermi stanno iniziando ad avvicinarsi allo stesso rapporto di aspetto con più schermi a casa che rientrano nella categoria widescreen, ma c'è ancora una differenza significativa tra i due, motivo per cui il letterbox è comunemente usato tra i formati.
- Gli schermi cinematografici sono spesso 1.85: 1 o 1.43: 1 (IMAX)
- Gli schermi televisivi sono spesso 4: 3 o 1.33: 1 (formato precedente) o la più recente proporzione widescreen più comune di 16: 9 o 1,77: 1.
In termini di web, la progettazione di video per le dimensioni dello schermo varia molto, ma spesso viene utilizzato il formato 16: 9. Un'altra opzione comune per i web designer, a meno che non si utilizzi un video a schermo intero, è quella predefinita per i video che utilizzano il rapporto 16: 9 perché è lo standard utilizzato per la maggior parte delle applicazioni e dei giocatori basati sul web, incluso YouTube.
L'utilizzo di un rapporto di aspetto comune semplifica lo spostamento di un elemento da un luogo all'altro e tra un progetto e l'altro. Un video ritagliato al rapporto 16: 9, ad esempio, giocherà senza problemi su uno schermo televisivo, sullo schermo di un computer (desktop o mobile) e in un lettore video online. Ciò ti consente di risparmiare tempo poiché non dovrai modificare o ritagliare il video per formati o dispositivi diversi o preoccuparti di parti dell'area dell'immagine che non verranno viste a causa delle differenze nelle dimensioni dello schermo.
Aspect Ratio and Responsive Design
I rapporti di aspetto entrano in gioco anche quando si pensa al design reattivo per i siti web. Ciò è particolarmente vero se si desidera che immagini e video mantengano una forma specifica su più dispositivi.
Il mantenimento di un rapporto aspetto specifico per le immagini nel CSS garantisce che il significato del contenuto non cambierà a causa di un'immagine ritagliata. (Pensa a quanto può sembrare diversa una foto se l'immagine completa è di due persone con le braccia intorno all'altra e nella versione ritagliata vedi solo una persona e una parte delle braccia dell'altra. Le foto hanno significati molto diversi.)
Quando lavori su siti web reattivi, devi prendere alcune decisioni sulle immagini, le proporzioni e su come vuoi che le cose appaiano su vari schermi. I progettisti possono ridimensionare manualmente ciascuna immagine per diversi dispositivi o utilizzare una piccola codifica per fare il trucco. Craig Buckler ha un ottimo tutorial su come farlo esattamente in? Come mantenere i rapporti di aspetto dell'immagine in Responsive Web Design.?
Questa è matematica extra può entrare in gioco pure. Probabilmente dovrai pensare ai rapporti di aspetto in termini di percentuali. Ecco alcune conversioni comuni:
- 4:3 = 75%
- 3:2 = 66.66%
- 16:9 = 56.25%
- 8:5 = 62.5%
Rendere la vita facile
Quindi perché tutto ciò è importante? Perché non possiamo semplicemente ritagliare le immagini come preferiamo e andare avanti con le nostre vite? Puoi, ma capire i rapporti di aspetto ti renderà la vita più facile.
Pensa a quanti progetti includono più progetti su più tele: design di biglietti da visita, design di cartoline, progettazione di siti web, poster design, pubblicità video. Se lavori con proporzioni comuni o progetti di elementi usando quella scala, mescolare e abbinare i pezzi è facile e non devi reinventare il design per ogni nuovo elemento.
Pensa al tempo che puoi salvare.
Un altro risparmio di tempo? Prova questo calcolatore di proporzioni. È particolarmente utile se non ti senti bene a fare calcoli da solo.
Rapporti di aspetto comuni
Mentre gli standard di proporzioni tendono a cambiare nel tempo - basta guardare la forma drammaticamente diversa degli schermi TV degli anni '50 e oggi - è possibile pianificare alcune delle forme e dimensioni più comuni.
- 4: 3 (1.33: 1) - Vecchio formato di schermo per televisione e computer (1024? 768 pixel)
- 3: 2 (1.5: 1) - Formato di stampa fotografica comune, utilizzato anche per cartoline, biglietti da visita e invii standard
- 1: 1 - Standard dell'immagine quadrata (comune nei social media e nella progettazione di siti Web)
- 16: 9 (1,77: 1) - Standard video HD, lo standard dello schermo del computer si avvicina ma è impreciso (1366? 768 pixel)
- 5: 3 (1.66: 1) - Standard europeo widescreen
- 1.618: 1 - Sezione aurea
Conclusione
Comprendere i rapporti di aspetto può farti risparmiare tempo e rielaborare come designer. Considerare tutte le applicazioni comuni di conoscere un pezzo o un lavoro o un progetto ha la stessa proporzione di qualcos'altro. Può anche aiutarti a capire dove ritagliare e quali parti di un'immagine o di un progetto dovranno essere eliminati o tagliati in base al supporto.
Anche se può sembrare un sacco di matematica e calcolo all'inizio, molti dei progetti su cui lavori probabilmente utilizzeranno proporzioni comuni. Usa l'elenco di controllo qui sopra per vedere quali parti e disegni completi puoi combinare.