Illustrator CC für Webdesigner: Kernkonzepte

Der Zusammenhang von Bildschirmgröße und Auflösung

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Video zeigt, weshalb die Bildschirmgrößen beim Designprozess aus heutiger Sicht so gut wie keine Rolle mehr spielen und was es in diesem Zusammenhang mit der Bildschirmauflösung, also der Anzahl der Pixel pro Fläche, auf sich hat. Dieses Verständnis ist elementar für modernes Webdesign.

Transkript

Lassen Sie uns in diesem Video über die Bedeutung von Bildschirmgröße und Auflösung reden. Die beiden Begriffe werden häufig synonym verwendet und können gerade Webdesign-Einsteiger verwirren. Früher hat man für 800 x 600 Pixel Auflösung ein Design erarbeitet, später dann 1024 x 768 Pixel und so weiter. Das wäre heute absolut nicht mehr ratsam. Unzählige Gerätegrößen und Auflösungen gibt es und wir Designer müssen für diese Anforderungen unsere Designs bauen. Sprechen wir also über ein paar Schlagworte, die diesbezüglich in aller Munde sind. HiDPI, Retina et cetera, diese Begriffe, die viele verwenden, beschreiben die hochauflösenden Bildschirme. Als da wären das Retina 5k Display des iMacs beispielsweise oder das Google Nexus 6 bis hin zu Microsoft Surface Pro 3. Alle diese Geräte besitzen einen hochauflösenden Bildschirm und wir als Webdesigner müssen exakt verstehen, was damit gemeint ist, da wir sonst unsere Mockups, also unsere Designs nicht korrekt erstellen können. Also was bedeutet das für uns? Wie können wir für solche unterschiedlichen Anforderungen ein Design erstellen? Starten wir mit einem normalen Desktop-Rechner wie dem iMac. Sagen wir, wir haben einen Display von 27 Zoll, beispielsweise wie bei einem iMac. Die aktuelle Abmessung beträgt 27 Zoll, was also 2560 x 1440 Bildpunkte beziehungsweise Pixel im Gesamten entspricht. Davon erstrecken sich genau 109 Pixel auf einem Zoll. Also 1 Zoll entspricht etwa 2,54 cm und in der Summe daraus ergibt sich eine Bildschirmdiagonale von 2934 Pixel, eben genau 27 Zoll. Und die Informationen, die auf diesem Rechner ausgegeben werden, können die gesamte Fläche dieses Bildschirms natürlich nutzen. Wenn Sie das mit dem iPad Air vergleichen, gibt es deutlich sichtbar einen Unterschied. Das iPad besitzt 2048 x 1536 Pixel per inch. Das entspricht mit 264 Pixel pro Inch einer Bildschirmdiagonalen von 9,4 Zoll. Setzt man das ins Verhältnis mit dem zuvor beschriebenen 27-Zoll-Display des Macs, erhält man eine nahezu gleiche Anzahl an Pixel unter- und oberhalb eines Bildpunktes, aber gleichzeitig mehr Pixel pro Zoll und nur deswegen ist man in der Lage, vergleichbare Qualitäten auf einem viel kleineren Bildschirm anzeigen zu können. Betrachten Sie alte Geräte, hätten wir flächenmäßig nicht mehr, wie die schon zuvor angesprochenen 800 x 600 Pixel. Nur aufgrund der, in Anführungsstrichen, Dichte der Pixel, wird diese Qualität erreicht. Auf einem iPad Air ist die tatsächliche Anzahl der Pixel pro Inch also kleiner als an einem iMac oder beziehungsweise an einem 27-Zoll-Thunderbolt-Display. Das dürfen Sie bei Ihrer Arbeit absolut nicht vergessen. Betrachten Sie Standardbildschirme, ist die Anzahl der Pixel auf einer identischen Fläche bei Retina Displays doppelt so hoch. Also so passen auf die Fläche eines Retina Displays die doppelte Menge an Pixel bei gleichem Speicherplatz. Das ist der Grund, warum Retina Bildschirme so brillant, deutlich und wesentlich schärfer wirken als Standard-Displays. Also, Objekte auf Retina Displays benötigen pauschal zweimal so viel Pixel zur Anzeige beziehungsweise wirken zweimal so groß. Das bedeutet, dass ein Entwurf auf einem Bildschirm mit 100 x 100 Pixel auf insgesamt 200 x 200 Pixel hochgerechnet werden muss, damit es auf einem Retina Display eine nahezu identische Größe erhält. Vergisst man das, erscheint die Grafik auf einem hochauflösenden Bildschirm nur mit 50 x 50 Pixel also im Verhältnis der Bildschirmfläche wesentlich kleiner und das ist der Grund, warum je nachdem auf welchen Bildschirmtyp Designs erstellt werden, Sie anschließend die Grafiken, Icons, ja und auch Schriften anpassen müssen, damit man ein vergleichbares oder besser noch identisches Aussehen erhält. Es reicht also nicht, einfach die gleiche Schriftgröße zu verwenden oder dieselben Maße bei einem Icon zu behalten. Bei Retina Displays erscheinen diese Objekte doppelt so klein und es kann einem das ganze Design zerschießen. Ganz wichtig also, die Abmessung ist technisch gesehen irrelevant. Es kommt auf die Auflösung an. Die gute Nachricht in diesem Spiel heißt aber Illustrator. Arbeiten Sie mit Illustrator anstatt mit pixelorientierten Programmen, wie beispielsweise Photoshop, kann Ihnen die Anzahl der Pixel zunächst egal sein. Sie haben ja gar keine, denn Illustrator ist ein Vektor-Programm. Das bedeutet alle Grafiken, Symbole und Schriften werden mathematisch in Form eines Vektors von einem Punkt zum anderen berechnet. Und so können Sie nach Herzenslust skalieren und später für unterschiedliche Displays exportieren. Noch einmal, die Dimension ist irrelevant. Was tatsächlich zählt sind die vorhandenen physikalischen Pixel auf einer Fläche. Wenn Sie ein Objekt mit einer bestimmten Anzahl Pixel entwerfen, dann müssen Sie sich bewusst sein, dass es auf unterschiedlichen Displays unterschiedlich viel Platz einnehmen wird. Es wird also um einen Wert X größer oder kleiner, obwohl die Anzahl der Pixel des Objektes gleich bleibt. Aus diesem Grund benötigen Sie das Upscaling oder auch Downscaling, um mit einem Objekt identische Dimensionen einnehmen zu können, oder anders, damit Ihr Design auf unterschiedlichen Displays auch gleich aussieht. Um mit diesem Auflösungsdilemma, beziehungsweise dem Upscaling, Downscaling besser zurechtzukommen, sehen Sie eine Tabelle mit unterschiedlichen Pixel-pro-Inch-Angaben, die den Geräten auf denen sie zum Einsatz kommen zugeordnet sind. Zum Beispiel besitzt das Retina Display des iMacs bei einer Bildschirmgröße von 5120 x 2880 Pixel genau 218 Pixel pro Inch, also etwa 218 Pixel pro 2,54 cm. Das iPhone 6 mit 750 x 1334 Pixel besitzt bereits 326 ppi, also Pixel per inch, und das Nexus 6 sogar 493 ppi. Gerade bei diesen Geräten sieht man sehr schön, dass hier das Nexus oder auch das Galaxy deutlich hochauflösendere Bildschirme besitzen, wie beispielsweise das iPhone und die Anzahl der Pixel pro Inch nahezu doppelt so groß ist. Ein Objekt, das auf einem iPhone genau passend zu sehen ist, wäre demzufolge auf einem Galaxy nur noch halb so groß. Es ist weiterhin erkennbar, dass die Bildschirmabmessungen der unterschiedlichen Geräte ziemlich ähnlich sind, also in der gleichen Größenkategorie spielen. Die Unterschiede liegen in der Screen Resolution, also der Bildschirmauflösung. Warum variiert eigentlich die ppi-Angabe über alle diese Geräte so stark? Die Antwort ist relativ simpel. Für die Hersteller ist der Betrachtungsabstand die relevante Größe. So sitzen Sie beispielsweise bei einem 27-Zoll iMac viel weiter vom Bildschirm entfernt, als bei einem Tablet oder Smartphone. Ein Samsung Galaxy halten Sie wahrscheinlich viel näher an Ihr Gesicht, als ein iPad. Für Ihren Designprozess müssen Sie verstehen, wann ein Objekt mit der Pixel Anzahl vergrößert oder verkleinert werden muss, damit es auf jedem Device identisch aussieht. In diesem Zusammenhang empfehle ich die Lektüre der Human Interface Guidelines der Hersteller zu lesen. Diese finden Sie innerhalb der Informationen für iOS- oder auch Android-Entwickler, vergleichbar bei anderen Herstellern. Das ist der einzige Weg, um wirklich ganz genau zu verstehen, was man mit den einzelnen Grafiken über die Geräte hinweg beachten muss. Abgesehen davon, kommen inzwischen so häufig neue Geräte auf dem Markt, dass man sich über diesen Weg auf dem Laufenden halten kann.

Illustrator CC für Webdesigner: Kernkonzepte

Lernen Sie die grundlegenden Begriffe des Webdesigns kennen und konfigurieren Sie Illustrator für den teamfreundlichen Webdesign-Einsatz.

1 Std. 49 min (18 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:31.05.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!