Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle
zurück: Kapitel 03 - Teil 3 - Stein auf Stein ... weiter: Kapitel 03 - Teil 1 - Farbenrausch 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:
19. Okt 2007, 17:19
Rufname:
Wohnort: Aachen

Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle - Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle

Nach oben
       

·Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle – Farben, Raster und Auswählen


Hallo zusammen,

im letzten Kapitel hatten wir uns mit der Farbgebung und -findung beschäftigt. Damit im Laufe des Entwurfs nicht ständig die Farben neu herausgesucht werden müssen, kann eine separate Farbpalette angelegt werden. Dafür starten wir „Gimp“ und öffnen das Bild wueste02.jpg, das durch den Pixeln-Filter aus dem letzten Kapitel gelaufen ist. Falls das Farbpalettenfenster noch nicht vorhanden ist, rufen wir dieses unter Dialoge -> Farbpaletten auf. Ein Klick auf das leere Blatt in der unteren Leiste dieses Fensters erstellt eine neue Palette.



Es erscheint der Farbpaletteneditor, in dem dieser neuen Palette ein Namen gegeben werden kann. Das tun wir dann auch mal und nennen sie sinnigerweise "ziehender". In der Werkzeugpalette wählen wir die Pipette aus.



Mit dieser kann innerhalb des Bildes eine Farbe aufgenommen werden. Bei einem Klick auf einen Farbbereich popt ein Infofenster auf, das die Farbinformationen enthält. Mit der Maus kann nun das Farbfeld in den Farbpaletteneditor gezogen und abgelegt werden. Dies kann man mit weiteren Farben so oft wiederholen, bis wir über die ausreichende Anzahl von Farben verfügen. In der Farbpalette abgelegte Farben können über einen Doppelklick mit dem Farbmischer bearbeitet werden. Dazu fasst man mit der Maus das Fadenkreuz im Farbmischfeld an und schiebt es solange in der Horizontalen und Vertikalen bis man mit dem Ergebnis zufrieden ist. Mit OK wird die Veränderung bestätigt und in der Farbpalette gespeichert.



Innerhalb des Farbpaletteneditors können die einzelnen Farben auch benannt werden. Zum Schluss sieht unsere Farbpalette "ziehender" so aus:



So, nun haben wir auch unsere Farben. Als nächstes steht ein Gestaltungsraster für den Entwurf an. Dieses Raster dient uns zur Aufteilung der Flächen und zur Vorlage bei der Umsetzung der Seite. Im allerersten Kapitel hatten wir uns auf das absolute Minimum der Monitordarstellung festgelegt, auf 800x600 Pixel. Tatsächlich sind die Auflösungen mittlerweile wesentlich höher – aber man weiß ja nie. Unser Layout soll mittig im Browser erscheinen, so ist bei jeder Auflösung der Inhalt stets zu sehen. Für das Raster erstellen wir eine neue Datei in der Größe von 900x600 Pixel. Falls die Lineale oben und links am Rande des Bildes noch nicht eingestellt sind, macht dieses über Ansicht -> Lineale anzeigen. Ebenso sollte die Ansicht -> Hilfslinien anzeigen aktiviert sein. Mit der Lupe zoomen wir ein wenig in das Bild, so dass die Einheiten auf dem Lineal feiner angezeigt werden. Anschließend wählen wir das Auswahl-Werkzeug aus und stellen in den Eigenschaften den Radiobutton auf Ebene oder Hilfslinie auswählen.



Vom linken Rand aus ziehen wir eine Hilfslinie bis auf 50 Pixel und eine weitere auf 850 Pixel. Somit ist die Außenbegrenzung der Seite festgelegt. Nun ziehen wir von oben eine Hilfslinie auf 130 Pixel, diese Linie begrenzt den Kopfbereich. Als nächstes legen wir den Bereich für die Navigationsleiste fest. Sie soll insgesamt 148 Pixel breit sein und ein wenig unterhalb des Kopfbereiches beginnen. Dafür ziehen wir eine horizontale Hilfslinie auf die Position 190 Pixel und eine vertikale Hilfslinie auf die Position 198 Pixel. Nun soll die Menüleiste ein wenig nach links versetzt angeordnet sein. Für den Inhaltsbereich ziehen wir nochmals eine vertikale Hilfslinie auf Position 94 Pixel. Das Ergebnis sollte dann ungefähr so aussehen. Zur besseren Übersicht sind die Flächen grau eingefärbt.



Nun können wir schon mal den Hintergrundverlauf anlegen. Dazu öffnen wir die Farbpaletten und wählen unsere Palette "ziehender" mit einem Doppelklick aus. Es erscheint der Farbpaletteneditor mit unseren festgelegten Farben. Für den Verlauf wählen wir aus der Werkzeugpalette das Verlauf-Werkzeug aus. In dem Eigenschaftenfeld dieses Werkzeugs stellen wir unter Form -> Linear ein.



Nun aktivieren wir noch mal den Farbpaletteneditor und ziehen das Hellblau auf die Vordergrundfarbe im Werkzeugfenster, klicken auf den kleinen abgewinkelten Pfeil rechts oberhalb der Farbfelder und klicken das helle Orange im Farbpaletteneditor an. Anschließend wieder auf den Pfeil klicken, um die Vorder- und Hintergrundfarbe wieder zu tauschen.



Nun gehen wir wieder in das Dokumentenfenster und ziehen mit dem Verlauf-Werzeug ab ca. 50 Pixel Höhe mit gedrückter Strg-Taste nach unten. Das Ergebnis sollte ungefähr so aussehen:



Nun beginnen wir die weiteren Elemente für das Layout zusammen zustellen. Das Schild mit dem Titel ist das Hauptmotiv. Leider hat das Foto natürlich noch einen Hintergrund und das Schild muss erstmal freigestellt werden. Dazu öffnet ihr das Bild "schild_uebung.bmp", das ihr am Ende des Kapitels runterladen könnt. Dies ist recht groß, soviel brauchen wir nicht. Also werden wir es ein wenig zuschneiden. Dafür wählt ihr das Zuschneide-Werkeug aus der Werkzeugpalette aus und wählt einen Bereich rund um das Schild und etwas Rohr aus. Vielleicht so:



Anschließend wählt das Auswahl-Werkzeug aus, wendet die Tastenkombination Strg+C (zum Kopieren), dann Strg+N (für neues Dokument), bestätigt den Dialog und zum Schluss Strg+V (zum Einfügen). Ihr erhaltet eine schwebende Auswahl über dem Hintergrund, aber mit einem Klick auf neue Ebene oder über den Hauptmenüpunkt Ebene -> neue Ebene wird daraus eine eingefügte Ebene. Speichert das Bild als schild.bmp ab. Das Ursprungsbild benötigen wir nun nicht mehr und können es ohne zu speichern schließen.

Nun vergrößern wir das Bild, dass wir gut die Details des Schildes sehen können, das dürfte so bei 400 % liegen. Wählt das Pfad-Werkzeug aus der Werkzeugpalette aus. Damit werden wir jetzt rund um das Schild einen Pfad erstellen, um es freizustellen. Beginnt am unteren Rand des Rohres, ob rechts oder links davon ist egal. Jeder Klick setzt einen neuen Ankerpunkt. Versucht möglichst genau am Rand des Schildes lang zu gehen. An jedem Eckpunkt oder Rundung sollte ein neuer Ankerpunkt gesetzt werden, an einer Rundung eher mehrere Ankerpunkte, so dass sie als Rundungen erhalten bleiben. Wenn ihr um das Schild und Rohr herum seid, klickt mit der Maus in den ersten Ankerpunkt. Damit sollte die Auswahl geschlossen werden. Durch Anfassen und Ziehen können die einzelnen Ankerpunkte noch verschoben werden.



Wenn ihr soweit seid, wählt in dem Eigenschaftsbereich der Werkzeugpalette den Button "Auswahl aus Pfad erzeugen" aus.



Wenn der Pfad korrekt geschlossen wurde, bildet sich nun um das Schild eine wandernde, gestrichelte Linie.



Mit der Tastenkombination Strg+C kopiert ihr die Auswahl und fügt mit Strg+V die Auswahl wieder ein. Über die Ebenenpalette mit oder über den Hauptmenüpunkt Ebene -> neue Ebene wird wieder eine eingefügte Ebene erstellt.

Wenn ihr auf das Augensymbol links vom Hintergrund in der Ebenenpalette klickt, seht ihr, dass das Schild nun freigestellt ist. Speichert das Bild wieder ab.



So, nun können wir wieder unser Layoutbild öffnen - das mit den Hilfslinien und dem Hintergrundverlauf. Aktiviert das Bild mit dem freigestellten Schild und wechselt zum Auswahl-Werkzeug. Mit Strg+C erstellt ihr eine Kopie und aktiviert das Layoutbild, mit Strg+V wird die Kopie eingefügt. Wandelt sie wie oben in eine eingefügte Ebene um. Mit der Lupe zoomt ihr in das Bild, um zu kontrollieren, ob das Schild sauber ausgewählt ist. Möglich, dass sich noch ein feiner Rand aus dem Hintergrund zeigt.



Hmmh, was nun? Wie bekommen wir den Rand weg? Besonders ruhige Hände können sich an dem Radiergummi versuchen und rundherum die Ränder beseitigen. Wir können allerdings noch mal in das Schildbild gehen und dort mit dem Zauberstab den transparenten Hintergrund auswählen. Dann rufen wir über den Hauptmenüpunkt Auswahl -> Invertieren auf, d.h. wir kehren die Auswahl um. Anschließend gehen wir erneut auf Auswahl -> Verkleinern und verkleinern die Auswahl um 1 Pixel. Nun können wir erneut mit Strg+C die Auswahl kopieren und in unser Layoutbild wie oben einfügen. Prüft mit der Lupe noch mal das Ergebnis. Wenn es OK ist kann das erste Schild in den Mülleiner gezogen und gelöscht werden. Wenn nicht, muss der Vorgang wiederholt und gegebenenfalls mit 2 oder 3 Pixeln die Auswahl verkleinert werden. Aber gehen wir mal davon aus, dass nun alles passt. Das Schild ist jedoch recht groß, mehr als ein Drittel der vorgesehenen Breite sollte es nicht einnehmen. Also müssen wir das Schild ein wenig transformieren. Wählt dazu das Transformations-Werkzeug aus der Werkzeugpalette aus, und zwar das zum Skalieren der Auswahl. Mit dem rechten, unteren Anfasser an der Ecke der Auswahl ziehen wir solange nach oben und links bis sich ein Skalierungsfaktor von 0,8 in X- und Y-Richtung erhalten. Diesen Wert könnt ihr in dem Infofenster für das Werkzeug einsehen. Leider ist er numerisch nicht einzugeben – jedenfalls habe ich nichts gefunden. Dann ist eben Augenmaß gefragt.

Nach der Skalierung werden wir das Schild ein wenig verzerren, so dass das Schild mehr in den Raum reinragt. Dafür brauchen wir das perspektivische Transformations-Werkzeug . Mit diesem kann das Schild perspektivisch verzerrt werden. Da müsst ihr ein bisschen rumprobieren, da jeder Anfasser in eine andere Richtung gezogen werden kann. Das Ergebnis sollte jedenfalls so ähnlich aussehen:



Wenn ihr soweit seid, könnt ihr das Bild abspeichern und nach hinten lehnen. An diesem Punkt machen wir erstmal wieder Pause bis zur nächsten Woche.

Ü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 (~3,5 MB).

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 2 - Schaffe, schaffe, Seite bastle - AW: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle

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 02 - Teil 1 - Mit HTML und XHTML ins Internet 1 womaninweb 7815 21. Dez 2007, 17:06
maninweb Kapitel 02 - Teil 1 - Mit HTML und XHTML ins Internet
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 3 - Stein auf Stein ... 1 womaninweb 5233 21. Dez 2007, 17:03
maninweb Kapitel 03 - Teil 3 - Stein auf Stein ...
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 4 - Pimp my Site 1 womaninweb 5384 21. Dez 2007, 17:02
maninweb Kapitel 03 - Teil 4 - Pimp my Site
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 2 - Hat es deine Augen oder meine? 1 womaninweb 4361 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 2 - Hat es deine Augen oder meine?
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 2 - Butter bei die Fische 1 womaninweb 4459 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 2 - Butter bei die Fische
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: Landing Page auf Blogspot Seite 0 onlano 1277 30. Jun 2013, 21:59
onlano Landing Page auf Blogspot Seite
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: Access Tabellen