Muse Kompakt Kurs – Lektion 4 – Bilder in Muse

Wir haben uns das letze mal die Werkzeugleiste angesehen und dabei die verschiedenen Elemente kennen gelernt, die wir einfügen können. Vielleicht haben dabei einige von euch das Einfügen von Bildern vermisst. Dieses Werkzeug gibt es wirklich nicht in der Werkzeugleiste.

 

Bilder in Muse einfügen

Einfügen mit Platzieren

Trotzdem lassen sich Bilder in Adobe Muse sehr leicht einfügen, nämlich mit dem „Platzieren“ Befehl. Diesen findet man im Menü unter „Datei“ -> „Platzieren“ oder einfach mit dem Shortcode CMD-D (Mac) oder CTRL-D (Windows).

Muse - Bild einfügen - Menü

Muse – Bild einfügen – Menü

Wenn man diesen Befehl aufruft, dann bekommt kann man von seiner Festplatte ein File auswählen. Ich nehme jetzt für den ersten Test einmal ein JPG Bild mit dem Namen „countryside_1920_.jpg“. Dieses Bild stammt übrigens von Pixabay (https://pixabay.com/de/landschaft-baum-sonnenlicht-natur-2175353/), eine Quelle für freie Bilder mit CC0 Lizenz.

Bestätigt man die Auswahl des Bildes, dann bekommt man auf der aktuellen Seite das Symbol für Bild einfügen angezeigt:

Muse - Bild einfügen - Platzieren

Muse – Bild einfügen – Platzieren

Man kann jetzt mit der Maus die ideale Position suchen und dann mit einem Klick auf die linke Maustaste das Bild an dieser Stelle einfügen. Keine Sorge, die Position lässt sich spielend auch im Nachhinein verändern.

Und schon wurde das Bild an der entsprechenden Stelle eingefügt. Wenn das Auswahlwerkzeug aktiv ist, dann kann man jetzt das Bild beliebig herumschieben und platzieren.

 

Einfügen mehrerer Bilder

Das Platzieren funktioniert übrigens auch sehr gut mit mehr als einem Bild. Wenn man bei der Dateiauswahl mehr als ein Bild markiert, dann erhält man am Bildschirm ein Bild Magazin, und bei jedem Klick wird ein Bild auf der Seite eingefügt. Die Anzahl der restlichen Bilder im Bild Magazin erkennt man an der Zahl und der Klammer im rechten oberen Eck des kleinen Vorschaubildes. Welches Bild aus dem Magazin eingefügt werden soll, kann man mit den Pfeiltasten, entweder links und rechts oder oben und unten bestimmen. Das Bild, dass eingefügt werden soll, wird dabei in der kleinen Vorschau angezeigt.

Muse - Mehrere Bilder einfügen (Bildmagazin)

Muse – Mehrere Bilder einfügen (Bildmagazin)

 

Einfügen mit Copy & Paste

Bei Muse, müssen die eingefügten Bilder aber nicht von der Platte kommen. Man kann einfach aus einer beliebigen Anwendung ein Bild kopieren (z.B. auch von einer Website) und mit Einfügen (CMD-V am MAC und CTRL-V auf Windows) das Bild auf die aktive Seite kopieren.

 

Bilder verändern

Wenn man ein Bild in der Größe ändern will, dann kann man mit aktiven Auswahlwerkzeug das Bild anklicken und es mit einen der acht Anfasser an den Ecken oder den Seiten beliebig vergrößern oder verkleinern.

Achtung – beim Ändern der Größe, gibt es bei Muse gegenüber anderen Programmen eine Besonderheit. möchte man in der Regel ein Bild proportional in der Größe ändern, sprich Höhe und Breite sollen sich gleichzeitig ändern, dann drückt man während der Änderung mit der Maus die Shift-Taste. Ohne Shift-Taste, kann man Höhe und Breite voneinander unabhängig ändern.

Bei Muse ist das genau umgekehrt. Drückt man hier die Shift-Taste, dann sind Breite und Höhe unabhängig. Zieht man ohne drücken das Bild größer oder kleiner, dann werden Höhe und Breite gemeinsam verändert. Etwas ungewohnt, wenn man andere Adobe Produkte, wie Photoshop oder Illustrator gewohnt ist.

Muse - Größe der Bilder ändern

Muse – Größe der Bilder ändern

Ähnlich wie die Größe, lassen sich Bilder auch drehen, in dem man beim markierten Bild den Mauszeiger etwas ausserhalb einer Ecke positioniert. Der Mauszeiger wandelt sich in einen offenen Kreis mit einem Pfeil um. Jetzt kann man die linke Maustaste drücken und die Maus bewegen und das Bild dabei drehen.

Muse - Bilder drehen

Muse – Bilder drehen

 

 

Welche Bildformate kann man einfügen?

Nachdem wir jetzt unser erstes Probe Bild eingefügt haben, stellt sich die Frage, welche Bildformate kann man in Muse einfügen? Hier gelten die üblichen Regeln für Webseiten. Es sind die Bildformate JPG, GIF, PNG und als Vektorformat SVG zulässig. Na ja fast – Muse lässt hier ein wenig mehr zu. Man kann nämlich auch die beiden Adobe eignen Formate PSD (Photoshop) und AI (Illustrator) einfügen.

Bei Photoshop gibt es sogar noch die Besonderheit, dass nicht nur ganze Bilder eingefügt werden können, sondern dass man sich die Ebenen aussuchen kann. Im folgenden Screenshot, habe ich die Ebene mit dem Namen „text“ zum Einfügen ausgewählt. Markiert man die Checkbox „Auf Ebeneninhalt zuschneiden“, dann wird das eingefügte Bild auch nur so gross, wie für die Ebene notwendig. Andernfalls so gross, wie das Photoshop File selbst.

Muse - PSD einfügen und Ebenen auswählen

Muse – PSD einfügen und Ebenen auswählen

Hier ein Screenshot mit einem eingefügten Illustrator File (links) und einem Photoshop File (2 importierte Ebenen) rechts.

Muse - Mit eingefügten AI und PSD (2 Ebenen) File

Muse – Mit eingefügten AI und PSD (2 Ebenen) File

Wie macht Muse das? Hat Adobe die Web Technik verändert?

Nein hat es nicht. Muse konvertiert Photoshop Files automatisch in ein entsprechendes Pixel-Format und Illustrator Files in ein Vektor-Format (SVG). Wir werden uns das dann noch näher beim HTML Export ansehen.

Beim Elemente Bedienfeld, werden wir jetzt noch einige interessante Funktionen in Zusammenhang mit diesen File Formaten sehen.

 

Das Elemente Bedienfeld

Wir haben uns bereits in der vorigen Lektion die Bedienfelder angesehen. Heute gehen wir auf eines dieser Fenster genauer ein. Es hat den Namen Elemente. Nochmals zur Erinnerung – die Bedienfelder sind auf der rechten Seite. Sollte das „Elemente“ Bedienfeld nicht vorhanden sein, dann kann man es über das Menü „Fenster“ aktivieren.

Ich möchte dir jetzt mein Bedienfeld, nach dem Einfügen von 2 Bildern mittels platzieren, 2 Bildern mit Copy & Paste, einem Illustrator File und mit zwei Ebenen aus einem Photoshop File zeigen.

Muse - Elemente Bedienfeld

Muse – Elemente Bedienfeld

Du siehst hier in der Spalte „Name“ eine Reihe von Einträgen. Diese geben die Quelle und/oder den Namen des Elementes an.

Ganz oben sind die mit Platzieren eingefügte Bilder und darunter „Eingefügtes….“ die mit Copy&Paste eingefügten. Dann kommt das Illustrator File und am Ende die beiden Photoshop Ebenen. Die Spalte mit dem Rufzeichen sind verschiedene Hinweise. Wir werden uns diesen dann noch genauer ansehen.

Die ganz rechte Spalte, gibt an, auf welcher Seite sich das Element befindet. In meiner Liste sind alle Elemente, ausser das JPG Bilder auf der Seite „Services“ und das „JPG“ Bild auf der Seite „Produkte“. Wenn das Element markiert ist, dann ist es auch gleichzeitig auf der Webseite markiert, wie in meinem Beispiel der Text.

 

Bilder austauschen

Bei jedem dieser Elemente in der Liste gibt es die Möglichkeit mit der rechten Maustaste ein Menü aufzuklappen, dass je nach Bild ein klein wenig unterschiedlich aussehen kann. In meinem Beispiel, habe ich die Photoshop Ebene mit dem kleinen Warnzeichen aufgeklappt.

Muse - Elemente Menü

Muse – Elemente Menü

Ich möchte aus dieser Liste die wichtigsten Einträge kurz erklären. Der vierte Eintrag in dieser Liste „Element aktualisieren“, hat mit dem Rufzeichen zu tun. Muse erkennt, dass sich am Original Bild (Photoshop File) etwas geändert hat und zeigt das mit dem Rufzeichen an. Besteht dieses Problem, dann gibt es auch den Menüeintrag „Element aktualisieren“. Ein Klick auf diesen Eintrag und Muse aktualisiert das Bild auf Grund der Änderungen in Photoshop und das Rufzeichen verschwindet.

Möchte man an seinen Original Bildern eine Änderung vornehmen, dann kann man den Eintrag „Original bearbeiten“ anklicken. Dabei öffnet sich das entsprechende Programm also Photoshop, Illustrator oder ein Bildbearbeitungsprogramm für Pixel oder SVG Bilder. Nach dem Speichern im jeweiligen Programm wird die Änderung sofort übernommen.

Man muss aber nicht diesen Menüpunkt zum Verändern anwenden. Es gibt auch die Möglichkeit das Original Photoshop oder Illustrator File zu verändern ohne den Weg über Muse zu gehen. Muse erkennt diese Änderung und bietet dann sofort die Möglichkeit der Aktualisierung an. Das funktioniert auch bei Bildern, die mit „Platzieren“ eingefügt wurden. Wenn sich das Original Bild auf der Platte verändert, dann bekommt man ebenfalls den Hinweis und kann sofort seine Website korrigieren.

 

Wo werden die Original-Bilder abgelegt?

Damit Änderungen an Dateien in Muse auch wirklich erkannt werden können, muss man sich ein wenig im Klaren sein, wie die Datei Ablage in Muse funktioniert.

Fügt man ein Bild in Muse ein, dann wird dieses direkt in der Muse Datei abgelegt. Das bedeutet, man kann eine Datei weitergeben und es sind alle notwendigen Bilder inkludiert. Zusätzlich legt Muse noch einen Verweis an, wo sich das Original Bild auf dem Dateisystem des Rechners befindet. Diesen Platz darf man nicht einfach verändern (sprich das Bild verschieben), da sonst Muse nicht mehr in der Lage ist, zu erkennen ob sich die Original-Datei verändert hat. Man kann weiterhin mit dem intern abgelegten Bild arbeiten, aber keine Änderungen am Original vornehmen, die automatisch erkannt werden.

 

Neu verknüpfen

Möchte man die Original-Datei an einen anderen Ort verschieben, so muss man anschliessend aus dem Elemente Menü den Eintrag „Erneut verknüpfen“ auswählen. Dann kann man Muse sagen, wo sich die Original-Datei jetzt befindet.

 

Elemente sammeln

Hat man die Original-Dateien irgendwo am Computer verstreut und weiss nicht so recht, wo sich diese befinden, dann gibt es eine praktische Hilfe. Mit „Elemente sammeln…“ kann man einen Ordner angeben, in den die Original-Datei hinein kopiert wird. Das ist vor allem dann praktisch, wenn man das Projekt mit Original Dateien weiter geben will.

Man kann übrigens nicht nur einzelne Bilder sammeln, sondern alle Elemente, die im Elemente Panel vorhanden sind. Das geschieht  durch das Icon links unten im Bedienfeld.

Muse - Alle Elemente sammeln

Muse – Alle Elemente sammeln

 

Wie gross (Abmessungen) sollte das Bild sein?

Eine Frage, die man sich im Web Design immer wieder stellt, ist die der Bild-Optimierung. Mittlerweile gehört es nicht nur zum guten Stil, Bilder für zu optimieren, sondern zur Pflicht.

 

Warum Bilder optimieren?

Was bedeutet optimieren? Darunter verstehen wir, die Bilder soweit aufzubereiten, dass diese beim User möglichst kleine Ladezeiten, bei möglichst guter Qualität haben. Gerade bei der Bild-Komprimierung, kann man manchmal sehr stark komprimieren, ohne einen merklichen Qualitätsverlust zu haben. Bei einigen Bildern auf der Website, macht das mitunter schon einige MB Daten und damit einige Sekunden Ladezeit aus.

Eine weitere Optimierung ist die Auflösung, sprich Größe der Bilder in Pixel (Breite und Höhe). Leider hat es in letzter Zeit immer mehr zugenommen, dass man einfach sehr grosse Bilder ladet und diese dann über auf der Webseite über CSS in die richtige Größe bringt. Technisch ist dagegen nichts einzuwenden und bei responsive Bilder, ist das auch notwendig. Das Problem ist aber, dass die Original-Bilder zum Teil viel größer sind, als sie jemals auf einer Seite angezeigt werden können.

Da Google mittlerweile schlechte Ladezeit durch ein schlechteres Ranking abstraft, ist die Zeit gekommen, sich damit intensiver zu beschäftigen.

 

Wie optimiert man Bilder in Muse

Soweit einmal die Problematik und der Grund für die Optimierung. Was aber muss man jetzt tun und wie groß dürfen die Bilder sein. Muss man vor dem Einfügen von Bilder diese bereits optimieren und wie?

Die gute Nachricht – bei Muse muss man im Prinzip gar nichts machen. Ist doch schön – oder? Aber warum ist das so?

Betrachtet man den HTML Export von Muse oder einfach nur das Elemente Bedienfeld, dann wird diese Frage schnell beantwortet.

Ich habe zum Test einmal ein Bild mit einer Größe von 1920 x 1032 Pixel in Muse eingefügt, also viel zu gross für eine Website. Ich habe dieses Bild sogar dreimal kopiert. Einmal die volle Breite einer Website, einmal die Hälfte und einmal ein viertel der Website Breite.

Das ganze sieht dann auf der Seite so aus:

Muse - 3 Bilder eingefügt

Muse – 3 Bilder eingefügt

Betrachten wir passend dazu einmal das Element Bedienfeld:

Muse - Element Bedienfeld 3 Bilder

Muse – Element Bedienfeld 3 Bilder

In dieser Liste interessieren uns vor allem die 3 Bilder auf der Homepage. Wir sehen, dass Muse das Bild „countryside_1920_.jpg“ einmal eingefügt hat und dann aufgeklappt das Bild viermal vorhanden ist. Wie gross sind aber nun diese 3 Bilder. Um das festzustellen, können wir mit der Maus über eine dieser Zeilen fahren und warten dann einen kleinen Moment. Es erscheint ein gelbes Fenster mit Eigenschaften zu diesem Bild.

Muse - Bedienfeld Elemente - Bildeigenschaften

Muse – Bedienfeld Elemente – Bildeigenschaften

Was uns an diesen Eigenschaften besonders interessiert, ist die Seitenelementgröße. Das ist die Größe, die für dieses Bild auf dieser Seite benötigt wird.

Schön wäre es jetzt nur noch, wenn dies auch beim HTML Export, also bei den Daten die wirklich ins Internet hochgeladen werden berücksichtigt wird.

 

Der Beweis

Machen wir also einen HTML Export über „Veröffentlichen“ -> „Als HTML exportieren“

Muse - HTML Export

Muse – HTML Export

Wir suchen uns einen Ordner auf unserer Festplatte aus und starten den Export. Wenn wir dann in diesen Ordner wechseln gibt es einen images Ordner und dort sind unsere Bilddateien. Ein Teil davon sieht wie folgt aus:

HTML Export Images Dateiliste

HTML Export Images Dateiliste

In dieser Liste sehen wir unsere Bilder in verschiedenen Auflösungen und daneben ersichtlich in unterschiedlichen Dateigrößen. Damit ist bewiesen, dass Muse auch beim Export die Bilder verkleinert und für unsere Website optimiert.

Bei der Lektion über responsive Design, werden wir feststellen, dass diese Funktion auch bei Bildern in unterschiedlichen Haltepunkten funktioniert. Das bedeutet, dass zum Beispiel für mobile Geräte die Bilder wesentlich kleiner sind und auch nur diese geladen werden.

Schöner kann das automatische Optimieren gar nicht gehen.

Zum Schluss noch der Rest der Liste, in der man sehen kann, was Muse aus den Copy&Paste Bildern, bzw. aus dem Illustrator und Photoshop File Ebenen gemacht hat

HTML Export Images Dateiliste 2

HTML Export Images Dateiliste 2

 

Zusammenfassung

In dieser Lektion hab ich euch gezeigt, wie man in Muse Bilder einfügt, diese verschiebt und verändert.

Ihr habt gesehen, welche Bildformate in Muse verwendet werden können und wie uns das Elemente Bedienfeld hilft mit Bildern umzugehen.

Am Schluss haben wir gesehen, wie einfach die Bildoptimierung in Muse ist.

 

Ausblick

Das nächste mal werden wir uns näher mit dem Formen Element beschäftigen und uns ansehen, was wir damit alles machen können.

 

 

 

 

 

 

 

 

 

Comments

  1. … Danke, sehr gut…
    was mal ein thema wäre ist “ ausrichten “ von bildern, formen etc. z.b. 4 bilder / mittig ganz nah beeinander im quadrat…bin ich noch nicht dahinter gekommen ;-)… geht wahrscheinlich nur manuell

    schönes WE
    Grüße

    • Hallo Ferdinand,

      danke für deine Rückmeldung. Das Thema Ausrichten von Inhalten werde ich bei der Lektion zu responsive Design behandeln.

      Ebenfalls schönes WE
      LG Andreas

  2. Hallo Andreas,

    ich schon wieder 😉

    Wenn ich bei einem platzierten Bild die Größe ändern möchte, geht das aber proportional OHNE Shift-Taste. Mit der Shift-Taste sind Höhe und Breite getrennt; vielleicht wurde das von Adobe zwischenzeitlich angepasst 😉

    Übrigens, die Länge Deiner einzelnen Kursteile und auch der Inhalt ist genau passend.

    Gruß
    Tom

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.