Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Gestaltungsgrundlagen für Webdesigner

Die richtige Bildgestaltung

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video verrät Christoph Luchs, wie Sie optimal mit Bildern, Bildauflösungen und Bildausschnitten umgehen. Lernen Sie mehr über Slider, Thumbnails oder Beitragsbilder. Beachten Sie Ausrichtung und Präsentation. Sie erfahren etwas übers Zuschneiden und Einpassen von Bildern und den Begriff der Bildkompression.
09:20

Transkript

In diesem Video zeige ich Ihnen, wie Sie mit Bildern, Bildausschnitten und Auflösungen umgehen. Wenn wir hier ein Bild zum Beispiel platzieren direkt in diesen Titelbereich, dann ist das Bild hier 1280 mal 640 im Ausschnitt groß. Wenn ich hier im Layout damit arbeite, ist das natürlich erstmal irrelevant hinterher, was die Programmierung damit macht, aber wenn ich jetzt ein solches Bild hier über die volle Bildbreite darstelle, also Fullscreen einsetze, dann ist dabei wichtig, dass das Bild natürlich auch eine nötige Qualität und Auflösung besitzt, also mindestens 1200, wenn nicht gar 1500 Pixel in der Breite ist, damit es auch größere Monitorauflösungen verträgt. Stellen Sie sich vor, Sie haben einen Monitor, der 1800 Pixel in der Breite darstellen kann, dann wird auch so ein Bild mit 1200 oder 1500 Pixel irgendwann etwas grieselig, auch wenn der Browser interpolieren kann. Und wenn der Browser nicht interpoliert, dann doch das Content-Management-System. Das heißt, wenn Sie nämlich mit einem Content-Management-System arbeiten, dann werden Bilder auch in verschiedenen Größen zwischengespeichert, sodass Sie also stufenlos -- nahezu -- interpolieren können, ab beziehungsweise von einer maximalen Auflösung. Wenn wir hier mal diese Beispiele uns angucken, dann sehen wir hier drei verschiedene Boxen und wir wollen dort prägnante Bilder einsetzen. Ich habe diese Rahmen im 2:3-Verhältnis angelegt. Ausgehend von der Spaltenbreite 293 Pixel, die hier übriggeblieben ist, habe ich dann die Höhe 195 berechnet. Im nächsten Schritt kann ich nun aus der Adobe Bridge zum Beispiel Bilder auswählen. Ich habe hier eine ganze Menge mitgenommen, die wir hier einsetzen können, schöne Bildbeispiele, die hier für die Veranstaltung Marburg by Night stehen. Falls Sie mal nach Marburg kommen, das lohnt sich auf jeden Fall, da mal reinzugucken. Zum Beispiel wird hier die Elisabethkirche illuminiert, eine sehr schöne farbliche Gestaltung. Dann haben wir natürlich auch andere Motive, vielleicht Nahaufnahmen, die hier irgendwo eingestellt werden können. Auch damit kann man hier sehr gut arbeiten. Dann muss man sich natürlich das passende Motiv raussuchen und kann das dann hier nachträglich platzieren. Diese Motive müssen natürlich auch im Ausschnitt passen. Wenn ich hier ein hochformatiges Motiv einsetze, ist das natürlich ungünstig, aber ich kann natürlich das Bild so einpassen, dass ich dann hinterher nur noch den Ausschnitt entsprechend verschiebe in der Höhe; auch das funktioniert natürlich. Heißt aber natürlich auch, ich muss hier aufpassen, wie die Auflösung effektiv aussieht. Effektive Auflösungen können wir mit Verknüpfungen prüfen und effektiv haben wir hier 157 Pixel, das heißt, diese Größe der Darstellung, 293 mal 159 oder 95 Pixel, die hat hier 150 PPI, also völlig ausreichend für das Maß, was wir hier einsetzen wollen. Anschließend gibt es hier auch noch das dritte Bild und dabei ist natürlich auch wichtig, dass wir immer kontrastreiche Motive haben, die gut zu erkennen sind; wo vielleicht auch das Zentrum des Bildes sozusagen dann auch das Motiv gut auffängt. Schwierige Bilder, die auch besonders abstrakt sind, sind manchmal schwierig zu erkennen und sind dann auch eher rätselhaft im Web. Deswegen nimmt man eher konkrete Bilder, sodass ich sofort auch sagen kann: Was ist denn jetzt hier eigentlich los? Was ist damit gemeint mit diesem Motiv? Und dann sehe ich sofort, dass es sich hier zum Beispiel um einen Straßenzug mit Beleuchtung handelt. Nun können wir also mit diesen Bildern so arbeiten. Das heißt, überwiegend werden tatsächlich Querformate eingesetzt, Querfomate, die hier innerhalb der Website zum Einsatz kommen. Wenn ich zwischendurch Hochformate einsetzen sollte, kann ich das sicherlich tun, aber da macht es auch Sinn, Bilder einfach in den Textfluss einzuhängen, und das will ich Ihnen hier einfach mal zeigen, dass man das natürlich auch tun kann. Das heißt, wenn ich das Ganze hier zum Beispiel auf Blocksatz stelle, so kann ich auch ein Bild -- vielleicht ein Hochformat -- hier einstellen. Hier ist ein besonders hübsches Format drin. So, das platziere ich mal ganz kurz hier etwas außerhalb -- ungefähr in der Größe -- und dann kann ich das Motiv zunächst hier im Layout so einstellen, dass ich sage, das Bild wird umflossen, das heißt, der Text wird verdrängt, über das Werkzeug Textumfluss. Diese Funktionen gibt es auch ähnlich im Web, sodass ich Bilder einhängen kann in den Textfluss und dann einfach zum Beispiel nach rechts um gewisse Werte verschiebe, sodass der Text drumherum läuft. Hier sollte man immer darauf aufpassen, dass man nicht alle Werte verändert, sondern den unteren Wert immer ein bisschen einzieht, sodass dann Textzeilen nicht unnötig nach unten verdrängt werden. Also, diese Darstellung lässt sich nahezu eins zu eins auch wiedergeben und auch die Option, dass man Bilder zum Beispiel rechtsbündig einhängt, wird von vielen im Design meistens außer Acht gelassen, ist aber manchmal die bessere Wahl, weil man damit besser in den Text hier hineinkommen kann, je nachdem, wie die Textlänge ist. Also, diese Möglichkeiten bestehen durchaus, um mit Bildern zu arbeiten, und dazu gibt es natürlich auch noch eine weitere Möglichkeit: Ich kann mit Bildhintergründen arbeiten. Stellen Sie sich vor, Sie haben jetzt hier so eine Box und die wird hier noch einmal wiederholt, vielleicht mit anderen Inhalten. Ich kopiere mir das Ganze mal weiter nach unten. Dann nehme ich also diesen gesamten Bereich, ziehe den hier in dem Fall mit gedrückter Alt-Taste einfach nach unten und setze den quasi an diesen oberen Kasten dran. Dann ist hier eine Abfolge von hell, dunkel, hell, dunkel. Das hilft beim Scrollen, dass sich der Benutzer auch gut orientieren kann, und auch hier kann ich wieder Bilder einsetzen, aber nicht in dem Fall hier im Vordergrund, sondern wir setzen mal Bilder in den Hintergrund ein. Sieht auch sehr schön aus, besonders wenn man kontrastreiche Bilder hat, die entweder sehr dunkel sind oder sehr hell, oder auch abstrakte Bilder wie dieses Motiv hier vom Marburger Schloss, das illuminiert ist. Da ist es schon drin, da ist es schon eingepasst und das wirkt hier natürlich extrem mächtig und wenn wir uns das hinterher in der hochauflösenden Darstellung wieder zeigen lassen, dann sehen wir auch, wie gut das eigentlich aussieht, dass das natürlich auch in einer hohen Auflösung erscheint. Wenn man da noch mal ein bisschen reinzoomt, sehen wir natürlich auch die ganzen Details und ein Nutzer, ein Besucher, sieht das natürlich hinterher auch. Also, wir können hier tatsächlich auch mit großflächigen Bildern im Hintergrund arbeiten, zum Beispiel auch großflächigen Bildern hinter so einem Textrahmen als Rahmenmotiv. Der Bildgestaltung sind da keine Grenzen gesetzt. Wir können also hier ohne Probleme mit Bildern arbeiten. Die häufigsten Bildformate, die hier verwendet werden, sind natürlich JPEGs. GIFs gab es früher sehr häufig, brauchen wir heute eigentlich in der Form nicht mehr. Wenn wir mit Transparenzen arbeiten wollen, zum Beispiel mit Logos, das heißt, Sie haben zum Beispiel eine Grafik, die so aussieht, dann macht es Sinn das zum Beispiel auch als PNG zu speichern, weil Sie dann mit Transparenzen arbeiten können. Das zeige ich Ihnen noch mal ganz kurz im Ausflug mit Photoshop. Das heißt, wir kopieren uns einfach dieses ganze Element, gehen zu Photoshop und werden das Ganze verarbeiten und einarbeiten. Wenn ich jetzt in Photoshop bin, so öffne ich einfach eine neue Datei. Ich sage, die Größe nehme ich aus der Zwischenablage. Ich habe eben gerade etwas aus InDesign kopiert. Das Ganze ist in RGB und ich sage, im Hintergrund ist das Ganze hier transparent. Ich möchte ja ein transparentes Logo quasi exportieren. Also erstelle ich das Ganze und füge das Element aus der Zwischenablage ein. Man sieht, das ist hier schon gepixelt, das ist auch tatsächlich in der Größe, so wie es eigentlich ist. und in der tatsächlichen Größe sieht das Ganze so aus. Man sieht aber, es ist tatsächlich in jeweils transparenten Stufen auch berechnet worden und das kann ich hinterher auch so exportieren, zum Beispiel Für Web speichern. Das ist hier die Möglichkeit, direkt aus Photoshop zu exportieren als PNG. Dann kann ich das damit tun, ich sehe die Originalgröße noch einmal, ich sehe das Datenformat, PNG-24, die Bildgröße und es wird auch mit Farbprofil gespeichert, damit das Bild möglichst brillant auch auf den Browsern wiedergegeben wird. Und dann kann ich das einmal abspeichern als Logo und kann das später auch so zum Beispiel ins Content-Management hochladen oder per HTML-Code in die Website einbinden.

Gestaltungsgrundlagen für Webdesigner

Lassen Sie sich die Grundlagen guten Webdesigns anhand eines Praxisbeispiels näherbringen.

2 Std. 30 min (20 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:27.07.2017
Laufzeit:2 Std. 30 min (20 Videos)

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!