vauge
Well-known member
- Registriert
- 23 Dezember 2006
- Beiträge
- 1.278
- Punkte Reaktionen
- 0
Signaturen selbst gemacht
- Ein Guide zur Signaturgestaltung -
- Ein Guide zur Signaturgestaltung -
0. Inhalt:
- Signaturen allgemein
- Alt-Codes
- Zitate einbinden
- Links einbinden
- Die Farbwahl
- RGB-Codes
- Kästen - Der  -Trick
- Gelerntes anwenden
1. Signaturen allgemein
Signaturen - das sind diese Dinger, die unter jedem Post eines Users angezeigt werden. Und mit genau diesen Signaturen wird sich der folgende Guide beschäftigen.
Zunächst einmal stellt sich die Frage:
"Wo erstelle ich meine Signatur?"
Prinzipiell ist das leicht beantwortet:
Per Klick auf "Profil ändern" in deinem Privaten Bereich hast du Zugriff auf das Feld "Signatur". Hier kannst du sie eintragen.
Allerdings ist das Fenster dort nur sehr klein, und es gibt keinen Vorschau-Button.
Darum empfiehlt sich das Blub-Forum, um seine Sig auszuprobieren.
Des weiteren Interessant ist natürlich...
"Und was gehört in die Signatur?"
Hier kann all das rein, was dir gefällt. Ausnahmen bilden lediglich manch in der Netiquette erwähnte Inhalte - so z.B. Gewaltverherrlichende, Pornografische, etc.
Viele Leute verlinken in ihrer Signatur auf bestimmte Threads / Seiten, an denen sie selbst mitgewirkt haben oder die ihnen gefallen (→ 4. Links einbinden), andere schreiben Zitate berühmter Personen oder Personen aus dem Forum in ihre Signatur (→ 3. Zitate einbinden).
Die sogenannten Altcodes (→ Nächstes Kapitel) ermöglichen besondere, grafische Effekte, und sind damit für manche Signaturen unabdingbar.
Zuletzt muss noch gesagt werden, dass die meisten Signaturen von einem [CENTER]-Tag umschlossen sind.
Dadurch werden sie mittig ausgerichtet.
Beispiel:
Links ausgerichtet...
Mittig ausgerichtet...
Doch genug geredet, widmen wir uns nun den ernsteren Themen...
2. Alt-Codes
Alt-Codes sind spezielle Zeichen, die besondere Effekte in der Signatur ermöglichen.
"Wie erzeuge ich einen Alt-Code?"
Mit gedrückter "Alt-Taste" wird auf dem Nummernblock eine bestimmte Zahlenkombination eingegeben. So entsteht ein Alt-Code.
Wird z.B. Alt gedrückt, und auf dem Nummernblock eine 15 eingegeben, so entsteht eine ☼ - Sonne.
Allerdings haben einige Browser Probleme mit dem Anzeigen von Alt-Codes, deshalb sollten sie nicht zu häufig verwendet werden.
Können sie nicht angezeigt werden, werden sie meist als ein Kästchen abgebildet, dass die ganze Signatur verunstaltet.
"Welche Nummer führt eigentlich zu welchem Code?"
Hier erlaube ich mir, nicht alles abzuschreiben, sondern einfach die entsprechende Liste einzufügen.
Dank für diese Liste geht an tedmontgomery.com.
3. Zitate einbinden
Beginnen wir also mit der Gestaltung unserer Signatur. Wir möchten ein Zitat (Im folgenden das Zitat "Simpson, Homer Simpson, he's the greatest guy in world" von "Homer Simpson") in die Signatur einbauen. Wie gehen wir vor?
Wurde das Zitat im Forum gepostet, eignet sich ein "QUOTE"-Tag. Der Ersteller dieses Zitates wird dabei mit [i]Originally posted by Homer Simpson[/i] erwähnt, das Zitat steht innerhalb des [QUOTE]-Tags.
1. Beispiel:
1.a Code:
[QUOTE][i]Originally posted by Homer Simpson[/i]
Simpson, Homer Simpson, he's the greatest guy in world [/QUOTE]
1.b Aussehen:
Originally posted by Homer Simpson
Simpson, Homer Simpson, he's the greatest guy in world
Dabei kann der Ersteller auch mit dem [SIZE=1]-Tag kleiner geschrieben werden. Auch Farben sind innerhalb des QUOTEs möglich (→ Die Farbwahl).
Der QUOTE-Tag ist jedoch nicht zwangsläufig notwendig, z.B. wenn es sich nicht um ein Zitat aus dem Forum handelt. Hier wird es einfach in Anführungszeichen gesetzt, der Ersteller wird darunter gesetzt. Hier können ALT-Codes und Farben als Verzierung angewand werden.
2. Beispiel:
2.a Code:
[CENTER]"Simpson, Homer Simpson, he's the greatest guy in world"
[SIZE=[color="red"][/color]1][i]- Homer Simpson [/i][/SIZE][/CENTER]
2.b Ergebnis:
"Simpson, Homer Simpson, he's the greatest guy in world"
- Homer Simpson
- Homer Simpson
4. Links einbinden
Dieses Thema lässt sich ganz schnell behandeln.
Häufig sieht man in Signaturen einfach "www.google.de/coole-site.html - Coole Site".
Das sieht nicht gut aus.
Stattdessen kann man das "www.google.de/coole--site.html" einfach verschwinden lassen.
Und zwar so:
[URL="www.google.de/coole-site.html"]Coole Site[/URL]
Das erzeugt dann:
Coole Site
Auch Links können farbig gestaltet werden, dabei muss nur darauf geachtet werden, dass der COLOR-Tag innerhalb des URL-Tags steht (→ Nächstes Kapitel)
5. Die Farbwahl
Das Forum stellt nur eine Begrenzte Anzahl an Farben zur Verfügung.
Eingebunden werden sie alle mit [COLOR="Farbe"], verwenden kann man sie bei Zitaten, Links, ALT-Codes... überall einfach.
Wer mehr als nur die wenigen Farben, die das Forum vorgibt, haben will, der kann sich auf solchen Seiten passende Farben suchen.
Häufig werden Farben genommen, die halbwegs zum Avatar passen.
Dunkles Grau und Schwarz sollten generell vermieden werden.
Ausführlicher behandelt werden Farben im nächsten Kapitel, den...
6. RGB-Farbcodes
6.a Allgemeines über RGB-Codes
RGB-Farbcodes sind - wie der Name schon sagt - in die Farben RotGrünBlau aufgeteilt. Im Gegensatz zu Angaben wie [color="[color="burlywood"]burlywood[/color]"] lässt sich eine Farbe mit den RGB Codes exakt bestimmen.
RBG-Codes werden im Allgemeinen mit einem Raute-Zeichen # eingeleitet, und bestehen aus 6 Zeichen.
Die ersten 2 Zeichen bestimmen den Rotwert. Die 2ten bestimmen den Grünwert, die dritten den Blauwert.
So würde z.B. [color="[b]#[color="red"]00[/color]9900[/b]"] ein Grün erzeugen.
6.b 16er-System / 10er-System: Umrechnung
Die RGB-Codes sind allerdings mit dem 16er-System aufgebaut.
Bei dem normalen Zehner-System gilt bekanntlich:
Code:
[b]Zehner[/b] [b]Einer[/b]
0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
Code:
[b]Sechzehner[/b] [b]Einer[/b]
0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
A A
B B
C C
D D
E E
F F
Code:
A = 10
B = 11
C = 12
D = 13
E = 14
F = 15
3 Sechzehnern
A Einern
Das entspricht 3 * 16 + A * 1 = 48 + 10 = 58, im Zehner-System heisst die Zahl 3A also 58.
Der maximal mögliche Wert in diesem System ist dabei die 255, sprich "FF", also 15 * 16 + 15 * 1.
6.c Übergänge von Farben
Die Übergänge lassen sich differenzieren in einfache Übergänge von Hell nach Dunkel, und fortgeschrittene Übergänge von Farbe1 nach Farbe2.
Allgemein: Der Übergang von Dunkel nach Hell:
Zuerst einmal betrachten wir: Wie erzeuge ich eine möglichst helle Farbe, wie eine dunkle? Hier gilt:
Code:
[color="#[color="red"]AA0000[/color]] = [color="AA0000"]Diese Farbe[/color]
[color="#[color="red"]550000[/color]] = [color="550000"]Diese Farbe[/color]
Ein Übergang von FF0000 bis 000000 müsste also von Rot bis Schwarz sein.
Hier das Ergebnis eines solchen Übergangs:
[color="FF0000"]AAA[/color][color="EE0000"]AAA[/color][color="DD0000"]AAA[/color][color="CC0000"]AAA[/color][color="BB0000"]AAA[/color][color="AA0000"]AAA[/color][color="990000"]AAA[/color][color="880000"]AAA[/color][color="770000"]AAA[/color][color="660000"]AAA[/color][color="550000"]AAA[/color][color="440000"]AAA[/color][color="330000"]AAA[/color][color="220000"]AAA[/color][color="110000"]AAA[/color][color="000000"]AAA[/color]
Alternativ können auch alle Werte gesenkt werden, bei der Ausgangszahl "FF9955" wird pro Schritt jeder Wert um 1 gesenkt, sprich, die nächste Farbe ist "EE8844".
Fortgeschritten: Übergänge unterschiedlicher Farben:
Natürlich ist es z.B. auch möglich, einen Übergang von Blau auf Rot o.ä. zu erreichen. Hier reicht es, die Werte gleichzeitig zu erhöhen.
Anfangsfarbe: #880000
Zielfarbe: #000088
Also wird die Farbe wie folgt geändert:
Code:
880000 -> 770011 -> 660022 -> 550033 -> 440044 -> 330055 -> 220066 -> 110077 -> 000088
AAAAAAAAAAAAAAAAAAAAAAAAAAA
Und was bringt das?
Schöne Übergänge in der Signatur.
6.d Farbgitter
Verschiedene Farbgitter helfen oft, die besten Farben für gute Übergänge herauszupicken. Ein Beispiel:
[color=000000]10[/color] [color=111111]11[/color] [color=222222]12[/color] [color=333333]13[/color] [color=444444]14[/color] [color=555555]15[/color] [color=666666]16[/color] [color=777777]17[/color] [color=888888]18[/color] [color=999999]19[/color]
[color=111111]11[/color] [color=222222]12[/color] [color=333333]13[/color] [color=444444]14[/color] [color=555555]15[/color] [color=666666]16[/color] [color=777777]17[/color] [color=888888]18[/color] [color=999999]19[/color] 20
[color=222222]12[/color] [color=333333]13[/color] [color=444444]14[/color] [color=555555]15[/color] [color=666666]16[/color] [color=777777]17[/color] [color=888888]18[/color] [color=999999]19[/color] 20 21
[color=333333]13[/color] [color=444444]14[/color] [color=555555]15[/color] [color=666666]16[/color] [color=777777]17[/color] [color=888888]18[/color] [color=999999]19[/color] 20 21 22
[color=444444]14[/color] [color=555555]15[/color] [color=666666]16[/color] [color=777777]17[/color] [color=888888]18[/color] [color=999999]19[/color] 20 21 22 23
[color=555555]15[/color] [color=666666]16[/color] [color=777777]17[/color] [color=888888]18[/color] [color=999999]19[/color] 20 21 22 23 24
[color=666666]16[/color] [color=777777]17[/color] [color=888888]18[/color] [color=999999]19[/color] 20 21 22 23 24 25
6.e Automatisch generierte Farbübergänge
Natürlich können solche Farbübergänge auch, wie oben erläutert, von Hand gemacht werden. Schneller und fehlerloser geht es aber mit der von mfb erstellten Excel-Arbeitsmappe.
7. Kästen - Der  -Trick
Unter anderem gibt es bei den Alt-Codes die Zeichen ╚ ╔ ╗ ╝ ║ ═.
Genug, um einen vollständigen Kasten...
╔╗
║║
╚╝
... zu bilden. Wird nun allerdings etwas in den Kasten - beispielsweise ein Link - geschrieben, so verschieben sich die Maße des Kastens häufig, und die Ränder sind nicht mehr auf der selben Linie.
Das sieht dann z.B. so aus:
╔═══╗
║ Link ║
╚═══╝
Dazu kommt, dass maximal ein Leerzeichen " " angezeigt werden kann. Schreibt man mehrere Leerzeichen nacheinander, so werden diese einfach als ein Leerzeichen " " angezeigt.
Auch für dieses Problem gibt es eine Lösung: Das Zeichen &nsbp;
Viele dieser 's aneinandergereiht, ergeben viele Leerzeichen:
Text mit Leeeeeerzeichen
Bleibt noch das Problem mit den Kästen: Auch hier schafft der NBSP eine wunderbare Abhilfe. Jedoch muss er hier noch etwas "genauer" verwendet werden.
Die NBSP's lassen sich nämlich einteilen in:
[SIZE=0,5] [/SIZE] = Sehr kleines NBSP mit der Größe "[size="0,5"] [/size]"
[SIZE=1] [/SIZE] = Mittelgroßes NBSP mit der Größe " "
[SIZE=2] [/SIZE] (entspricht einem NBSP ohne SIZE-Angabe) = Großes NBSP mit der Größe " ".
8. Gelerntes anwenden
All das bereits gelernte, kann nun innerhalb von einem Beispiel verdeutlicht werden. Wir wollen ein Zitat in der Signatur, welches die Farbe von Rot nach Blau wechselt. Dazu wollen wir darunter auf den Autor einen Link setzen, und das ganze noch mit ALT-Codes abändern. Hier werden auch NBSP's gebraucht.
Schritt 1:
Zuerst wird das Grundgerüst angefertigt. D.h., Zitat und Autor werden in gewohnter Form aufgeschrieben:
[CENTER]"Simpson, Homer Simpson, he's the greatest guy in world"
[SIZE=1]Homer Simpson[/SIZE][/CENTER]
Das ergibt:
"Simpson, Homer Simpson, he's the greatest guy in world"
Homer Simpson
Homer Simpson
Schritt 2:
Zunächst setzen wir einen Link zur Seite "www.simpsons.de" auf den Autor, Homer Simpson, und färben das ganze Gelb:
[CENTER]"Simpson, Homer Simpson, he's the greatest guy in world"
[SIZE=1][URL=www.simpsons.de][COLOR=yellow]Homer Simpson[/COLOR][/URL][/SIZE][/CENTER]
"Simpson, Homer Simpson, he's the greatest guy in world"
Homer Simpson
Homer Simpson
Schritt 3:
Anschließend wird Start- und Endfarbe, in diesem Falle [COLOR=0033FF]0033FF[/COLOR] und [color=9933FF]9933FF[/color] festgelegt.
Danach wird das Zitat in 9 (gleichgroße) Stücke eingeteilt, die die Farben 0033FF, 1133FF, 2233FF, 3333FF, 4433FF, 5533FF, 6633FF, 7733FF, 8833FF und 9933FF enthalten. Das sind allerdings zu viele Farben, um alle in der Signatur einzubinden. Darum machen wir keine Einsersprünge (von 00 auf 11 [...]), sondern Zweiersprünge (von 00 auf 22 [...]).
Also 0033FF, 2233FF, 4433FF, 6633FF, 8833FF, 9933FF
[CENTER][COL[COLOR=0033FF][/color]OR=0033FF]"Simps[/COL[COLOR=0033FF][/color]OR][CO[COLOR=0033FF][/color]LOR=2233FF]on, Hom[/COLO[COLOR=0033FF][/color]R][COL[COLOR=0033FF][/color]OR=4433FF]er Simpso[/COLO[COLOR=0033FF][/color]R][COLO[COLOR=0033FF][/color]R=6633FF]n, he's t[/COL[COLOR=0033FF][/color]OR][COL[COLOR=0033FF][/color]OR=8833FF]he greatest g[/COL[COLOR=0033FF][/color]OR][COLO[COLOR=0033FF][/color]R=9933FF]uy in world"[/COL[COLOR=0033FF][/color]OR]
[SIZE=1][URL=www.simpsons.de][COLOR=yellow]Homer Simpson[/COLOR][/URL][/SIZE][/CENTER]
Das ergibt:
[COLOR=0033FF]"Simps[/COLOR][COLOR=2233FF]on, Hom[/COLOR][COLOR=4433FF]er Simpso[/COLOR][COLOR=6633FF]n, he's t[/COLOR][COLOR=8833FF]he greatest g[/COLOR][COLOR=9933FF]uy in world"[/COLOR]
Homer Simpson
Homer Simpson
4. Schritt:
Das ganze kann noch verziert werden, dabei können normale Zeichen ( ~ , * , ° , usw.), oder eben Alt-Codes angewand werden.
Beispielsweise:
[COLOR=0033FF]"Simps[/COLOR][COLOR=2233FF]on, Hom[/COLOR][COLOR=4433FF]er Simpso[/COLOR][COLOR=6633FF]n, he's t[/COLOR][COLOR=8833FF]he greatest g[/COLOR][COLOR=9933FF]uy in world"[/COLOR]
• Homer Simpson •
____________________________________________• Homer Simpson •
In der Hoffnung, verständlich erklärt zu haben,
vauge