|
Die spätere Hintergrundfarbe unserer Seite soll ein Grauton werden (#919191). Damit die Schatten, die unser Layout umranden werden, auch auf diesem Hintergrund erscheinen, müssen wir bereits jetzt mit dieser Hintergrundfarbe arbeiten und zuerst unser neues leeres Bild mit dieser Farbe füllen. Hierzu klicken wir einmal ganz unten links auf das Farbsymbol und geben in der sich öffnenden Farbpalette den Farbwert ein. Das Ganze wir mit OK bestätigt.
Danach wechseln wir zum Eimersymbol und klicken mit dem Eimer einmal in unser leeres Bild. Das Bild wird mit dem gewählten Grauton gefüllt.
Wir wechseln jetzt zum Pfad-Zeichenwerkzeug, um unsere abgerundeten Ecken in Angriff zu nehmen. Wenn wir wie in Schritt 1 das Werkzeug gewählt haben, stellen wir wie in Schritt 2 für unsere nächste Arbeit die Hintergrundfarbe „schwarz” ein und bestätigen mit OK.
Dann wählen wir die Form aus, mit der wir zeichnen wollen. Hierzu klicken wir auf das kleine Männlein in der Symbolleiste und danach auf Benutzerdefinierte Formen. Es öffnet sich das Formen-Archiv und wir entscheiden uns mit einem Kick für B10 und bestätigen mit OK.
Hier ziehen wir ein Rechteck auf. Dabei beachten wir zum einen, dass insbesondere links und rechts -wie im Screen zusehen - ein Abstand bleibt. Diesen Abstand benötigen wir dann später für unseren Schatten. Zum anderen achten wir beim Aufziehen der Form darauf, dass sie nicht zu lang wird, weil sich sonst die Ecken unschön verformen. Probiert es einfach mal aus - Ihr werdet sicher schnell ein Gefühl dafür bekommen.
Im nächsten Schritt wechseln wir zum Standard-Auswahlwerkzeug. Wir setzen im grauen Bereich an und ziehen ein Rechteck - quer über unserer schwarzen Form - auf. Der Bereich sollte in etwa die Größe haben, die wir später für unseren Kopfbereich brauchen.
Wenn wir jetzt mit dem Mousezeiger über den gezeichneten Ausschnitt gehen, wandelt dieser sich in ein Kreuz mit vier Pfeilen. Wenn dieses Kreuz erscheint, packen wir zu und ziehen den Ausschnitt rechts neben unser Bild auf die Arbeitsfläche. Hierbei wird der Ausschnitt automatisch in ein neues Bild abgelegt.
Denselben Vorgang wiederholt Ihr für den Fußbereich der Seite und erhaltet so zwei Einzelteile.
Als nächstes benötigen wir ein neues Bild in der exakten Breite unserer Einzelteile; in diesem Falle 961px. Die Höhe habe ich hier mal auf 300px festgelegt.
Wir haben jetzt vier einzelne Bilder:
Das Ganze sollte nun so aussehen. Wieder per Drag & Drop oder aber mit den vier Pfeiltasten auf Eurer Tastatur werden die drei Teile nun bündig aneinander geschoben.
Wenn die drei Einzelteile zusammengeschoben sind, müssen sie zusammen markiert werden. Hierzu geht man ähnlich vor, als würde man Text markieren. Mit gedrückter Hochstelltaste (Taste zum Schreiben von Großbuchstaben) klickt man nacheinander alle drei Teile an, so dass sie - wie im Screen zu sehen - alle einen gestrichelten Rahmen haben. Danach klickt man mit einem Rechtsklick auf die markierten Teile und klickt im Kontextmenü auf „Als Einzelobjekt einbinden”.
Mit einem erneuten Rechtsklick auf unsere nun zusammengefügte Grafik rufen wir ein weiteres Mal das Kontextmenü auf und wählen mit einem Klick den Punkt „Schatten” an. Es öffnet sich ein kleines Fenster, in welchem Ihr bitte die Einstellungen so vornehmt, wie es im Screenshot zu sehen ist.
Da es bei jedem Programm auch mal eine Panne geben kann, speichern wir unser zusammengefügtes Bild einmal zwischen.
Und wählt als Dateityp bitte .PNG aus. Dieses Format hat zwar eine etwas üppigere Dateigröße, dafür allerdings auch eine deutlich bessere Qualität.
Mit einem Rechtsklick auf die Grafik und der Auswahl „Alles einbinden” im Kontextmenü, binden wir unsere Grafik in den grauen Hintergrund ein.
Danach wechseln wir ein weiteres Mal zum Pfad-Zeichenwerkzeug.
Wie vorhin bereits einmal getan, stellen wir uns für das Pfadwerkzeug wieder eine benutzerdefinierte Form ein. Diesmal ist es die Form FI46. Die Farbe sollte auf schwarz eingestellt sein.
Zieht jetzt bitte mit der ausgewählten Form eine Grafik auf und schiebt diese nach unten an die schwarze Kante. Achtet darauf, dass die Grafik so platziert wird, dass sie an den eingekreisten Stellen sauber abschließt. Wenn das der Fall ist, bindet Ihr mit einem Rechtsklick und der der Auswahl „Alles einbinden” die Grafik in das Bild ein.
Jetzt kommt ein klein wenig Fummelkram. :-) Mag sein, dass es hierfür komfortablere Lösungen gibt, aber ich habe mir das Alles auch nur selbst angeeignet und zeige ich Euch auch hierbei, wie ich es machen würde.
Wir brauchen jedoch auch noch den oberen Bogen. Hierfür bedienen wir uns einfach mit dem Standard-Auswahlwerkzeug des unteren Bogens.
Fertig gedreht, verschiebt Ihr den Ausschnitt bündig an die obere schwarze Kante (siehe Screen) und bindet diese wieder mit einem Rechtsklick und „Alles einbinden” in das Bild ein.
So, damit steht erst mal die Grundform unseres Layouts und wir können beginnen, das Ganze etwas bunter zu gestalten. |
|
|