Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Kapitel 03 - Teil 1 - Farbenrausch
zurück: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle weiter: Kapitel 02 - Teil 4 - Der Konformist – XHTML 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:
06. Okt 2007, 09:33
Rufname:
Wohnort: Aachen

Kapitel 03 - Teil 1 - Farbenrausch - Kapitel 03 - Teil 1 - Farbenrausch

Nach oben
       

·Kapitel 03 - Teil 1 - Farbenrausch


Hallo zusammen,

Wir haben uns recht kurzfristig entschieden von der bisherigen Inhaltsangabe abzuweichen. Anscheinend waren doch einige ein wenig enttäuscht, dass das erste Kapitel mit einer Beispielseite endete. Sie hätten gerne mehr darüber erfahren, wie man ein Layout erstellt. Ursprünglich war das erst nach dem Theorieteil geplant, aber da sind wir flexibel.

Ok, fangen wir einfach jetzt schon mal an Smile

So ein Layout schüttelt man sich natürlich nicht mal eben so aus dem Ärmel. Zu den grund-
sätzlichen Überlegungen, die wir im ersten Kapitel angestellt haben, kommt für die Entwicklung eines Designs noch mindestens eine weitere Liste hinzu. Nachdem wir nun herausgearbeitet haben, wer was wem auf einer Internetseite präsentiert, geht es nun darum ein Thema zu finden, das dies nach außen transportiert.

Dafür legen wir eine weitere Liste an, auf der wir unsere Gedanken und Assoziationen festhalten. Dabei sollte in keinster Weise eine Einschränkung gelten; schreibt auf, was euch zu dem Thema in den Sinn kommt - das können manchmal auch unsinnige Dinge sein.

Im Falle unseres Beispiels, das Paar Ziehender, hat das Reisen einen hohen Stellenwert. Es sind Menschen, die um die Welt ziehen und ihre Eindrücke in Bild und Wort festhalten. Spontan kommen einem unterschiedliche Gedanken in den Kopf:

Karawane von Kamelen, Motorrad, Geländewagen, Segelschiffe, Flugzeug, Welt- und Länder-
karten, Zelte, Kompass, Windrose, Wegweiser, unterschiedliche Landschaften, fremde Märkte, Eselskarren, usw. Diese Liste kann natürlich weiter geführt werden und wird, je nach Hintergrund des Betreffenden, unterschiedlich ausfallen. Lasst euch Zeit mit der Liste, sie muss nicht in eine Stunde komplett sein, schlaft mal 'ne Nacht drüber und führt sie am nächsten Tag weiter. Vielleicht fragt ihr auch Freunde und Bekannte, was ihnen zum Thema einfällt. Wenn euer Kopf dann irgendwann leer gepumpt ist, könnt ihr aufhören.

Mit so einer Liste kann man anschließend unterschiedlich verfahren. Man kann thematische Zusammenfassungen machen, z.B. Fahrzeuge oder Orientierungsmittel. Ideen, die sich auch bei längerer Betrachtung als unmöglich erweisen, können gestrichen werden. Unter den verbliebenen Ideen werden die ausgewählt, die von der Allgemeinheit am ehesten assoziiert würden. In dem vorgegebenen Beispiel habe ich mich für die Orientierungsmittel entschieden, d.h. Kompass, Windrose und Wegweiser.

Ein wenig Bilder-Googlen zeigt einem die Vielfalt, die mit den Begriffen verbunden werden. Aber genau dort bekommen wir natürlich ein Problem. Da nun mal auf den meisten der Bilder im Internet Urheberrechte liegen, können wir nicht einfach hingehen und uns Bilder kopieren,
die uns zusagen. Es gibt Bilddatenbanken, bei denen Fotos und Grafiken gekauft werden können, meist recht teuer, jedenfalls für den Privatmenschen.

Dann gibt es noch Foto-Sharing-Seiten, wie z.B. Flickr. Dort bekommt man eine Reihe guter
Fotos, muss aber unbedingt die Urheberrechtsbedingungen beachten. Für ein privates und nicht kommerzielles Projekt dürfte es nicht so schwer sein, entsprechende Bilder zu finden.

Natürlich kann man mit einer Digitalkamera auch selbst auf Motivsuche gehen, dann ist man in jedem Fall auf der richtigen Seite.

Haben wir erstmal ein Motiv gefunden, muss es auf seine Qualität geprüft werden. Ein kleines
Bild im .jpg Format ist meist zu stark komprimiert, um weiterverwendet zu werden. Jedes
weitere Speichern würde zu einer zusätzlichen Komprimierung führen und die Qualität weiter verschlechtern. Also, ein Bild sollte über eine ausreichende Größe und scharf sein. Verwackelte und unscharfe Bilder können auch durch beste Bildbearbeitung nicht brauchbar gemacht werden. So ein Bild ist nicht mehr bearbeitbar:



Ebenso wenig bearbeitbar sind überbelichtete Bilder. Die hellen Bereiche des Bildes sind überstrahlt, die Konturen sind nicht mehr zu erkennen, so dass der Aufwand ein solches Bild wiederherzustellen zu groß ist.



Bei kontrastarmen Bildern ist eventuell durch Bildbearbeitung noch etwas zu erreichen.



Versuchen wir mal, ob aus diesem Fotoausschnitt noch etwas herauszuholen ist.
Starte Gimp und öffne das Bild kontrast.jpg.

An dieser Stelle der Hinweis, eine Installationsanleitung zu Gimp findet Ihr weiter unten. Die genannten Dateien stehe Euch wieder zum Download zur Verfügung.



Im Menü Werkzeuge findest du den Eintrag Farben, dort wählst du Helligkeit-Kontrast aus.



Mit den entsprechenden Reglern kannst du nun ein wenig rumprobieren, bis das Ergebnis zufriedenstellend ist. In diesem Fall liefern die Werte 30 für Helligkeit und 85 für Kontrast ein akzeptables Ergebnis und wir bestätigen dies mit Ok.



Solche Art von Bildbearbeitung ist bestenfalls eine unzureichende Möglichkeit, Bilder für die Weiterverarbeitung zu retten. Am besten ist natürlich ein kontrastreiches und scharfes Foto.

Wenden wir uns wieder, nach dem kleinen Ausreißer in die Bildbearbeitung, unserem Entwurf
der Webseite zu. Zu Erinnerung, hier nochmal das Bild.



Nach einer Recherche im Internet hatte ich mehrere Bilder zur Auswahl, welche passend zu meiner Gedankenliste gewesen wäre. Einen Kompass, eine Windrose und mehrere Wegweiser. Das Bild zum Kompass hätte jedoch einen großen Nachbearbeitungsaufwand bedurft, die Windrose(n) passte(n) auch irgendswie nicht. Es blieben die Wegweiser.

Somit haben ich aus der Liste das Leitmotiv ausgewählt: der Wegweiser. Er hat sogar den grandiosen Vorteil, dass hier auch der Titel der Seite sinnvoll untergebracht werden könnte.
Um den Titel "Ziehenders Welt" zu unterstreichen habe ich noch eine Grafik mit einer Weltkarte hinzugenommen. Zur Erstellung einer solchen Grafik benötigt man schon ein professionelles Grafikprogramm, so dass ich euch diese Grafik im Rahmen diese Tutorials zur Verfügung
stellen werde.

Als nächstes steht die Farbgebung an. Die Wahl der Hauptfarben entscheidet über das Er- scheinungsbild und Wahrnehmung der Seite. In unserem westlichen (!) Kulturkreis werden
Farben mit bestimmten Begriffen oder Stimmungen assoziiert und können, bezogen auf das Thema, gezielt eingesetzt werden.



Neben den einzelnen Farben geben auch Farbkombinationen gewisse Stimmungen wieder. Dabei kommt es auch darauf an, in welchem Verhältnis die Farben zu einander stehen. Dann spricht man von einem Quantitätskontrast.



Die Sättigung von Farben kann eine Farbaussage intensivieren oder harmonisieren. Als Sättigung versteht man den Anteil an Farbe: viel Farbe, z.B. rot ist sehr intensiv, weniger Farbe, wie z.B. rosa ist harmonischer und in seiner Aussage zurückhaltender.



Eine gewisse Spannung kann man mit dem so genannten Komplementärkontrast erreichen. Als Komplementärfarben bezeichnet man die Farben, die sich im Farbkreis gegenüberstehen.



Für die Ziehender-Webseite habe ich mich für einen Komplementärkontrast mit einer mäßigen Sättigung entschieden. Beim Quantitätsverhältnis überwiegt das Orange-Braun. Den Grundfarben sind in Abstufungen weitere Farben beigefügt. Als Textfarbe fungiert Schwarz.



Wer sich ein wenig schwer mit Farben tut, dem sei eine Webseite empfohlen, in der eine Community von Farbfreaks Farben und Farbkombinationen zur Verfügung stellt. Der Name ist Programm: www.colourlovers.com. Ein sehr praktischer Onlinefarbmischer findet sich bei colormixers.com oder colorblender.com.

Eine weitere Möglichkeit an harmonische Farbkombinationen zu kommen ist ein Landschaftsbild mit einem Vergröberungsfilter zu versehen. Öffnet das Bild wueste01.jpg mit Gimp. Dort wählt ihr unter Filter -> Weichzeichnen -> Pixeln aus. Nutzt Ihr ein eigenes Grafikprogramm, kann der Vergröberungsfilter auch Mosaikfilter heißen. In dem erscheinenden Dialogfenster kann die Größe der Mosaike eingestellt werden. Hier habe ich eine Größe von 10 x 10 Pixel gewählt.



Bestätigt mit OK und das Bild unterteilt sich in Mosaike, die den Farbton im Umkreis von 10 Pixeln zusammengefasst hat. Anhand dieser Quadrate können anschließend die Farben ausgewählt werden; wie, das lernen wir im nächsten Teil des Workshops.



In der Natur kommen meistens Komplementärkontraste vor, jedoch in einer Harmonie, die fast nicht nachzuahmen ist. Der oben genannte Trick kann also verwendet werden, um relativ einfach eine Palette zusammenzustellen.

So, nächste Woche geht’s weiter mit unserem Layout. In der angefügten zip.Datei findet ihr die Bilder, die ich für die Beispiele in "Gimp" genutzt habe. Mit denen könnt ihr die Bearbeitung nachvollziehen und schon ein wenig mit "Gimp" vertraut machen.

Übung...

Wir empfehlen Euch, schon mal Gimp bei uns oder eine anderen Quelle herunterzuladen und zu installieren.Ruft dann mal das Programm auf und schau Euch zunächst einfach nur im Programm um. Was gibt es so für Menüs,was passiert wenn ich mal Menüs aufrufe.

Ihr könnt Euch auch die zuvor genannten Dateien herunterladen und versuchen, die Schritte nachzuvolziehen. Wer Spass findet kann auch mal andere Filter ausprobieren.

Downloads...

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

1. Eine Zip-Datei mit dem Installationsprogram für Gimp (~14MB).
2. Eine Zip-Datei mit den oben genannten Grafiken (~15Kb).

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:
06. Okt 2007, 14:04
Rufname: maninweb
Wohnort: Aachen

AW: Kapitel 03 - Teil 1 - Farbenrausch - AW: Kapitel 03 - Teil 1 - Farbenrausch

Nach oben
       

·Kapitel 03 - Teil 1 - Installation von Gimp


Hallo zusammen,

Sicherlich haben viele schon mal ein Programm installiert. Für diejenigen unter Euch, die weniger firm in solchen Dingen sind, hier eine kleine Installationsanleitung für Gimp.

Zunächst möchten wir uns aber bei den Entwicklern von Gimp für die tolle Software bedanken. Ohne sie, bzw. der Open Source Gemeinde, wäre manches um einiges schwieriger.

Wer übreigens den Entwicklern etwas gutes tun möchte kann dies beispielsweise mit einer
Spende hier tun.

Nun aber zur Installation von Gimp. Gimp setzt das GTK voraus, d.h. dass bevor die eigentliche Software installiert werden kann, muss die GTK Laufzeitumgebung installiert werden. Da Gimp ursprünglich ein Linux Programm war, ist die GTK erforderlich, um es unter Windows ausführen zu können.

1.

Download

Ihr könnt eine Zip-Datei bei uns hier herunterladen oder direkt auf www.gimp.org die Installationsdateien herunterladen. In unserer Zip-Datei haben wir Gimp in der Version 2.2.17 sowie das GTK in der Version 2.10.13 abgelegt. Die GTK Version 2.10.13 funktioniert nur ab Windows 2000, wer also ein älteres Windows besitzt sollte sich die passenden Dateien bei www.gimp.org herunterladen. Diese Installationsanleitung bezieht sich zwar auf die Version, die im Zip-Paket auf unserem Server enthalten ist, sollte aber auch für andere Versionen gelten.


2.

Installation

Nach dem Download bitte die Zip Datei entpacken. Es sind die beiden Dateien GTK.2.10.13.exe sowie Gimp.2.2.17.exe in unserem Zip enthalten.

Nun als erstes (!) GTK.2.10.13.exe ausführen, ihr werdet mit folgendem Screen begrüßt.



Wie ihr feststellt, ist das Setup Programm in Englisch. Macht aber nix, wir brauchen nicht viele Englisch-Kenntnisse. Klickt nun auf Next, akzeptiert die Lizenzvereinbarung durch einen erneuten Klick auf Next. Das Setup Programm schlägt Eunch nun ein Installationsverzeichnis vor, welches Ihr in diesem Falls so belassen könnt. Weiter geht's wieder mit Next Es folget ein Fenster, wo ihr zwischen verschiedenen Installationsarten wählen könnt. Unsere Empfehlung ist Full installation zu belassen.

In manchen Umgebungen kann es dazu kommen, dass folgender Screen erscheint.



Diese Meldung bedeutet, dass eine oder mehrere Dateien in Konflikt mit den zu installierenden stehen. Ihr habt nun die Wahl die auf Eurem Rechner bereits vorhandene Datei umzubennen oder es nicht zu tun. Im letzteren Fall kann es vorkommen, dass Gimp dann später nicht korrekt läuft. Im ersteren Fall ist es möglich, dass andere bereits installierte Programme nicht mehr korrekt laufen. Wir tendieren zur Option Rename files, zumal sich im Falle, dass ein anderes Programm nicht mehr läuft, dies einfach wieder durch Umbenennen der Datei wieder beheben lässt. Auf unseren Rechner - Windows XP SP2 - hatte das Umbenennen keine Auswirkungen. Aber ich wollt's nur mal hier erwähnt haben.

Zum Schluß der GTK Installation bekommt ihr nun nochmal einen Screen mit einer Zusammenfassung. Mit Install wird die Installation durchgeführt. Nach Abschluß der Installation habt ihr auch die Möglichkeit, eine Sprache auszuwählen. Setzt das Häkchen bei Choose language for GTK Programs now.Den Screen solltet ihr dann sehen.



Wählt für beide Optionen German. Das war's schon für das GTK.

Nun zu Gimp selbst. Startet die Datei Gimp.2.2.17.exe. Dieser nette Screen sollte auf Eurem Bildschirm erscheinen.



Weiter geht's mit Next und nach Annahme der Lizenzbestimmungen wieder mit Next. Wenn ihr möchtet, könnt Ihr das Standardverzeichnis ändern, muss aber nicht zwingend. Im nächsten Dialog werdet ihr wieder nach dem Installationstyp gefragt. Wir haben bei uns Full installation gewählt. Der nächste Dialog fragt ab, ob Dateitypen mit diesem Programm assoziiert werden sollen. Wenn ihr hier eine Auswahl trefft, wird dann ein Doppelklick im Explorer auf eine Datei des gewählten Typs Gimp öffnen und die Datei laden. Möchtet ihr nichts an Eurem System verändern, überspringt diesen Dialog mit Next. Der nächsten zwei Screens fragen ab, ob z.B. ihr einen Eintrag im Windows Startmenü haben möchtest. Ich habe zwei mal Next gewählt.

Nun kann es wieder vorkommen, dass Gimp ebenfalls Dateien umbenennen möchte, z.B. dies hier



Persönlich hatte ich hier Rename files gewählt. Weiter geht's dann mit Next und Install.Fertig. Gimp kann nun direkt gestartet werden, was wir auch empfehlen, da das Programm beim ersten Start gegebenenfalls weitere Einstellungen treffen wird. Die Dialoge dazu sollten in Deutsch sein. Wir haben bei allen Einstellungen immer die Standardoptionen bzw. die Voreinstellungen übernommen.


3.

Wichtige Hinweise

Diese Anleitung hier ist keine Supportleistung oder ähnliches. Das heißt, wir übernehmen für Gimp keinen Support oder ähnliches. Ausserdem kann keine Garantie übernommen werden, dass alles so funktioniert, wie hier oben beschrieben. Vielmehr spiegelt diese kleine Anleitung unsere Erfahrung mit Gimp wieder. Resumé : bei uns keine Probleme Smile


4.

Hilfedateien für Gimp

Die Hilfedateien für Gimp müssen (leider) separat heruntergeladen werden. Ihr findet diese hier. Wer Deutsch braucht, muss, soweit wir wissen, das Paket mit allen Sprachen herunterladen. Dieses ist ca. 58 MB groß. Vielleicht weiss einer ja was, wo es nur das deutsche Paket gibt.


Gruß

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

_________________
Der größte Aberglaube der Gegenwart ist der Glaube an die Vorfahrt.
Jacques Tatischeff - auch bekannt als Jacques Tati
20FCC4FD0E3240C59522E3F0C4695941


Zuletzt bearbeitet von maninweb am 06. Okt 2007, 15:39, insgesamt 2-mal bearbeitet
maninweb
Microsoft Excel MVP 2014


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


AW: Kapitel 03 - Teil 1 - Farbenrausch - AW: Kapitel 03 - Teil 1 - Farbenrausch

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 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 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 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: Excel Projekte: Pivot-Tabelle - Teil 1 - Erstellung von Pivot-Tabellen 0 Lukas Mosimann 30275 26. Apr 2008, 08:59
Lukas Mosimann Pivot-Tabelle - Teil 1 - Erstellung von Pivot-Tabellen
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! 5 maninweb 3753 03. Apr 2008, 12:05
voler Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!
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!
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 4 - Der Konformist – XHTML! 9 maninweb 3515 27. Dez 2007, 19:08
Lisa Kapitel 02 - Teil 4 - Der Konformist – XHTML!
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: Microsoft Excel Tricks