Start

 


Die grafischen Vorbereitungen

 


Die Umsetzung in NOF

BlumeGr Einleitung Grafikarbeit & Ziel
BlumeGr Erstellung des Grundlayouts
BlumeGr Spiegeleffekt der Bannergrafik
BlumeGr Gestaltung & Fertigstellung des Layouts
BlumeGr Zuschneiden des Layouts für NOF
BlumeGr Erstellung der Navigationsschaltflächen
BlumeGr Fotos rahmen, drehen und überlappen
BlumeGr Erstellung der Hintergrundgrafik

 

BlumeOr Anlegen eines neuen Projektes und erste Schritte
BlumeOr Grundlegende Einstellungen in der Design-Ansicht
BlumeOr Aufbau eines Tabellen-Layouts
BlumeOr Anlegen von Seitenstruktur & Navigation
BlumeOr Zweitnavigation & Top-Link ohne Anker
BlumeOr Vervielfältigen der linken Naviationsleiste
BlumeOr Inhalte einfügen und formatieren

 

 

 

 

Die Fotos rahmen, drehen und überlappen

 

Im vorletzten Schritt unserer grafischen Vorbereitungen möchte ich Euch zeigen, wie ich die Fotos für den Content-Bereich bearbeitet habe. Auch hier stelle ich wieder für Alle, die parallel zum TUT mit bauen wollen, die Fotos zum Speichern zur Verfügung. Bezüglich Weiterveräußerung gilt dasselbe wie bereits bei der Blumengrafik erwähnt.

Gerbera

 

Rosen


 

Wir öffnen die beiden Fotos in PI und legen ein neues leeres Bild von 500 x 500 px an.

1F

 

In dieses Bild fügen wir je eine Kopie unserer Blumenfotos ein und wandeln sie mit einem Rechtsklick und der im Screen beschriebenen Auswahl erst mal in Pfade um.

2F

 

Nachdem wir das gemacht haben, wechseln wir zum Pfadzeichen-Werkzeug und markieren mit einem Klick das erste unserer Fotos. In der oberen Symbolleiste stehen uns  die Optionen „Umrandung” und „Schatten” zur Verfügung. Wir setzen bei beiden ein Häkchen. Für die Umrandung wählen wir die Farbe schwarz und stellen eine Rahmenbreite von 6 ein. Die Einstellung für den Schatten entnehmt Ihr bitte dem unteren Screenshot.
Nachdem nun das erste Foto mit Rahmen und Schatten versehen ist, wiederholt Ihr all diese Schritte für das zweite Foto.

3F

 

Wenn Ihr das erledigt habt und beide Fotos mit Rahmen und Schatten ausgestattet sind, wandelt Ihr die Pfad-Objekte wieder in Bildobjekte um.

4F

 

Als nächstes werden wir die Fotos ein wenig drehen. Hierzu wechseln wir zunächst zum Verform-Werkzeug und wählen dann im Klappmenü der oberen Symbolleiste die Option „frei drehen” aus.

5F

 

Wenn ihr jetzt Euren Mousezeiger über die Ecken des Bildes bewegt, wandelt er sich in einen gebogenen Pfeil um. Wenn Ihr diesen Pfeil seht, könnt Ihr das Bild mit der Mouse frei und nach Euren Wünschen drehen. Wenn Euch die Neigung des Bildes gefällt, wiederholt Ihr den Vorgang auch für das zweite Bild.

6F

 

Danach schiebt Ihr die beiden Fotos ein wenig übereinander. Im Kontextmenü gibt es auch eine Option „Anordnen”, über welche man bestimmen kann, welches der beiden Bilder das Vordere bzw. das Hintere sein soll. Habt Ihr die Bilder Euren Vorstellungen gemäß platziert, bindet Ihr diese wie bereits mehrfach erklärt ein.

7F

 

Mit dem Standard-Auswahlwerkzeug ziehen wir einen angemessenen Ausschnitt auf und schneiden das Bild mit einem Klick auf das Zuschneide-Werkzeug auf die Größe dieses Ausschnitts zu und speichern es danach - wie auch bereits mehrfach erklärt - webtauglich im PNG-Format ab.

8F


Unsere Grafikvorbereitungen neigen sich dem Ende. Bliebe noch die Hintergrundgrafik für den gepunkteten Seitenhintergrund. Diese erstellen wir  hier jetzt gemeinsam.

 

Solltet Ihr irgendwelche Fragen haben, dann könnt Ihr diese gern hier loswerden.
Viele nützliche Antworten auf bereits häufig gestellte Fragen findet, Ihr hier.
 

 


Die grafischen Vorbereitungen

 


Die Umsetzung in NOF

BlumeGr Einleitung Grafikarbeit & Ziel
BlumeGr Erstellung des Grundlayouts
BlumeGr Spiegeleffekt der Bannergrafik
BlumeGr Gestaltung & Fertigstellung des Layouts
BlumeGr Zuschneiden des Layouts für NOF
BlumeGr Erstellung der Navigationsschaltflächen
BlumeGr Fotos rahmen, drehen und überlappen
BlumeGr Erstellung der Hintergrundgrafik

 

BlumeOr Anlegen eines neuen Projektes und erste Schritte
BlumeOr Grundlegende Einstellungen in der Design-Ansicht
BlumeOr Aufbau eines Tabellen-Layouts
BlumeOr Anlegen von Seitenstruktur & Navigation
BlumeOr Zweitnavigation & Top-Link ohne Anker
BlumeOr Vervielfältigen der linken Naviationsleiste
BlumeOr Inhalte einfügen und formatieren