Gestaltung und Fertigstellung des Layouts

Nachdem wir  unsere Blumengrafik fertig gestellt haben, werden wir sie auch sofort in unser Layout einarbeiten.
Dazu gehen wir mit einem Rechtsklick ins Bild und wählen im Kontextmenü „Kopieren”.

Im nächsten Schritt machen wir einen Rechtsklick in unser Grundlayout und wählen im Kontextmenü „Einfügen”. Wir schieben die Grafik an die gewünschte Stelle im Bannerbereich und binden diese mit einem weiteren Rechtsklick und der Auswahl „Alles einbinden” in unser Grundlayout ein.

Danach geht es an den Schriftzug. Um auch wirklich die passende Farbe für unsere Schrift zu haben, wählen wir zuerst das Pipetten-Werkzeug aus und klicken damit einmal in die grüne Blume. Wenn man unten links das Farbfensterchen im Auge behält, kann man beobachten wie dieser Farbton dort übernommen wird.

Mit einem Klick  in eben dieses kleine Farbfensterchen kopieren wir den Wert für den ermittelten Farbton (#45E021) in unsere Zwischenablage.

Dann wechseln wir mit einem Klick auf das „T”- Symbol in der linken Symbolleiste zum Textwerkzeug und klicken im Anschluss sofort in das Farbauswahlsymbol für die Textfarbe. Es öffnet sich wieder der Farbwähler und wir fügen den Farbwert aus der Zwischenablage an derselben Stelle wieder ein. Damit haben wir die Schriftfarbe fertig eingestellt.

Nun wählen wir - wie im Screenshot zu sehen -  eine geeignete Schriftart, die Schriftgröße und ggf. eine Schriftdekoration wie zum Beispiel „Fett” aus. Mit einem Klick in unser Bild erhalten wir einen blinkenden Cursor und können mit dem Schreiben beginnen.
Mit ein wenig Fingerspitzengefühl kann man den Schriftzug anschließend mit der Mouse auch noch ein wenig verschieben.
Wir wechseln nochmals die Schriftart und geben den zweiten Schriftzug ein.
Ist die Schrift an der gewünschten Stelle platziert, binden wir wie gewohnt mit einem Rechtsklick und der Auswahl „Alles einbinden” die Schrift in unser Bild ein.

Als nächstes soll die grüne Blume in der unteren rechten Ecke unseres Layouts eingearbeitet werden. Hierfür nutzen wir wieder das Standard-Auswahlwerkzeug und ziehen um die grüne Blume im Bannerbereich ein Quadrat auf. Die Blume ist danach mit einer gestrichelten Linie umgeben. Gehen wir jetzt mit dem Mousezeiger über die Blume, wandelt sich dieser wieder zu dem Kreuz mit Pfeilen und wir packen an und ziehen den Ausschnitt an die gewünschte Stelle im Fußbereich des Layouts.
Ist die Blume dort platziert, wo wir es wünschen, wird diese wie gewohnt über einen Rechtsklick und „Alles einbinden” in das Gesamtbild fest eingebunden.

Im folgenden Schritt erstellen wir den Spiegeleffekt für den Fußbereich der Seite. Hierzu ziehen wir mit dem Standard-Auswahlwerkzeug im unteren Bereich unseres Layouts ein Rechteck auf und kopieren diese Auswahl in unsere Zwischenablage.

Nachdem wir die Kopie wieder ins Bild eingefügt haben, spiegeln wir diese vertikal. Wie das geht, ist im Screenshot genauestens zu sehen.

Genauso wie wir es vorhin mit dem Blumenbild getan haben, blenden wir auch diese Grafik aus und wiederholen das Ausblenden mehrfach. So lange, bis ein ansehnliches Ergebnis erzielt ist.

Die ausgeblendete Grafik schieben wir in angemessenem Abstand unter unser Layout (achtet bitte darauf, dass die Schatten nicht abgeschnitten werden!) und binden sie auf die bereits bekannte Art und Weise ein.

Da wir gerade erst die grüne Schrift genutzt haben und die Einstellungen im Hintergrund sehr wahrscheinlich noch bestehen, erstellen wir schnell noch einen kleinen Button für den Top-Link.
Dazu legen wir ein kleines Bild an, füllen es mit dem Eimer schwarz ein und wechseln zum Textwerkzeug. Hier stellen wir nochmals die vorhin genutzte Schreibschrift ein und spielen ein wenig mit der Textgröße, bis sie in unser kleines Bildchen passt. In Großbuchstaben schreiben wir „TOP” in das Bild und binden die Schrift ein. Auch dieses Bild speichern wir webtauglich als .PNG Datei ab.

Unser Layout-Entwurf ist damit fertig und muss für den Einbau in NOF zugeschnitten werden. Wie das gemacht wird seht Ihr  hier.