Muse CC 2018 Grundkurs

Hintergrundbild definieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Im zeitgemäßen Webdesign werden Webseiten oder Seitenbereiche gerne mit attraktiven, großflächigen Bildern hinterlegt. In Adobe Muse verwirklichen Sie das auf ganz einfache Weise.

Transkript

Damit Sie mir bei meinen nächsten Schritten leichter über die Schulter schauen können, werde ich hier zuerst einmal alle unnötigen Bedienfelder schließen. Und jetzt werde ich mich darüber hinaus noch ein bisschen auf der Seite herauszoomen, damit das hier übersichtlicher wird. Und ich habe jetzt gerade erst das Menü hier oben hingesetzt, aber jetzt komme ich auf einmal auf die Idee, nein, oberhalb von dem Menü da will ich einen Grafiker haben, die wirklich Lust beim Besucher der Webseite macht, nach New York zu fliegen. Und was ich jetzt hier mache ist, ich markiere jetzt hier alles was man hier auf der Seite draufhat, einfach mit diesem Lasso. Und jetzt ziehe ich das Ganze, naja sehr, sehr, sehr, sehr großzügig nach unten Ich will mir also einfach oben Raum schaffen. Dabei kann es mir jetzt hier schnell passieren, dass das jetzt nicht mehr perfekt ausgerichtet ist, so wie es ursprünglich mal war. Kleiner Trick dazu, man drückt und hält auf der Tastatur einfach die Umschalttaste, dann ist auf jeden Fall sicher, dass wenn Sie nun das Bild nach unten ziehen, dass es dann perfekt senkrecht nach unten geschoben wird. So, jetzt haben wir hier Raum geschaffen und jetzt soll hier oben eine Grafik und dafür gibt es jetzt mehrere Möglichkeiten. Die erste Idee, auf die man sicherlich kommt ist, dass man schlicht und ergreifend hier „Datei“, „Platzieren“ verwendet. Aber glauben Sie es mir, dann kriegen wir nicht den perfekten Effekt, den ich hier gerne haben will. Deswegen nehme ich jetzt hier einen Rahmen und ihr diesen Rahmen von ganz links oben, hier nach unten auf. Dieser Rahmen muss in der Tat eine bestimmte Größe haben und zwar 681 Pixel, warum weiß ich das. Naja, weil ich das Bild eben entsprechend in Photoshop vorher vorbereitet habe und deswegen möchte ich das jetzt hier auf 681 Pixel einstellen. Ich kriege das aber ehrlich gesagt, mit der Maus gar nicht so präzise hin deswegen, dass ich hier einfach los, klicke nun auf „Transformieren“ und dann kann ich im Übrigen auch noch ein paar andere Dinge kurz überprüfen. Die Breite steht hier auf 960, die komplette Breite meiner Webseite. Darüber hinaus, die Höhe soll auf 681 stehen. Achtung, bevor sie jetzt hier etwas eintragen, sorgen Sie dafür, dass die Kette gesprengt ist, weil wenn ich jetzt hier 681 eingetragen hätte und die Kette wäre geschlossen gewesen, hätte sich auch die Breite geändert. Das will ich in der Tat nicht. Des Weiteren will ich, dass das komplett von hier oben anfängt, deswegen ist dieser Offset hier von -20 absolut in Ordnung. Hier unten, da gibt es den Punkt „Skalieren“ und da ist es nun wichtig, dass hier wirklich steht „An Browserbreite anpassen“. Und nun geht man hier oben auf „Fläche“ und dort kann man jetzt sagen „Bild hinzufügen“, das wähle ich nun einmal aus. Das Bild welches ich hinzufügen möchte, das heißt auch schon passenderweise „Hintergrundbild“. Also fügen wir das hier an dieser Stelle hinzu und jetzt haben wir hier dieses Bild. Ehrlich gesagt, ist das im Moment viel zu groß, deswegen wähle ich jetzt hier bei „Anpassen“ nicht „Originalgröße“ aus, sondern „Füllend skalieren“. Wenn ich das jetzt hier auswähle, dann sehen Sie, jetzt sieht das Ganze so aus, aber das Bild ist jetzt hier links oben quasi, angedockt und wird dann hier nach rechts skaliert und mein Fenster ist einfach nicht so breit. Und was ich jetzt hier einfach machen muss, ist bei „Position“, da wähle ich jetzt hier oben, diesen mittleren Punkt aus und jetzt habe ich genau das erreicht, was ich erreichen wollte und das geht eben nur hier über diese Funktion, dass wir hier etwas in den Hintergrund legen. Wenn Sie ganz normal ein Bild positionieren, dann stehen Ihnen diese Möglichkeiten hier nicht zur Verfügung und jetzt starte ich das ganze einfach mal in einem Webbrowser. „Seitenvorschau in Webbrowser“ und jetzt sieht man jetzt hier gleich das Bild. Und jetzt sieht das Ganze so aus und die ganze Arbeit habe ich jetzt aus einem relativ einfachen Grund gemacht, weil was ist denn, wenn das Bild vielleicht auf dem anderen Gerät etwas kleiner ist? Und Sie sehen, ich verkleinere jetzt hier einmal das Fenster, aber der Mittelpunkt hier, die Flucht von dieser Straße, die bleibt letztendlich immer erhalten. Wenn ich das Bild größer mache, das kann ich Ihnen leider hier nur sehr bedingt auf meinem Bildschirm simulieren, aber wenn ich das Bild jetzt größer mache, also das Browserfenster größer mache, das mache ich jetzt in meinem Fall mal, indem ich das Fenster zur linken Seite rausschiebe. Und jetzt kann ich hier, das Ganze anfassen und kann das Ganze jetzt hier vergrößern, dann sehen Sie, funktioniert das Ganze hier auf der rechten Seite immer noch sehr, sehr gut, weil hier, diesem Bild habe ich links und rechts einen schwarzen Bereich mitgegeben. Und genau das ist es, was ich letztendlich hier erreichen wollte und deswegen habe ich dieses Bild so ein bisschen von hinten durch die Brust, ins Auge positioniert, über diese Technik. Nun möchte ich, dass der Leerraum hier unten eben nicht mehr vorhanden ist. Jetzt möchte ich, dass das Ganze wieder so ausschaut, wie es ausschauen soll. Dazu schiebe ich jetzt als allererstes mal das Menü nach oben und ich möchte, dass das Menü genau am Bild andockt. Jetzt zoome ich mich hier, bei diesem Menü mal ein wenig hinein. Sagen wir mal hier 125 Prozent, ich muss ein bisschen nach oben gehen und dann werden Sie mir sicherlich Recht geben, das sieht noch nicht so schön aus. Jetzt haben wir hier diese weißen Blitzer, wenn man so will. Es gibt jetzt mehrere Möglichkeiten, diesen weiße Blitzer zu begegnen. Ich mache das jetzt dadurch, dass ich dort schlicht und ergreifend eine schwarze Fläche in den Hintergrund lege. Damit ich das jetzt wieder leichter machen kann, zoome ich mich ein wenig heraus, wähle jetzt hier das ganz normale „Rechteck-Werkzeug“ und beginne links oben, hier so und ziehe das jetzt hier, auf der rechten Seite so auf. Und da wollen wir natürlich eine schwarze Flächenfarbe haben. Jetzt liegt das schwarze Rechteck vor dem Menü, das ist natürlich nicht Sinn der Übung, deswegen sage ich jetzt hier einfach „In den Hintergrund“ und jetzt schaut das Ganze so aus. Jetzt können wir uns erneut das Ganze einmal im Webbrowser anschauen, „Seitenvorschau in Browser“, das Ganze wird neu gerendert. Und dann sieht das Ganze jetzt hier so aus und wenn man jetzt so ein bisschen nach unten scrollt, dann hat man hier, diese Information. Jetzt haben wir hier noch ein bisschen viel Raum, das denke ich, ist sicherlich kein Problem, das zu beheben. Dann markiere ich das wieder erneuert und ziehe das schlicht und ergreifend ein wenig nach oben. Wichtig ist auch hier wieder, dass man nicht irgendwie etwas vergisst zu markieren. Und auch hier wieder die Umschalttaste drücken, damit wir hier sicher sind, dass das hier wirklich gelockt ist und jetzt kann man so bisschen darüber diskutieren, ist das hübscher. Ich persönlich finde, dass der Abstand hier genauso groß sein sollte, wie hier der Abstand. Also positioniere ich das Ganze nun, klicke hier oben auf „Transformieren“ und dann wähle ich jetzt hier, die Y-Position eben auf den gleichen Abstand bringen, also einfach „+ 20“. Dann wird das Ganze hier ein wenig nach unten verschoben und jetzt haben wir hier den gleichen Abstand, wie hier und auch hier haben wir wieder dafür gesorgt, dass die Abstände letztendlich sehr, sehr schön gleichmäßig sind. Schauen wir uns das Ganze noch einmal hier im Browser an. Dann sieht das Ganze nun so aus. Und das finde ich persönlich jetzt schon sehr, sehr schön, aber wenn ich jetzt hier quasi ganz oben bin und ich jetzt hier auf diesem Bildschirm, das Ganze sehen würde. Dann fehlt hier noch etwas, das muss natürlich nicht so sein, deswegen werden wir das selbstverständlich, auch noch ändern.

Muse CC 2018 Grundkurs

Lernen Sie mithilfe von Muse CC 2018 Websites zu gestalten ohne Programmier-Vorkenntnisse haben zu müssen.

7 Std. 0 min (66 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:16.03.2018

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!