Arbeiten mit Objekten in Adobe Muse

Objekte in Adobe Muse enthalten Gestaltungselemente, die in externen Quellen erstellt oder daraus importiert wurden. Bilder, Texte, Bilderrahmen und mehr können zur Webseite hinzugefügt und mit verschiedenen Werkzeugen in Adobe Muse bearbeitet werden.

Einer der gängigsten Workflows ist, eine Schaltfläche in Adobe Photoshop zu erstellen und zu importieren. Deshalb erkennt Adobe Muse Ebenen und Ebenenkompositionen, die in Photoshop erstellt wurden. In Adobe Muse können Sie Ebenen als Status der Schaltfläche auf Ihrer Website festlegen.

Bei Objekten, die auf der Leinwand der Webseite platziert sind, können Sie Transformationen hinzufügen, um den Design-Anforderungen der Website gerecht zu werden. Sie können Objekte auch isolieren, um geeignete Eigenschaften bezüglich Innenabständen und Spalten hinzuzufügen, um Abstände für verschachtelte Elemente zu bearbeiten.

Platzieren von Bildrahmen in Adobe Muse-Projekte

Sie können Bildrahmen direkt in Ihre Adobe Muse-Projekte platzieren, indem Sie auf das Bildrahmen-Werkzeug klicken. Klicken Sie im Werkzeugbedienfeld auf das Bildrahmen-Werkzeug und dann auf die gewünschte Stelle in Ihrem Projekt.

Platzieren eines einzelnen Bilds auf der Seite

Der Muse-Arbeitsbereich funktioniert ähnlich wie der Arbeitsbereich von Illustrator und InDesign: zunächst laden Sie das platzierte Bild, dann klicken Sie auf der Seite an die Stelle, an der es platziert werden soll. Um eine Bilddatei, indem Sie sie direkt auf der Seite einzufügen, gehen Sie wie folgt vor:

1. Wählen Sie „Datei“ > „Platzieren“ oder verwenden Sie die Tastaturbefehle Befehlstaste+D (Mac) oder Strg+D (Windows), um das Dialogfeld „Importieren“ zu öffnen.
2. Navigieren Sie, um die Datei „made-with-muse.png“ im Beispieldateiordner auszuwählen. Klicken Sie auf „Öffnen“, um die Datei auszuwählen, und schließen Sie dann das Dialogfeld „Importieren“.

Klicken Sie einmal auf den unteren Bereich der Seite, um das Bild zu platzieren. In diesem Fall soll das Bild in seiner ursprünglichen Größe platziert werden, daher klicken Sie nur einmal. Wenn Sie jedoch das platzierte Bild skalieren möchten, können Sie klicken und ziehen, um das Bild auf eine bestimmte Größe zu skalieren. 

Ziehen Sie das Bild mit dem Auswahlwerkzeug zur vertikalen Mitte des gekachelten Fußzeilenrechtecks. Beachten Sie, wie rote Hilfslinien und türkisgrüne Messfelder eingeblendet werden, um Ihnen das mittige Ausrichten der Grafik zu erleichtern.

Nachdem Sie diese Änderungen vorgenommen haben, ist die Gestaltung des Fußzeilenbereichs fast abgeschlossen.

Informationen über die Optimierung von Bildern in Muse beim Veröffentlichen oder Exportieren einer Site

Sie können auch druckoptimierte Bilder in Adobe Muse platzieren, die von der Anwendung in ein webfreundliches Format konvertiert werden. Bei dieser Konvertierung wird das Bild jedoch oftmals komprimiert, sodass die Bildqualität beeinträchtigt wird. Wenn Sie Bilder in Muse einfügen, die nicht weboptimiert sind, wird eine automatische Komprimierung durchgeführt. Wenn Sie eine Site veröffentlichen oder exportieren und nicht mit den automatischen Ergebnissen zufrieden sind, erstellen oder optimieren Sie Ihre webfreundlichen Bilder manuell mit Adobe Photoshop oder Adobe Fireworks®. Löschen Sie die Originalbilder und platzieren Sie die neuen optimierten Bilder in den Seiten; veröffentlichen oder exportieren Sie anschließend Ihre Site erneut.

Beachten Sie, dass andere Änderungen, die Sie an einem Bild in Muse vornehmen (z. B. Zuschneiden, Skalieren oder Hinzufügen von abgeflachten Kanten, Schatten und Schein), dazu führen, dass Muse das Bild neu erstellt und automatisch komprimiert. Wenn Sie mehr Kontrolle über die Optimierung haben möchten, können Sie dem Bild mit Photoshop oder Fireworks Effekte hinzufügen, die Datei in einem Bildbearbeitungsprogramm optimieren und dann das Bild in Muse platzieren, um selbst die Komprimierungsstufe festzulegen. Sie können PSD-Dateien aus Photoshop direkt in Muse platzieren, anstatt PNG-, JPG- oder GIF-Dateien zu exportieren. Aber auch hierbei generiert Muse automatisch eine neue Bilddatei basierend auf seinen eigenen automatischen Komprimierungsalgorithmen.

Optimieren von Bildern für die Anzeige im Internet

Exportfehler und langsamere Exportvorgänge können auftreten, wenn eine verknüpfte Datei mit einer sehr hohen Auflösung platziert und später auf der Seite um ein Vielfaches kleiner skaliert wurde. Dies ist kein empfohlener Workflow. Diese Probleme treten noch deutlicher zu Tage, wenn Bilder in vollständiger Größe (über 2.000 Pixel) wiederholt platziert und anschließend skaliert werden, um sie an ein Design anzupassen.

Wenn Sie eine sehr große Bilddatei platzieren, beschränkt Muse automatisch die Größe und skaliert die Bildbreite auf 2048. Wenn Sie den Cursor über den Namen eines Elements im Elementebedienfeld bewegen, zeigt eine QuickInfo die Originalgröße des platzierten Bildes im Vergleich zur neu berechneten Bildgröße an (skaliert und an die maximale Größe angepasst).

Es empfiehlt sich, die Webgrafiken für eine Site vor dem Platzieren auf Seiten in einem Bildbearbeitungsprogramm zu skalieren und zu optimieren. Das Platzieren von Bildern mit sehr großen Abmessungen kann dazu führen, dass die MUSE-Datei erheblich größer als notwendig ist. Die MUSE-Datei muss die zusätzlichen Pixeldaten verarbeiten, die nicht erforderlich sind, um das Bild im Internet anzuzeigen. Dies kann zu einer längeren Verarbeitungszeit beim Exportieren und Veröffentlichen der Sites führen. In manchen Fällen kann bei einer sehr großen MUSE-Datei eine Zeitüberschreitung auftreten, wenn während des Export- oder Veröffentlichungsvorgangs alle Dateien skaliert und optimiert werden. Möglicherweise treten Zeitüberschreitungsfehler auf.

Um dies zu vermeiden, können Sie mit der rechten Maustaste auf die Elementnamen klicken und „Elementgröße optimieren“ wählen, um die Daten zu entfernen, die zum Anzeigen des skalierten Bildes nicht erforderlich sind.

Wenn Sie ein optimiertes Bild skalieren, damit es in einem Entwurf größer angezeigt wird, wird möglicherweise ein Fehler zu einem hochgerechneten Plus-Element angezeigt. Um dies zu vermeiden, können Sie die Option „Größere Größe importieren“ wählen, um die zusätzlichen Bilddaten abzurufen, die zum akzeptablen Anzeigen des skalierten Bildes erforderlich sind.

Zeichnen von Platzhalterformen

Eine Platzhalterform kann eine Ellipse, ein Rechteck oder ein Polygon sein, das Sie mit einem Bild, Text oder einer Farbe füllen können.

Platzieren einer Photoshop-Datei als Rollover-Schaltfläche

Die Share-Schaltfläche zeigt die erwarteten Status. Im nächsten Abschnitt lernen Sie, wie Sie die Share-Schaltfläche am Tropfen-Bild auf der rechten Seite der Site-Navigation ausrichten.

Im folgenden Abschnitt erfahren Sie, wie Sie die Kopf- und Fußzeilenbereiche der Musterseite definieren.

Fixieren von Objekten am Browserfenster

Wenn Sie ein Bild platzieren oder andere Methoden verwenden, um Bildmaterial zu einer Seite hinzuzufügen, verwenden Sie das Auswahlwerkzeug und die Pfeiltasten, um das Bild(material) neu zu positionieren. Wenn Sie das Bild verschieben, wird es relativ zu den anderen Elementen (Bilder, Text und Medien) verschoben, die sich ebenfalls auf der Seite befinden. Sie haben auch die Möglichkeit, die anderen Elemente zu verschieben; in diesem Fall verhält sich die gesamte Seite wie eine Broschüre oder ein Poster. Die Elemente auf der Seite befinden sich auf einer Ebene. Wenn eine Seite lang ist (viel vertikalen Inhalt enthält) und der Besucher nach unten scrollt, kann er die Bilder am Anfang der Seite nicht mehr sehen.

Sie haben auf Websites bestimmt schon einmal angeheftete Objekte gesehen; dies sind die „fixierten“ Elemente, die immer an derselben Position angezeigt werden. Sie erwecken den Eindruck, als ob sie über dem Rest des Seiteninhalts schweben.

Wenn Sie das Anheft-Werkzeug verwenden, entfernen Sie im Grunde ein Bild aus dem Fluss der Seite. Anstatt das Bild relativ zu den anderen Seitenelementen zu positionieren, legen Sie eine bestimmte Position dafür relativ zum Browser fest. Angeheftete Bilder erwecken immer den Eindruck, als ob sie „festkleben“; sie bleiben immer an derselben Position (z. B. oben rechts oder schwebend am unteren Rand), unabhängig von anderen scrollenden Seitenelementen. Wenn der Besucher sein Browserfenster verkleinert oder vergrößert, bleiben angeheftete Bilder immer an ihrer angehefteten Position relativ zum Browserfenster.

Sie können sich das Anheften so vorstellen, als ob Sie das Bild aus dem Design der Seite „herausheben“ und es stattdessen am Browser anheften, so, als ob Sie einen Notizzettel an eine Pinnwand anheften. Das angeheftete Element verschiebt sich, um seine angeheftete Position relativ zum Browser beizubehalten, wenn der Besucher das Browserfenster verkleinert oder vergrößert. Das angeheftete Element wird jedoch nicht verschoben, wenn der Besucher den Seiteninhalt horizontal oder vertikal scrollt.

Führen Sie folgende Schritte aus, um das Anheft-Werkzeug zu verwenden:

1. Wählen Sie, während die A-Musterseite in der Entwurfsansicht geöffnet ist, mit dem Auswahlwerkzeug das Facebook-Symbol aus.
2. Klicken Sie auf die obere rechte Position in der Anheft-Schnittstelle im Steuerungsbedienfeld. Diese Einstellung „heftet“ das Element an der oberen rechten Ecke der aktuellen Position an.

3. Wiederholen Sie Schritt 1 und 2, um die Google+- und Twitter-Schaltflächen an ihrer Position oben rechts anzuheften, damit sie nicht im Browserfenster verschoben werden, wenn der Bildlauf für den Rest der Seite durchgeführt wird.
4. Klicken Sie auf „Planung“, um die Seitenminiaturen zu sehen. Alle Seiten enthalten jetzt die drei Social Media-Symbole, weil Sie sie zur Musterseite hinzugefügt haben.
5. Doppelklicken Sie in der Planungsansicht auf die Seite „food“, um die Seite in der Entwurfsansicht zu öffnen. Wenn die Seite bereits geöffnet ist, klicken Sie auf die Registerkarte „food“, um sie zu aktivieren. Wählen Sie „Datei“ > „Seitenvorschau in Browser“, um die Seite in einem Browser anzuzeigen.
6. Klicken Sie auf das Menüelement „Dessert“, um auf der langen Seite zum Abschnitt mit der Dessert-Speisekarte zu springen. Während der Rest der Seitenelemente scrollt, bleiben die drei Social Media-Symbole an ihrer Position rechts auf der Seite, weil sie angeheftet sind.

Fahren Sie mit Kapitel 6 von „Erstellen Ihrer ersten Website in Muse“ fort. In diesem Teil lernen Sie, wie Sätze von Objekten gruppiert werden, sodass sie sich wie ein Element verhalten. Außerdem werden Sie die Seite „Visit“ abschließen, indem Sie eine eingebettete Google Map hinzufügen, die Besuchern die Standorte von Katie's Cafe anzeigt. Und nachdem Sie die Site finalisiert haben, werden Sie sehen, wie einfach es ist, die Site auf einen Hosting-Server (von Business Catalyst) hochzuladen, um sie online zu veröffentlichen, damit Sie Ihre laufende Arbeit mit Ihren Kunden und Kollegen teilen können.

In Kapitel 4 von „Erstellen Ihrer ersten Website mit Muse“ haben Sie gelernt, wie Anker-Tags hinzugefügt und mit Menüelementen in einem manuellen horizontalen Menü-Widget verlinkt werden. Außerdem haben Sie gelernt, wie Elemente an der Seite angeheftet werden, um zu verhindern, dass sie scrollen. Und Sie haben gesehen, wie Links zu Dateien hinzugefügt werden, damit Besucher diese Dateien herunterladen können.

Sie können außerdem lernen, wie Objekte gruppiert und wie gruppierte Objekte auf Seiten eingefügt werden. Außerdem werden Sie mit mehr eingebettetem HTML arbeiten; in diesem Teil werden Sie eine interaktive Google Map zur Seite „Visit“ hinzufügen. Und abschließend werden Sie Ihrer Site den letzten Schliff geben, indem Sie ein Favicon hinzufügen und dann die Test-Site kostenlos auf die für Sie bereitgestellten Hosting-Server hochladen.

Gruppieren von Objekten und Einfügen von Gruppen als eine Einheit

Genau wie InDesign und anderen Layoutprogrammen können Sie mehrere Objekte in einer Gruppe zusammenfassen, sodass sie als eine Einheit behandelt werden. In diesem Abschnitt werden Sie ein Design erstellen, das aus mehreren Elementen (platzierten Bildern und Textrahmen) besteht. Anschließend werden Sie diese Elemente gruppieren, damit Sie sie leicht als ein Element platzieren oder kopieren können. Führen Sie folgende Schritte aus:

1. Doppelklicken Sie in der Planungsansicht auf die Homepage-Miniatur, um die Seite in der Entwurfsansicht zu öffnen.
2. Wählen Sie „Datei“ > „Platzieren“. Wählen Sie die Datei namens „panel-open-bottom.png“ im Beispieldateiordner aus. Klicken Sie auf „Öffnen“, um das Dialogfeld „Importieren“ zu schließen, und klicken Sie dann einmal nahe am unteren Rand der Homepage (unter dem Leuchtkasten-Widget und über der Fußzeile), um die Grafik in voller Größe zu platzieren.

Die PNG-Datei wurde auf eine niedrigere Deckkraft gesetzt, damit das gekachelte Hintergrundbild durch das halbtransparente Blumendesign durchscheinen kann.

3. Wählen Sie erneut „Datei“ > „Platzieren“. Wählen Sie jetzt das Bild namens „spoon-map.png“ aus. Klicken Sie auf „Öffnen“ und klicken Sie dann ein Mal auf das obere mittlere Blütenblatt, um das Bild zu platzieren.
4. Drücken Sie, während das Bild mit dem Löffel ausgewählt ist, die Wahl- (Mac) bzw. die Alt-Taste (Windows) und halten Sie die Taste gedrückt, um das Bild mit dem Löffel zu duplizieren und das Blütenblatt sofort zur rechten Seite der Mitte zu ziehen. Wiederholen Sie diesen Schritt noch einmal, um das mittlere Bild mit dem Löffel zu duplizieren und die duplizierte Kopie zum Blütenblatt auf der linken Seite zu ziehen. Verwenden Sie das Auswahlwerkzeug, um die drei Löffel wie im folgenden Bild gezeigt zu positionieren.

5. Zeichnen Sie mithilfe des Textwerkzeugs einen Textrahmen im mittleren Blütenblatt und geben Sie den folgenden Text ein:

Katie's Cafe

Noe Valley

123 Elizabeth Street

MON–FRI 6AM–10PM

SAT–SUN 7AM–10PM

6. Wenden Sie im Textbedienfeld die folgenden Einstellungen zur Formatierung des Textes an:
   • Schrift: Droid Serif (oder eine andere Serifenschrift)
   • Schriftgrad: 14
   • Schriftfarbe: #222222  (in Teil 5 haben Sie diese Farbe in „katieblack“ umbenannt)
   • Schriftausrichtung: Zentriert
   • Zeilenabstand: 120 %

7. Wählen Sie dann nur die letzten beiden Zeilen (die mit den Wochentagen beginnen) aus und setzen Sie die Schriftfarbe auf Rot (#A6342A).
8. Wählen Sie den Textrahmen mit dem Auswahlwerkzeug aus. Drücken Sie die Wahl- (Mac) bzw. die Alt-Taste (Windows) und halten Sie die Taste gedrückt, um den Textrahmen zu duplizieren und ihn sofort auf das Blütenblatt auf der rechten Seite, über dem Bild mit dem Löffel, zu ziehen. Wiederholen Sie diesen Schritt noch einmal, um den mittleren Textrahmen zu duplizieren und die duplizierte Kopie zum Blütenblatt auf der linken Seite zu ziehen. Verwenden Sie das Auswahlwerkzeug, um die drei Textrahmen so zu positionieren, dass sie wie im folgenden Bild gezeigt über den drei Löffeln ausgerichtet sind.

9. Wechseln Sie zum Textwerkzeug. Wählen Sie den Text in der linken Adresse aus und ändern Sie ihn zu:

Katie's Cafe

Laurel Heights

800 Spruce Street

MON–FRI 5AM–12AM

SAT–SUN 9AM–1AM

10. Wählen Sie den Text in der rechten Adresse mit dem Textwerkzeug aus und ändern Sie ihn zu:

Katie's Cafe

Cole Valley

301 Carmel Street

MON–FRI 7AM–10PM

SAT–SUN 9AM–10PM

Das Design ist jetzt fertig. Als Nächstes werden Sie die Elemente auswählen und gruppieren.

11. Verwenden Sie das Auswahlwerkzeug, um zu klicken und über das gesamte Blumendesign zu ziehen. Achten Sie hierbei darauf, dass sowohl das platzierte Blumenbild als auch die drei Bilder mit dem Löffel und die drei Textrahmen ausgewählt werden. Klicken Sie mit der rechten Maustaste und wählen Sie aus dem angezeigten Menü die Option „Gruppieren“ aus. Alternativ können Sie „Objekt“ > „Gruppieren“ wählen.

Nachdem Sie die Objekte gruppiert haben, zeigt der Auswahlindikator oben links im Steuerungsbedienfeld das Wort „Gruppe“ an.

12. Kopieren Sie die ausgewählte Gruppe. Klicken Sie auf „Planung“, um zur Planungsansicht zurückzukehren, und doppelklicken Sie dann auf die Miniatur der Seite „Visit“, um die Seite in der Entwurfsansicht zu öffnen. Wählen Sie „Bearbeiten“ > „An Originalposition einfügen“, um die gesamte Elementgruppe in derselben Position zu platzieren.

Wie dieses kurze Beispiel zeigt, sind Gruppen hilfreich, wenn Sie ein Design abgeschlossen haben und mit ihm als ein einzelnes Element arbeiten möchten, um es an einer anderen Stelle auf einer Seite zu positionieren oder es zu kopieren und auf einer anderen Seite einzufügen.

Zusätzlich zur Gruppierung finden Sie evtl. auch die Sperrfunktionen hilfreich, sobald Sie ein Design finalisiert haben. Klicken Sie mit der rechten Maustaste auf eine Gruppe oder einen ausgewählten Satz von Elementen und wählen aus dem angezeigten Kontextmenü die Option „Sperren“, um sie zu sperren. (Alternativ können Sie auch „Objekt“ > „Sperren“ wählen.) Wenn fertige Elemente gesperrt sind, können sie nicht versehentlich auf einer Seite verschoben oder gelöscht werden, da sie nicht mehr ausgewählt werden können. Falls Sie die gesperrten Elemente zu einem späteren Zeitpunkt aktualisieren müssen, wählen Sie „Objekt“ > „Alles auf Seite entsperren“.

Nachdem das Blumendesign am unteren Rand der Seite „Visit“ eingefügt wurde, ist der Seiteninhalt fast vollständig. Im nächsten Abschnitt werden Sie die Seite „Visit“ weiter bearbeiten, um eine interaktive Karten-Schnittstelle hinzufügen, die Kunden hilft, das nächste Cafe zu finden.

Einbetten von Rich-Media-Inhalt zum Hinzufügen von Animation

Verwenden des Abstandbedienfelds

Über das Abstandbedienfeld können Sie Eigenschaften bezüglich Innenabständen und Spalten des CSS nutzen. Der Innenabstand lässt einen Bereich um den Inhalt eines Elements herum (innerhalb des Rahmens) frei. Die Hintergrundfarbe des Elements hat Auswirkungen auf den Innenabstand.

Der Innenabstand oben, rechts, unten und links kann mithilfe verschiedener Eigenschaften unabhängig voneinander geändert werden. Sie können auch alle Innenabstand-Eigenschaften vereinheitlichen, indem Sie sie gleichzeitig bearbeiten.

1. Wählen Sie in Adobe Muse Fenster > Abstand aus, um das Abstandbedienfeld aufzurufen.

2. Geben Sie Werte für die Innenabstand-Eigenschaften für links, rechts, oben und unten an. Wenn Sie unterschiedliche Werte eingeben möchten, heben Sie die Auswahl der Schaltfläche  auf.

3. Sie können auch horizontale und vertikale Spalteneigenschaften angeben.

Skalieren und Drehen von Objekten über das Transformierenbedienfeld

In Adobe Muse können Sie 2D-Transformation auf Objekte anwenden. Sie können Objekte auf X- und Y-Achsen positionieren, skalieren und drehen.

Über den 100 % Breiten-Umschalter im Transformierenbedienfeld können Sie eine Breite von 100 % für Objekte festlegen. Sie können skalierbare Objekte auch so festlegen, dass sie die Breite des Browsers ausnutzen und an Ihren Computerbildschirm angepasst sind.

Gehen Sie wie folgt vor, um Transformationen auf ein ausgewähltes Objekt anzuwenden:

1. Wählen Sie in Adobe Muse „Fenster“ > „Transformieren“ aus.

2. Wenden Sie eine der folgenden Transformationen auf das ausgewählte Objekt an:
   • Position: Geben Sie die X- und Y-Werte an, um das Objekt in dem gewünschten Bereich auf der Website zu platzieren.
   • Skalierung: Geben Sie die Werte für Breite und Höhe für das Objekt ein. Sie können das Objekt auch mit einheitlicher Breite und Höhe skalieren, indem Sie auf die Schaltfläche  klicken.
   • Drehung (): Geben Sie den Drehwinkel für das Objekt ein.
   • 100 % Breite (): Sie können das Objekt auf eine Breite von 100 % setzen und es dann entsprechend der Breite des Browsers skalieren.