Share
In diesem Tutorial zeige ich Ihnen schnell, wie Sie eine Website mit Adobe Muse CC erstellen können. Wir werden unter anderem:
Laden Sie ein Video herunter oder abonnieren Sie Tuts + Web Design auf YouTube
Hallo! Ich heiße Michael Chaize. Ich bin ein Creative Cloud-Evangelist für Adobe. In diesem Tutorial werde ich Ihnen zeigen, wie Sie mit Adobe Muse CC schnell eine Website erstellen können.
Wenn Sie Adobe Muse zum ersten Mal starten, wird dieser Startbildschirm angezeigt, und Sie können sagen, dass ich dies möchte Erstellen Sie eine neue Website.
Und dann definieren Sie die Abmessungen Ihrer Seiten. Wenn Sie als anfängliches Layout Ihre Desktop-Benutzer, Tablet-Benutzer oder Telefonbenutzer ansprechen und die Seitenränder festlegen möchten. Also werde ich auf klicken OK, und ich werde den Planarbeitsbereich mit allen meinen Seiten entdecken.
Im Moment habe ich nur eine Homepage, aber hier kann ich sagen, dass ich auch eine Produktseite und vielleicht eine Info-Seite brauche. Und in den Produkten werde ich Produkt A und auf derselben Ebene Produkt B erhalten. So können Sie sehr schnell die Struktur Ihrer Website erstellen.
Sie haben auch Masterseiten. Jedes Mal, wenn Sie ein Designelement in die Kopfzeile oder die Fußzeile der Masterseite hinzufügen, wird es auf allen Ihren Seiten angezeigt. Für meine Kopfzeile erstelle ich ein Rechteck im Hintergrund. Vielleicht füllen Sie es mit einer dunklen Farbe.
Und ich möchte ein Logo hinzufügen. Dies ist also ein Bild. Sie können Bilder direkt von der Festplatte ziehen und ablegen. Okay, lassen Sie mich eine PNG-Datei ziehen und ablegen und platzieren. Sie sehen, dass Sie Smart Guides erhalten, um Ihre Elemente automatisch an den anderen Elementen auf der Bühne zu fangen.
Wenn ich nun zum Gesamtplan meiner Website zurückkehre, sehe ich, dass die Kopfzeile auf allen Seiten angezeigt wird, da sie Teil der Masterseite ist. Okay, jetzt möchte ich vielleicht ein Navigationsmenü hinzufügen, um durch die Seiten zu navigieren.
Hier werden Sie das verwenden Widgets Bibliothek. Dies ist eine Bibliothek mit interaktiven Widgets. Sie erhalten Schaltflächen, Komponenten wie die Anzeige des Lichtkästchens, Formulare, Menüs, Bedienfelder und Lichtshows. In diesem Fall verwenden wir ein horizontales Menü und platzieren es möglicherweise in der Kopfzeile.
Es erhält automatisch die im Plan definierte Struktur. Ich habe also schon drei Seiten im Navigationsmenü. Zuhause, Produkte, und Über. Eigentlich ist dies ein dynamisches Widget. Wenn ich also eine weitere Seite hinzufüge, die ich Contact nennen möchte, und wenn ich zu meiner Masterseite zurückkehre, habe ich bereits den Kontakt-Button.
Wenn Sie auf das blaue Symbol klicken, erhalten Sie die Einstellungen für die Widgets. Vielleicht möchten Sie auch die untergeordneten Seiten anzeigen. Also würde ich sagen, alle Seiten und dann kannst du stylen.
Um eine Web-Set-Schriftart auszuwählen, haben Sie hier die klassischen, Sie können aber auch Web-Fonts hinzufügen, die aus Typ-Kits stammen. Es durchsucht automatisch den Katalog der kostenlosen Schriftarten, die in typekit verfügbar sind. Und Sie können zum Beispiel sagen, dass Sie die verwenden möchten Darsteller Klicken Sie auf OK, und Sie werden der Liste der Schriftarten hinzugefügt.
Und Sie können es hier direkt auswählen. So erstellen Sie Ihr Menü und dann, wenn Sie einen Textabsatz hinzufügen möchten. Es sollte nicht auf der Masterseite sein, aber auf der Homepage. Sie müssen nur einen Block definieren und sagen Willkommen auf meiner Website.
Wieder werde ich nur das auswählen Darsteller Schriftart, vergrößern Sie vielleicht den Text, und hier geht es los.
Dann werde ich rechts ein weiteres interaktives Widget hinzufügen. Vielleicht eine Diaschau. Sie haben also eine andere Art von Diaschau, die grundlegende Diashow, die Vollbildanzeige, die Lichtbox.
Lass uns mit einer einfachen Diashow spielen, die hier ein Standardbild anzeigt. Jedes Mal, wenn Sie ein Widget hinzufügen, wird dieses blaue Symbol angezeigt. Hier haben Sie die Einstellungen und können dies sagen Ich möchte meine eigenen Bilder hinzufügen.
Die Größe der Bilder wird automatisch angepasst. Und dann können Sie die Legende festlegen, navigieren, um alle Bilder zu überprüfen, und Sie haben auch unterschiedliche Übergänge. Standardmäßig wird es ein- und ausgeblendet, Sie können sich jedoch auch für die horizontalen Folien entscheiden.
Das ist also meine Homepage. Vielleicht können wir auf der Info-Seite etwas hinzufügen. Natürlich können Sie Einfügeelemente von einer Seite auf eine andere kopieren. Wenn ich also alle meine Seiten mit der Kachelanordnung anzeigen möchte, kann ich einige Elemente kopieren.
Sie können auch eine Animation hinzufügen, also lassen Sie mich ein Bild hinzufügen. Und du hast diese Scrollbewegung. Dies ist ein sehr leistungsfähiges Panel, in dem Sie sagen können, dass Sie den Parallax-Crawler-Effekt hinzufügen möchten. Wenn ich also Motion hier überprüfe, habe ich hier die Schlüsselposition. Wenn Sie also die Seite nach unten scrollen und diese Schlüsselposition erreichen, möchte ich ein bestimmtes Verhalten erhalten.
Vielleicht kommt bei dieser Geschwindigkeit etwas von rechts. Und danach möchte ich sagen, dass ich nicht will, dass es sich bewegt, also möchte ich, dass es sich mit der gleichen Geschwindigkeit der Seite bewegt. Also nur eine. Sie können auch mit der Deckkraft spielen, um einige Schlüsselpositionen hinzuzufügen, wenn Ihr Objekt erscheinen soll und dann verschwinden soll.
Ich werde einen weiteren Textblock hinzufügen. Fügen Sie die Schaltfläche hinzu. Nur um die Dimension meiner Seite zu vergrößern, um die Auswirkungen zu zeigen. Wenn Sie also eine Vorschau dieser Seite im Browser anzeigen möchten, können Sie entweder Datei speichern, Seite im Browser in der Vorschau anzeigen oder direkt auf die neue klicken Vorschau Schaltfläche, die wir direkt in Adobe Muse gestartet haben und wenn ich nach unten scrolle, sehe ich mein Gebäude.
Es erscheint von rechts. Es bleibt stehen und verschwindet. Dies ist genau der Effekt, den ich dank des Scroll-Effekt-Bedienfelds in meinem Design definieren wollte.
Wenn ich nun diese Website mit meinem Kunden teilen möchte, um Feedback zu erhalten, haben Sie die Veröffentlichen Taste.
Sie müssen nur "Veröffentlichen" sagen, dann geben Sie einen Namen ein. Ich klicke auf OK, Adobe Business Catalyst, eine Hosting-Plattform, die für alle Creative Cloud-Mitglieder verfügbar ist, wird verwendet und Ihre Website wird unter dieser URL veröffentlicht, damit Sie sie mit Ihrem Kunden teilen können.
Hier ist es. Ich habe meine erste Seite. Produkt A, Produkt B. Wenn ich auf die Info-Seite klicke und nach unten scrolle, habe ich den Effekt direkt in meinem Browser. Und ich kann diese URL kopieren, mit meinen Kunden oder Kollegen teilen.
Adobe Muse CC richtet sich an Designer, die Webseiten ohne Codierung entwerfen möchten.
Jeder kann es nutzen und sehr kreativ werden. Sie können muse.adobe.com besuchen, um Adobe Muse herunterzuladen und auszuprobieren. Ich empfehle Ihnen außerdem, die Website des Tages zu besuchen, um die mit Adobe Muse veröffentlichten Websites zu überprüfen. Zu Ihrer Information wurden im vergangenen Jahr 2013 mehr als 500.000 Websites mit Adobe Muse erstellt und veröffentlicht.
Wenn Sie mehr über Adobe Muse erfahren möchten, bleiben Sie auf tutsplus.com auf dem Laufenden und überprüfen Sie die Adobe Muse-Kategorie, um neue, neue Tutorials und Videos zu erhalten, um zu lernen, wie Sie fantastische Websites erstellen.
Artwork von Črtomir Just
Accentsconagua