Adobe Muse ist ein leistungsstarkes Tool, das das Webdesign überraschend einfacher und interessanter gemacht hat. Einfacher, da kein Code erforderlich ist, um professionelle Websites zu erstellen, und interessant in Bezug auf die vollständige Kontrolle über das Design im Gegensatz zu anderen Drag-and-Drop-Anwendungen.

Eines der beeindruckendsten Merkmale dieser WYSIWYG-Anwendung (What You See Is What You Get) ist, dass sie einen geeigneten Arbeitsablauf bietet, um den Designer bei der schrittweisen Entwicklung der Website zu unterstützen.

Nachdem Sie dieses Tutorial abgeschlossen haben, werden Sie:

Haben Sie ein klares Verständnis für jeden technischen und gestalterischen Aspekt von Muse.
Erfahren Sie, wie Sie in kürzerer Zeit professionell entwerfen.
Informieren Sie sich über einige kostenlose Ressourcen, in denen Sie atemberaubende Grafiken für Ihre Website finden können.
Erstellen Sie im Handumdrehen eine voll funktionsfähige One-Page-Website.

Anforderungen dieses Tutorials

Sie müssen bestimmte Bilder, Vektoren und Schriftarten herunterladen, um diese Website zu erstellen. Aber Sie können auch ohne diese Assets weitermachen. Um den Inhalt richtig zu organisieren, erstellen Sie einen separaten Ordner für Ihre Website.

Gehe zu pexels.com und lade Folgendes herunter:
- 4 Bilder der Größe 1160 x 480 für Diashow. Hier ist ein Screenshot von Pexels. Sie können diese Größe in das Feld „Benutzerdefinierte Größe” auf dieser Website eingeben.
- 6 Bilder der Größe 271 x 208 für den Bereich „Services”.
- 1 Bild der Größe 1160 x 692 für den Abschnitt „Kontakt”.
Gehen Sie zu freepik.com und laden Sie herunter:
- Ein Kreuzsymbol (Sie können dieses Symbol im Illustrator bearbeiten oder einfach die PNG-Datei von feepik herunterladen).
- 6 Gesichtsbilder für den Abschnitt "Testimonials".
Gehen Sie zu subtilpatterns.com und laden Sie das ‘Brickwall’-Muster für den Abschnitt ‘Testimonials’ herunter.
Während Sie mit diesem Tutorial fortfahren, werde ich Ihnen sagen, wie Sie die erforderlichen Schriftarten herunterladen (dies kann in Muse erfolgen).
Verwenden Sie den Dummy-Text von lipsum.com.

LASS UNS ANFANGEN!

Arbeitsplatz vorbereiten und Header einrichten

1 Erstellen Sie eine neue Site, indem Sie zu Datei > Neue Site (Strg+N) gehen und die Werte wie unten gezeigt eingeben. Vergessen Sie nicht, das Kontrollkästchen „Sticky Footer” zu aktivieren. Klicken Sie auf OK und Sie haben den PLAN-Modus. Doppelklicken Sie auf A-Master, das sich unten in einem grauen Bereich befindet. Auf dieser Masterseite erstellen Sie alles.

2 Wählen Sie das Textwerkzeug aus der Werkzeugbox auf der linken Seite des Anwendungsfensters. Klicken und ziehen Sie auf der Leinwand oder Seite, um ein Textfeld zu erstellen. Gehen Sie zum Textfeld (Strg+T), suchen Sie im Dropdown-Menü „Schriftarten” nach „Webschriften”, wählen Sie „Webschriften hinzufügen” und laden Sie die folgenden Schriftarten herunter:

Rametto Eins
Brocken
Fragen
Eisenbahn
Edel
PT Ohne
Ubuntu
Hummer

Löschen Sie nach dem Herunterladen dieser Schriftarten dieses Textfeld.

3 Gehen Sie zum Bedienfeld „Ebenen” auf der rechten Seite des Anwendungsfensters. Wenn es nicht dort ist, gehen Sie zum Menü Fenster > Ebenen. Sie sehen dort eine Ebene namens Ebene 1 (blaue Farbe). Dies ist die Standardebene und alles, was Sie erstellen oder auf der Leinwand platzieren, wird dort eingefügt. Doppelklicken Sie auf diese Ebene und nennen Sie sie „Header”.

4 Klicken Sie im Ebenenbedienfeld auf das kleine Papiersymbol mit gefalteten Kanten in der unteren rechten Ecke. Wenn Sie darauf klicken, wird eine neue Ebene mit roter Farbe erstellt. Doppelklicken Sie erneut auf diese Ebene und benennen Sie sie in „Inhalt” um.

5 Klicken Sie auf diese Inhaltsebene, ziehen Sie sie und platzieren Sie sie unter der Kopfzeilenebene. Wir haben dies getan, weil wir möchten, dass unser Header über allem steht.

6 Wählen Sie die Kopfebene aus und reduzieren Sie das Ebenenfenster.

7 Wählen Sie das Rechteck-Tool aus der Toolbox oder drücken Sie „m” auf der Tastatur.

8 Zeichnen Sie ein kleines Rechteck auf die Leinwand und vergewissern Sie sich, dass die Rahmenfarbe blau ist, was darauf hinweist, dass sich dieses Objekt innerhalb der Kopfebene befindet.

9 Gehen Sie zum Transformieren-Bedienfeld, das sich oben rechts im Anwendungsfenster befindet. Verlassen Sie die Breite (W) und geben Sie 50 in das Feld Höhe (H) ein und drücken Sie die Eingabetaste. (Mach dir keine Gedanken über X- und Y-Werte.)

10 Oben auf der Seite sehen Sie zwei blaue Linien (siehe Abbildung unten). Diese werden „Führer” genannt. Wenn Sie den Mauszeiger über die erste Hilfslinie bewegen, heißt es „Seitenanfang, zum Anpassen der Polsterung über der Seite ziehen” und die andere „Kopfzeile, zum Anpassen der Position ziehen”. Es ist sehr wichtig, diese Leitfäden ganz am Anfang einzurichten.

11 Nachdem wir nun ein Rechteck von H=50 erstellt haben, klicken Sie auf die Hilfslinie „Seitenanfang” und ziehen Sie sie, bis das Feld, das unten erscheint, sobald Sie mit dem Ziehen beginnen, Y=50 anzeigt.

12 Ziehen Sie auf ähnliche Weise die Kopfzeilenhilfslinie oben an die obere Seitenhilfslinie, bis dort Y=0 steht. Wir haben dies getan, um unseren Header-Bereich einzurichten. (Möglicherweise möchten Sie damit experimentieren, diese Hilfslinien an verschiedenen Positionen zu platzieren, um unterschiedliche Ergebnisse zu erzielen, aber für den Moment ist es gut.)

13 Wählen Sie das soeben erstellte Rechteck aus und ziehen Sie es in den Kopfbereich, damit es richtig passt.

14 Jetzt müssen wir die Breite des Rechtecks auf 100 % erhöhen, damit die Kopfzeile auf jeder Bildschirmgröße perfekt aussieht. Erweitern Sie das Rechteck an beiden Kanten und stellen Sie sicher, dass es an den Kanten einrastet. Es erscheint eine orangefarbene Hilfslinie, die sicherstellt, dass das Objekt eingerastet ist. Wenn Sie die Breite des Rechtecks erhöhen, zeigt das Popup W = 100 % oder W = 1160 an, wenn Sie den Rand erreichen.

15 Lassen Sie das Rechteck ausgewählt, klicken Sie auf das Wort Füllen unter dem Anwendungsmenü und stellen Sie die Optionen wie folgt ein. Wählen Sie die erste Farbe als Schwarz und die zweite Farbe: R=37, G=37, B=37.

16 Gehen Sie zu Datei > Website speichern. Speichern Sie Ihre Website jedes Mal, wenn Sie eine Änderung vornehmen.

17 Erstellen Sie ein Textfeld und geben Sie „example.com” ein und ändern Sie die Formatierung wie unten gezeigt.

18 Passen Sie die Größe des Textfelds so an, dass der gesamte Text in einer Zeile angezeigt wird. Wählen Sie dieses Textfeld aus und ziehen Sie es über das schwarze Rechteck. Richten Sie es an der vertikalen Mitte des Rechtecks aus (eine blaue Linie zeigt Ihnen an, wann es zentriert ist) und rasten Sie es wie unten gezeigt am linken Rand ein.

19 Erstellen Sie ein Textfeld und geben Sie „Home” ein. Ändern Sie die Formatierung wie folgt. Passen Sie die Breite und Höhe des Textfelds entsprechend an. Sie können dies auch über das Transformationsfenster tun. Meine ist W=52, H=17.

20 Kopieren Sie dieses Textfeld, fügen Sie es ein und geben Sie „Services” in das neue ein. Passen Sie die Breite an. Ziehen Sie dieses Textfeld und platzieren Sie es neben dem Zuhause mit einem sehr geringen Unterschied zwischen den beiden. Auch hier helfen Ihnen die Hilfslinien bei der richtigen Ausrichtung.

21 Kopieren Sie dieses Textfeld, fügen Sie es viermal ein und geben Sie „Warum wir”, „Testimonials”, „Kontakt” und „Newsletter” ein. Platzieren Sie diese Textfelder nacheinander in gleichen Abständen neben „Dienste”.

22 Wählen Sie bei ausgewähltem Auswahlwerkzeug und gedrückter Umschalttaste alle diese Textfelder nacheinander aus. Gehen Sie zum Textfeld und ändern Sie die Farbe in Weiß. Wählen Sie die Gruppe dieser Felder aus und platzieren Sie sie über dem Kopfzeilenrechteck. (Vertikal zentriert und am rechten Seitenrand ausgerichtet). Dies ist unsere Speisekarte.

23 Wählen Sie erneut mit ausgewähltem Auswahlwerkzeug und gedrückter Umschalttaste diese Textfelder, das Rechteck und das Textfeld example.com aus. Oben rechts sehen Sie eine Option namens Pin. Klicken Sie auf das Kästchen oben in der Mitte, um diese Elemente anzuheften. Das bedeutet, wenn der Benutzer durch Ihre Website scrollt, bleibt diese Kopfzeile oben fixiert. Dies ist sehr nützlich, da der Benutzer nicht ganz nach oben scrollen muss, nur um eine andere Option auszuwählen.

24 Wechseln Sie zum Ebenenbedienfeld und sperren Sie die Kopfzeilenebene. Klicken Sie dazu in das Kästchen links neben dem Ebenennamen. Wenn Sie eine Ebene oder ein beliebiges Objekt sperren, wirkt sich dies nicht auf das Erscheinungsbild aus, aber Sie können diese Elemente erst auswählen, wenn Sie sie entsperren. Wir haben dies getan, um die Wahrscheinlichkeit eines versehentlichen Verschiebens der Gegenstände vollständig auszuschließen.

25 Wählen Sie die Inhaltsebene aus und reduzieren Sie das Ebenenbedienfeld.

Diashow einrichten

26 Gehen Sie zur Widgets-Bibliothek auf der rechten Seite des Anwendungsfensters. Wenn es nicht dort ist, gehen Sie zum Menü Fenster > wählen Sie Widgets-Bibliothek. Erweitern Sie den Abschnitt „Diashows” und wählen Sie „Leer”. Klicken Sie auf dieses Objekt und ziehen Sie es auf die Leinwand. Ein schwarzes Fenster mit Diashow-Optionen wird eingeblendet.

27 Stellen Sie sicher, dass die Optionen wie im Bild unten gezeigt eingestellt sind. Deaktivieren Sie im Abschnitt „Teile” unten die Kontrollkästchen „Zurück”, „Weiter”, „Untertitel” und „Zähler”. Wir brauchen nichts davon.

28 Klicken Sie auf eine beliebige Stelle auf der Leinwand, damit dieses Popup verschwindet. Klicken Sie nun vorsichtig in die Diashow. Wenn Sie einmal darauf klicken, sehen Sie, dass „Slideshow” in den Bereich „Art der aktuellen Auswahl” geschrieben wurde. Es befindet sich in der linken oberen Ecke unterhalb des Anwendungsmenüs. In diesem Bereich können Sie sehen, was Sie ausgewählt haben. Dies ist eine sehr nützliche Funktion, wenn das Layout kompliziert wird. Klicken Sie erneut und Sie werden feststellen, dass in der Beschreibung „Hero Image” steht.

29 Erhöhen Sie die Breite des Heldenbilds manuell, indem Sie es von der Mitte aus erweitern. Fangen Sie es an beiden Rändern der Seite (um es auf 100% Breite zu bringen) und am unteren Rand des Kopfzeilenrechtecks, wie unten gezeigt.

30 Gehen Sie zum Transformationspanel und geben Sie H=500 ein.

31 Öffnen Sie die Diashow-Optionen erneut, indem Sie auf den kleinen blauen Kreis mit dem weißen Rechteck darin klicken (er befindet sich in der oberen rechten Ecke der Diashow).

32 Klicken Sie auf das Ordnersymbol neben der Option „Bilder hinzufügen…” und suchen Sie nach den Bildern, die wir für die Diashow heruntergeladen haben. Wählen Sie alle vier aus und klicken Sie auf Öffnen.

33 Gehen Sie zu Datei > wählen Sie „Vorschauseite im Browser” oder Strg+Umschalt+E und sehen Sie, wie Ihre Diashow funktionieren wird, sobald die Website live ist. Ich empfehle Ihnen, sich die Tastaturkürzel zu merken, die ich in diesem Tutorial verwende. Auf diese Weise können Sie Ihren Designprozess beschleunigen.

Abschnitt „Dienste” erstellen

34 Nachdem wir unsere Kopfzeile und Diashow eingerichtet haben, ist es an der Zeit, Abschnitte für jeden Eintrag zu erstellen, den wir unserem Menü hinzugefügt haben. Beginnen wir mit „Diensten”. Erstellen Sie ein Textfeld und geben Sie Services ein (alle Buchstaben klein) und ändern Sie die Formatierung wie folgt.

35 Doppelklicken Sie in dieses Textfeld und wählen Sie nur den Buchstaben „I” aus. Ändern Sie die Schriftart in „Chunk” und lassen Sie alles gleich. Passen Sie die Höhe dieses Textfelds an. Wenn Sie die Höhe verringern, erscheint an einer bestimmten Stelle eine gestrichelte Linie und die Box wird nicht kürzer. Verringern Sie die Größe danach nicht. Dies ist die niedrigste Höhe, die mit dieser Schriftgröße möglich ist.

36 Gehen Sie bei ausgewähltem Textfeld zum Transformationsbereich und stellen Sie den Rotationswinkel auf -90 Grad (90 Grad negativ) ein.

37 Verschieben Sie das Textfeld wie unten gezeigt auf die linke Seite der Leinwand.

38 Vielleicht möchten Sie ein wenig herauszoomen, um den gesamten Inhalt auf einmal zu sehen oder um die Objekte richtig anzupassen. Versuchen Sie dazu, im oberen Abschnitt für die Zoomstufe andere Werte (weniger als 100 %) einzugeben. Nachdem Sie den Wert eingegeben haben, drücken Sie die Eingabetaste.

39 Gehen Sie zu Datei > wählen Sie „Platzieren”. Wählen Sie das erste Bild aus, das wir für unseren Servicebereich heruntergeladen haben. Klicken Sie auf Öffnen.

40 Der Cursor ändert sein Aussehen in eine mit einem Bild geladene Platzkanone. Klicken Sie auf die Leinwand, um sie zu platzieren. Verschieben und platzieren Sie es so, dass es am oberen Rand des Textfelds „Dienste” ausgerichtet ist.

41 Kopieren Sie dieses Bild und fügen Sie es zweimal ein. Wählen Sie diese eingefügten Bilder einzeln aus und richten Sie sie im gleichen Abstand zum ersten Bild aus.

42 Wählen Sie das zweite Bild aus, klicken Sie mit der rechten Maustaste darauf und wählen Sie „Bild ersetzen” (das ist die letzte Option). Suchen Sie nach dem zweiten Bild und klicken Sie auf „Öffnen”. Ersetzen Sie auch das dritte Bild.

43 Erstellen Sie Textfelder für die Informationen zu Diensten und wenden Sie die Formatierung für Überschriften und Absätze an, wie unten beschrieben. Die Hilfslinien helfen Ihnen, sie richtig auszurichten.

Für Überschriften: Schriftart: Raleway Bold, Größe = 20, Farbe: Schwarz, linksbündig und 100 % Zeilenabstand.
Für Absätze: Schriftart: Questrial, Größe=15, Farbe: R=67 G=67 B=67, linksbündig und 120 % Zeilenabstand.

44 Platzieren Sie drei weitere Bilder wie in den vorherigen Schritten und erstellen Sie auf ähnliche Weise einen Beschreibungstext für sie. Sie sollten das folgende Ergebnis haben.

Endergebnis des Abschnitts „Dienstleistungen”.

Abschnitt „Warum wir” erstellen

45 Als nächstes folgt der Abschnitt „Warum wir”. Dieser ist ein wenig kompliziert. Seien Sie vorsichtig bei der Auswahl der Objekte. Erstellen Sie zunächst ein Rechteck mit 100 % Breite und H=996. Füllen Sie es mit einer Farbe (R=47, G=48, B=55). Klicken Sie mit der rechten Maustaste auf dieses Rechteck> Anordnen> wählen Sie "Nach hinten senden" (nicht nach hinten senden).

46 Erweitern Sie Ihren Arbeitsbereich, indem Sie auf die Hilfslinie „Ende der Seite” klicken und sie ziehen, sodass Sie genügend Platz haben, um Inhalte zu erstellen, die auf diesem Rechteck platziert werden, das wir gerade erstellt haben.

47 Scrollen Sie nach unten zum weißen leeren Bereich und erstellen Sie ein weiteres Rechteck mit B = 351 und H = 351. Füllen Sie es mit weißer Farbe und ohne Strich.

48 Gehen Sie zur Option „Eckenradius” (sie befindet sich neben dem Strich unter dem Anwendungsmenü). Klicke alle Ecken an, um sie abzurunden, und gib 500 in das Kästchen daneben ein.

49 Sie haben einen Kreis. Ziehen Sie diesen Kreis auf das Rechteck und passen Sie ihn wie folgt an. Neben dem Eckenradius gibt es eine Option namens „Deckkraft”. Geben Sie bei ausgewähltem Kreis 14 in dieses Feld ein.

50 Erstellen Sie ein Textfeld und geben Sie ein – warum wir (alles klein). Ändern Sie die Schriftart in Rammetto One, Größe = 100, Farbe R = 241 G = 244 B = 247, Zeilenabstand 100 %, und richten Sie sie zentriert aus. Setzen Sie dieses Textfeld in den Kreis und richten Sie es richtig aus.

51 Jetzt erstellen wir die gestrichelten Linien. Machen Sie ein Rechteck von W = 9 und H = 9, ohne Füllung. Klicken Sie neben „Füllung” auf das Wort „Strich”. Wählen Sie die Farbe R=241 G=244 B=247. Klicken Sie auf das Kettensymbol, um es zu brechen, und geben Sie „1″ in das untere Strichgewicht ein.

52 Kopieren Sie dieses einseitige Strichrechteck und fügen Sie es mehrmals ein. Ordnen Sie sie in einer Linie an (zoomen Sie mit dem Zoom-Werkzeug ein wenig hinein, wenn Sie diese Rechtecke nur schwer sehen können). Sobald Sie die gewünschte Länge Ihrer gestrichelten Linie erhalten haben, wählen Sie alle diese Rechtecke aus, klicken Sie mit der rechten Maustaste und wählen Sie „Gruppieren”. Kopieren Sie diese Gruppe und fügen Sie sie für andere gestrichelte Linien ein.

53 Versuchen Sie für geneigte gestrichelte Linien, verschiedene Rotationswinkel in das Transformationsfeld einzugeben. Ich habe 150 und 30 Grad verwendet. Sie müssen einige Rechtecke aus dieser Gruppe löschen, um kürzere Längen zu erhalten. Passen Sie diese Linien in der Nähe des Kreises wie unten gezeigt an.

54 Jetzt fügen wir etwas mehr Text für Nummern, Überschriften und Beschreibungen hinzu. Verwenden Sie die folgenden Einstellungen für jeden von ihnen und passen Sie diese Textfelder wie unten gezeigt an.

Für Zahlen: Schriftart=Rammetto One, Farbe: R=196 G=214 B=193, zentriert und 100 % Zeilenabstand, Größe: 200 (für Zahl „1″), 160 (für Zahlen „2″ und „3″) und 120 (für die Nummern ‘4’ und ‘5’).
Für Überschriften: Schriftart = Raleway Bold, Größe = 18, Farbe: Weiß, zentriert und 100 % Zeilenabstand.
Für Absätze: Schriftart=Questrial, Größe=16, Farbe: R=241 G=244 B=247, zentriert und 120 % Zeilenabstand.

Endergebnis des Abschnitts „Warum wir”.

Abschnitt „Testimonials” erstellen

55 Schaffen Sie erneut etwas Platz zum Arbeiten, indem Sie den unteren Rand der Seitenführung nach unten ziehen. Erstellen Sie ein Rechteck mit 100 % Breite und H=486.

56 Klicken Sie bei ausgewähltem Rechteck auf das Wort „Füllen” und dann neben der Bildoption auf „Bild hinzufügen”. Suchen Sie nach einem Brickwall-Musterbild, das wir heruntergeladen haben. Wählen Sie unter Anpassungsoption „Kacheln”, um das gesamte Rechteck mit dieser Textur zu füllen.

57 Scrollen Sie nach unten zum leeren Bereich und erstellen Sie mit Hilfe des Transformationsfelds ein Textfeld der Größe W = 406, H = 289. Geben Sie ein – „was andere zu sagen haben” (alles klein). Ändern Sie die Schriftart in Rammetto One, Größe = 70, machen Sie sie linksbündig, Farbwerte R = 37 G = 37 B = 37 und Zeilenabstand = 100 %.

58 Wenn dieses Textfeld ausgewählt ist, klicken Sie auf das Wort Strich, wenden Sie einen rechten Strich mit der Stärke eins und schwarzer Farbe darauf an. Ziehen Sie dieses Textfeld und platzieren Sie es über dem Rechteck mit Brickwall-Muster.

59 Der nächste Schritt besteht darin, Erfahrungsberichte von Kunden hinzuzufügen. Dazu verwenden wir die Vektorbilder für runde Gesichter, die wir von freepik.com heruntergeladen haben. Kommen Sie wieder zu einem weißen leeren Raum, damit Sie Ihre Komposition richtig anpassen können.

60 Gehen Sie zur Widgets-Bibliothek und ziehen Sie „Blank” aus dem Kompositionsabschnitt auf die Leinwand. Klicken Sie auf das Pluszeichen, um drei weitere Auslöser hinzuzufügen. Wählen Sie den ersten Trigger sorgfältig aus und stellen Sie Ihre Auswahl mit Hilfe des aktuellen Auswahlbereichs sicher, auf dem Trigger steht. Und direkt daneben gibt es eine Option namens "Aktiv". Klicken Sie darauf, um es zu erweitern. Wählen Sie den Status „Normal” und wählen Sie für diesen Status „keine Füllung” und „kein Strich”. Wiederholen Sie dies für jeden Zustand, der Rollover, Mouse Down und Active ist. Gehen Sie mit dem ersten ausgewählten Auslöser zum Transformationsfeld und geben Sie W = 10, H = 10 ein.

61 Wiederholen Sie den vorherigen Schritt für jeden Trigger, den wir haben. Wenden Sie also keine Füllung und keinen Strich für jeden Zustand an und transformieren Sie die Trigger auf eine Größe von 10 x 10. Bewegen Sie die Trigger näher zueinander.

62 Jetzt. Wir passen die Ziele für jeden dieser Auslöser an. Das große Rechteck, das Sie sehen, ist das Ziel. Wählen Sie den ersten Trigger und seinen normalen Zustand aus dem Statusfeld aus. Wählen Sie danach das Ziel für diesen Auslöser aus und wenden Sie für jeden Zustand keine Füllung und keinen Strich an. Gehen Sie dann zum Transformationsfeld und machen Sie das Ziel von W = 360, H = 370.

63 Wiederholen Sie den vorherigen Schritt für jedes Ziel. Stellen Sie einfach sicher, dass Sie zuerst den Auslöser auswählen, ihn in den Normalzustand versetzen, dann das entsprechende Ziel mit Normalzustand auswählen und dann keine Füllung und keinen Strich anwenden. Sie müssen nicht die Größe jedes Ziels ändern. Mach es einfach für einen und es wird auf alle angewendet.

64 Jetzt fangen wir an, Inhalt zu dieser Komposition hinzuzufügen. Gehen Sie zu Datei > Platzieren und öffnen Sie das erste Gesichtsbild und platzieren Sie es außerhalb der Komposition. Ziehen Sie dieses Bild und fügen Sie es jetzt in die Komposition ein. Sie werden sehen, dass ein blauer Kreis in der oberen rechten Ecke erscheint, der anzeigt, dass dieses Bild jetzt Teil der Komposition ist.

65 Erstellen Sie drei Textfelder – eines für den Namen der Person, eines für seine/ihre Bezeichnung und eines für die Aussage oder Bewertung. Wenden Sie die Formatierung wie unten beschrieben an und fügen Sie diese Textfelder in die Komposition ein. Stellen Sie einfach sicher, dass jeder von ihnen einen blauen Kreis an der Ecke hat.

Für den Namen der Person: Schriftart: Nobile Medium Italic, Größe = 18, Farbe: R = 37 G = 37 B = 37, zentriert und 100 % Zeilenabstand.
Für Bezeichnung: Schriftart: Nobile, Größe=15, Farbe: R=37 G=37 B=37, zentriert und 100 % Zeilenabstand.
Für Statements (mit Anführungszeichen): Schriftart: PT Sans Italic, Größe=18, Farbe: R=69 G=64 B=68, zentriert und 100 % Zeilenabstand.

66 Wenden Sie bei ausgewähltem Gesichtsbild auf jeder Seite einen Strich mit Gewicht 4 an, Farbe: Weiß, runden Sie alle Ecken ab und vergrößern Sie den Radius, bis er das Bild umschließt. Ich habe 100 als Eckenradien verwendet.

67 Gehen Sie zu „Effekte” (neben der Option für abgerundete Ecken) und aktivieren Sie das Kontrollkästchen „Schatten”. Setzen Sie die Werte als; Farbe = Schwarz, Deckkraft = 37 %, Unschärfe = 12, Winkel = 78 und Abstand = 5.

68 Wiederholen Sie die vorherigen Schritte (von 64 bis 67), um Inhalt zu jedem Ziel hinzuzufügen, und speichern Sie die Änderungen (Strg+S). Legen Sie diese Komposition über das Rechteck mit Brickwall-Muster.

69 Wählen Sie nun die gesamte Komposition aus (achten Sie auf den aktuellen Auswahlbereich) und erweitern Sie die Optionen, indem Sie auf den kleinen blauen Kreis klicken. Stellen Sie die Optionen wie unten gezeigt ein. Drücken Sie Strg + Umschalt + E und sehen Sie, ob es gut funktioniert.

70 Sie sollten das folgende Ergebnis erhalten.

Endergebnis des Abschnitts „Testimonials”.

Abschnitt „Kontakt” erstellen

71 Der nächste Abschnitt ist Kontaktieren Sie uns. Wir fügen in diesem Abschnitt ein Hintergrundbild, ein Formular und einige Textfelder hinzu. Erstellen Sie zuerst ein Rechteck mit 100 % Breite und H = 692. Füllen Sie es mit einem Bild, das wir für diesen Abschnitt heruntergeladen haben, und wählen Sie unter „Anpassen” die Option „Zum Ausfüllen skalieren”. Ändern Sie die Deckkraft auf 72 %.

72 Erstellen Sie ein weiteres Rechteck mit derselben Breite und Höhe und füllen Sie es mit einem Farbverlauf. Setzen Sie die Gradientenwerte als; Opazität = 90 % bis 46 %, Farbe: Schwarz bis R = 69 G = 64 B = 68, Brennpunkt = 66 %, Richtung: Horizontal und Größe: automatisch. Legen Sie dieses Rechteck über das Bild und stellen Sie sicher, dass es an jeder Kante einrastet.

73 Gehen Sie zur Widgets-Bibliothek. Wählen Sie unter Formularen „einfacher Kontakt” und ziehen Sie ihn auf die Leinwand. Ein Fenster mit Formularoptionen wird angezeigt. Geben Sie den Formularnamen ein: Kontaktformular, E-Mail an: Geben Sie Ihre E-Mail-Adresse ein, an die Sie die von den Besuchern eingegebenen Informationen erhalten möchten. Nach dem Senden: Wählen Sie „Auf der aktuellen Seite bleiben”. Die letzte Option ist „Gemeinsam bearbeiten”. Stellen Sie sicher, dass es überprüft wird. Auf diese Weise müssen Sie Änderungen nur an einem Feld vornehmen und sie werden auf alle angewendet. Klicken Sie auf eine beliebige Stelle auf der Leinwand, damit das Optionsfeld verschwindet.

74 Wählen Sie das Formular aus. Klicken Sie auf das Label „Name” und klicken Sie erneut darauf, bis „Label” im aktuellen Auswahlbereich angezeigt wird. Klicken Sie auf Löschen. Wiederholen Sie dies für E-Mail- und Nachrichtenlabels und löschen Sie sie.

75 Wählen Sie das Formular erneut aus und wählen Sie das erste Formularfeld mit der Aufschrift „Name eingeben” aus, bis im aktuellen Auswahlbereich „Texteingabe” angezeigt wird. Wenden Sie keine Füllung und einen unteren Strich (Gewicht eins und Farbe Weiß) für jeden Zustand an, dh von Leer bis Fokus. Wählen Sie für den Fehlerstatus keine Füllung und einen unteren Strich in roter Farbe mit Gewichtung 1 aus.

76 Wählen Sie danach bei ausgewähltem E-Mail-Feld > seinen leeren Status erneut aus und passen Sie die Textschriftart und -farbe für jeden Status wie unten beschrieben an.

Für leeren, nicht leeren und Fokusstatus: Schriftart: Questrial, Größe = 14, Farbe: weiß, linksbündig, 100 % Zeilenabstand und keine Kursivschrift.
Für den Rollover-Status: Ändern Sie einfach die Textfarbe in R = 196 G = 196 B = 196 und keine Kursivschrift.
Für den Fehlerstatus: Ändern Sie die Textfarbe in Rot und nicht in Kursivschrift.

77 Klicken Sie auf und wählen Sie die Schaltfläche Senden. Wählen Sie den Normalzustand, runden Sie alle Ecken mit 40 Radien ab und vergrößern Sie die Breite, wie im folgenden Screenshot gezeigt. Ändern Sie die Schriftart in Raleway Bold, Größe = 20, mittig ausgerichtet, Farbe: R = 241 G = 244 B = 247, Zeilenabstand: Passen Sie den Text „Senden” in der Mitte der Schaltfläche an, indem Sie diesen Wert erhöhen (ich habe 130 % verwendet). .

78 Ändern Sie für die Zustände „Rollover” und „Maus gedrückt” die Strichfarbe und die Textfarbe in Grau (R=127 G=127 B=127). Ändern Sie schließlich für den Status "Einreichen in Bearbeitung" die Strich- und Textfarbe in Himmelblau (R = 41 G = 171 B = 226).

79 Wenn Sie für diese Schaltfläche „Senden” den Status „Einreichen” auswählen, sehen Sie, dass es ein weiteres Textfeld mit der Aufschrift „Formular wird übermittelt…” gibt. Aktivieren Sie dieses Kontrollkästchen und wählen Sie den Status „Einreichen in Bearbeitung”. Ändere die Schriftart auf Questrial, Größe=14, Farbe: grau, zentriert und nicht kursiv. Wählen Sie den Status „Erfolgreich übermitteln” und ändern Sie die Textfarbe in Himmelblau (nicht kursiv). Wählen Sie den Status „Fehler senden” und ändern Sie die Textfarbe in Rot (nicht kursiv). Das Kontaktformular ist fertig.

80 Erstellen Sie zwei Textfelder. Geben Sie – kontaktieren Sie uns ein und geben Sie in der zweiten Zeile „Alle Felder sind Pflichtfelder” ein. Verwenden Sie für den Kontakttext die Schriftart: Rammetto One, Größe = 60, Farbe: R = 241 G = 244 B = 247, Zeilenabstand = 100 % und linksbündig. Verwenden Sie für den Text „Alle Felder sind Pflichtfelder” folgende Schriftart: Nobile italic, Größe = 26, Farbe: R = 241 G = 244 B = 247, Zeilenabstand = 100 % und linksbündig. Wenden Sie für dieses Textfeld den unteren Strich mit der Stärke 1 und der Farbe Weiß an.

81 Geben Sie einen Absatz in das zweite Textfeld ein, das wir erstellt haben. Verwenden Sie Schriftart: PT Sans Italic, Größe = 14, Farbe: R = 241 G = 244 B = 247, Zeilenabstand = 120 %, linksbündig und Abstand davor = 15.

82 Platzieren Sie diese Textfelder und das Formular auf dem Bild, das wir platziert haben. Stellen Sie sie wie folgt ein.

83 Erstellen Sie ein weiteres Textfeld für einige Kontaktinformationen wie Büroadresse, E-Mail und Telefonnummern. Setzen Sie dieses Textfeld auf das Bild. Sie sollten das folgende Ergebnis haben.

Endergebnis des Abschnitts „Kontakt”.

Fußzeile erstellen

84 Der letzte Abschnitt ist Fußzeile. Am unteren Rand befinden sich drei Hilfslinien – Seitenende, Fußzeile und Browserende. Was Sie jetzt tun müssen, ist sicherzustellen, dass die Führung „Ende der Seite” mit dem Ende des Abschnitts „Kontakt” einrastet und die Führung „Fußzeile” mit der Führung „Ende der Seite” übereinstimmt. Danach können Sie die Hilfslinie „Unterseite des Browsers” nach unten ziehen, um den Platz anzupassen, den Sie für die Fußzeile benötigen.

85 Erstellen Sie zwei Rechtecke mit 100 % Breite und H=168 für das erste und H=37 für das andere. Ändern Sie die Füllfarbe des großen Rechtecks in Weiß und verwenden Sie R = 47, G = 48, B = 55 für das kürzere.

86 Wählen Sie das erste Rechteck aus und versuchen Sie, es im Fußbereich zu platzieren. Dorthin wird es nicht gehen. Stattdessen wird die untere Seitenführung nach unten erweitert. Um dieses Rechteck zu einem Fußzeilenelement zu machen, aktivieren Sie das Kontrollkästchen „Fußzeile” oben rechts im Anwendungsfenster. Machen Sie es auch für das zweite Rechteck.

87 Platzieren Sie diese Rechtecke nun im Fußzeilenbereich und achten Sie darauf, dass das große Rechteck etwas über der Fußzeilenführung liegt. Die Unterseite des farbigen Rechtecks muss mit der Unterseite der Browserführung einrasten. Andernfalls sehen Sie nach der Fußzeile eine kleine weiße Lücke, die nicht schön aussieht.

88 Erstellen Sie Textfelder für die Fußzeile und geben Sie ein, was Sie wollen. Aktivieren Sie einfach das Kontrollkästchen „Fußzeile” für die Textfelder, die Sie hinzufügen möchten. Ich habe einen Text mit Haftungsausschluss und Copyright-Informationen hinzugefügt.

89 Das „Made with Adobe Muse CC”-Abzeichen kann aus der Widgets-Bibliothek im Abschnitt „Soziale Netzwerke” hinzugefügt werden. Sie können auch Links zu Ihrer Facebook-Seite, Twitter, Google+, LinkedIn, Pinterest, YouTube-Kanal oder Vimeo-Link hinzufügen.

90 Das Copyright-Symbol und viele andere Symbole, die Sie neben dem Text Alle Rechte vorbehalten sehen, können über das Bedienfeld „Glyphen” auf der rechten Seite des Anwendungsfensters hinzugefügt werden. Wenn es nicht da ist, gehen Sie zum Menü Fenster > wählen Sie Glyphen.

Abschnitt „Newsletter” erstellen

91 Bis jetzt haben wir Abschnitte für alle Menüpunkte entworfen, bis auf einen, und das ist „Newsletter”. Lass uns etwas Interessantes damit machen. Denken Sie an das Kreuzsymbol, das wir heruntergeladen haben, es wird hier verwendet (es ist in Ordnung, wenn Sie es nicht heruntergeladen haben, Sie können es trotzdem verfolgen). Wählen Sie zunächst das Textfeld „Newsletter” aus und notieren Sie dessen Breite und Höhe im Transformationsfeld. Meine ist 81 x 17.

92 Öffnen Sie nun die Widgets-Bibliothek und ziehen Sie „Lightbox Display” aus dem Kompositionsbereich. Löschen Sie die ersten beiden Trigger (befindet sich oben) und löschen Sie alle Beschriftungen (befindet sich unten). Stellen Sie die Größe des dritten Auslösers auf die gleiche Größe wie das Textfeld „Newsletter” ein, das 81 x 17 beträgt. Ändern Sie seine Füllung und Kontur für alle Status auf „Keine”.

93 Ziehen Sie das Newsletter-Textfeld und platzieren Sie es so in diesem Auslöser, dass alle Kanten des Textfelds mit den Kanten des Auslösers übereinstimmen. Ziehen Sie nun diese Gruppe und fügen Sie sie wieder in das Menü ein, wo sie vorher platziert war. Was wir getan haben, ist, dass wir einen Link zum Newsletter-Textfeld angebracht haben. Wenn der Benutzer darauf klickt, wird die Website ausgeblendet und das Ziel erscheint.

94 Der nächste Schritt besteht darin, unser Ziel anzupassen. Wählen Sie den grauen Bereich aus und vergewissern Sie sich, dass im aktuellen Auswahlbereich „Ziel” steht. Sie müssen dreimal klicken, um es auszuwählen. Ändern Sie die Füllung und den Strich für alle Status in „Keine”.

95 Fügen Sie zwei Textfelder und ein einfaches Kontaktformular hinzu (löschen Sie die Namens- und Nachrichtenfelder und behalten Sie nur das E-Mail-Feld). Ziehen Sie sie in diese Komposition und stellen Sie sicher, dass alle einen blauen Kreis an ihren Ecken haben.

96 Passen Sie das Formular wie im Abschnitt „Kontakt” an. Sie sollten das folgende Ergebnis haben. Verwenden Sie für das Textfeld "In Kontakt bleiben" die Schriftart: Lobster, Größe = 40, Farbe: weiß, zentriert und 100 % Zeilenabstand. Verwenden Sie für den Beschreibungstext darunter die Schriftart: Ubuntu Light Italic, Größe = 14, Farbe: weiß, zentriert und 120 % Zeilenabstand. Ändern Sie den Text der Schaltfläche „Senden” in „Abonnieren”.

97 Wählen Sie nun die Schließen-Schaltfläche aus, verschieben Sie sie und platzieren Sie sie wie unten gezeigt in der oberen rechten Ecke dieser Lightbox-Anzeige. Klicken Sie hinein, bis im aktuellen Auswahlbereich „Label” steht. Etikett löschen.

98 Ändern Sie die Füllung und den Strich dieser Schließen-Schaltfläche für alle Zustände auf „Keine” und machen Sie sie zu „B=40″ und „H=40″. Gehen Sie zu Füllung > Bild hinzufügen und suchen Sie nach dem Kreuzbild. Wählen Sie unter Anpassungsoption „Anpassung skalieren”.

99 Klicken Sie auf Newsletter und Sie sehen einen blauen Kreis an seiner Ecke. Klicken Sie darauf und stellen Sie sicher, dass die Optionen wie folgt eingestellt sind.

Endergebnis des Abschnitts „Newsletter”.

Erstellen von Hyperlinks

100 Die letzte verbleibende Aufgabe besteht darin, Links zu jedem Abschnitt hinzuzufügen. Wählen Sie dazu die Option „Link-Anker” im oberen mittleren Bereich oder drücken Sie den Buchstaben „a” auf Ihrer Tastatur. Sie werden sehen, dass der Cursor sein Aussehen in eine Platzkanone ändert, die mit einem Link-Anker geladen ist.

101 Wenn Sie auf die Leinwand klicken, um dies zu platzieren, wird ein Dialogfeld angezeigt, in dem Sie einen Anker umbenennen können.

102 Erstellen Sie Link-Anker für jeden Abschnitt, den wir entworfen haben, d. h. „Startseite”, „Dienstleistungen”, „Warum wir”, „Empfehlungen” und „Kontakt”. Platzieren Sie die Anker oben auf jedem Abschnitt. Der Home-Anker ist unten als Beispiel dargestellt. Das Platzieren dieser Anker ist ein wichtiger Schritt und sollte sorgfältig durchgeführt werden. Wenn der Benutzer auf einen bestimmten Link klickt, scrollt die Website zu der Position, an der der Anker platziert wurde.

103 Jetzt wenden wir die Verknüpfungen an. Wählen Sie dazu das Textfeld „Home” aus. Gehen Sie zur Option „Hyperlinks” (ganz oben) und klicken Sie auf den kleinen Abwärtspfeil, um die Liste zu erweitern. Hier sehen Sie alle Anker, die wir gerade platziert haben. Verknüpfen Sie es mit dem ‘Home’-Anker. Wiederholen Sie diesen Schritt für andere Textfelder außer Newsletter, da wir darauf eine Lightbox-Anzeige angewendet haben.

Endergebnis nach dem Erstellen von Hyperlinks

Feinschliff – Seiteneigenschaften ändern und Favicon hinzufügen

104 Klicken Sie im Planungsmodus mit der rechten Maustaste auf die Startseite und wählen Sie „Seiteneigenschaften”. Ein Dialogfeld wird angezeigt. Wählen Sie die Registerkarte „Optionen” und geben Sie unter dem Seitennamen – „Willkommen bei example.com” ein und klicken Sie auf „OK”. Dies ist der Text, der oben im Browserfenster angezeigt wird.

105 Gehen Sie zu Datei > Site-Eigenschaften. Auf der Registerkarte „Layout” ist die letzte Option „Favicon”. Wenn Sie den Mauszeiger darüber bewegen, erscheint ein Popup, das beschreibt, was ein Favicon ist und wie die optimale Größe sein sollte. Es ist gut, ein Favicon hinzuzufügen, da es dazu beiträgt, Ihre Marke hervorzuheben, und auch dazu dient, den Benutzern zu helfen, Ihre Website leicht zu identifizieren, wenn sie sie mit einem Lesezeichen versehen haben.

Testen und Exportieren

106 Testen Sie Ihre Website, indem Sie im Browser auf Datei > Website-Vorschau gehen oder Strg+Alt+E drücken. Wählen Sie dieses Mal nicht „Vorschauseite im Browser” aus, da die Links in der Seitenvorschau nicht funktionieren. Sie können versuchen, die Anker an verschiedenen Stellen zu platzieren, um sicherzustellen, dass die Website zum richtigen Abschnitt und zur richtigen Position scrollt, wenn der Benutzer auf einen Link klickt.

107 Gehen Sie zuletzt zu Datei > Als HTML exportieren (Strg+E). Geben Sie unter Website-URL einen beliebigen Namen wie „example.com” ein und wählen Sie den Standort aus. OK klicken. Die Webseite ist fertig.

Endergebnis jeder Seite

Titelseite

Abschnitt „Dienstleistungen”.

Abschnitt „Warum wir”.

Abschnitt „Erfahrungsberichte”.

Abschnitt „Kontaktieren Sie uns”.

Fußbereich

Rubrik „Newsletter”.

FAZIT

Ich bin sicher, dass Sie alles bekommen haben, was ich Ihnen versprochen habe, nachdem Sie diesem Tutorial gefolgt sind. Dies ist nur ein Beispiel. Spielen Sie ein wenig mit diesem großartigen Tool herum und entwerfen Sie atemberaubende und professionelle Websites, während Sie unterwegs endlose kreative Möglichkeiten erkunden. Vielen Dank.