Beiträge von Basi

Heute widmen wir uns einem Thema welches für jeden Webdesigner früher oder später wichtig werden kann: Das Freistellen von Elementen aus Fotos.

Software / Technik:
Wir schauen uns heute das Freistellen von Objekten mit Hilfe von GIMP und dessen Pfaden an. Dies testen wir an 3 Beispielen und klären hinterher, welche alternativen Techniken es gibt und wo die Vor- und Nachteile liegen.

Schwierigkeit:
Dieses Tutorial ist ziemlich einfach, ich werde auf die ausgeführten Schritte genau eingehen und alles eher simpel halten. Es wird in nächster Zeit eine fortgeschrittene Anleitung geben, in welcher wir mit Photoshop arbeiten und komplexere Verfahren für bessere Ergebnisse bei schwierigen Objekten besprechen.

GIMP ist ein kostenloses aber umfangreiches Programm um Bilder zu bearbeiten, hier ist die Software zu beziehen und eine Anleitung zur Installation sowie erste Schritte gibt es hier auf html-seminar.de.

Mit Strg ist übrigens die Steuerungstaste (ganz unten Links) gemeint, Apfelmenschen drücken dementsprechend wohl die Commandtaste.

Tutorial Teil 2:
Das 2. Tutorial zum Thema freistellen wird Photoshop und einige erweiterte Techniken beinhalten. Alleine das Erstellen des Tutorials wird Tage dauern, von daher bitte ich um etwas Geduld bis das Ganze so weit ist, es wird dann selbstverständlich hier verlinkt.

Inhalt:

1. Pfade - kurz erklärt
2. Beispiel Würfel
3. Beispiel Tattoo
4. Beispiel Fisch
5. Alternative Techniken
6. Schlusswort

Bitte trotz Inhaltsverzeichnis chronologisch vorgehen, die Schritte bauen teilweise aufeinander auf.

1. Pfade - Was ist das eigentlich? ^(TOP)
Das Pfadwerkzeug ist im Werkzeugkasten zu finden: html-seminar.de/woltlab/attachment/686/html-seminar.de/woltlab/attachment/687/
Außerdem zu erreichen ist es durch das Drücken der P-Taste auf der Tastatur (en. für Path).

Die Einstellungen für das Pfadwerkzeug sind nicht sonderlich kompliziert:

An dieser Stelle entschuldige ich mich besser dafür das mein GIMP derzeit als englische Version läuft, ist aber jetzt nicht so wichtig. Uns interessieren sowieso nur 3 Optionen: Design, Edit (Bearbeiten) und Selection from Path (Auswahl aus Pfad), wobei wir die ersten beiden mit der Tastatur umschalten werden (alles andere wäre Wahnsinn, grundsätzlich sind Tastaturkürzel schneller und in der Bildbearbeitung früher oder später Pflicht für schnelles Arbeiten).

Mit dem Pfadwerkzeug aktiviert können wir mit einem Klick in ein Dokument nun Punkte setzen, sobald wir 2 davon an unterschiedlichen Stellen gesetzt haben werden diese durch einen Pfad verbunden:

Die Punkte, welche wir erstellen, nennen wir Anker. Die wichtigsten Funktionen für das Pfadwerkzeug:

Anker erstellen: Auf eine Stelle ins Dokument klicken
Anker selektieren: Auf den Anker klicken
Anker verschieben: Den Anker mit gedrückter Maustaste an die gewünschte Stelle verschieben
Anker löschen: Strg+ Alt + Mausklick auf den gewünschten Anker
Anker verbinden: Dies müssen wir nur in einem Fall machen und zwar um den letzten gesetzten Anker mit dem ersten zu verbinden, dies tun wir indem einer der beiden Anker selektiert wird und ein Mausklick mit gedrückter Steuerung-Taste auf den anderen erfolgt.

Warum denn nun eigentlich das Pfadwerkzeug, Es gibt doch auch das Lasso-Tool?
Eine berechtige Frage, der Vorteil liegt klar darin das ein Pfad bei jeder Änderung gespeichert wird, sollten wir das Pfadwerkzeug versehentlich oder absichtlich deaktivieren so können wir später am selben Pfad weiterarbeiten, dazu gehen wir im Fenster in dem normal unsere Ebenen angezeigt werden und klicken im oberen Reiter auf Paths (Pfade), hier sind nun all unsere Pfade aufgelistet und wenn wir das Auge links daneben aktivieren wird der entsprechende Pfad im Dokument farbig angezeigt, aktivieren wir nun das Pfadwerkzeug und klicken auf den Pfad im Dokument so können wir diesen weiter bearbeiten, außerdem können wir unsere Pfade hier auch benennen:

2. Beispiel Würfelhtml-seminar.de/woltlab/attachment/684/html-seminar.de/woltlab/attachment/693/ ^(TOP)
Nun wissen wir wie ein Pfad angelegt wird, also können wir loslegen, hier haben wir ein Bild von einem schicken orangefarbenen Würfel, jedoch mit störendem grünen Hintergrund, so können wir den Würfel auf unserer Website nicht verwenden, also entfernen wir den Hintergrund.

Wir beginnen nun also den Würfel mit dem Pfadwerkzeug zu umranden:

html-seminar.de/woltlab/attachment/691/

Wenn wir mit unserem Pfad zufrieden sind klicken wir in den Einstellungen im Werkzeugkasten einfach auf Selection from Path / Auswahl aus Pfad. Nun ist der Würfel selektiert und wir kommen zum nächsten Schritt.

Achtung: Wir müssen zu diesem Zeitpunkt unbedingt darauf achten das die Ebene auf der sich das Würfel-Bild befindet einen Alphakanal besitzt. Der Alphakanal ist der Bereich welcher die Transparenz angibt, ist kein Alphakanal vorhanden gibt es auch keine Transparenz sondern nur einen weißen Hintergrund.

Wir gehen also im Ebenendialog auf den Reiter Layers / Ebenen und klicken mit der rechten Maustaste auf die entsprechende Ebene um das Kontextmenü zu öffnen. Sollte hier die Option Add Alphakanal / Alphakanal hinzufügen anklickbar sein, so wird es nun getan, ist dies nicht der Fall so ist bereits ein Alphakanal vorhanden, das Ganze sollte so aussehen:

Wo das Kontextmenü zu finden ist erklärt das linke Bild auf der rechten Seite dieses Beitrages.

Alphakanal vorhanden, was nun?
Wir haben nun mehrere Möglichkeiten, wir könnten zum Beispiel einfach den markierten BEreich kopieren und einfügen, dann auf den "Neue Ebene"-Button drücken und die Hintergrundebene öffnen, mir aber viel zu kompliziert.

Wir Invertieren nun die Auswahl mit der Tastenkombination Strg + i, oder alternativ über das Menü am oberen Bildschirmrand: Select -> Invert / Auswahl -> Invertieren und entfernen das überflüssige Material mit der Entf(ernen)-Taste, alternativ über Edit -> Clear / Bearbeiten -> .. ja.. leeren oder so.

Nun ist nur unser Würfel übrig, keine Ebenen die noch gelöscht werden müssen, alles super, wir merken uns also:
Pfad erstellen -> Auswahl aus Pfad -> Strg + i -> Entf -> fertig!

Hässlicher Rand, HILFE!
Es wird immer wieder dazu kommen das die Auswahl nicht ganz so schön ist:

html-seminar.de/woltlab/attachment/694/

Keine Schande, passiert den Besten. Mit zunehmender Erfahrung neigt man dazu diese Kanten direkt zu vermeiden indem man den Pfad direkt etwas weiter innen anlegt, es gibt jedoch auch andere Möglichkeiten diese Kanten zu entfernen.

Kante entfernen
Wir können den Würfel einfach kleiner machen, hierzu rufen wir im Ebenendialog das Kontextmenü der Würfelebene auf und wählen ganz unten Alpha to Selection / Auswahl aus Alphakanal, nun ist wieder der Würfel selektiert (wir hätten alternativ auch den gespeicherten Pfad erneut in eine Auswahl umwandeln können, so geht es aber schneller). Als nächstes verkleinern wir die Auswahl um einen Pixel, sollte die Kante breiter sein werden daraus auch schon mal zwei oder drei, in diesem Fall ist es jedoch nur einer: Select -> Shrink/ Auswahl -> Verkleinern, im darauf auftauchenden Fenster tragen wir die gewünschte Breite, in diesem Fall 1px, ein. Nun ist die Auswahl verkleinert und wir entfernen wie gelernt/gewohnt alles Überschüssige: Strg + i -> Entf(ernen), unsere Kante ist in diesem Fall verschwunden.

Es kann natürlich auch sein das nur ein bestimmter Bereich der Kanten betroffen ist, hier können wir auch den Pfad anpassen und eine neue Auswahl erstellen oder aber wir nehmen uns simpel das Radiergummi und radieren vorsichtig überschüssige Pixel weg. Ebenenmasken helfen hier auch, jedoch ist das ein Fall für das Tutorial für Fortgeschrittene, sorry

3. Beispiel Tattoohtml-seminar.de/woltlab/attachment/695/^(TOP)
Wir wollen dem Würfel jetzt ein schickes Tattoo verpassen, also suchen wir ein Tattoo, am rechten Rand habe ich eines angehängt mit dem wir nun arbeiten werden, es ist sehr einfach gehalten, im nächsten Tutorial für die etwas schwerere Kost wird das noch richtig spannend, das kann ich versprechen!

Wir umranden nun im ersten Schritt wieder den Stern mit unserem Pfadwerkzeug. Sind wir fertig klicken wir wie gewohnt auf Selection from Path / Auswahl aus Pfad.

"Du willst mich ja wohl ver*****en, das ist doch absoluter Blödsinn, das geht doch garnicht!!!" - 'Tschuldigung, ich erklärs ja schon

Natürlich ist auch mir nicht entgangen das der Stern innen hohl ist, wir müssen nun einen Zwischenschritt tun und zwar legen wir eine neue Ebene an und nennen sie "Auswahlkopie" oder verbreiteter "Ebene 2" (*zwinker*), nun nehmen wir das Füllwerkzeug und füllen unsere Auswahl auf der Auswahlkopie-Ebene mit Schwarz. Keine Sorge, der Schwarze Stern wird vermutlich deutlich kleiner wirken als der Stern auf dem Originalbild aber das interessiert uns derzeit nicht (gleich mehr).

Wir blenden nun die eben erstellte Ebene aus und legen einen neuen Pfad an, dieses mal auf der Innenseite des Tattoos, ich warte so lange auf dich

Nun erstellen wir aus dem Pfad wieder eine Auswahl, blenden unsere Auswahlkopie-Ebene ein, aktivieren diese (so das die Ebene im Ebenendialog einen blauen Hintergrund bekommt) und drücken die Entf(ernen)-Taste. Wir öffnen im Ebenendialog nun erneut das Kontextmenü und wählen Alpha to Selection / Auswahl aus Alphakanal, nun verstecken wir die Auswahlkopie-Ebene und aktivieren unsere Tattoo-Ebene und was kommt nun? Richtig: Strg + i -> Entf(ernen). That's it!

4. Beispiel Fischhtml-seminar.de/woltlab/attachment/683/ ^(TOP)
Ein Fisch? Herzlichen Glückwunsch! Der Grund dafür ist das wir eine Website über Aquarien anlegen wollen und dafür brauchen wir nun mal diesen Fisch. Schauen wir uns den bisherigen Zustand der Seite doch mal an:

html-seminar.de/woltlab/attachment/696/

Ziemlich langweilig was? Dann zeigen wir unserem Fisch doch mal wie man in unserem Gewässer schwimmt. Hier ist nun tatsächlich das erste Mal etwas Übung notwendig. Die Kanten des Fisches sind im Vergleich zum Hitnergrund nicht sehr scharf sondern eher weich, dies hat 2 Seiten:
1. Wir haben hier etwas Spielraum was den Pfad betrifft
2. Nutzen wir diesen Freiraum falsch so wird das Ergebnis nicht sehr gut

Ich kann hier nun herzlich wenig helfen, bitte bedenke das du jederzeit scrollen kannst, scrolle weit weg so das du den ganzen Fisch siehst, fixiere mit deinen Augen eine Kante und "merke" sie dir, wenn du nun nah heran scrollst hast du ein ungefähres Bild wo du lang musst, so folgst du nun dem Fisch, du musst an dieser Stelle nicht zu genau werden, ich präsentiere hier einige Ausschnitte die ich sehr schlecht getroffen habe, die jedoch im Endresultat nicht auffallen, mehr zu dieser Genauigkeit im Fortgeschrittenen-Tutorial:

html-seminar.de/woltlab/attachment/697/html-seminar.de/woltlab/attachment/698/html-seminar.de/woltlab/attachment/699/html-seminar.de/woltlab/attachment/700/

Die ersten beiden Bilder kann man deutlich schöner machen, ist aber garnicht notwendig. Die letzten beiden Bilder weisen jeweils Pixelfehler am Fisch auf, ich habe den Pfad so angepasst das der Fisch realistisch "rund" bleibt und keine Einbrüche in der Haut oder der Flosse zu sehen sind, welche wirklich merkwürdig wären.

Wir könnten die weichen Kanten nun mit etwas Transparenz versehen um sie weich zu halten, jedoch verzichte ich in dem Fall darauf, verschiebe dies ins nächste Tutorial und setze unseren Fisch in seinem neuen Reich aus:

html-seminar.de/woltlab/attachment/701/

Schwimme in Frieden kleiner Fisch.

5. Alternativen ^(TOP)
Wir haben in GIMP implementiert einige kleine Wichtel die uns dabei helfen Objekte frei zu stellen. Und zwar alles was eine Selektion erstellen kann:

Wie genau die einzelnen Tools funktionieren kann ich ausführlich leider nicht erklären, wichtig ist jedoch die SHIFT - Taste denn mit dieser kann man mit den meisten Tools multiple Auswahlen erstellen, ansonsten müssen wir auf die Sicherungsebene zurückgreifen (nie verkehrt). Ich erkläre das anhand des Würfels und des Zauberstabes *hex hex*.

Der Zauberstab...
... selektiert mit justierbarer Toleranz einen Bereich um den ausgewählten Pixel der eine farbliche Ähnlichkeit aufweist. Sprich: Wir drücken auf einen orangefarbenen Pixel und alle anderen ähnlichfarbigen Pixel werden dazu markiert. Ich öffne nun das Würfel-Bild und stelle die Toleranz des Zauberstabes (Threshold, z.Dt. weiß ich das leider nicht) auf 40:

Wenn ich nun auf die horizontale Fläche des Würfels klicke erhalte ich eine interessante Auswahl: ^{(Für bessere Sichtbarkeit Auswahl in Pfad umgewandelt)}

html-seminar.de/woltlab/attachment/704/

Nicht sonderlich spannend. Was aber wenn ich nun die Shfit Taste gedrückt halte und auf eine der noch nicht markierten unteren Ecken klicke, es ist Zauberei:

html-seminar.de/woltlab/attachment/705/

Ich wünschte ich hätte die Zeit und Geduld jedes Tool auf diese Weise zu erklären, aber das geht einfach nicht. Bitte probiere viel herum, Fragen sind gerne gesehen.

Was macht denn Shift?

Diese kleinen Buttons und du, ihr werdet beste Freunde

1. Erstellt unabhängig ob eine Auswahl vorhanden ist eine neue Auswahl (kein Modifikator)
2. Erstellt eine neue Auswahl oder fügt einen neuen Bereich zur aktuellen Auswahl hinzu (Shift)
3. Entfernt einen Bereich der bereits vorhandenen Auswahl (Strg)
4. Beschränkt die bereits vorhandene Auswahl auf die neue Auswahl (Shift+Strg)

Sehr wichtige Tools, jedes Auswahlwerkzeug hat diese Methode!

6. Schlusswort ^(TOP)

Ich hoffe ich konnte helfen, du konntest was lernen und wir sehen uns auch im nächsten Teil. Wie immer stehen die Kommentare offen für Fragen, Anregungen, etc. man kennt es ja, bis da hin, ich bin raus

html-seminar.de/woltlab/attachment/685/html-seminar.de/woltlab/attachment/688/html-seminar.de/woltlab/attachment/689/html-seminar.de/woltlab/attachment/690/html-seminar.de/woltlab/attachment/692/html-seminar.de/woltlab/attachment/702/html-seminar.de/woltlab/attachment/703/html-seminar.de/woltlab/attachment/706/

Zitat von sysop

MIT HTML5 ist das so eine Sache, da ja viele "alte" Tags wegfallen.

Und was hat das damit zu tun das man weiter mit HTML4 arbeiten kann wenn man das möchte? Ich bezweifle mal das die Internetbrowser die wegfallenden Elemente löschen, immerhin wird selbst der längst veraltete marquee Tag noch unterstützt und ist mit richtigem Doctype auch ohne Fehlermeldung verwendbar.

Eine Liste der wegfallenden Elemente und Attribute findet sich hier. Ich erkenne beinahe nichts was selbst in HTML4 noch großartig wichtig ist/war.

Seiten die auf den <big>-Tag oder das width-Attribut zurückgreifen gehen selbst mit HTML4 nicht wirklich konform und bedürfen längst einer Überholung.

Bitte denkt daran das HTML 5 keine Pflicht ist, niemand zwingt irgendwen da auch nur einen Gedanken dran zu verschwenden, es ist lediglich ein Angebot. Vergleichbar ist Photoshop: Es gibt bis heute Menschen die mit ihrer CS2 Version zufrieden sind und damit arbeiten. Wenn man nicht will dann muss man auch nicht, in dem Fall muss man nur damit leben das die neuen Elemente auch nicht verwendet werden können.
Den Benutzer, welcher nur das Endprodukt sieht, wird es auch herzlich wenig interessieren ob es nun HTML 5 oder HTML 4 ist, solange Aussehen und Funktionalität stimmen.

Das kannst du gerne tun, ich sende dir eine private Nachricht mit meiner Adresse. Die Frage ist natürlich ob ihr beim Layout über Tabellen bleiben wollt oder ob ihr euch das CSS-Boxmodell zu nutzen machen wollt, dann wäre das beheben der Fehler in der Steuerung natürlich nicht so sinnvoll.

HTML ist und bleibt eine Auszeichnungssprache, macht persönlich also garnichts sondern diktiert nur dem Browser wie er Inhalt zu interpretieren und anzuzeigen hat. Klick Events abfangen nur mit HTML geht nicht und wird nicht gehen, dafür wird man immer JavaScript nutzen, nur um das mal klar zu stellen.

Wo wir auch wieder dabei wären: HTML an sich wäre absolut nicht zu gebrauchen. Erst in Verbindung mit CSS (in dem Fall wohl 3), JavaScript, etc. wird es überhaupt sinnvoll.

Was soll man schon über HTML 5 sagen was noch nicht gesagt wurde, es ist halt übersichtlicher und einfach logischer als vorher

Auch von mir ein Hallo, wir sind meistens ganz handzahm wenn man sich nicht wie der letzte Dorftrottel aufführt

Bitte vergiss die Tabellen schnell wieder wenn du von Anfang an richtig lernen möchtest. Deine Frage nach dem "Wie geht es denn besser?" klärt sich im HTML-Seminar (.de), speziell im Abteil CSS Box Modell. Ein richtiger Ansatz wäre es nun das Tutorial von Anfang an durchzuarbeiten, bis du die Themen HTML und CSS abgeschlossen hast.

Auf den ersten Blick scheint das viel komplizierter zu sein als einfach Tabellen zu nutzen, du wirst jedoch merken das Tabellen Dinge viel komplizierter machen als sie eigentlich sind. Desweiteren sind Tabellen nun mal zum anzeigen tabellarischer Daten da.

Zu deinen rechtlich geschützten Bildern kann ich dir sagen das ein Vermerk darauf sowohl dir als auch deinen Benutzern deutlich mehr hilft als das verbieten des Kontextmenüs (welches man im Browser deaktivieren kann). Das ist Spielkram mit dem man sich vor gut 6-7 Jahren beschäftigt hat und verbreitet nur unnötige Unruhe beim Benutzer weil das bekannte Menü nicht aufpoppt.
Wenn du nicht weißt wie du deine Bilder richtig schützen kannst, eröffne doch einfach ein entsprechendes Thema im Forum, wir helfen auch da gerne.

Ich hoffe ich konnte dir helfen abzuwägen welcher Weg für dich der richtige ist und wünsche dir viel Spaß in der Welt von HTML, CSS und Co.

PS.: Nicht wundern, deinen Code habe ich etwas aufgelockert

Ich möchte mir nun auch einige Minuten nehmen um eine Rückmeldung zu geben.

Ich habe mich gerade umgesehen, konnte jedoch euer Alter nicht finden, jedoch erdreiste ich mich mal zu sagen das ihr für die "Generation Internet" schon ein stattliches Alter habt, um so mehr erfreue ich mich an eurem Interesse an der Thematik.

Es ist hier im Forum oft schwer einzuschätzen welche Art der Kritik erwünscht ist, in eurem Fall offenbar sämtlicher Art also gebe ich mir Mühe einige Punkte die mir auffallen so konstruktiv wie möglich wieder zu geben.

Wenn ich eure Seite aus Sicht der Moderne beurteilen sollte, würde ich mich meinem Vorredner wohl ausnahmslos anschließen, jedoch verliere ich nicht aus den Augen das eure Zielgruppe eine ganz spezielle ist, nämlich jeder rund um euch und euren Biercub herum. Ein Blick in das Gästebuch verrät im Großen und Ganzen das eure Seite gut ankommt, das ist schon mal sehr positiv.

Wie bereits erwähnt möchte ich eure Internetseite in Relation zu eurem Publikum sehen, dazu fallen mir schon ein paar Dinge auf.

Die vielen bunten und bewegten Bilder kommen heute gar nicht mehr gut an, jedoch sind sie als Augenfang für die ältere Generation sicher eine nette Spielerei, ich würde die Anzahl jedoch trotzdem verringern. In dem Fall würde ich alle bewegten Bildchen bis auf das unter der Navigation entfernen.
Dass das angesprochene Bild unter der Steuerung stark verpixelt ist und somit die Qualität der Seite stark verringert möchte ich hier nur beiläufig erwähnen, eine passende Grafik finden wird nicht einfach sein.

Mit steigendem Alter leiden gewisse Körperteile unter Defiziten, oft sind es die Augen. Das ist ein Punkt der mich dazu veranlasst etwas zur Lesbarkeit zu sagen. Den Texten auf der Seite fehlt es leider völlig an Struktur, beinahe jede Seite unterscheidet sich dahin gehend von den anderen. Ich empfehle hier eine einheitliche Schriftgröße einzuführen (dabei können wir auch gerne helfen) und die Texte nicht zentriert anzuzeigen, da dies dem Auge erschwert den Anfang der nächsten Zeile zu finden. So muss sich der Sehnerv nicht auf jeder Unterseite an ein neues Schriftbild gewöhnen sondern kann entspannt durch alle Seiten blättern.
Der Hintergrund hat nicht nur eine eher unpassende Farbe um Fließtext darauf zu platzieren, auch die Raufaser-Struktur erschwert es dem Auge ungemein sich klar auf den Text zu fokussieren. Ich empfehle dringend auf einen einfarbigen Hintergrund zurückzugreifen und ihn in eurem Fall eventuell beige einzufärben, der Text lässt sich hierdurch gleich deutlich besser lesen:

html-seminar.de/woltlab/attachment/678/

Die in diesem Fall verwendete Farbe hat den Hexadezimalwert #ffeecc, wobei dies natürlich nur ein Vorschlag ist, auch andere Farben sind durchaus möglich.

Die Textgröße auf der Startseite halte ich für angebracht, sofern die Texte kurz sind und bleiben. Für die bessere Lesbarkeit sollte außerdem die Anzahl der Bilder im und um den Text herum verringert werden. Ich habe mal ein Beispiel angefertigt wie eine Struktur aussehen könnte:

html-seminar.de/woltlab/attachment/680/

Unschwer zu erkennen ist auch das ich die "Werbung" farblich etwas abgehoben habe, so wird die Aufmerksamkeit erst etwas darauf gelenkt (was bei Werbung ja Sinn macht), danach jedoch wird der Leser nicht mehr unterbewusst abgelenkt und kann sich auf den Text konzentrieren.

Als letztes der Hinweis: Einheitliche Schriftfarbe. Auch wenn "August 2014" auf der Unterseite "Veranstaltungen" wichtig ist, bitte Schwarz lassen und lediglich mit font-weight bold auszeichnen und die Schrift etwas größer als die aus dem Text darunter lassen/machen, bitte auch den blauen Text schwarz einfärben, wegen der Einheitlichkeit

So viel möchte ich jetzt mal zum Design von mir geben, zu viel würde ich nicht verändern. Hier fällt mir auf das Beige unfassbar gut zu den Buttons der Steuerung passt, das selbe Farbspektrum und doch hebt es sich dezent ab gefällt mir richtig gut

Auf der Unterseite "Links" sehe ich als Erstes das neben der eben besprochenen Struktur auch eine Grafik zu fehlen scheint "LTE Highsped Internet 336x280". Außerdem fällt mir der rote Text unter der Überschrift auf. Dieser lenkt das Auge auf sich und enttäuscht dann durch mangelnde Größe, für Menschen mit nicht ganz so neuwertigen Augen nicht lesbar und somit eröffnen sich den Benutzer viele Fragen. Das eigentlich Wichtige ist aber: Der Inhalt des Textes hat hier nichts zu suchen, sondern gehört ins Impressum, das hat neben mehr Struktur vor allem rechtliche Hintergründe, euch wird niemand anzeigen weil ihr den Text dort stehen habt, es gehört aber nicht gerade zum guten Ton.

Beim Thema Recht stoße ich im Impressum auf etwas, das schleunigst behoben werden sollte. Der Absatz 2 (Urheberrecht) verweist darauf das die verwendeten Grafiken nicht ohne "deine" Zustimmung verwendet/verbreitet werden dürfen, du hast jedoch garnicht die Rechte an den Grafiken, hier sollte dringend auf die Quellen der Bilder verwiesen werden.

Ich denke das reicht erst mal als Anhaltspunkt. Bitte macht euch klar das eure Seite sehr "altbacken" ist und keinem einzigen modernen Anspruch genügt, das sollte euch jedoch weniger beschäfitgen da wie gesagt auch euer Zielpublikum diese Moderne nicht gewohnt ist und das nicht so eng sieht Ich habe erst vor einigen Tagen einen Beitrag zum Thema Farben verfasst, dort kläre ich einige grundlegende Dinge die man beachten sollte, vielleicht wollt ihr ein mal reinschauen: Farben - Und warum sie so wichtig sind

Bitte arbeitet weiter an euch und eurer Seite, wenn ihr auf Probleme stoßt haben wir immer ein offenes Ohr, oft rund um die Uhr

Liebe Grüße und auf dann!

Tut mir leid aber ich sehe keine Bilder:

html-seminar.de/woltlab/attachment/677/

Was ich aber sehen kann ist das du unetrschiedlich importierst:

/* 1. Version */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300);




/* 2. Version */
@import "http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300";

Eigentlich sollte beides funktionieren aber es ist kein falscher Ansatz das mal zu synchronisieren.

In der 1. Version fehlen übrigens die "Anführungszeichen", das könnte schon die ganze Magie sein

Was genau ist denn das Problem?

7. Schlusswort
Wer eine Quellenangabe der Bilder erwartet hat sich geschnitten, die sind sowieso von mir

Ich arbeite nun sehr lange an diesem Beitrag zum Forum und langsam werde ich müde und irgendwie sentimental

Ich möchte dir auf jeden Fall danken das du dir die Zeit genommen hast dich durch meine Theorien zu kämpfen und ich hoffe ich konnte dir auf irgendeine Art und Weise helfen. Sollten Fragen offen sein dürfen sie gerne gestellt werden, ich (und auch jeder andere hier) werde (/wird) versuchen mit Rat und Tat zur Seite zu stehen, das zeichnet uns eben aus

Außerdem vielen Dank an Axel, laura und all diejenigen die dazu beigetragen haben das Forum zu dem zu machen was es heute ist

Jetzt muss ich den ganzen Kram hier noch irgendwie in korrekter Reihenfolge posten..

6. Referenz (zur Natur)
Dieser vorerst letzte Abschnitt soll klären wie all das was oben beschrieben wurde zustande kommt.

Als erstes wie versprochen "Schwarz und Weiß sind keine Farben." Farbe in der Physik sind Lichtwellen. Reines Schwarz ist das fehlen sämtlichen Lichts, schwarze Löcher beispielsweise senden reines Schwarz aus, nämlich absolut gar kein Licht. Reines Weiß ist im Großen und Ganzen das was die Sonne uns entgegenfeuert. Die Redewendung hat ihren Ursprung darin das Schwarz, Weiß und Grau als "unbunt" und daher irgendwie "nicht farbig" angesehen wurden/werden. Rein physikalisch gesehen existieren auf unseren Bildschirmen z.B. also garkein Schwarz und Weiß und rein von der Physik her sind es auch Farben also sind es für mich in diesen Beiträgen auch Farben

Warum nun unterscheidet sich die Wahrnehmung der folgenden Icons so sehr:
html-seminar.de/woltlab/attachment/676/ html-seminar.de/woltlab/attachment/675/
Dafür benötigt es einem Ausflug aus dem Monitor heraus. Nehmen wir bei bestem Sonnenlicht auf der Wiese einen Grashalm in die Hand mag dieser zwar grün erscheinen, jedoch ist er nicht simpel grün sondern setzt sich aus unendlich vielen Grüntönen zusammen. Die ganze Natur ist so aufgebaut, nichts ist wirklich Einfarbig, schon gar nicht wenn Licht ins Spiel kommt und reflektiert oder absorbiert wird.
Nun erzeugen also z.B. dezente Farbverläufe in Icons einen gewissen Grad an Realismus, an den das Auge gewohnt ist, somit sieht es simpel besser aus.

Ich möchte zu guter Letzt noch eine kleine Inspiration anhängen, eigentlich nichts Besonderes aber ein Blick auf diese Grafik hat mich schon oft auf den richtigen Weg gebracht:

html-seminar.de/woltlab/attachment/674/

5. Farbverläufe
Hier ist äußerste Vorsicht geboten. Farbverläufe sind eine großatige Sache um Elemente nicht so "langweilig" wirken zu lassen, jedoch sehen Farbverläufe extrem schnell einfach nur schäbig aus. Dies ist meist der Fall wenn das Spektrum zu groß wird, sich also die Farben des Start- und des Endpunktes stark unterscheiden, im Folgenden ein Beispiel für einen grottenschlechten Farbverlauf:

html-seminar.de/woltlab/attachment/668/

Ja... muss ich das noch kommentieren? Schwarz zu Weiß, #000000 zu #FFFFFF.. nein! Absolutes no-go, dafür gibt es nicht mal den Preis für den blödesten Einfall

Genug geflucht, jetzt konstruktiv: Wir sehen hier eindeutig den so genannten "Stufeneffekt" dieser lässt sich durch qualitativeres Speichern und damit wachsender Dateigröße zwar kompensieren, in diesem Extrembeispiel jedoch nicht verhindern. Wie verhindern wir das?

1. Die Farben näher zusammenführen, nehmen wir mal statt #000000 und #FFFFFF einfach #222222 und #444444:

html-seminar.de/woltlab/attachment/669/

Edel, damit lässt sich arbeiten, ich sehe keine Stufen und doch einen Verlauf, einen Verlauf der meine Augen nicht zerreißt so wie der Letzte. Kommen wir zu...

2. Wir verringern die Distanz über die der Verlauf sich ausbreitet, je weiter der Verlauf wandert um so eher erkennt man Stufen, für den gesamten Hintergrund ist ein simpler Verlauf daher meist eher ungeeignet:

html-seminar.de/woltlab/attachment/670/

Damit lässt sich arbeiten. Der Hintergrund einer horizontalen Steuerung, ein schmaler Fußbereich, eine Kopfzeile für die Sidebar, etc.

Schwarz ist nicht gleich schwarz:
Oft sieht man schwarze Flächen, wenn man aber versucht etwas Ähnliches im eigenen Design umzusetzen wird das nichts, der Grund: Es war kein Schwarz sondern ein Farbverlauf. Ich ziehe hier meine kürzlich erstellten Social Media Icons zu Rate:

Schwarz: html-seminar.de/woltlab/attachment/672/

Original: html-seminar.de/woltlab/attachment/671/

Der Unterschied ist gering, aber er ist da und genau das nimmt das Auge wahr und genau das ist sehr wichtig zu beachten, vor allem wenn man mit dunklen Layouts arbeitet!
Bei einer Auflösung von 256x256px sollte der Unterschied auffallen:

html-seminar.de/woltlab/attachment/673/

Auch Browser können das:
Farbverläufe darstellen kann auch jeder moderne Browser und das sogar Hardwarebeschleunigt, hierzu kann ich leider auch keine lange Erklärung abgeben, ihr wisst schon, der Rahmen Google hilft weiter und eventuell bei Zeiten auch das HTML-Seminar, zu Farbverläufen habe ich (zumindets auf der Internetseite) nichts finden können. Google hilft an der Stelle sicher gerne.

Vorteil der CSS-Gradients: Keine Datei muss seperat übertragen werden, dies spart in den meisten Fällen wenige Kilobyte.
Nachteile der CSS-Gradients: Text. Der Farbverlauf muss als kleines "Script" angegeben werden was meist einige Anläufe braucht und durchaus nerven kann. Außerdem bisher kein optimaler Support sämtlicher Browser, das kommt aber bald, versprochen

4. Farbkombinationen
Nun kommen wir ein mal zum spannenden Teil: "Was für Farben nehme ich denn jetzt für meine Webseite?"

Ich kann beruhigen: Wir haben ja nur etwa 16,6 Millionen Farben, da kann es doch nicht so schwierig sein die passenden zu finden

Die erste Frage ist: Brauche ich Farben? Die Antwort ist ja, selbst wenn wir von dem Spruch "Schwarz und Weiß sind keine Farben" (mehr dazu im Referenzkapitel) ausgehen brauchen wir welche, abseits von #000000 und #FFFFFF. Nun kommt das erste Mal in diesem Tutorial das Wort Tutorial gleich 2 mal vor, außerdem zum ersten mal geht es nun um Geschmack.
Farben wählt der Designer im Normalfall in erster Linie nach Geschmack.

Mit unserem bisherigen Basiswissen können wir aber sagen: Wir lassen die Finger von knalligen, bunten Farbverläufen. Ich sage nicht das knallig schlecht ist: Auf der Internetseite eines Kindergartens machen ein paar knallbunte Luftballons einiges aus, jedoch hat knallig als Designelement eher weniger Freunde unter den Benutzern und wird meistens als "billig" oder auch "Gewollt aber nicht gekonnt" angesehen.

Ich kann an dieser Stelle niemandem sagen "Nimm die und die Farbe", pauschal ist das unmöglich, anders sieht es aus wenn du (ja genau dich meine ich) einige Vorstellungen das Thema der Seite betreffend hast und einen Denkanstoß suchst, in dem Fall melde dich natürlich! Ich kann jedoch sehr wohl einige grundlegende Dinge die zu beachten sind aufdecken.

1. Sättigung/Helligkeit raus
Bei großen Designelementen (Hintergrund für die Navigation, etc.) sollte die Sättigung immer weit reduziert sein, das ist wichtig um eine große Kompatibilität an Kontrast zu Schriftfarben zu bieten, nahezu keine Schriftfarbe zwischen Schwarz und Weiß lässt sich auf knallrot langfristig gut lesen und von bunten Schriften für Fließtext ist schon gleich abzuraten.
Außerdem lenkt weniger Sättigung und Helligkeit das Auge weniger ab, es wird schlichtweg abgelenkt vom Hintergrund wenn dieser entsprechend angepasst ist.

2. Auf Farben beschränken
Es macht keinen Sinn für jedes Element eine neue Farbe zu wählen! Wir beschränken uns von Anfang an auf 2 oder maximal 3 Farben und spielen mit eben diesen nur mit Sättigung und Helligkeit herum, dies lässt sich auch ganz gut in den Beispielen aus dem letzten Kapitel erkennen, das warme Layout basiert ausschließlich auf Orange, das kalte auf Blautönen.

Für diesen Arbeitsschritt gibt es 2 ganz wunderbare Tools:

Adobe Kuler und palleton.com wobei palleton.com mein Favorit ist. Es gibt zu beidne Programmen relativ wenig zu sagen, ich bitte darum einfach herumzuspielen. Die Farbregeln (Triade, Monochrom, etc.) möchte ich an dieser Stelle nicht erklären, auch hier würde ich den Rahmen sprengen, dazu erfolgt bei Nachfrage ein weiteres Tutorial

3. Akzente
Hier wird es bunt! Knallige Farben können durchaus Verwendung finden, Kontrastreich in Überschriften zum Beispiel um sich auch bei kleiner Schriftgröße vom Fließtext abzuheben (das Prinzip nutze ich auch in diesem Tutorial, mit Farbe und mit Helligkeit). Vor ein paar Minuten sprach ich die bunten Luftballons an, sind eben diese dezent gesetzt so unterstreichen sie das Thema der Seite und vermitteln dem Benutzer ein Gefühl von Zugehörigkeit. Auf der Seite für den Kegelclub sind es in Szene gesetzte Kegel und Kugeln, beim Gärtner sind es im Hintergrund leicht durchschimmernde Blumen und Sträucher, der Kreativität sind keine Grenzen gesetzt.
Es muss nur darauf geachtet werden das Auge nur kurz abzulenken und die Akzente klar vom Inhalt zu trennen.

Schauen wir uns doch ein mal die Startseite des HTML-Seminars an:

html-seminar.de/woltlab/attachment/667/

Das Auge schnellt in die linke, obere Ecke und fixiert die bunte Navigation, als nächstes schweift es hinunter zum Logo welches klar den Inhalt der Seite wiedergibt und mit einem transparenten Quelltext (passend zum Inhalt) hinterlegt ist. Danach geht der Blick in Richtung der vertikalen Navigation mit den bunten Balken. Der Benutzer weiß nun wo die Navigationen und das Logo sind, zeit den Inhalt zu erkunden.. doch was ist das, ein grauer Kasten erregt die Aufmerksamkeit durch seine grünen Balken, eine wichtige Infobox wird erkannt und gelesen.
Geschickterweise befindet sich die Werbung für die Video Tutorials nur knapp darüber: Zufall, oder doch unterbewusst geschicktes Marketing? (An der Stelle viele Grüße an Axel, Spaß muss sein )

4. Zu bunt?
Nach 2 Stunden herumprobieren mit unterschiedlichen Kontrasten wird das Auge müde und das Gehirn verliert an Lust. Zeit für eine Pause und (ganz wichtig) eine zweite Meinung! Die Ehefrau, der Bruder, die Tante (je nach Zielgruppe eventuell) kann mit einem raschen Blick schnell helfen, auch wir im Forum können da sehr hilfreich sein. Gerade am Anfang ist es wichtig nicht seinen Willen durchzusetzen sondern sich auch mal etwas sagen zu lassen von Leuten die vielleicht schon etwas mehr den Durchblick haben.

5. Im Zweifel
Im Zweifel lieber schlicht als nicht. Ein Design muss nicht unbedingt durch tolle Hintergründe, eine exakt abgestimmte Farbpalette und vieles mehr bestechen, es kann auch durch seine Schlichtheit beeindrucken. Ich verweise an der Stelle erneut auf html-seminar.de. Überragende Designelemente gibt es hier nicht und trotzdem ist alles wunderbar strukturiert und kann sich durchaus sehen lassen. Auch das Design von YouTube oder Facebook ist nichts was ich als überragend bezeichnen würde, aber es funktioniert denn es ist eine Struktur vorhanden (bei Facebook lässt sich wirklich drüber streiten an manchen Stellen..).

Schwarz und Weiß machen nie etwas verkehrt, jedoch werde ich auf die schwarze Farbe im Kapitel Farbverläufe noch ein mal zu sprechen kommen. Dazu ein paar "Farbkleckse" wie z.B. farbige Überschriften oder Trennlinien und fertig ist die Laube.

3. Farben als Manipulationhtml-seminar.de/woltlab/attachment/658/
Das klingt nun zunächst härter als es ist, wir schaden natürlich neimandem. Farben lassen sich ganz einfach dazu nutzen um das Auge des Benutzers auf die wichtigen Elemente der Seite zu lenken, wir können die Stimmung des Benutzers beeinflussen und wir können es dem Benutzer erleichtern Texte zu lesen.

Werfen wir einen Blick auf das Bild am rechten Rand so fokussiert unser Auge sofort eine der Blumen, in den meisten Fällen wohl die rechte. Dieses Phänomen können wir auch auf unserer Webseite ausnutzen. Haben wir viele Elemente so können wir beispielsweise die Steuerung einfärben um dem Benutzer sofort klar zu machen wo diese sich befindet.

html-seminar.de/woltlab/attachment/659/html-seminar.de/woltlab/attachment/661/

Wenig Aufwand, großer Effekt. Der Blick schweift direkt auf die Steuerung, der Benutzer fühlt sich nun sicher und hat einen Anhaltspunkt von dem aus er den Rest des Dokumentes erkunden kann. Selbst wenn dir persönlich dieser Effekt nicht sonderlich klar wird, er ist auf jeden Fall da und sollte nicht außer Acht gelassen werden.
Die HTML Dateien zum selber probieren gibt es natürlich auch wieder dazu: html-seminar.de/woltlab/attachment/660/ / html-seminar.de/woltlab/attachment/662/

Beinahe jeder hat schon ein mal den Begriff "kalte & warme Farben" gehört, viele können damit aber nicht vorstellen was man damit bewirken kann. Wärmere Farben sind meist sehr angenehm anzusehen, kältere Farben lenken die Aufmerksamkeit eher von sich und somit zum Beispiel auf Text. Doch was sind kalte und was sind warme Farben? Nun dies ist nicht sehr einfach zu beantworten. Das Einzige was man sagen kann ist: Es gibt kein warmes Blau und kein kaltes Rot. Alle anderen Farben lassen sich theoretisch über die im letzten Bereich besprochene Helligkeit, bzw. die Sättigung entweder in Richtung kalt oder in richtung warm lenken.

Mehr zum Thema kalte und warme Farben gibt es im Bereich Farbkombinationen.

Nun wollen wir uns anhand eines Beispiels ansehen was der Unterschied zwischen einer kalten und einer warmen Webseite ist.

html-seminar.de/woltlab/attachment/663/html-seminar.de/woltlab/attachment/665/

Hier sehen wir relativ eindeutig einen Effekt. Das eher warm gehaltene Layout sieht zwar schick aus und scheint stimmungsvoll zu sein, jedoch verliert der Inhalt komplett an Gewicht, das Auge ist sehr beschäftigt damit all die Einflüsse unterzubringen und kann sich nicht richtig fokussieren. Es ist simpel zu viel des Guten.
Beim kalten Layout sieht das schon ganz anders aus, die unterschiedlichen Farbstufen lassen das Auge einfach kalt (hehe) und es fokussiert sich eher auf den Text, allgemein sieht das Layout etwas geschmeidiger aus.
Und natürlich als HTML Datei: html-seminar.de/woltlab/attachment/664/ / html-seminar.de/woltlab/attachment/666/

Unser warmes Layout bessert nun zwar die Stimmung des Nutzers auf, verscheucht ihn jedoch auch, es drückt einfach zu sehr. Ob das nun ein guter oder ein schlechter Zustand ist sei mal jedem selbst überlassen, förderlich für den Fokus auf dem Inhalt ist es jedoch ganz und gar nicht!

2. Sättigung und Helligkeit
Viele Menschen denken bei Farben geht es nur um das Zusammenspiel von zum Beispiel Rot und Grün oder Gelb und Blau. Jedoch sind die Sättigung und die Helligkeit ebenso wichtige Faktoren. Um mit Farben wirklich umgehen zu können, muss man zunächst verstehen wie Sättigung und Helligkeit funktionieren, erst dann kann man sich überlegen welche Farben man gerne benutzen möchte.

2.1 Sättigunghtml-seminar.de/woltlab/attachment/650/
Unter Sättigung versteht man die Intensität von Farben. Das Beispielbild auf der rechten Seite zeigt die Farbe Rot (#FF0000) mit einer Sättigung von 100%, 80%, 60%, 40% und 20%. Wie man sehen kann ist die Farbe Rot mit einer Sättigung von 20% eher ein angenehmes Rosa, welches deutlich weniger ins Auge sticht als das normale Rot, es ist jedoch genau der selbe Farbton.

2.2 Helligkeithtml-seminar.de/woltlab/attachment/651/
Helligkeit ist hier nicht zu 100% der korrekte Ausdruck, übersetzen wir den Begriff "Value" aus dem Englischen erhalten wir eher "Wert", Deutschland hat also für diesen Begriff nicht unbedingt ein Wort, jedoch handelt es sich dabei lediglich um den Anteil (value) Schwarz in der entsprechenden Farbe. Auf der rechten Seite sehen wir wieder die Farbe Rot (#FF0000) mit 100%, 80%, 60%, 40% und 20% Helligkeit. Hier sehen wir das aus Rot ein stimmungsvolles Braun wird.

Schließlich noch Variationen von Sättigung und Helligkeit. Spannend ist das blaue Beispiel. Die Farben auf der rechten Seite scheinen sich kaum zu unterscheiden, jedoch sind die Hex-Werte von oben nach unten gesehen:
#010189 / #0101D1 / #0303FF / #0B0BFF / #1313FF

html-seminar.de/woltlab/attachment/652/html-seminar.de/woltlab/attachment/653/html-seminar.de/woltlab/attachment/654/

2.3 Das Problem der Sättigung/Helligkeit
Die Devise lautet: Nicht übertreiben!
Gerade auf Internetseiten ist es absolutn icht empfehlenswert größere Bereiche mit knalligen Farben mit voller Sättigung zu verwenden. Man erhält in diesem Fall nicht nur extreme Kontraste (später mehr), sondern außerdem trifft man das Problem der billig wirkenden Farben. Knallige, bunte Farben (im schlimmsten Fall in großer Vielfalt) lenken das Auge ab und sehen aus wie gewollt aber nicht gekonnt (auch dazu später mehr).

Zurückhaltung ist das Stichwort, dazu ein Beispiel. Wir sehen zwei mal die selbe Box, ein mal mit reinem Rot (#FF0000) und ein mal mit einem dunkleren Rot (#341f1f). Der Text auf dem dunklen Rot ist deutlich einfacher zu lesen und die Farbe an sich passt viel besser zum Hintergrund und dem oberen Balken, bietet allerdings trotzdem einen farblichen Kontrast. Ich habe es übrigens nicht geschafft die Schriftgarbe auf dem hellen Rot so anzupassen das ein entspanntes Lesen möglich ist, das HTML Dokument kann hier geladen werden: html-seminar.de/woltlab/attachment/655/ ^{(Auf das Wesentliche beschränkt)}

Ich sage es noch mal: Wir haben nicht die Farbe geändert sondern lediglich die Helligkeit reduziert. Dies zu verstehen ist von großer Bedeutung!

html-seminar.de/woltlab/attachment/656/html-seminar.de/woltlab/attachment/657/

html-seminar.de/woltlab/attachment/648/1. Farbräume

Zunächst ist ein grundlegendes Verständnis nötig, wie Farben in der Technik grundsätzlich umgesetzt sind. Hierzu klären wir ab was Farbräume sind und wozu wir solche haben.

Ein Farbraum ist vereinfacht ausgedrückt die Anzahl der Farben welche dargestellt werden können. Nehmen wir als Beispiel ein Schachbrett, so benötigen wir nur 2 Farben: Schwarz und Weiß. Theoretisch würde uns also ein Farbraum (oder eine Farbpalette) mit diesen 2 Farben ausreichen, jedoch würde ein Farbraum mit dieser Größe keine Anwendung finden, existiert also nicht wirklich udn dient nur als Beispiel.

Es stellt sich die Frage: "Welcher Farbraum eignet sich für meine Internetseite?"
Der derzeit für das Internet optimierte Farbraum nennt sich sRGB. Das 's' steht in dem Fall für Standard und 'RGB' bedeuten Red, Green and Blue oder Rot, Grün und Blau. Schön, dass die Abkürzung auf mehrere Sprachen passt.

RGB kennt man auch von der bekanntesten Art Farben für seine Webseite anzugeben: Dem Hexadezimalcode. Dabei beschreibt das R die ersten beiden Ziffern, G beschreibt die mittleren beiden Ziffern und B berschreibt die letzten beiden Ziffern. Wir können uns nun auch erklären warum wir im Hexadezimalsystem arbeiten: sRGB kennt 255 Abstufungen jeder Farbe, im Hexadezimalsystem können wir die Zahl 255 mit nur 2 (statt 3) Zeichen darstellen: FF.

Nur wie verwenden?
Arbeiten wir mit CSS so bedienen wir uns automatisch dem sRGB Farbraum.
Unsere Grafiksoftware müssen wir dementsprechend einstellen, im Folgenden erkläre ich wie wir GIMP den sRGB Farbraum beibringen können.

1.1 GIMP's Farbräume konfigurieren
Um GIMP den sRGB Farbraum beizubringen müssen wir diesen zunächst herunterladen: html-seminar.de/woltlab/attachment/649/
Recht: Die Datei darf nur verbrietet, jedoch in keiner Art verändert werden, genauere Infos gibt es hier ^(en)

Wir entpacken die Datei (z.B. mit WinRar) auf unserem Desktop oder an einer Stelle die wir später auch wieder finden.

Für benutzer der DEUTSCHEN Version:
Nun starten wir Gimp und klicken in der Menüleiste auf Bearbeiten -> Einstellungen. In den Einstellungen wählen wir auf der linken Seite aus der Liste Farbverwaltung. Wir klicken auf das Dropdown Menü neben RGB-Profil (im Werkzustand steht hier "Keines"). Im auftauchenden Dropdown Menü klicken wir auf Farbprofil von Festplatte wählen ... und navigieren zur entpackten sRGB_v4_ICC_preference.icc. Das war bereits die ganze Magie.

Für Benutzer der ENGLISCHEN Version:
Nun starten wir Gimp und klicken in der Menüleiste auf Edit -> Preferences. In den Einstellungen wählen wir auf der linken Seite aus der Liste Color Management. Wir klicken auf das Dropdown Menü neben RGB profile (im Werkzustand steht hier "None"). Im auftauchenden Dropdown Menü klicken wir auf Select color profile from disk... und navigieren zur entpackten sRGB_v4_ICC_preference.icc. That's it

Farben sind im Internet ein meist stark unterschätztes Thema. Farben können sehr komplex sein und einen zur Verzweiflung bringen. Wenn ich das Internet durchstreife und mich durch einige Webseiten klicke fangen meine Augen an so richtig ins Schwitzen zu kommen. Oft kommt es vor das Texte aufgrund falscher Farbdarstellung schwer zu erkennen sind und man die Lust verliert überhaupt weiter zu lesen, dazu aber später mehr.

Ein Großteil meiner Arbeit läuft außerhalb des Internets ab, ich musste mich zwangsläufig viel mit Farben beschäftigen. Nun möchte ich meine Zeit nutzen und ein mal aufschreiben wie es sich mit den Farben denn nun im Internet verhält.

Für wen ist der Beitrag geeignet?
Einsteiger die einen grundlegenden Überblick suchen wie Farben zu verwenden sind, die einen Leitfaden zum eigenen Layout suchen. Lernen kann sicher fast jeder noch etwas, sogar ich.

Was wird benötigt?
Theoretisch nichts. Wer ausprobieren möchte benötigt nur das kostenfreie Bildbearbeitungsprogramm GIMP, einen Einstieg in das Programm findet man im HTML-Seminar (hier)
Außerdem greifen wir auf 2 Tools im Internet zurück: Adobe Kuler und paletton.com.

Hinweis: Diese Anleitung wird sich in mehrere Beiträge unterteilen, das liegt nicht daran das ich unbedingt meinen Counter in die Höhe treiben möchte. Durch die zahlreich eingefügten Grafiken verliert ein einzelner Beitrag leider viel zu sehr an Übersichtlichkeit.

Inhalt

• 1. Farbräume
• -- 1.1 GIMP's Farbräume konfigurieren
• 2. Sättigung und Helligkeit
• -- 2.1 Sättigung
• -- 2.2 Helligkeit
• 3. Farben als Manipulation
• 4. Farbkombinationen
• 5. Farbverläufe
• 6. Referenz (zur Natur)
• 7. Schlusswort

Schön dass es funktioniert, ich würde mir noch die eine Zeile sparen:

$("#"+ legungName).mask(...

Leider kenne ich mich mit der Erweiterung absolut nicht aus und habe gerade auch keine Zeit mir das durchzulesen, werde ich bei Gelegenheit tun und dann entsprechend antworten wenn sich auch sonst niemand auskennt.

Du hast auf jeden Fall den richtigen Ansatz zum lernen, weiter so

Groß/Kleinschreibung beachten bei Variablen

$(function(legungName, legungsMaske){
  $(legungName).mask(legungsMaske,{placeholder:" "});
  console.log(legungName);
  consoloe.log(legungsMaske);
});