So entwerfen Sie mit Adobe Muse eine beeindruckende Zielseite für eine Portfolio-Website
Die Liste der Do’s and Don’ts für eine Portfolio-Website ist endlos. In diesen Listen habe ich jedoch zwei Gemeinsamkeiten gefunden – es zu vermeiden, eine einzige Seite mit allem zu füllen, und die Zielseite und Navigation so einfach, attraktiv und leicht zugänglich wie möglich zu halten.
Das lernen Sie mit diesem Tutorial. Abgesehen davon werden Sie:
- Erfahren Sie, wie Sie Grafiken für eine Muse-Website mit Adobe Illustrator optimieren (unverzichtbar, damit der Inhalt der Website schneller geladen wird).
- Mit Photoshop können Sie Inhalte perspektivisch anzeigen.
- Erfahren Sie, wie Sie mit Adobe Muse eine professionelle Zielseite gestalten.
ANFORDERUNGEN DIESES TUTORIALS:
Um genau das zu verstehen und zu erstellen, was in diesem Lernprogramm gezeigt wird, müssen Sie bestimmte Assets aus verschiedenen kostenlosen Ressourcen herunterladen. Sie können jedoch auch ohne diese folgen.
-
Gehen Sie zu https://goo.gl/KVL9r1 und laden Sie dieses Bild für die Kopfzeile herunter. Seine Abmessungen müssen 1400 x 750 Pixel betragen. Hier ist ein Screenshot von der Website. Legen Sie diese Größe in benutzerdefinierte Größenfelder und laden Sie sie herunter.
-
Gehen Sie zu http://goo.gl/ZeHxOF und http://goo.gl/BASRSP und laden Sie das Symbolpaket für soziale Medien und das Abwärtspfeilsymbol herunter.
-
Die in diesem Tutorial verwendeten Logos können hier heruntergeladen werden (Hyperlink – Datei „assets.rar” ist an die E-Mail angehängt)
-
Gehen Sie zu http://goo.gl/mzw1Xh und laden Sie diesen iMac 27"-Bildschirmvektor herunter, der für die Anzeige des Projekts "Website-Design" verwendet wird.
-
Öffnen Sie die Creative Cloud Desktop-Anwendung und laden Sie iPhone- und iPad-Mini-Modelle wie unten gezeigt herunter. Sie werden automatisch zu Ihrer Photoshop-Bibliothek hinzugefügt.
![]()
SCHRITT 1: SO OPTIMIEREN SIE GRAFIKEN FÜR DAS WEB IN ADOBE ILLUSTRATOR:
1. Öffnen Sie die EPS-Datei mit sozialen Symbolen im Illustrator. Wählen Sie das Facebook-Symbol (quadratische Version) und drücken Sie Strg+Umschalt+G, um die Gruppierung dieser Symbole aufzuheben.
2. Klicken Sie außerhalb der Leinwand und wählen Sie das Facebook-Symbol erneut aus. Gehen Sie dann zum Transformationsfeld oben und geben Sie W = 19,5, H = 19,5 ein und drücken Sie die Eingabetaste.
3. Drücken Sie Strg+C und dann Strg+N. Geben Sie in diesem neuen Dokumentdialogfeld „static_facebook_icon” unter Name field, W=20 und H=20 ein. Stellen Sie sicher, dass Pixel aus der Dropdown-Liste Einheiten ausgewählt ist. OK klicken.
4. Drücken Sie Strg+V, um das Facebook-Symbol einzufügen und richtig auszurichten.
5. Gehen Sie zu Datei > wählen Sie „Für Web speichern” (Alt+Umschalt+Strg+S). Wählen Sie PNG-24 aus der Dropdown-Liste oben rechts. Klicken Sie auf Speichern und speichern Sie es am gewünschten Ort. Speichern Sie auch die Illustrator-Datei (Strg+S)
6. Wiederholen Sie die Schritte 2 bis 5 für Twitter-, Google Plus-, LinkedIn- und Behance-Symbole und speichern Sie sie für das Web.
HINWEIS: Wir haben uns für das PNG-Format entschieden, da es eine hervorragende Transparenz und vergleichsweise geringe Größe aufweist und sich am besten für Symbole und Vektoren eignet.
7. Optimieren Sie auf ähnliche Weise diese fünf Symbole für das Header-Bild. Ändern Sie diesmal ihre Farbe in Weiß. Wählen Sie dazu das Symbol aus, gehen Sie zum Dropdown-Menü Füllen, das sich oben links unter dem Anwendungsmenü befindet, wählen Sie weiße Farbe und speichern Sie für das Web. Jetzt haben Sie 10 Symbole – 5 graue und 5 weiße.
8. Optimieren Sie danach das Abwärtspfeil-Symbol (Farbe: Weiß, Dokument B= 30px, H=20px) und speichern Sie es für das Web als PNG-24.
9. Erstellen Sie nun ein neues Dokument der Größe 1400 x 750 Pixel und nennen Sie es header_image. OK klicken.
10. Gehen Sie zu Datei > Platzieren und suchen Sie nach dem Bild, das wir von pexels.com heruntergeladen haben. Klicken Sie auf die Leinwand, um sie zu platzieren und innerhalb der Leinwand anzupassen.
TIPP: Drücken Sie „Z” auf Ihrer Tastatur, halten Sie die Alt-Taste gedrückt und klicken Sie ein paar Mal auf die Leinwand, um ein wenig herauszuzoomen, sodass alles auf einmal sichtbar ist.
11. Wählen Sie das Rechteck-Werkzeug aus der Werkzeugbox auf der linken Seite des Anwendungsfensters. Erstellen Sie ein Rechteck und transformieren Sie es in B=1400, H=750px. Ziehen Sie dann dieses Rechteck auf das platzierte Bild.
12. Wenn dieses Rechteck ausgewählt ist, gehen Sie zum Dropdown-Menü „Füllung” und wählen Sie das Menü „Farbfeldbibliotheken” in der unteren linken Ecke. Gehen Sie in dieser Liste zu „Verläufe” und wählen Sie „Erdtöne”.
13. Wählen Sie Erdton 30 wie im Screenshot unten angezeigt und schließen Sie dieses Fenster.
14. Gehen Sie bei weiterhin ausgewähltem Rechteck zur Registerkarte Verlauf auf der rechten Seite des Anwendungsfensters. Wenn es nicht da ist, drücken Sie Strg+F9. Klicken, halten und ziehen Sie den mittleren Verlaufsregler ganz nach links.
15. Geben Sie dann im Feld „Deckkraft” (oben) 87 % ein und drücken Sie die Eingabetaste.
16. Speichern Sie dieses Bild für das Web. Wählen Sie diesmal JPEG und Qualität = 86 %. Speichern Sie außerdem die Illustrator-Datei.
SCHRITT 2: VORBEREITUNG VON ASSETS IN PHOTOSHOP:
17. Öffnen Sie Adobe Photoshop CC. Gehen Sie zu Datei > wählen Sie „Neu”. Geben Sie den Namen als „ecommerce_design”, B=619px und H=310px ein.
18. Wählen Sie im Bedienfeld „Bibliotheken” (auf der rechten Seite) das von uns heruntergeladene ipad mini-Modell aus und ziehen Sie es auf die Leinwand.
19. Halten Sie die Umschalttaste gedrückt und vergrößern Sie die Größe, indem Sie an den Ecken ziehen, und passen Sie sie wie unten gezeigt innerhalb der Leinwand an.
HINWEIS: Möglicherweise möchten Sie das Zoom-Werkzeug verwenden. Um zwischen Zoom- und Auswahlwerkzeugen zu wechseln, drücken Sie die Tasten „Z” und „V” auf Ihrer Tastatur. Wenn Sie das Bedienfeld „Bibliotheken” (oder ein anderes Bedienfeld) nicht finden können, gehen Sie einfach zum Menü „Fenster” > wählen Sie „Bibliotheken”.
20. Wählen Sie das Rechteck-Werkzeug und erstellen Sie ein Rechteck beliebiger Größe innerhalb der Leinwand (machen Sie sich keine Gedanken über die Füllfarbe). Ein Eigenschaftsfeld wird angezeigt. Geben Sie darin W=1024px und H=768px ein und stellen Sie sicher, dass das Kettensymbol nicht ausgewählt ist.
21. Klicken Sie nun auf das Kettensymbol, um es auszuwählen. Setzen Sie W=290px und drücken Sie die Eingabetaste. Reduzieren Sie dieses Eigenschaftsfenster.
22. Wählen Sie im Bedienfeld „Ebenen” auf der rechten Seite „Rectabgle 1″ aus, klicken Sie mit der rechten Maustaste darauf und wählen Sie „In Smart-Objekt konvertieren”.
23. Gehen Sie dann zum Bearbeitungsmenü > wählen Sie „Frei transformieren”. Öffnen Sie erneut das Menü Bearbeiten> Transformieren> Wählen Sie "Verzerren".
24. Halten Sie eine Ecke des Rechtecks und lassen Sie es mit einer Ecke des iPad-Bildschirms zusammenfallen. Tun Sie dies für alle vier Ecken und drücken Sie die Eingabetaste. Sie erhalten das folgende Ergebnis. Verwenden Sie bei Bedarf das Zoom-Werkzeug.
25. Klicken Sie im Ebenenbedienfeld mit der rechten Maustaste auf die Hintergrundebene und löschen Sie sie. Machen Sie außerdem die Ebene „Rechteck 1″ unsichtbar, indem Sie auf das kleine Augensymbol links davon klicken.
26. Wiederholen Sie die Schritte 18 bis 22, um ein weiteres Rechteck zu erstellen, konvertieren Sie es in ein intelligentes Objekt und lassen Sie es an allen Ecken mit den Ecken des iPad-Bildschirms übereinstimmen, und drücken Sie die Eingabetaste.
27. Machen Sie die Ebene „Rechteck 1″ sichtbar und die Ebene „ipad” unsichtbar.
28. Klicken Sie mit der rechten Maustaste auf die Ebene „Rechteck 1″ und wählen Sie „Inhalt bearbeiten”. Es wird in einem neuen Tab geöffnet. Gehen Sie zu Datei > Eingebettet platzieren, suchen Sie nach „screen1.webp”, das sich im heruntergeladenen Logos-Ordner befindet. Klicken Sie auf Ort und drücken Sie die Eingabetaste. Drücken Sie Strg+S. Diese Änderung wird in Rechteck 1 in unserer Hauptdatei aktualisiert. Schließen Sie diese Registerkarte.
29. Machen Sie dies auf ähnliche Weise für Rechteck 2 mit ‘screen2.webp’ und speichern Sie es. Verschieben Sie die Ebenen im Ebenenbedienfeld nach Ihren Wünschen nach oben oder unten. Löschen Sie die iPad-Ebene.
30. Klicken Sie mit der rechten Maustaste auf eine beliebige rechteckige Ebene und wählen Sie „Mischoptionen”. Ein Ebenenstilfeld wird angezeigt. Wählen Sie die letzte Option, die „Schlagschatten” ist, und geben Sie die Werte wie unten gezeigt ein.
31. In diesem Dialogfeld befindet sich direkt neben dem Mischmodus ein Farbfeld. Klicken Sie darauf und wählen Sie die folgenden Farbwerte aus.
32. Wenden Sie denselben Schlagschatteneffekt auch auf die zweite Ebene an. Drücken Sie Alt+Strg+Umschalt+S. Wählen Sie PNG-24 und klicken Sie auf Speichern. Sie erhalten das folgende Ergebnis.
HINWEIS: So können Sie eine Website oder ein beliebiges Bild perspektivisch platzieren. Sie müssen nur die genaue Auflösung des Geräts kennen, auf dem Sie es platzieren möchten. Tun Sie dies für iPhone- und Imac-Modelle zum Anzeigen von „Logo-Design”- und „Website-Design”-Projekten, wie unten gezeigt.
SCHRITT 3: ARBEITSPLATZ IN MUSE EINRICHTEN:
33. Öffnen Sie Adobe Muse CC. Sie werden mit einem Willkommensbildschirm begrüßt. Klicken Sie unter „Neu erstellen” auf „Site” und ein Dialogfeld „Neue Site” wird angezeigt.
HINWEIS: Eine andere Möglichkeit, eine neue Site zu erstellen, besteht darin, zu Datei > Neue Site oder Strg+N zu gehen.
34. In diesem Dialogfeld gibt es ein Dropdown-Menü mit der Aufschrift „Flüssigkeitsbreite”. Öffnen Sie diese, indem Sie darauf klicken, wählen Sie „Feste Breite” und ändern Sie die Werte für Seitenbreite und Spalten wie unten gezeigt. Der Wert des Feldes „Gutter” ändert sich automatisch.
35. Erweitern Sie die Option „Erweiterte Einstellungen” und vergewissern Sie sich, dass das Kontrollkästchen „Sticky Footer” aktiviert ist. Stellen Sie außerdem sicher, dass die Website innerhalb des Browserbereichs „zentriert” ausgerichtet ist. OK klicken. Muse bringt Sie in den PLAN-Modus.
36. Drücken Sie Strg+S und speichern Sie Ihre Site am gewünschten Ort. Ich empfehle Ihnen, einen separaten Ordner für Ihre Website zu erstellen und ihn bei jeder Änderung zu speichern.
HINWEIS: Die fließende Breite dient zum Erstellen eines ansprechenden Layouts. Wir haben uns für eine feste Breite entschieden, weil wir einen Scroll-Effekt erzeugen, der mit flüssigen Sites nicht funktioniert.
37. Doppelklicken Sie auf „A-Master”, das sich unten in einem grauen Bereich befindet. Wählen Sie in der Toolbox auf der linken Seite des Anwendungsfensters „Texttool” aus.
38. Erstellen Sie ein Textfeld auf der Leinwand. Drücken Sie Strg+T, um das Textfeld zu öffnen, suchen Sie im Dropdown-Menü „Schriftarten” nach Webschriftarten und wählen Sie „Webschriftarten hinzufügen”.
39. Ein neues Fenster erscheint. Wählen Sie die Registerkarte „Edge Web Fonts”, suchen Sie nacheinander nach den folgenden Schriftarten und laden Sie sie herunter:
- Monoton
- Telex
- Zahlen
- Eisenbahn
- Seite
- Ausgaben
Löschen Sie nach dem Herunterladen dieser Schriftarten das Textfeld.
40. Öffnen Sie das Bedienfeld „Ebenen” auf der rechten Seite oder gehen Sie zum Menü „Fenster” > wählen Sie „Ebenen”. Klicken Sie auf das kleine Papiersymbol mit gefalteten Kanten unten rechts. Klicken Sie zweimal darauf, um zwei weitere Ebenen zu erstellen.
41. Doppelklicken Sie auf „Ebene 1″. Das Fenster mit den Ebenenoptionen wird angezeigt. Geben Sie unter Name „home_header” ein und klicken Sie auf OK. Wiederholen Sie diesen Vorgang für die anderen beiden Ebenen und benennen Sie sie jeweils als „static_header” und „content”.
42. Ordnen Sie die Ebenen in der unten gezeigten Reihenfolge an, indem Sie sie einfach nach oben oder unten ziehen und die Änderungen speichern.
HINWEIS: Wir haben die Ebenen in dieser Reihenfolge angeordnet, weil wir möchten, dass unsere Kopfzeile über allem anderen steht. Ebenen sind eine effiziente Möglichkeit, den Inhalt der Website zu organisieren und zu stapeln, insbesondere wenn das Layout komplex wird.
43. Wählen Sie die Ebene „static_header” und reduzieren Sie dieses Bedienfeld.
SCHRITT 4: STATISCHEN HEADER ERSTELLEN:
44. Oben auf der Seite sehen Sie zwei Anleitungen. Der erste ist der „Seitenanfang”-Leitfaden und der zweite der „Kopfzeilen-Leitfaden”. Klicken, halten und ziehen Sie die Kopfzeile unten und stellen Sie sie auf 80 Pixel ein. Sie können dies mit Hilfe von Linealen tun. Dies ist unser Header-Bereich.
45. Wählen Sie das Rechteck-Werkzeug oder drücken Sie „M” auf Ihrer Tastatur. Erstellen Sie ein kleines Rechteck auf der Leinwand und stellen Sie sicher, dass die Randfarbe „rot” ist, was anzeigt, dass sich dieses Objekt in der Ebene „static_header” befindet.
46. Gehen Sie zu „Resize” (oder „Transform” in älteren Versionen von Muse) oben rechts, klicken Sie darauf und geben Sie H=80 ein.
47. Ziehen Sie dieses Rechteck und platzieren Sie es so im Kopfbereich, dass es an den Hilfslinien „Seitenanfang” und „Kopfzeile” einrastet.
48. Jetzt vergrößern wir die Breite des Rechtecks und stellen es auf 100 % ein, um es für jede Bildschirmgröße skalierbar zu machen. Erweitern Sie das Rechteck an beiden Kanten und stellen Sie sicher, dass es an den Seitenkanten einrastet. Wenn Sie den Rand erreichen, wird eine orangefarbene Hilfslinie angezeigt, die anzeigt, dass das Objekt gefangen wurde, und eine Meldung lautet W = 100 % oder W = 1400.
49. Klicken Sie bei ausgewähltem Rechteck auf das Dropdown-Menü Füllen unter dem Anwendungsmenü und wählen Sie weiße Farbe aus.
50. Klicken Sie neben „Füllung” auf das Wort „Strich”. Klicken Sie auf das Kettensymbol, um es zu brechen, und geben Sie „1″ in das untere Strichgewichtsfeld ein.
51. Klicken Sie danach auf das Dropdown-Menü Strichfarbe und geben Sie die Werte für R, G und B als jeweils 235 ein. Klicken Sie dann auf das Symbol für gefaltetes Papier, um ein neues Muster zu erstellen. Ein Farbfeld-Optionsfeld wird angezeigt. Klicken Sie auf Ok und speichern Sie die Änderungen.
52. Gehen Sie zu Datei > Platzieren. Suchen Sie nach „static_logo.webp” und klicken Sie auf „Öffnen”. Der Cursor ändert sein Aussehen in eine Platzkanone, die mit einem Bild geladen ist. Klicken Sie auf die Leinwand, um sie zu platzieren.
53. Verschieben Sie dieses Bild dann auf das Kopfrechteck und richten Sie es an seiner vertikalen Mitte aus (eine blaue Linie zeigt an, wann es zentriert ist) und rasten Sie es wie unten gezeigt am linken Rand ein.
54. Gehen Sie erneut zu Datei > Platzieren und wählen Sie alle statischen Social-Media-Symbole aus, die wir mit Illustrator optimiert haben. Klicken Sie auf Öffnen. Sie werden sehen, dass die Platzpistole eine Nummer (5) hat, die fünf geladene Bilder anzeigt. Wenn Sie zu einem anderen Symbol wechseln möchten, um es zuerst zu platzieren, können Sie die Pfeiltasten auf Ihrer Tastatur verwenden. Platziere sie einzeln.
55. Wählen Sie alle Symbole aus und gehen Sie zum Bedienfeld „Ausrichten”, das sich neben „Größe ändern” oben rechts befindet. Wählen Sie im Dropdown-Menü „Ausrichten an” die Option „An Schlüsselobjekt ausrichten” aus.
56. Geben Sie dann 11 in das Feld unter der Option „Abstände verteilen” ein. Klicken Sie auf die Optionen „A” und „B”, wie im Screenshot unten gezeigt.
57. Wenn diese Symbole ausgewählt sind, klicken Sie mit der rechten Maustaste und wählen Sie „Gruppe” oder Strg+G. Verschieben Sie diese Gruppe auf das Kopfzeilenrechteck und rasten Sie sie wie unten gezeigt am rechten Rand in Ausrichtung mit dem Logo ein.
58. Erstellen Sie ein Textfeld und geben Sie HOME darin ein. Drücken Sie Strg+T und wählen Sie Schriftart: Telex, Größe: 13, Farbe: Schwarz, zentriert und 120 % Zeilenabstand. Passen Sie Breite und Höhe dieses Textfeldes entsprechend der Schriftgröße an.
59. Erstellen Sie auf ähnliche Weise vier weitere Textfelder für ARBEIT, DIENSTLEISTUNGEN, KONTAKT und ÜBER. Wählen Sie alle aus, gehen Sie zum Ausrichtungsfeld und wiederholen Sie, was wir mit den Symbolen für soziale Medien gemacht haben. Ändern Sie diesmal den Verteilungsabstand auf 50. Gruppieren und verschieben Sie sie wie unten gezeigt auf das Kopfrechteck.
60. Jetzt heften wir diese Objekte an den oberen Rand des Browsers, wodurch unser Header statisch wird. Das heißt, es wird unabhängig vom Scrollen immer oben im Browser angezeigt. Wählen Sie dazu das Header-Rechteck aus, gehen Sie zu „Pin” oben rechts und klicken Sie in das obere mittlere Quadrat, wie unten gezeigt.
61. Fixieren Sie das Logo ebenso oben links, die Menügruppe oben in der Mitte und die Gruppe mit sozialen Symbolen oben rechts. Unser statischer Header ist fertig.
SCHRITT #5: FUSSZEILE EINRICHTEN:
62. Unten sehen Sie drei Hilfslinien – Fußzeile, Seitenende und Browserende. Klicken, halten und ziehen Sie die Hilfslinie „Unterseite des Browsers” und stellen Sie sie mit Hilfe von Linealen auf 770 Pixel ein. Ziehen Sie dann die Hilfslinie „Fußzeile” und rasten Sie sie an der Hilfslinie „Ende der Seite” ein. Dies ist unser Footer-Bereich.
63. Erstellen Sie innerhalb dieses Bereichs ein Rechteck von H = 270 und B = 546, lassen Sie seine Ober- und Unterseite mit der Fußzeile bzw. dem unteren Ende der Browser-Hilfslinien übereinstimmen.
64. Klicken Sie bei ausgewähltem Rechteck auf das Wort „Strich” und wenden Sie nur den oberen Strich mit der Stärke „1″ an (Strichfarbwerte: R = 235 G = 235 B = 235). Gehen Sie zum Bedienfeld „Ausrichten” und wählen Sie unter „Objekte ausrichten” die Option „Horizontale Mitten ausrichten” (das ist die zweite Option).
65. Platzieren Sie static_logo.webp und fügen Sie Text in dieses Rechteck ein, wie unten gezeigt. (Textschriftart: Arimo, Größe: 14, Farbe: R=37 G=37 B=37, zentriert und 120 % Zeilenabstand).
66. Das Copyright-Symbol, das Sie vor 2016 sehen, kann über das Bedienfeld „Glyphen” auf der rechten Seite des Anwendungsfensters hinzugefügt werden. Wenn es nicht dort ist, gehen Sie zu Fenster > Glyphen. Unsere Fußzeile ist fertig.
SCHRITT 6: HEADER- UND SCROLL-EFFEKT FÜR DIE HOMEPAGE ERSTELLEN:
67. Schließen Sie die Masterseite und kehren Sie zum Planmodus zurück.
68. Öffnen Sie die „Home”-Seite, indem Sie darauf doppelklicken. Öffnen Sie das Ebenenbedienfeld, wählen Sie die Ebene „home_header” aus und reduzieren Sie das Bedienfeld.
69. Machen Sie hier etwas Platz, indem Sie die Fußzeilenebene mit Hilfe von Linealen auf 4000 Pixel herunterziehen.
70. Erstellen Sie nun ein Rechteck mit 100 % Breite. Die volle Breite kann wie zuvor erreicht werden, indem das Rechteck von seinem linken und rechten Rand erweitert und an beiden Rändern der Seite eingerastet wird.
71. Erweitern Sie das Rechteck nach oben, indem Sie an seiner oberen Kante ziehen, und rasten Sie es wie unten gezeigt an der oberen Seitenführung ein.
72. Gehen Sie zum Größenänderungsbereich und geben Sie H=750px ein.
73. Klicken Sie bei ausgewähltem Rechteck auf das Wort „Füllen” (nicht auf das Farb-Dropdown-Menü) und dann auf „Bild hinzufügen”. Suchen Sie nach „header_image.webp”, das wir von Pexels heruntergeladen und in Illustrator optimiert haben. Wählen Sie im Dropdown-Menü „Anpassung” die Option „Zum Ausfüllen skalieren” und positionieren Sie sie in der oberen linken Ecke.
74. In diesem ‘Fill’-Optionsfeld selbst gibt es neben Fill eine Option namens ‘Scroll’. Klicken Sie darauf und geben Sie 0 in die Anfangs- und Endbewegungsfelder ein. Das bedeutet, dass das Bild stillsteht und der Inhalt sich bewegt, wodurch ein schöner und optisch ansprechender Scroll-Effekt entsteht.
75. Erstellen Sie ein Textfeld und geben Sie „ÜBER UNSER TEAM” ein. Schriftart: Telex, Größe: 13, linksbündig, Farbe: weiß und Zeilenabstand: 120 %. Verschieben Sie es und platzieren Sie es wie folgt in der oberen linken Ecke des Bildes.
76. Platzieren Sie alle sozialen Symbole, die wir für unser Header-Bild optimiert haben. Richten Sie sie in gleichen Abständen aus, wie wir es für den statischen Header getan haben. Gruppieren und platzieren Sie sie wie folgt in der oberen rechten Ecke des Bildes.
77. Erstellen Sie ein Textfeld. Es sollte W = 944, H = 92 sein. Geben Sie „WE DESIGN THE WEB” ein. Schriftart: Monoton, Größe: 72, zentriert, 120 % Zeilenabstand. Ändern Sie die Farbe des Wortes „WEB” in R=41 G=171 B=226 und Weiß für den Rest.
78. Erstellen Sie drei weitere kleine Textfelder für DIENSTE, KONTAKT und BLOG. Schriftart: Telex, Größe: 13, Farbe Weiß, zentriert und 120 % Zeilenabstand.
79. Platzieren Sie das Bild „header_logo.webp”. Passen Sie das Logo und diese vier Textfelder wie folgt an.
80. Gehen Sie zur Bibliothek „Widgets” auf der rechten Seite. Erweitern Sie den Abschnitt "Schaltflächen". Wählen Sie die Schaltfläche "Status" und ziehen Sie sie auf die Leinwand. Schließen Sie das Widgets-Bedienfeld.
81. Wählen Sie vorsichtig den kleinen Kreis innerhalb dieser Schaltfläche aus und klicken Sie auf Löschen.
82. Doppelklicken Sie in das Textfeld Lorem Ipsum, wählen Sie den gesamten Text aus, löschen Sie ihn und geben Sie „PORTFOLIO” ein.
83. Wählen Sie das Auswahlwerkzeug (Pfeilwerkzeug) aus der Werkzeugkiste aus. Gehen Sie zum Textfeld (Strg+T) und ändern Sie die Formatierung des „Portfolio”-Texts wie folgt.
84. Wählen Sie nun die Statusschaltfläche aus und ändern Sie die Größe auf B = 177, H = 43. Passen Sie das Textfeld innerhalb der Schaltfläche richtig an.
85. Wählen Sie die Schaltfläche aus. Gehen Sie zur Option "Eckenradius" (neben dem Strich). Klicken Sie auf alle vier Ecken, um sie flach zu machen.
86. Wenn die Schaltfläche ausgewählt ist, schauen Sie in die obere linke Ecke unter dem Anwendungsmenü. Sie werden feststellen, dass die „Zustandstaste” in Fettschrift geschrieben ist. Dies wird als „aktueller Auswahlbereich” bezeichnet. Es ermöglicht Ihnen zu wissen, was Sie ausgewählt haben.
87. Gleich daneben steht „Normal”. Klicken Sie darauf und Sie haben vier Staaten.
88. Ändern Sie für den Normalzustand die Füllfarbe in „Keine” und die Strichfarbe in Weiß.
89. Wählen Sie den Status „Rollover”, ändern Sie sowohl die Füll- als auch die Strichfarbe auf R = 41 G = 171 B = 226.
90. Für den Status „Maus gedrückt” und „aktiv” werden die erforderlichen Änderungen automatisch angewendet.
91. Wählen Sie erneut den Normalzustand aus, erweitern Sie das Bedienfeld „Übergang” unten. Aktivieren Sie das Kontrollkästchen „Fade” und geben Sie die Werte wie unten gezeigt ein. Speichern Sie die Änderungen.
92. Platzieren Sie das Bild „down_arrow.webp” unter der Schaltfläche. Sie sollten das folgende Ergebnis haben.
93. Unser Home-Header ist fertig. Gehen Sie im Browser zu Datei > Vorschauseite (Strg+Umschalt+E) und prüfen Sie, ob alles richtig funktioniert.
SCHRITT #7: INHALT HINZUFÜGEN:
94. Gehen Sie zurück zu Muse, öffnen Sie das Ebenenbedienfeld, wählen Sie die Ebene „Inhalt” und schließen Sie das Bedienfeld.
95. Scrollen Sie nach unten zum weißen Bereich unten und erstellen Sie ein Textfeld mit W = 464, H = 60. Geben Sie „UNSERE NEUESTE ARBEIT” ein. Schriftart: Raleway light, Größe: 46, Farbe: schwarz, zentriert und 120 % Zeilenabstand. Wählen Sie nun das Wort „RECENT” aus und ändern Sie die Schriftart in „Raleway Bold”.
96. Erstellen Sie zwei weitere Textfelder. Einer mit B=376, H=165 und der andere mit B=376, H=363.
97. Doppelklicken Sie in die erste und geben Sie „WEBSITE DESIGN” ein. Schriftart: Raleway Extra Light, Größe: 77, Farbe: schwarz, linksbündig, 100 % Zeilenabstand.
98. Doppelklicken Sie in das zweite und fügen Sie wie folgt einen Dummy-Text von lipsum.com ein.
- Für die Hauptüberschrift – Schriftart: Lato Bold, Größe: 30, Farbe: R=33 G=42 B=52, linksbündig und 120 % Zeilenabstand.
- Für den Hauptabsatz – Schriftart: Lato light, Größe: 21, Farbe: R=57 G=57 B=57, linksbündig und 120 % Zeilenabstand.
- Für die Überschrift „Kundenreferenz” – wie die Hauptüberschrift, aber die Größe ist 21.
- Für den Testimonial-Absatz – derselbe wie der Hauptabsatz, aber die Schriftart ist „Lato Light Italic”.
99. Wählen Sie die Statusschaltfläche „Portfolio”, kopieren Sie sie und fügen Sie sie unter dem Textfeld ein, das wir im vorherigen Schritt erstellt haben. Ändern Sie den Text von Portfolio zu ‘VIEW SITE’
- Für Normalzustand – Füllung: keine, Strich- und Textfarbe: schwarz.
- Für Rollover-Zustand – Füll- und Strichfarbe: R=41 G=171 B=226 und Textfarbe: Weiß.
100. Platzieren Sie das Bild „imac mit Website-Mockup”. Ordnen Sie das Bild, die Textfelder und Schaltflächen wie folgt an.
101. Scrollen Sie nach unten zum Leerraum und erstellen Sie ein Rechteck mit B = 1200, H = 5. Wenden Sie den oberen Strich mit Gewicht ‘1’ und Farbe R = 235 G = 235 B = 235 an. Platzieren Sie es wie folgt. Dies funktioniert als Trennzeichen.
102. Kopieren Sie die Textfelder und Schaltflächen, die wir in den Schritten 92 bis 95 erstellt haben, und fügen Sie sie unter dem Trennzeichen ein. Ändern Sie den Text des ersten Felds in „LOGO DESIGN” und den Schaltflächentext in „VIEW LIVE”.
103. Platzieren Sie „iPhone mit Logo-Modell” und ordnen Sie sie wie folgt an.
104. Kopieren Sie das Trennzeichen und fügen Sie es danach ein.
105. Kopieren Sie auf ähnliche Weise die Textfelder und die Schaltfläche unter diesem Trennzeichen und fügen Sie sie ein. Ändern Sie den Text des ersten Felds in „E-COMMERCE”.
106. Platzieren Sie „ecommerce_design.webp”, das wir in den Schritten 15 bis 30 mit Photoshop erstellt und optimiert haben. Ordnen Sie alles wie folgt an.
107. Erstellen Sie nun ein Rechteck von W = 1004, H = 363 ohne Füllung und oberen Strich mit Gewicht ‘1’ und Farbe: R, G, B = 235 jeweils.
108. Erstellen Sie innerhalb dieses Rechtecks zwei Textfelder. Geben Sie im ersten Text „WAS WIR GLAUBEN IST” ein (Schriftart: Raleway light, Größe: 35, Farbe: jeweils R, G, B=37, zentriert und 100 % Zeilenabstand). Wählen Sie das Wort „BELIEVE” aus und ändern Sie die Schriftart in „Raleway Bold”.
109. Geben Sie in das zweite Textfeld das berühmte Zitat von Milton Glaser ein, wie unten gezeigt (Schriftart: Lato Light Italic, Größe: 70, Farbe: R, G, B = 37, jeweils zentriert und 120 % Zeilenabstand).
110. Kopieren Sie eine der oben genannten Statusschaltflächen, fügen Sie sie ein und ändern Sie ihren Text in „UNSERE ARBEIT ANSEHEN”. Ordnen Sie alles wie folgt an.
SCHRITT #8: VERKNÜPFUNG:
111. Wählen Sie in der Toolbox „Link-Anker” oder drücken Sie „A” auf Ihrer Tastatur. Der Cursor ändert sein Aussehen in eine mit einem Anker beladene Platzkanone. Platzieren Sie diesen Anker wie unten gezeigt über dem Textfeld „UNSERE NEUESTE ARBEIT”.
112. Ein Dialogfenster mit Ankeroptionen erscheint. Geben Sie im Namensfeld „recent_work” ein.
113. Wählen Sie das Bild mit dem Pfeil nach unten unterhalb der Portfolio-Schaltfläche. Gehen Sie zum Dropdown-Menü „Hyperlinks” oben und wählen Sie „recent_work” aus. Speichern Sie die Änderungen und zeigen Sie eine Vorschau der Website an (Strg+Umschalt+E).
SCHRITT #9: HINZUFÜGEN VON ALTERNATIVTEXT, METADATEN, LEVEL-TAGS UND FAVICON:
114. Alternativer Text ist eine Möglichkeit, Suchmaschinen die Bedeutung der in einem Bild enthaltenen Inhalte verständlich zu machen, und muss für jedes einzelne Bild, das Sie Ihrer Website hinzufügen, bereitgestellt werden. Klicken Sie dazu mit der rechten Maustaste auf eines der drei Bilder, die wir platziert haben, und wählen Sie „Bildeigenschaften bearbeiten”.
115. Ein Bildeigenschaften-Dialogfeld wird eingeblendet. Hier sehen Sie zwei Felder. Einer ist „Tooltip” und der andere „Alt-Text”. Die grundlegenden Unterschiede zwischen den beiden sind wie folgt:
| TOOL-TIPP | ALLE TEXT |
|
|
HINWEIS: Sie sollten im Internet nach Methoden und wichtigen Überlegungen zum Hinzufügen von Alt-Text und Metadaten suchen, da dies grundlegende Aspekte für eine bessere SEO sind.
116. Um Metadaten hinzuzufügen, gehen Sie zurück zur Planansicht, klicken Sie mit der rechten Maustaste auf die Startseite und wählen Sie „Seiteneigenschaften”. Es erscheint ein neues Fenster mit drei Registerkarten, nämlich Layout, Metadaten und Optionen. Wechseln Sie zwischen diesen Registerkarten, erkunden Sie die Optionen und fügen Sie relevante Schlüsselwörter hinzu.
117. Ein weiterer wichtiger Faktor, den es zu berücksichtigen gilt, bevor die Site online geht, ist die Änderung einiger Texteigenschaften, um Level-Tags hinzuzufügen.
HINWEIS: Wenn Sie schriftlichen Inhalt auf einer Website hinzufügen, machen Sie normalerweise die Überschriften fett und größer als die Absätze (oder anderen Text), um den Unterschied zwischen ihnen zu verdeutlichen. Wir als Menschen können diesen Unterschied erkennen. Das Problem ist jedoch, dass der Browser nicht versteht, welcher Teil Ihres Textes die Überschrift und welcher der Absatz ist, es sei denn, Sie weisen jedem von ihnen bestimmte Level-Tags zu.
Sicherlich wird Ihre Seite online so dargestellt, wie Sie sie entworfen haben, unabhängig davon, ob Sie die Tags angewendet haben oder nicht (wegen CSS), aber um eine SEO-freundliche Website zu erstellen, ist es notwendig, diese beschreibenden Tags zu verwenden.
118. Wählen Sie dazu den Text aus, gehen Sie zum Textfeld (Strg+T) und unten sehen Sie ein Dropdown-Menü mit allen Tags. Wählen Sie diese entsprechend aus und speichern Sie die Änderungen.
119. Gehen Sie zu Datei > Site-Eigenschaften. Auf der Registerkarte „Inhalt” ist die letzte Option „Favicon” (in älteren Versionen von Muse befindet sie sich auf der Registerkarte „Layout”). Wenn Sie den Mauszeiger über das Wort „Favicon” bewegen, wird ein Tooltip angezeigt, der beschreibt, was es ist und welche Abmessungen es haben sollte. Es ist vorteilhaft, ein Favicon hinzuzufügen, da es dazu dient, Ihre Marke hervorzuheben und Ihre Website leicht identifizierbar zu machen, wenn die Benutzer sie mit einem Lesezeichen versehen haben.
SCHRITT #10: EXPORTIEREN DER WEBSITE:
120. Gehen Sie zuletzt zu Datei > Als HTML exportieren (Strg+E). Geben Sie im Feld Website-URL www.squaremaze.com ein und wählen Sie den Ort aus, an den die Website exportiert werden soll. OK klicken. Unsere Landingpage ist nun fertig. Sie können es (‘index.html’-Datei) in jedem beliebigen Browser in der Vorschau anzeigen und sein Aussehen und seine Leistung testen.
ENDERGEBNIS:
FAZIT
Die Verwendung anderer Anwendungen wie Illustrator, Photoshop, Fireworks, Fuse und Animate zur Erstellung hochwertiger Assets für eine Muse-Site hat sich immer als vorteilhaft erwiesen und außergewöhnliche Ergebnisse erzielt. Dies war nur ein Ansatz zur Gestaltung mit diesem großartigen Tool. Gehen Sie voran und entdecken Sie mehr. Danke.