Seitenverhältnis verstehen und damit arbeiten
Jedes Bild, jede Leinwand, jeder Rahmen hat eine Form. Und oft ist diese Form ein Rechteck. Noch häufiger ist ein Rechteck mit einem bestimmten Anteil, das auf dem Medium basiert.
Von Kameras über Fernsehen und Filme bis hin zu Computerbildschirmen hat jedes Medium eine fast unterschiedliche Form für sich. Dies kann eine Herausforderung für Designer sein, insbesondere wenn Sie Inhalte und Informationen zuschneiden und konvertieren müssen, um sie an eine Vielzahl von Medien anzupassen. Aufgrund all dieser unterschiedlichen Formen können Sie durch das Verständnis der Seitenverhältnisse Bilder und Designs problemlos von einem Medium auf ein anderes 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, ist ein Seitenverhältnis horizontal ausgerichtet, da die meisten Bildschirme breiter als hoch sind. (Und wir entwerfen auf Bildschirmen und oft 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 dass 4 Zoll breit und 3 Zoll hoch 4: 3 ist
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 von mathematischen Konzepten 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 in der Standbildfotografie).
Seitenverhältnis und Fotos
Einer der Orte, an denen es am einfachsten ist, Seitenverhältnisse zu sehen und zu erklären, ist die Fotografie. Selbst mit Ihrer iPhone-Kamera können Sie ein bestimmtes Seitenverhältnis auswählen, bevor Sie ein Foto aufnehmen, und dann das Seitenverhältnis beim Zuschneiden ändern.
Seitenverhältnisse in der Fotografie hängen oft davon ab, wie ein Foto verwendet wird. Das Seitenverhältnis wird durch Einschränkungen des Mediums bestimmt. Wenn Sie beispielsweise Fotos auf Instagram veröffentlichen, sind nur Bilder mit einem Verhältnis von 1: 1 (Quadrat) zulässig.
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. hergestellt wurden. Traditionell führte diese übliche Formel zu Kamerasensoren und Druckverfahren für Fotos, die ineinander greifen, was es für die durchschnittliche Person sehr einfach 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. Außerhalb von professionellen Fotografen, Designern und Künstlern beschneiden nur wenige Menschen ein Foto auf etwas anderes als eines der üblichen Seitenverhältnisse.
Aber warum überhaupt außerhalb eines gemeinsamen Verhältnisses ernten? Dramatisches visuelles Interesse wecken. Betrachten Sie für einen Moment ein Panoramabild. Es hat ein Gefühl von Drama und Aufregung, das eine „normale“ Form nicht hat. Die Verwendung einer Standardform setzt Harmonie und Ausgewogenheit voraus, während eine nicht standardmäßige Form dramatisch und aufregend sein kann.
Seitenverhältnis und Video
Seitenverhältnisse in Videos ähneln stark der Fotografie. Die Form ist für moderne Videobildschirme ganz anders, während historisch Standbilder und bewegte Bilder auf ähnlichen Seitenverhältnissen basierten.
Videobildschirme lassen sich hinsichtlich des Seitenverhältnisses in zwei ziemlich unterschiedliche Kategorien einteilen: Kino- oder Filmbildschirme und Fernseh- oder Desktop-Computerbildschirme. Die Formen dieser Bildschirme nähern sich allmählich dem gleichen Seitenverhältnis an, wobei mehr Heimbildschirme in die Breitbildkategorie fallen. Es gibt jedoch immer noch einen signifikanten Unterschied zwischen den beiden, weshalb Letterboxing häufig 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 das neuere, häufigere Breitbildverhältnis von 16: 9 oder 1, 77: 1.
In Bezug auf das Web variiert das Entwerfen von Videos für die Bildschirmgröße stark, häufig wird jedoch das 16: 9-Format verwendet. Eine weitere gängige Option für Webdesigner, sofern kein Vollbildvideo verwendet wird, ist die Standardeinstellung für Video im Verhältnis 16: 9, da dies der Standard ist, der für die meisten webbasierten Player und Apps, einschließlich YouTube, verwendet wird.
Die Verwendung eines gemeinsamen Seitenverhältnisses erleichtert das Verschieben eines Elements von Ort zu Ort und zwischen Projekten. Ein auf das Verhältnis 16: 9 zugeschnittenes Video wird beispielsweise nahtlos auf einem Fernsehbildschirm, einem Computerbildschirm (Desktop oder Handy) und in einem Online-Videoplayer abgespielt. Dies spart Zeit, da Sie das Video nicht erneut bearbeiten oder für verschiedene Formate oder Geräte zuschneiden müssen oder sich Sorgen über Teile des Bildbereichs machen müssen, die aufgrund unterschiedlicher Bildschirmgröße nicht angezeigt werden.
Seitenverhältnis und Responsive Design
Seitenverhältnisse spielen auch eine Rolle, wenn über Responsive Design für Websites nachgedacht wird. Dies gilt insbesondere dann, wenn Bilder und Videos auf mehreren Geräten eine bestimmte Form beibehalten sollen.
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 zugeschnitten wird. (Stellen Sie sich vor, wie unterschiedlich sich ein Foto anfühlt, wenn das vollständige Bild von zwei Personen mit umeinander geschlungenen Armen besteht und in der beschnittenen Version nur eine Person und ein Teil der Arme der anderen Person zu sehen ist. Die Fotos haben sehr unterschiedliche Bedeutungen.)
Wenn Sie an reaktionsschnellen Websites arbeiten, müssen Sie einige Entscheidungen über Bilder, Seitenverhältnis und die Darstellung auf verschiedenen Bildschirmen treffen. Designer können die Größe jedes Bilds von Hand für verschiedene Geräte ändern oder eine kleine Codierung verwenden, um den Trick auszuführen. Craig Buckler hat ein großartiges Tutorial dazu, wie genau dies in „So pflegen Sie Bildseitenverhältnisse in Responsive Web Design“ ausgeführt wird.
Dies ist eine zusätzliche Mathematik, die ebenfalls ins Spiel kommen kann. Sie müssen wahrscheinlich an Seitenverhältnisse in Prozent denken. Hier sind einige häufige Konvertierungen:
- 4: 3 = 75%
- 3: 2 = 66, 66%
- 16: 9 = 56, 25%
- 8: 5 = 62, 5%
Das Leben leichter machen
Warum ist das alles so wichtig? Warum können wir nicht einfach Bilder zuschneiden, wie wir wollen, und unser Leben fortsetzen? Sie können, aber das Verstehen von Seitenverhältnissen erleichtert Ihnen das Leben.
Überlegen Sie, wie viele Projekte mehrere Designs auf mehreren Leinwänden enthalten - Visitenkarten-Design, Postkarten-Design, Website-Design, Poster-Design, Video-Werbung. Wenn Sie innerhalb eines gemeinsamen Seitenverhältnisses arbeiten oder Elemente mit dieser Skala entwerfen, ist das Mischen und Anpassen 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? Probieren Sie diesen Seitenverhältnisrechner aus. Es ist besonders praktisch, wenn Sie sich nicht wohl fühlen, wenn Sie selbst rechnen.
Gemeinsame Seitenverhältnisse
Während sich die Seitenverhältnisstandards im Laufe der Zeit ändern - sehen Sie sich nur die dramatisch unterschiedliche Form von Fernsehbildschirmen aus den 1950er Jahren und heute an -, können Sie einige der gängigsten Formen und Größen einplanen.
- 4: 3 (1, 33: 1) - Altes Fernseh- und Computerbildschirmformat (1024 × 768 Pixel)
- 3: 2 (1, 5: 1) - Allgemeines Fotodruckformat, das auch für Postkarten, Visitenkarten und Standardmailings verwendet wird
- 1: 1 - Quadratischer Bildstandard (üblich in Social Media und Website-Design)
- 16: 9 (1, 77: 1) - HD-Videostandard, Computerbildschirmstandard kommt nahe, ist aber ungenau (1366 × 768 Pixel)
- 5: 3 (1, 66: 1) - Europäischer Breitbildstandard
- 1, 618: 1 - Goldener Schnitt
Fazit
Das Verstehen von Seitenverhältnissen kann Ihnen Zeit und Nacharbeit als Designer sparen. Berücksichtigen Sie, dass alle gängigen Anwendungen des Wissens über ein Stück, eine Arbeit oder ein Projekt den gleichen Anteil haben wie etwas anderes. Es kann Ihnen auch helfen zu verstehen, wo zugeschnitten werden muss und welche Teile eines Bildes oder Projekts auf der Grundlage des Mediums gelöscht oder geschnitten werden müssen.
Während es zu Beginn wie viel Mathe und Berechnung erscheint, verwenden viele der Projekte, an denen Sie arbeiten, wahrscheinlich gemeinsame Seitenverhältnisse. Verwenden Sie die obige Checkliste, um zu sehen, welche Teile und vollständigen Designs Sie mischen und anpassen können.
