Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Kapitel 03 - Teil 3 - Stein auf Stein ...
zurück: Kapitel 03 - Teil 4 - Pimp my Site weiter: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten.     Status: Diskussion Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
26. Okt 2007, 18:53
Rufname:
Wohnort: Aachen

Kapitel 03 - Teil 3 - Stein auf Stein ... - Kapitel 03 - Teil 3 - Stein auf Stein ...

Nach oben
       

·Kapitel 03 - Teil 3 - Stein auf Stein – die Seite wird bald fertig sein


Hallo zusammen,

machen wir nun weiter mit unserem Layout.

Im letzten Kapitel haben wir das Schild freigestellt und perspektivisch verzerrt. Für den nächsten Schritt blenden wir das Schild erstmal aus, indem wir auf das Auge links neben der Ebene klicken. Wir ziehen noch mal eine Hilfslinie in der Horizontalen auf die Position 103.

Dann erstellen wir eine neue Ebene mit einem Klick auf das Ebenensymbol .
Als Breite geben wir 750 Pixel und als Höhe 497 Pixel an. Mit dem Auswahl-Werkzeug , Einstellung "Aktive Ebene verschieben", verschieben wir die Ebene nach rechts an den rechten, äußeren Rand und nach oben an die eben neu gezogenen Hilfslinie.
Wir rufen die Farbpaletten auf und doppelklicken auf unsere Farbpalette "ziehender". Dort wählen wir das mittlere Orange aus. Die neu erstellte Ebene soll mit diesem Orange eingefärbt werden. Dazu wählen wir das Füllwerkzeug aus. Die Vordergrundfarbe sollte das Orange enthalten. Mit dem Füllwerkzeug klicken wir in die Fläche der Ebene – sie ist nun eingefärbt.

Falls noch nicht geschehen, wechselt nun wieder in die Ebenenpalette. Dort erstellen wir eine
neue Ebene in den Maßen 900 x 600 Pixel. Benennt sie mit "Blatt Schatten" und die darunter liegende mit "Blatt orange". Bei der Arbeit mit Ebenen ist es recht hilfreich, diese sinnvoll zu benennen, um nachher schneller auf die richtige zugreifen zu können. Wählt das Auswahl- zeichnen-Werkzeug und stellt in den Eigenschaften des Werkzeugs "Feste Größe"
mit einer Breite von 750 Pixeln und Höhe von 497 Pixeln ein.



Erstellt in der Ebene "Blatt Schatten" über dem orange-farbigen Bereich die Auswahl. Wählt
das Füllwerkzeug aus und klickt auf die kleinen Vierecke links unterhalb der
Vorder- und Hintergrundfarben.



Sie springen nun wieder auf schwarz und weiß um. Wir wählen Schwarz als Vordergrundfarbe
und klicken wieder in die Ebene. Die Ebene hat sich schwarz eingefärbt. Die Auswahl bleibt
noch erhalten und wir wählen im Hauptmenüpunkt Auswahl - Vergrößern einen Wert von 10 Pixeln aus. Anschließend gehen wir in den Menüpunkt Filter - Weichzeichnen - Gaußscher Weichzeichner, setzten dort die Werte auf 15 Pixel und bestätigen. Zum Schluss kann die
Auswahl über Auswahl - Aufheben beendet werden. Die Ebene wird wahrscheinlich nicht
exakt über der orange-farbigen liegen. Deshalb zoomen wir mit der Lupe ein wenig in das
Bild und mit dem Auswahl-Werkzeug verschieben wir die aktive Ebene. Dies kann auch über die Pfeile auf der Tastatur erfolgen - es sind meist nur wenige Pixel. In der Ebenen-
palette ziehen wir die Ebene "Blatt Schatten" unter die Ebene "Blatt orange" und stellen die Deckkraft auf 60%.



Das Ergebnis sollte im Ausschnitt in etwa so aussehen:



Als Nächstes kommt das zweite Blatt, das ein bisschen schräg hinter dem ersten liegt. Aktiviert
die Ebene "Blatt orange", mit einem Klick auf das Duplizieren-Symbol erstellt ihr
eine Kopie und benennt sie "Blatt d-orange". Zieht die Ebene unter die Schatten-Ebene.Das Gleiche macht ihr mit der "Blatt Schatten" Ebene, benennt sie "Blatt Schatten02" und zieht sie unter "Blatt d-orange". Aktiviert die Ebene "Blatt d-orange", wählt aus der Farbpalette das dunklere Orange aus und mit dem Füllwerkzeug färbt ihr diese ein. Bei beiden duplizierten Ebenen klickt ihr rechts neben das Augensymbol – es sollte nun Kettensymbole zu sehen sein. Diese zwei Ebenen sind jetzt miteinander verbunden. Mit dem Auswahl-Werkzeug verschiebt ihr sie 20 Pixel nach oben,was dann so aussieht:



So, nun werden wir diese beiden Ebenen noch ein wenig drehen. Wenn ihr das Rotations-Werkzeug ausgewählt und in die Ebene geklickt habt, erscheint ein Dialog, in
dem ihr als Winkel -2,5° eingeben könnt. Bestätigt mit "Rotieren". Verschiebt die Ebenen mit noch mal 10 Pixel nach links. Jetzt sieht das Ganze ungefähr so aus:



Das sieht ja alles schon recht schön aus, bis auf eine Kleinigkeit: am rechten Rand lugt ein bisschen von den rotierten Ebenen raus. Um die zu entfernen nehmen wir das Auswahlzeichnen-Werkzeug und stellen in den Eigenschaften freie Auswahl ein. Dann ziehen wir am rechten Rand der hellen orange-farbigen Ebene ein schmales Rechteck bis zum oberen Rand.



Achtet darauf, dass ihr in der Ebene "Blatt d-orange" seid. Mit der Tastenkombination Strg+K
("K" für kill?) entfernt ihr den Inhalt der Auswahl. Wechselt anschließend in die Ebene "Blatt Schatten02" und entfernt auch dort den Auswahlinhalt. Die Auswahl kann nun wieder aufgehoben werden. Macht das Ganze noch mal auf der linken Seite. Also die überragenden Teile der rotierten Ebene werden entfernt. Danach speichern wir sicherheitshalber mal das Dokument.

Nun können wir auch wieder das Schild sichtbar machen. Das ist durch die neuen Ebenen
verdeckt und muss ganz nach oben gezogen werden. Mit dem Auswahlwerkzeug positioniert ihr es so, dass es ein paar Pixel Luft nach oben hat. Das Schild bekommt jetzt auch einen Schlagschatten. Dafür duplizieren wir die Ebene und wählen den Zauberstab aus, klicken in die transparente Fläche neben dem Schild und invertieren die Auswahl. Über den Menüpunkt Filter - Farben - Einfärben rufen wir einen Dialog auf. Dort stellen wir die RGB-Werte auf 0, also auf schwarz, und bestätigen. Die Auswahl kann wieder aufgehoben werden. Zieht die Schattenebene unter das Schild und benennt sie sinnvoll um. Die Deckkraft der Ebene stellen wir auf 30%. Mit dem Auswahl-Werkzeug verschieben wir den Schatten 10 Pixel nach unten und 15 Pixel nach rechts.

Öffnet nun das Bild "weltpunkte.png", dass ihr am Ende des Kapitels downloaden könnt. Diese Grafik stelle ich euch für dieses Tutorial zur Verfügung. Mit Strg+A wählt ihr alles aus, kopiert mit Strg+C und fügt es mit Strg+V in euer Layout ein. Über "neue Ebene erstellen" wandelt ihr die schwebende Auswahl in eine eingefügte Ebene um. Benennt sie "Weltpunkte" und verschiebt sie in der Ebenenpalette unter den Schatten des Schildes, mit dem Auswahl-Werkzeug rechtsbündig zur orange-farbenden Fläche und an die obere Kante des Dokuments. Bitte einmal speichern und dann betrachten wir folgenden Zwischenstand:



Ziehen wir nun noch mal zwei vertikale Hilfslinien auf Position 120 und 830. Anschließend erstellen wir eine neue Ebene mit einer Breite von 710 Pixel und einer Höhe von 470 Pixel. Mit einem Doppelklick auf das Feld Vorder- und Hintergrundfarbe öffnet sich der Farbwähler. Dort stellt ihr die RGB-Werte auf 233/234/235 ein und bestätigt. Wie ihr seht, handelt es sich dabei um einen sehr hellen Grauwert. Mit dieser Farbe färben wir mittels des Füll-Werkzeugs die neue Ebene ein. Benennt die Ebene "content" und verschiebt sie in der Ebenenpalette an oberste Stelle. Mit dem Auswahlwerkzeug wird sie links auf die Position 120 und oben auf 130 platziert.

In diesem Bereich werden später die Inhalte stehen. Ich wähle für den Texthintergrund meist ein leicht gebrochenes Weiß, weil dadurch der Kontrast zur schwarzen Textfarbe nicht so groß ist. Der reine Schwarz-Weiß-Kontrast ermüdet das Auge beim Lesen wesentlich schneller, als mit einem abgemilderten Kontrast.

Zurück zu unserem Layout. Auch die "content"-Fläche soll einen Schlagschatten erhalten. Dabei gehen wir genauso vor wie mit den Schatten der orange-farbenden Flächen, nur dass diesmal die Deckkraft auf 40% eingestellt wird. Aktiviert nun noch mal die Ebene "Weltpunkte" und verschiebt sie soweit nach links, dass sie rechtsbündig zum rechten Rand der Ebene "content" ist.

Erstellt jetzt eine neue Ebene mit einer Breite von 148 Pixel und einer Höhe von 300 Pixel. Stellt in dem Vordergrund- und Hintergrundfarbenfeld das helle Beigeals Vordergrund- und das Orange des oberen Blattes als Hintergrundfarbe ein. Mit dem Füllwerkzeug färbt ihr die Ebene beige ein. Wechselt die Vordergrund- und Hintergrundfarbe aus, indem ihr auf den Pfeil rechts oberhalb der Felder klickt. Wechselt zum Zauberstab und wählt die beige-farbende Fläche aus. Ruft den Menüpunkt Bearbeiten - Auswahl nachziehen aus. Es erscheint ein Dialogfeld. Dort stellt ihr die Linie wie im folgenden Bild ein:



Bestätigt mit Nachziehen und hebt die Auswahl wieder auf. Die Box sollte nun einen Rand erhalten haben. Benennt die Ebene "Menüleiste" und setzt die Deckkraft auf 80%. Erstellt erneut eine
neue Ebene mit den Maßen B 49 x H 298 Pixel. Färbt die Ebene in beige ein und verschiebt
sie in der Ebenenpalette unter die Ebene "Menüleiste". Benennt sie "Abdeckung01". Mit dem Auswahl-Werkzeug schiebt ihr die Ebene unter die Menüleiste unterhalb und rechts der orange-farbenden Linie. Erstellt noch mal eine neue Ebene mit den Maßen B 77 x H 298 Pixel, färbt auch sie beige ein, verschiebt sie unter die Menüleiste und benennt sie "Abdeckung02". Im Dokument kommt sie rechts unterhalb der Menüleiste.



Anhand des Bildes ist zu sehen, dass das Rohr und der Schlagschatten des Schildes durch die Transparenz schimmern. Mit dem Auswahlzeichen-Werkzeug machen’s wir wie mit der rotierten Ebene. Einmal speichern und so sieht jetzt der Zwischenstand aus:



Soweit das Kapitel für diese Woche. Ich wünsche euch ein fröhliches Schaffen.

Übung...

Wir empfehlen Euch, die zuvor genannten Dateien herunterladen und versuchen, die Schritte nachzuvollziehen.

Downloads...

Folgende Dateien haben wir auf unseren Server gelegt, die Dateien sind gepackt...

1. Eine Zip-Datei mit den oben genannten Grafiken (~200Kb).

Gruß

V 1.00 - (C) by Maninweb.de - All rights reserved··

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
maninweb
Microsoft Excel MVP 2014


Verfasst am:
21. Dez 2007, 17:03
Rufname: maninweb
Wohnort: Aachen


AW: Kapitel 03 - Teil 3 - Stein auf Stein ... - AW: Kapitel 03 - Teil 3 - Stein auf Stein ...

Nach oben
       

Dieser Beitrag dient nur zur Sortierung
Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 01 - Zielgruppendefinition 1 womaninweb 7448 21. Dez 2007, 17:06
maninweb Kapitel 01 - Zielgruppendefinition
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 2 - Es lebt! 1 womaninweb 6526 21. Dez 2007, 17:05
maninweb Kapitel 02 - Teil 2 - Es lebt!
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 3 - Es lebt immer noch! 1 womaninweb 5455 21. Dez 2007, 17:05
maninweb Kapitel 02 - Teil 3 - Es lebt immer noch!
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 4 - Der Konformist – XHTML 1 womaninweb 5131 21. Dez 2007, 17:04
maninweb Kapitel 02 - Teil 4 - Der Konformist – XHTML
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 1 - Farbenrausch 2 womaninweb 6249 21. Dez 2007, 17:04
maninweb Kapitel 03 - Teil 1 - Farbenrausch
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle 1 womaninweb 5415 21. Dez 2007, 17:03
maninweb Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt 1 womaninweb 4737 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell 1 womaninweb 4910 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! 2 womaninweb 4348 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 3 - Feingeschliffen 1 womaninweb 4240 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 3 - Feingeschliffen
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle 19 maninweb 6755 13. Sep 2008, 20:55
womaninweb Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 3 - Es lebt immer noch! 50 maninweb 11853 11. Feb 2008, 22:54
Nicki007 Kapitel 02 - Teil 3 - Es lebt immer noch!
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: HTML CSS