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.

Muse CC Grundkurs

Die GIF-, PNG- und PSD-Dateiformate

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Zusätzlich unterstützt Adobe Muse mit den GIF-, PNG- und PSD-Formaten weitere Grafikformate. Dieses Video bietet einen detaillierten Überblick über die Vor- und Nachteile dieser Formate.

Transkript

Im folgenden Video möchte ich Ihnen die Eigenschaften des GIF-, PNG- und PDS-Grafikformates einmal näher erläutern. Fangen wir an mit dem GIF-Dateiformat, ein Dateiformat, das schon ein paar Jahre auf dem Buckel hat. das ursprünglich mal von der Firma Compuserve entwickelt worden ist. Die Firma gibt's schon lange nicht mehr, das Dateiformat gibt es aber immer noch. Fangen wir erstmal mit den positiven Eigenschaften dieses Dateiformates an, und zwar: die Dateien werden sehr klein. Wir haben ein Dokumentenformat, welches uns wirklich kleine Grafiken beschert. In der Regel werden die GIF-Dateien meistens nur wenige Kilobyte groß sein. Das ist also eine absolut angenehme Eigenschaft dieses Dateiformates. Wir können mit kleineren Animationen arbeiten. Wann immer Sie mal im Internet so ein kleines Männchen sehen, das so auf und ab läuft oder vielleicht mit einem Schild wackelt, dass die Webseite gerade überarbeitet wird, dann gehen Sie mal davon aus, dass es sich hierbei um eine GIF-Datei handelt. Technisch gesehen funktioniert das so, dass innerhalb dieses Containers GIF einfach mehrere Bilder abgespeichert werden und die dann so, wie man das von einem Daumenkino her kennt, eines nach dem anderen dann eingeblendet werden. Wenn man das einfach nur schnell genug macht, dann hat man eben so eine kleinere Bewegung. Ein weiterer Vorteil von unserem GIF-Format ist, dass wir hier mit Transparenzen arbeiten können. Wir können also sagen: Dieses Pixelchen soll bitte durchscheinend sein. Auch bei dem Dateiformat GIF ist es so, dass die eigentliche Grafik ein Rechteck darstellt, aber wir können eben gewissen Pixeln sagen, die sind durchsichtig, sollen also das darunter liegende Bild, die darunter liegende Grafik, durchscheinen lassen. Ein weiterer Vorteil: Das ist ein NICHT verlustbehaftetes Dateiformat. Wir haben also hier nicht mit Verlusten zu kämpfen. Wir können die Datei beliebig oft öffnen, weiterbearbeiten, abspeichern, öffnen, weiterbearbeiten und so weiter, ohne dass wir hier im eigentlichen Sinne mit Verlusten zu kämpfen haben. Und all das sorgt dafür, dass dieses Dateiformat GIF besonders gut für Logos geeignet ist, wir also für Logos oder für kleinere Symbole sehr, sehr gut mit diesem GIF-Format arbeiten können. Möglicherweise werden Sie sich jetzt die Frage stellen: Moment mal, wie passt denn das alles zusammen? Kleine Dateigrößen, Transparenzen, gut für Logos und keine Verluste - da muss doch irgendwo ein Haken sein. Ja, der ist auch da, und zwar: Innerhalb des GIF-Formates können Sie mit maximal 256 Farben arbeiten. Wohlgemerkt, diese 256 Farben stammen aus der kompletten Palette der 16,1 Millionen Farben, die man eben hat bei RGB, wenn Sie für jede dieser Farben acht Bit zur Verfügung haben. Technisch gesehen wird das Ganze so gelöst, dass am Anfang dieser Datei eine Farbtabelle angelegt wird. Diese Farbtabelle kann aus maximal 256 Farben bestehen. Und diesen Farben werden dann die RGB-Werte der Farbtabelle zugewiesen. In der eigentlichen Grafik-Datei kann dann später nur noch mit einer Referenz auf unsere Farbtabelle zurückgegriffen werden. Sie können also durchaus in einer GIF-Datei 256 unterschiedliche Grüntöne haben. Aber wenn Sie 256 unterschiedliche Grüntöne benötigen, ist eben kein Platz mehr in unserer Farbpalette für ein Violett. Wenn Sie ein Violett haben wollen, dann haben Sie nur noch 255 unterschiedliche Grüntöne; eben maximal 256 über dieses Prinzip dieser Farbtabelle. Dann haben wir hier die Konstellation, dass wir nur EINE Transparenz haben. Wir können also nur sagen: Dieser Pixel hat eine Farbe oder er ist transparent. Wir können aber nicht sagen: Du sollst SO EIN BISSCHEN transparent sein. Schauen wir uns das Ganze auch einmal an einem Beispiel an. Hier habe ich jetzt mein Logo mit meinem Schriftzug. Sie sehen, die Schrift ist wirklich perfekt. Sie können sich leicht vorstellen, wir haben hier ganz viele Grüntöne drin und noch ein paar weitere Dinge, sodass wir da auch diesen Schlagschatten auf der rechten Seite bekommen. Dann brauchen wir also noch ein paar unterschiedliche Grautöne. Und das funktioniert alles ganz wunderbar hier mit unserem Dateiformat GIF. Problematisch wird es, wenn uns EINE Transparenz nicht mehr ausreicht. Denn ich leg' jetzt hier mal eine Grafik in den Hintergrund. Und Sie sehen: Es gibt ja nur die Konstellation: Transparent oder nicht transparent. Sie sehen, wir bekommen unten so eine abgerundete Ecke. Dort greift also die Transparenz, weil, wie gerade schon gesagt, mein GIF-Format ja trotzdem ein rechteckiges Bild ist. Aber da, wo wir diesen Schlagschatten haben, wo wir diese leichten Übergänge haben, wo wir eigentlich dann erwarten würden, dass dieser Farbton aus dem Hintergrund eben so ein bisschen durchschimmert, das funktioniert mit dem Dateiformat GIF leider nicht. Naja, wir haben ja noch ein anderes Dateiformat, nämlich das Dateiformat PNG. Und hier ist eine der positiven Eigenschaften, nämlich gerade das Problem, das Sie eben gesehen haben, dass wir hier 256 Transparenzen haben können. Wir können also durchaus sagen: Naja, Du darfst so ein bisschen durchscheinen, aber auch so ein bisschen nicht. Auch hier haben wir eine verlustfreie Kompression. Auch das ist in vielen Situationen sehr, sehr angenehm. Wir können also hier mit den PNG-Dateien die Dateien problemlos öffnen, weiterbearbeiten, sie wieder abspeichern, weiterbearbeiten und immer so weiter. PNG ist perfekt, um mit Fireworks zu arbeiten, weil das letztlich das native Format von Fireworks ist. Sollten Sie Fireworks beispielsweise benutzen, um damit einen Prototyp von Ihrer Webseite zu erstellen, dann ist das wirklich ideal. Leider, muss man sagen, wird Fireworks nicht mehr weiterentwickelt. Sie müssen da auf die Fireworks-Version CS6 zurückgreifen. Naja, auch hier: Wo Vorteile sind, sind natürlich auch Nachteile. Das Dateiformat PNG hätte sich vermutlich im Internet schon viel, viel stärker durchgesetzt, wenn es nicht ein Problem gäbe mit dem Internet Explorer 6. Naja, der Internet Explorer 6 wird heutzutage zum Glück auf nur noch sehr, sehr wenigen Rechnern eingesetzt. Lange Zeit war es aber so, dass der Internet Explorer 6 noch auf sehr, sehr vielen Computern in Unternehmen eingesetzt wurde. Wenn man dann mit Grafiken gearbeitet hat, die in diesem PNG-Format abgespeichert wurden, dann wurden die im Internet Explorer 6 immer sehr, sehr unschön abgespeichert. Das ist ein Grund, warum sich dieses PNG-Format an vielen Stellen einfach nicht durchgesetzt hat. Naja, wir haben hier einfach mit größeren Dateien zu tun, weil wir natürlich jetzt hier eine verlustfreie Kompression haben. Also, das Ganze wird verkleinert; so ein bisschen ähnlich, wie Sie das von einer ZIP-Datei vielleicht kennen. Aber über diesen ZIP-Algorithmus kann man eben Textdateien sehr, sehr gut verkleinern. Grafiken, Bilder lassen sich über diesen ZIP-Algorithmus allerdings nicht besonders gut verkleinern. Deswegen sind die Grafiken relativ groß. Im internen Dateiformat wird nicht das ZIP-Format verwendet, da wird schon ein anderes Format verwendet. Nur, damit Sie so ein Gespür dafür haben, warum wir trotz Kompression immer noch sehr, sehr große Dateien haben. Das Einzige, was wirklich nutzt, um kleine Dateien zu bekommen: Sie müssen eine verlustbehaftete Kompression verwenden, wie beispielsweise JPEG. Auch hier wollen wir uns das Ganze mal anhand meines Logos anschauen. Auch hier möchte ich nun mal eine Grafik in den Hintergrund legen. Sie sehen, jetzt hier funktioniert das wirklich nahtlos mit den Schlagschatten. Hier haben wir überhaupt keine unschönen Effekte. Das macht dieses Dateiformat ideal, um es auf Webseiten einsetzen zu können. Denn stellen Sie sich hier dieses Logo vor: Das muss ich nur einmal erstellen, nur einmal in PNG abspeichern, und egal, ob ich jetzt einen weißen, einen türkisfarbenen, einen gelben, einen blauen Hintergrund auf meiner Webseite habe, ich kann es immer benutzen und muss diese Grafiken nicht anpassen. Last but not least: das Dateiformat PSD, also das Photoshop-eigene Format. Das ist ideal, um im Vorfeld die Grafiken aufzubereiten. Ich empfehle Ihnen dringend, im Vorfeld, wenn Sie mit Photoshop arbeiten, die Dateien nicht in einem der anderen genannten Dateiformate abzuspeichern, nicht, bevor Sie sagen: JETZT ist die Grafik final, jetzt soll die Grafik so, wie sie ist, veröffentlicht werden. Bitte arbeiten Sie so lange wie möglich in diesem PSD-Format. Das PSD-Format hat natürlich viele, viele Vorteile; unter anderem die Unterstützung für Ebenen. Da ich die Vorteile hier gar nicht alle aufzählen kann, mach' ich das hier nur mal mit "...". Naja, der Nachteil, Sie ahnen es schon: Es ist eben nicht Internetbrowser-kompatibel. Die Grafiken können nicht einfach auf die Seite platziert werden, und sie werden auch nicht einfach vom Webbrowser angezeigt. Die Grafiken müssen auf jeden Fall im Vorfeld konvertiert werden. Zum Glück macht Muse das für uns aber automatisch. Wir können also eine Photoshop-Datei in Muse platzieren, und in dem Moment, wo ich das Ganze später dann ausgebe, dann wird diese Datei umkonvertiert, sodass ich damit ideal direkt weiterarbeiten kann. Wenn Sie das nicht von Muse machen lassen wollen, sondern Sie wollen selber Einfluss nehmen, Einfluss nehmen auf Qualität im Verhältnis zur Dateigröße, dann müssen Sie die Datei aus Photoshop exportieren. Sie haben in diesem Video die Vor- und Nachteile der Dateiformate GIF, PNG und dem Photoshop-nativen PSD-Format kennengelernt. Bitte halten Sie sich diese Vor- und Nachteile im Hinterkopf immer ein bisschen parat, sodass Sie in der richtigen Situation sich auch für das richtige Dateiformat entscheiden.

Muse CC Grundkurs

Lernen Sie mit Muse CC Websites zu erstellen, ohne HTML beherrschen zu müssen, und erfahren Sie alle Schritte von der Planung über den ersten Entwurf bis zur Veröffentlichung.

6 Std. 55 min (66 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:23.07.2014

Dieses Training wurde mit dem Release von Muse CC aus dem Jahr 2014 aufgezeichnet.

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!