So erstellen Sie schnell Prototypen für eine Website und testen sie online

Adobe Muse CC ist ein Webdesign- und Prototyping-Tool, das sich hauptsächlich an Grafik- oder Druckdesigner richtet, die schnell Websites entwerfen oder einem Entwickler oder Webdesigner eine Idee vermitteln möchten.

Das Schöne an Muse ist, dass Sie nicht einmal eine Codezeile kennen müssen, um für das Web zu erstellen. Natürlich empfehlen wir dies nicht - aber wenn Sie Zeit haben, können Sie auf diese Weise eine Website-Idee online erstellen.

Generatortechnologie

Muse CC passt natürlich perfekt zu Leuten wie Photoshop CC und Illustrator CC Mit der neuen Generator-Technologie in Photoshop können Sie Ihre Assets mit sehr geringem Aufwand problemlos von der Bildbearbeitungsanwendung in Muse verschieben.



Muse CC verfügt auch über Edge Web Fonts und Typekit-Integration. Dies bedeutet, dass Sie sehr schnell stilvolle Web Fonts einbinden können. Es ist alles Teil eines Kreative Wolke Mitgliedschaft.

Microsoft Surface Pro 6 gegen Surface Laptop 2

In diesem Tutorial sehen wir uns einen allgemeinen Workflow an - von Illustrator über Photoshop bis hin zu Muse. Wir werden uns auch ansehen, wie Sie einfache Widgets wie Formulare hinzufügen und Web-Schriftarten verwenden. Schließlich erfahren Sie, wie einfach das Veröffentlichen mit Muse CC und Ihrer Creative Cloud-Mitgliedschaft ist. Muse CC ist zwar nicht immer Ihr bevorzugtes Webdesign-Tool, bietet jedoch für schnelle Websites und Prototypen eine gute Lösung für jeden Designer, der etwas Online-Scharfes erhalten möchte.

01. Erstellen Sie Ihr Grundlayout in Illustrator

Unser Ausgangspunkt für dieses Workflow-Tutorial ist Adobe Illustrator CC, wo wir unser grundlegendes Layout und unsere Symbole erstellen. Nachdem Sie Ihr Layout erstellt haben, wählen Sie im Dropdown-Menü Ebenen die Option Für Ebenen freigeben (Sequenz). Dies hilft uns beim Exportieren der Designs nach Photoshop.

02. Beenden Sie das Design in Photoshop

Sobald Sie mit dem grundlegenden Stil Ihres Layouts und Ihrer Symbole zufrieden sind, exportieren wir das Design in Photoshop, wo wir das Erscheinungsbild vervollständigen. Im ersten Schritt haben wir das Illustrator-Design in mehrere Ebenen konvertiert. Wenn wir also die Datei öffnen, sind alle Ebenen intakt.

03. Benennen Sie Ihre Ebenen

Wenn Ihr Entwurf fertig ist, müssen Sie Ihre Ebenen korrekt benennen, damit wir das neue Generator-Tool in Photoshop CC nutzen können. Benennen Sie die Ebenen oder Ebenengruppen mit der entsprechenden Erweiterung, die den Dateityp angibt, den das Thema haben soll. Stellen Sie sicher, dass keine Leerzeichen vorhanden sind. Verwenden Sie stattdessen Unterstriche oder Bindestriche.

04. Exportieren Sie Ihr Vermögen

Wenn alle Ebenen und Ebenengruppen benannt sind, gehen Sie zu Datei> Generieren> Bildassets und befolgen Sie die Anweisungen zum Speichern der Dateien. Speichern Sie auch die PSD-Datei. Generator ist ein neues Tool, das als kostenloses Update für Photoshop CC-Benutzer veröffentlicht wurde und zum dynamischen Exportieren von Assets aus Ihren Projekten als einzelne Bilddateien verwendet werden kann.

wie man besser in 3D-Modellierung wird

05. Bewegen Sie sich in Muse

Nachdem Sie Ihre Assets vorbereitet haben, ist es an der Zeit, Adobe Muse CC zu starten. Öffnen Sie in der Planansicht die Masterseite, wählen Sie die Option Browserfüllung und wählen Sie die gerade gespeicherte PSD-Datei aus. Wählen Sie als Nächstes Composite aus den Optionen aus, setzen Sie die Füllfarbe auf Keine und deaktivieren Sie alle Ränder.

Kehren Sie zur Planansicht zurück und öffnen Sie die Homepage. Wählen Sie das Widget 'Featured News Composition' aus und richten Sie es wie angezeigt ein. Das Menü 'Optionen' wird standardmäßig geöffnet, wenn ein Widget hinzugefügt wird. Beachten Sie, dass es eine gute Idee ist, im Vorschaumodus von Muse CC zu testen, was Sie gerade tun.

07. Wählen Sie Ihre Schriftarten

Klicken Sie auf Auslöser, um einen Zielbereich des Widgets zu aktivieren. Wählen Sie den Inhalt mit dem Textwerkzeug aus und öffnen Sie dann im geöffneten Menü Schriftart (in der Systemsteuerung oder im Textfenster) Webschriftarten und gehen Sie zu Schriftarten hinzufügen. Dadurch wird das Typekit-Bedienfeld geöffnet. Wählen Sie Ihre Schriftart. Ändern Sie die Schriftart in jedem der Textfelder.

08. Fügen Sie Ihre Symbole hinzu

Das Widget sollte wie das hier abgebildete Bild aussehen. Fügen wir nun die Symbole hinzu, die wir in Schritt 1 entworfen haben. Gehen Sie zu Datei> Platzieren und wählen Sie Ihre Symbole und Ihr Logo aus. Laden Sie als Nächstes die Platzierungspistole in der Reihenfolge, in der Sie die Dateien auf Ihrer Seite platzieren möchten. Dies wird dazu beitragen, die Dinge ein wenig zu beschleunigen und Ihren Workflow zu verbessern.

09. Status ändern

Verwenden Sie das Statusbedienfeld, um den Normal-, Rollover- und Aktivstatus der einzelnen Trigger des Widgets zu ändern. Der Status aller Elemente im Triggerbereich wird vom Triggerbereich beeinflusst. Ändern Sie die Farbe der PNG-Symbole für jeden Status mit dem Effekt-Werkzeug.

10. Gestalten Sie den Header

Wählen Sie für Ihre Kopfzeile das Textwerkzeug aus und zeichnen Sie ein Rechteck auf die entsprechende Größe, die Ihre Kopfzeile haben soll. Verwenden Sie nun diese Einstellungen, um Ihren Text zu formatieren. Wählen Sie das Textfeld aus, wechseln Sie zum Bedienfeld „Absatzstile“ und klicken Sie auf das neue Stilsymbol. Wählen Sie H1 aus der Liste aus und nennen Sie den Stil 'H1'.

wie man Gouache mit Aquarell benutzt

11. Fügen Sie ein einfaches Formular-Widget hinzu

Speichern Sie Ihre Datei an dieser Stelle. Wählen Sie den Kontakt 'Trigger' und löschen Sie den Inhalt aus dem Zielfenster. Öffnen Sie das Widgets-Bedienfeld und ziehen Sie ein einfaches Formular-Widget an die richtige Stelle. Wählen Sie im Statusbedienfeld die verschiedenen Teile des Formulars aus und gestalten Sie sie so, dass sie der hier gezeigten Bilddarstellung entsprechen.

12. Wählen Sie Ihr Hintergrundbild aus

Kehren Sie zur Planansicht zurück und wählen Sie den Seitenmaster aus. Wählen Sie dann die Browserfüllung aus und werfen Sie das Bild in den Papierkorb. Laden Sie die Ebene background-fill.jpg, zentrieren und skalieren Sie sie, um sicherzustellen, dass das Hintergrundbild den Browser ausfüllt, während Sie sich noch in der Browserfüllung befinden.

13. Stellen Sie sicher, dass es funktioniert

Okay, jetzt ist es Zeit sicherzustellen, dass alles, was wir getan haben, wie geplant funktioniert. Muse enthält einen integrierten Vorschaumodus, mit dem Sie genau dies tun können. Klicken Sie auf die Registerkarte Vorschau und hoffentlich funktioniert alles wie beabsichtigt. Es ist auch eine gute Idee, sicherzustellen, dass Sie die Site in einem Browser testen (mit dem Befehl Datei> Site im Browser anzeigen).

Schritt erstellen und im Illustrator wiederholen

14. Veröffentlichen Sie die Site

Klicken Sie auf die Schaltfläche Veröffentlichen, um die Site mit Business Catalyst Services zu veröffentlichen. Geben Sie einen Namen für die Testwebsite ein, wählen Sie aus, wo sie geografisch gehostet werden soll, und klicken Sie auf die Schaltfläche 'OK', wenn sie markiert ist. Ihre Website wird hochgeladen und nach Abschluss im Browser geöffnet.

15. Online-Bearbeitung

Nehmen Sie Änderungen einfach vor, klicken Sie erneut auf Veröffentlichen, und die Site lädt nur geänderte Elemente hoch. Durch Klicken auf die Schaltfläche Verwalten wird der Business Catalyst Dash geöffnet, in dem Sie die Website live schalten und den Online-Inhaltseditor verwenden können. (Beachten Sie, dass die Online-Bearbeitung nur mit Adobe Business Catalyst Hosting verfügbar ist.)

16. Andere Hosting-Optionen

Um die Site auf Ihre eigene Domain hochzuladen und andere als Business Catalyst zu hosten, benötigen Sie Ihre FTP-Daten. Geben Sie die Details in den FTP-Manager ein, der sich unter Datei> Mit FTP hochladen befindet. Verwenden Sie nach der Eingabe diese Option, um die Site nach Änderungen erneut zu veröffentlichen.

17. Verwenden Sie Ihre eigene FTP-App

Wenn Sie Ihre Dateien mit Ihrer eigenen FTP-Anwendung hochladen möchten, wählen Sie die Option Datei> Als HTML exportieren, um die kompilierte Site auf Ihrem Computer zu speichern. Stellen Sie dann wie gewohnt eine Verbindung zu Ihrer Site mit Ihrer FTP-Anwendung Ihrer Wahl her.

18. Beende!

Großartig - Ihre Visitenkarten-Halteseite ist mit Illustrator, Photoshop, Muse, Typekit und Business Catalyst von Adobe Creative Cloud in Rekordzeit vollständig. So einfach ist das - und das alles, ohne eine Codezeile schreiben zu müssen.

Dieser Artikel wurde ursprünglich in veröffentlicht Der ultimative Leitfaden für Adobe Creative Cloud .

Lesen Sie nun diese:

  • Designer sprechen über die Creative Cloud von Adobe
  • Neue Tools in der Adobe Creative Cloud : 12 aufschlussreiche Videos
  • Frei Photoshop-Aktionen um atemberaubende Effekte zu erzielen