Jedes Bild, jede Leinwand, jeder Rahmen hat eine Form. Und oft ist diese Form ein Rechteck. Noch üblicher ist ein Rechteck mit einem bestimmten Anteil, das auf dem Medium basiert.
Von Kameras über Fernsehen bis zu Filmen und Computerbildschirmen hat jedes Medium eine fast eigene Form. Dies kann für Designer eine Herausforderung sein, insbesondere wenn Sie Inhalte und Informationen für eine Vielzahl von Medien beschneiden und konvertieren müssen. Aufgrund all dieser unterschiedlichen Formen können Sie das Verständnis von Seitenverhältnissen erleichtern, Bilder und Designs von einem Medium auf ein anderes zu verschieben.
Seitenverhältnis definiert
Ein Seitenverhältnis ist einfach die proportionale Beziehung zwischen der Breite und Höhe eines Rechtecks. Wenn Sie in den meisten modernen Designprojekten mit Seitenverhältnissen arbeiten, weist das Seitenverhältnis eine horizontale Ausrichtung auf, da die meisten Bildschirme breiter als groß sind. (Und wir entwerfen auf Bildschirmen und häufig für Bildschirme.) Aber nicht jedes Seitenverhältnis muss eine größere Breite als Höhe haben.
Ein Seitenverhältnis wird in einem mathematischen Verhältnis definiert, wobei zwei Zahlen durch einen Doppelpunkt getrennt sind.
- Breite Höhe
- So ist 4 Zoll breit und 3 Zoll hoch 4: 3
Das Seitenverhältnis ist jedoch nicht nur ein Maß für Breite und Höhe. Es wird auf das kleinste nutzbare Verhältnis reduziert (unter Verwendung mathematischer Konzepte aus der Grundschule). Für ein Rechteck mit einer Breite von 12 Zoll und einer Höhe von 9 Zoll beträgt das Seitenverhältnis ebenfalls 4: 3 (ein übliches Seitenverhältnis bei Standbildern).
Seitenverhältnis und Fotos
Es ist am einfachsten, die Seitenverhältnisse in der Fotografie zu sehen und zu erklären. Sogar Ihre iPhone-Kamera ermöglicht Ihnen die Auswahl eines bestimmten Seitenverhältnisses, bevor Sie ein Foto aufnehmen, und dann können Sie das Seitenverhältnis beim Zuschneiden ändern.
Die Seitenverhältnisse in der Fotografie hängen oft davon ab, wie ein Foto verwendet wird. Das Seitenverhältnis wird durch die Beschränkungen des Mediums bestimmt. Wenn Sie Fotos auf Instagram veröffentlichen, können Sie beispielsweise nur Bilder mit einem Verhältnis von 1: 1 (Quadrat) anzeigen.
Traditionell wurden Fotos üblicherweise mit einem Seitenverhältnis von 3: 2 aufgenommen, da Drucke in Größen von 3 Zoll mal 2 Zoll, 6 Zoll mal 4 Zoll usw. gemacht wurden. Traditionell führte diese gängige Formel zu Kamerasensoren und Druckverfahren für Fotos, die ineinander greifen, was es dem Durchschnittsfachmann sehr leicht macht, Bilder aufzunehmen und zu drucken.
Das ist heutzutage etwas komplizierter mit mehr Optionen für die digitale Manipulation. Aber das Konzept funktioniert immer noch und es gibt immer noch eine Handvoll Größen, die am häufigsten verwendet werden. Abgesehen von professionellen Fotografen, Designern und Künstlern schneiden nur wenige Menschen ein Foto zu etwas anderem als einem der üblichen Seitenverhältnisse.
Aber wieso überhaupt außerhalb eines üblichen Verhältnisses? Um ein dramatisches visuelles Interesse zu schaffen. Betrachten Sie ein Panoramabild für einen Moment. Es hat ein Gefühl von Drama und Aufregung als "normal". Form nicht. Die Verwendung einer Standardform impliziert Harmonie und Ausgewogenheit, während eine Nichtstandardform dramatisch und aufregend sein kann.
Seitenverhältnis und Video
Die Seitenverhältnisse in Videos ähneln sehr der Standfotografie. Die Form ist für moderne Videobildschirme ziemlich unterschiedlich, während Standbilder und bewegte Bilder in der Vergangenheit auf ähnlichen Seitenverhältnissen basierten.
Videobildschirme lassen sich hinsichtlich des Seitenverhältnisses in zwei ziemlich unterschiedliche Kategorien einteilen: Kino- oder Filmbildschirme sowie Fernseh- oder Desktop-Computerbildschirme. Die Formen dieser Bildschirme nähern sich allmählich dem gleichen Seitenverhältnis an, wobei mehr Bildschirme für zu Hause in die Widescreen-Kategorie fallen, aber es gibt immer noch einen erheblichen Unterschied zwischen den beiden, weshalb Letterboxing zwischen den Formaten verwendet wird.
- Kinoleinwände sind oft 1,85: 1 oder 1,43: 1 (IMAX)
- Fernsehbildschirme sind oft 4: 3 oder 1,33: 1 (älteres Format) oder der neuere Breitbildschirm von 16: 9 oder 1,77: 1.
In Bezug auf das Web variiert das Design von Video für die Bildschirmgröße stark. Häufig wird jedoch das 16: 9-Format verwendet. Eine andere übliche Option für Webdesigner ist die Verwendung eines Videos im 16: 9-Verhältnis, sofern kein Vollbildvideo verwendet wird, da dies der Standard ist, der für die meisten webbasierten Player und Apps, einschließlich YouTube, verwendet wird.
Wenn Sie ein gemeinsames Seitenverhältnis verwenden, können Sie ein Element leicht von Ort zu Ort und zwischen Projekten verschieben. Ein auf das 16: 9-Verhältnis zugeschnittenes Video wird beispielsweise nahtlos auf einem Fernsehbildschirm, einem Computerbildschirm (Desktop oder mobil) und in einem Online-Videoplayer abgespielt. Dies spart Zeit, da Sie das Video nicht für verschiedene Formate oder Geräte erneut bearbeiten oder beschneiden müssen oder sich um Teile des Bildbereichs kümmern müssen, die aufgrund von Unterschieden in der Bildschirmgröße nicht sichtbar werden.
Seitenverhältnis und Responsive Design
Aspektverhältnisse spielen auch beim Nachdenken über responsives Design für Websites eine Rolle. Dies gilt insbesondere, wenn Sie möchten, dass Bilder und Videos eine bestimmte Form auf mehreren Geräten beibehalten.
Durch das Beibehalten eines bestimmten Seitenverhältnisses für Bilder im CSS wird sichergestellt, dass sich die Bedeutung Ihres Inhalts nicht ändert, weil ein Bild abgeschnitten wird. (Denken Sie daran, wie unterschiedlich sich ein Foto anfühlt, wenn das Gesamtbild von zwei Personen mit verschränkten Armen dargestellt wird. In der abgeschnittenen Version sehen Sie nur eine Person und einen Teil der Arme der anderen. Die Fotos haben unterschiedliche Bedeutungen.)
Wenn Sie an responsiven Websites arbeiten, müssen Sie einige Entscheidungen bezüglich der Bilder, des Seitenverhältnisses und der Art und Weise treffen, wie Dinge auf verschiedenen Bildschirmen angezeigt werden. Designer können jedes Bild von Hand für verschiedene Geräte skalieren oder eine kleine Codierung verwenden, um den Trick auszuführen. Craig Buckler hat ein großartiges Tutorial dazu, wie man das Bild-Seitenverhältnis im Responsive Web Design aufrechterhält.
Dies ist zusätzliche Mathematik kann auch ins Spiel kommen. Sie müssen sich die Seitenverhältnisse wahrscheinlich in Prozent vorstellen. Hier sind einige häufige Konvertierungen:
- 4:3 = 75%
- 3:2 = 66.66%
- 16:9 = 56.25%
- 8:5 = 62.5%
Das Leben leicht machen
Warum spielt das alles eine Rolle? Warum können wir nicht einfach Bilder zuschneiden, wie wir möchten, und unser Leben weiterführen? Sie können, aber das Verstehen von Aspektverhältnissen wird Ihnen das Leben erleichtern.
Denken Sie daran, wie viele Projekte mehrere Designs auf mehreren Leinwänden enthalten - Visitenkarten-Design, Postkarten-Design, Website-Design, Plakatdesign, Video-Werbung. Wenn Sie mit einem gemeinsamen Seitenverhältnis arbeiten oder Elemente mit dieser Skala entwerfen, ist das Mischen und Zusammenpassen von Teilen einfach und Sie müssen das Design nicht für jedes neue Element neu erfinden.
Denken Sie an die Zeit, die Sie sparen können.
Noch eine Zeitersparnis? Versuchen Sie diesen Rechner für das Seitenverhältnis. Das ist besonders praktisch, wenn Sie selbst keine Berechnungen durchführen möchten.
Gemeinsame Seitenverhältnisse
Während sich die Normen für das Seitenverhältnis im Laufe der Zeit ändern, betrachten Sie einfach die dramatisch andere Form der Fernsehbildschirme aus den 1950er Jahren und heute. Sie können jedoch einige der gebräuchlicheren Formen und Größen planen.
- 4: 3 (1.33: 1) - Altes Fernseh- und Computerbildschirmformat (1024 bis 768 Pixel)
- 3: 2 (1,5: 1) - Allgemeines Fotodruckformat, das auch für Postkarten, Visitenkarten und Standard-Mailings verwendet wird
- 1: 1 - Quadratischer Bildstandard (in Social Media und Website-Design üblich)
- 16: 9 (1.77: 1) - HD-Videostandard, Bildschirmstandard kommt nahe, ist jedoch ungenau (1366? 768 Pixel)
- 5: 3 (1.66: 1) - europäischer Breitbildstandard
- 1,618: 1 - Goldener Schnitt
Fazit
Wenn Sie die Seitenverhältnisse verstehen, können Sie als Designer Zeit und Nacharbeit sparen. Betrachten Sie alle gängigen Anwendungen, wenn Sie wissen, dass ein Stück, ein Werk oder ein Projekt den gleichen Anteil hat wie etwas anderes. Es hilft Ihnen auch zu verstehen, wo beschnitten werden soll und welche Teile eines Bildes oder Projekts gelöscht oder auf der Grundlage von Medium geschnitten werden müssen.
Es mag auf den ersten Blick wie viel Mathe und Rechnen aussehen, aber bei vielen Projekten, an denen Sie arbeiten, werden wahrscheinlich gemeinsame Seitenverhältnisse verwendet. Verwenden Sie die Checkliste oben, um zu sehen, welche Teile und Designs Sie kombinieren können.