Grafik-Tutorials

[MOD_Bandola]

In diesem Thread findet ihr die Tutorials zum Grafik-Workshop. Es bestand der Wunsch die Tutorials aus dem Workshop-Thread zu trennen.
Dieser Thread ist geschlossen und Tutorials werden, sobald es neue gibt, hinzugefügt.

Wo kommt was hin?
__________________________________________

• Wenn du Fragen zur Grafik Bearbeitung hast schau hier hinein: Grafik-Workshop (Fragen und Antworten)
• Feedback, Kritik, Anregungen kannst du hier los werden: Phantasievolle Einzelgebäude (Feedback und Diskussion)
• Freigestellte Einzelobjekte kommen hier rein: Phantasievolle Einzelgebäude
• Foto-, Bildcollagen kommen hier hin: Foto-, Bildmontagen über Die Siedler Online

Tutorials
__________________________________________

• Erste Schritte (Eine "Schritt-für-Schritt"-Anleitung für Neueinsteiger.) von Fuerst_Vlad
• Von der Idee bis zur fertigen Hundehütte.... von Scheich
• Wie binde ich Grafiken in meinen Beitrag ein? von Fuerst_Vlad
• Arbeiten mit Schatten von Fuerst_Vlad
• Wie ist der Brunnen entstanden? von Fuerst_Vlad
• Die Kunst des Vergoldens von Fuerst_Vlad
• Wie erstelle ich eine Karte von Fuerst_Vlad
• Wie erschaffe ich eine neue Insel? von Fuerst_Vlad

Wappen-Tutorial von Fuerst_Vlad

• Teil 1
• Teil 2
• Teil 3
• Teil 4
• Teil 5

[Fuerst_Vlad]

Erste Schritte (Eine "Schritt-für-Schritt"-Anleitung für Neueinsteiger.)

Verwendete Software: GIMP 2 (kostet nix!)
Aufgabe: Wir bauen einen Sonnenschirm.



Nachdem wir GIMP heruntergeladen und installiert haben, öffnen wir es und bekommen 3 voneinander getrennte Fenster:

links den "Werkzeugkasten", rechts "Ebenen und Pinsel" und in der Mitte das "Hauptfenster"



Keine Panik vor den vielen Buttons und Symbolen - lasst Euch dadurch nicht verwirren - vieles erklärt sich von selbst. Wenn ihr nichts überstürtzt und etwas Geduld habt, werdet ihr sehen, wie einfach das ganz im Grunde ist. Es ist nichts anderes, als das Manipulieren von Pixeln.

So...nun suchen wir uns ein Gebäude aus, auf welchem wir ein zusammenhängendes rundes Einzelteil finden. In diesem Beispiel hab' ich mich für ein Räuberlager entschieden:



Über das Menü "Datei -> Öffnen" laden wir die Gebäudegrafik. Und nun geht's los!

1. Schritt: Zoomen

weil das Bild zu klein ist, um etwas deutlich zu erkennen, zoomen wir es.

Dazu wählen wir die "Lupe", und klicken mit der linken Maus Taste solange auf das Bild, bis wir so gerade noch das Dach des Zeltes von dem Rest unterscheiden können.



2.Schritt: Auswahl erstellen
jetzt müssen wir das Dach vom Rest des Bildes trennen. Das können wir mit dem "Lasso" (auch "Freihand"-Auswahl genannt) machen:



Wir fangen irgendwo an, den ersten Punkt zu setzen - in unserem Beispiel oben - und setzen dann in kleinen Schritten rund um den Schirm die Markierungspunkte,



bis wir oben am ersten Punkt wieder angekommen sind. Die letzte Markierung setzen wir auf die erste, und unsere Markierung schließt sich
.


Tipp:
Wir achten darauf, daß wir die hellfarbigen Pixel des Schirmes mit unserer Markierung nicht anschneiden. Sie gehen sonst verloren.
Lieber ein wenig mehr von den darunterliegenden dunklen Pixeln. Das hat dann noch den Vorteil, daß unser Schirm einen Schatten bekommt.
Ihr erreicht dies, indem ihr darauf achtet, daß die Linie der Auswahl über die Spitzen läuft. Schneidet ihr mehr als die Hälfte an, gehen diese Pixel verloren.

3. Schritt: Die Auswahl umkehren/invertieren

Um den Schirm nun vom Rest des Bildes zu trennen, löschen wir diesen Rest des Bildes einfach weg. Dazu gehen wir ins Menü "Auswahl" und klicken dort auf "Invertieren":



Nun ist auf dem Bild alles markiert, außer unseres Schirmes. Mit der "Entf"-Taste löschen wir nun alles andere und nur der Schirm bleibt zurück.
Nach dem Löschen heben wir die Auswahl über "Auswahl -> Nichts" wieder auf. Et voilà - unser 1. Schirmelement ist fertig .



4. Schritt: Ebene umbenennen

Wenn ihr euch das rechte Fenster "Ebenen - Pinsel" anschaut, könnt ihr sehen, wie der Name der Ebene lautet (hier: "b_tents_bandits1"):



Das sollten wir ändern, um später, bei mehreren Ebenen, nicht durcheinander zu kommen. Dafür doppelklicken wir auf den Ebenennamen und können ihn nun ändern (in unserem Fall nennen wir diese Ebene "Schirm":



Nun speichern wir das Ergebnis erstmal ab: Menü "Datei -> Speichern unter" - an einem Ort eurer Wahl. Wir geben ihm den Namen "Sonnenschirm".

Tipp:
Ihr solltet eure Arbeit zur Sicherheit zwischendurch immer mal wieder abspeichern. Das schützt vor Verlusten z.B. durch Abstürze.


5. Schritt: Der Ständer

Als nächstes benötigen wir einen Ständer, auf dem unser Schirm ruht. Als passendes Gebäude habe ich die Pulvermühle ausgesucht:



Hier finden wir einen passenden Holzpfosten, der sich als Ständer für unseren Schirm sehr gut eignet:



Wir öffnen die Datei. Nicht verwirren lassen: dies geschieht bei GIMP in einem 2. Hauptfenster (!).
Wie ihr sehen könnt, hab' ich die Auswahl per "Lasso/Freihand" bereits erstellt, nachdem ich das Bild entprechend gezoomt habe . Die Vorgehensweise ist die gleiche wie beim Schirm. Natürlich werdet ihr auch in anderen Gebäuden fündig. Ihr müsst nur gut hinschauen, dann werdet ihr viele Elemente entdecken, die an anderer Stelle einen völlig anderen Zweck erfüllen können .

6. Schritt: Auswahl kopieren und in das Bild "Sonnenschirm" einfügen

Nachdem wir den Holzpfahl der Pulvermühle markiert haben (in unserem Beispiel ist die Auswahl rechteckig) kopieren wir diese: Menü "Bearbeiten -> Kopieren" (oder STRG+C). Wir wechseln in das Fenster unseres Sonnenschirmes und fügen den kopiertenPfahl ein: Menü "Bearbeiten -> Einfügen" (oder STRG+V).
Das Fenster der Pulvermühle schließen wir: Menü "Datei -> Schließen" (oder STRG-W) - ohne die Änderungen zu speichern! (es wird danach gefragt).

Ein Blick auf das Fenster "Ebenen -Pinsel" zeigt uns, das dort "Schwebende Auswahl (Eingefügte Ebene)" steht:



Wir machen einen Doppelklick darauf und nennen die neue Ebene "Ständer". Mit ENTER bestätigen wir die Änderung. Wir sehen, daß nun 2 Ebenen vorhanden sind:




Intermezzo:

An dieser Stelle möchte ich ein wenig näher auf die Eigenschaften von- bzw. das Arbeiten mit Ebenen (auch Layer genannt) eingehen.
Ebenen müsst ihr euch vorstellen, wie einen Stapel Fotos: das oberste Foto verdeckt alle darunterliegenden. Das 2.Foto verdeckt das 3.Foto, das 3.Foto verdeckt das 4.Foto usw. Und alles, was verdeckt ist, können wir logischerweise auch nicht sehen. Wir können diese Ebenen untereinander verschieben/vertauschen und so ihre Reihenfolge beliebig verändern: was wir sehen wollen, kommt nach oben, und was wir vestecken wollen, kommt nach unten.
Jede Ebene kann für sich separat bearbeitet/verändert werden, ohne daß die anderen von diesen Änderungen beeinflusst werden. Ebenso kann jede Ebene einzeln aus- und eingeblendet werde (auf das "Auge"-Symbol klicken). So sehen wir sie nicht, wenn sie bei irgendeinem Arbeitsschritt stört.
Wichtig: gebt euren Ebenen eindeutige Namen, damit ihr sie immer sofort findet, wenn ihr sie braucht.
Jeder Name ist dabei natürlich erlaubt (auch Sonderzeichen wie + - * / usw.). Probiert es aus. Wenn das Programm eine Fehlermeldung rausschmeißt, wisst ihr, daß da ein falsches Zeichen steht - kein Grund zur Panik - einfach ändern .
Wichtig: neue Ebenen - ob kopiert und eingefügt oder nur dupliziert - plazieren sich immer direkt über der gerade aktiven Ebene! Und positionieren sich somit u.U. zwischen die vorhandenen Ebenen.

7. Schritt: Reihenfolge der Ebenen ändern (Ebenen tauschen)

Wir verschieben Ebenen, indem wir mit der linken Maustaste auf die Ebene klicken, die wir verschieben wollen, bei gedrückter Maustaste diese Ebene nach oben oder nach unten ziehen, je nachdem, wo sie hin soll, und dann die Maustaste wieder loslassen:

vorher


nachher


Wir sehen deutlich, daß der Ständer nun unter dem Schirm liegt. Der Rest wird vom Schirm verdeckt (zu erkennen an Rechteck des Ebenenrahmens).
Der besagte Ebenenrahmen zeigt die gerade aktive Ebene an. So wissen wir immer, auf welcher Ebene wir uns zur Zeit befinden und an welcher Position auf dem Gesamtbild diese zu finden ist. Den Ebenenrahmen können wir im Menü "Ansicht -> Ebenenrahmen anzeigen" ein- oder ausschalten.

8. Schritt: Ebene duplizieren

Für unseren Sonnenschirm benötigen wir noch einen Sockel/Fuß. Dafür müssen wir nicht lange suchen - wir nehmen einfach den vorhandenen Schirm und kopieren diesen. Das geht am einfachsten, indem wir die "Schirm"-Ebene duplizieren.
Dazu klicken wir mit der rechten Maustaste im Fenster "Ebenen -Pinsel" auf die "Schirm"-Ebene und in dem aufklappenden Kontextmenü auf "Ebene duplizieren":



Das Ergebnis sieht dann so aus:



Wie im 4. Schritt (Ebenen umbenennen) beschrieben, benennen wir diese "Schirm-Kopie"-Ebene um in "Sockel". Anschließend ziehen wir sie nach unten. Dann sieht das Ganze so aus:




9. Schritt: Objektgröße ändern

Da der Sockel in seinem jetzigen Zustand deutlich zu groß ist, müssen wir ihn verkleinern. Dazu wählen wir das Objekt (alle mit Farbe/Farbinformationen gefüllten Pixel) mit der "Rechteckigen Auswahl" im Werkzeugkasten aus:



Anschließend klicken wir im Werkzeugkasten auf "Skalieren":



Klicken wir nun in den Auswahlrahmen, erscheint 1. ein Raster und 2. ein Dialogfeld "Skalieren". Im Dialogfeld können wir die neue Größe über genaue Werte verändern, während wir im Raster mit der Maus die Größe in Länge und/oder Breite frei verändern können.



Dazu klicken wir in unserem Beispiel mit der linken Maustaste in die linke obere Ecke des Rasters und verändern den Sockel solange, bis wir der Meinung sind, daß Form und Größe zum Schirm passen :



Anschließend klicken wir im Dialogfeld auf "Skalieren" und haben die neue Größe unseres Sockels.



Nun platzieren wir den Sockel unter dem Ständer. Dazu wählen wir das "Verschieben"-Werkzeug, klicken mit der linken Maustaste auf den Sockel, halten die Maustaste gedrückt und schieben den Sockel an seinen Platz:



OK! - Im Prinzip ist unser Schirm nun fertig. Aber er sieht nicht wirklich aus wie ein Sonnenschirm, sondern eher wie ein kleine Kinderkarussell vom Jahrmarkt, auf dem die Pferdchen fehlen. Die Farben gefallen uns nicht. Das wollen wir unbedingt ändern. Also machen wir das.

10. Schritt: Farbe ändern

Fangen wir mit dem Sockel an, diese Ebene ist gerade aktiv. Im Menu "Farben" klicken wir hierzu auf "Farbton / Sättigung":



und erhalten diesen Dialog:



Unter "Zu bearbeitende Primärfarbe auswählen" wählen wir die Farbe, die wir ändern wollen.
Für unseren Sockel habe ich "Alle" gwählt. Hierbei werden alle Farben verändert, die im Sockel zu finden sind (auch wenn wir sie nicht wahrnehmen können).
Jetzt können wir darunter bei "Gewählte Farben bearbeiten" die Schieberegler nach Belieben hin- und herschieben, bis wir mit dem Ergebnis zufrieden sind.
Dabei können wir quasi 'live' miterleben, wie sich die Farben im Bild und im Dialogfenster sofort verändern:



Tipps:
1. Ein Klick auf "Farbe zurücksetzen" macht die Veränderungen der gewählten Farbe wieder rückgängig.
2. Ein Klick auf "Zurücksetzen" macht alle Veränderungen rückgängig, wenn ihr mehr als eine Farbe verändert habt.
3. Bewegt ihr den Mauszeiger über die Farbfelder, werden euch die Farbnamen angezeigt.
4. Mit dem Regler "Sättigung" wird bestimmt, wieviel der gewählten Farbe im Bild zusehen sein soll.

Je weiter der Regler in den Minusbreich verschoben wird, desto weniger Farbe bekommt das Bild. Sie wird blasser, je weiter wir den Regler nach links ziehen.
Ganz auf "-100" bekommen wir nur noch Grautöne oder Schwarz/Weiß.
Je weiter er in den Plusbereich verschoben wird, desto mehr Farbe bekommt Bild. Sie wird kräftiger und "leuchtender".

Die gleichen Änderungen in der Farbgebung nehmen wir beim Schirm und beim Ständer vor.

Zunächst nehmen wir uns den Schirm vor. Hier verändern wir nur "Rot":



Und zum Schluß den Ständer. Dieser braucht 2 Farbänderungen: 1. "Rot"



und 2. "Gelb" für die übriggebliebenen bräunlichen Pixel



"Blau??? - Warum um Himmelswillen denn BLAU. Der sieht ja eher aus wie'n Schirm bei 'ner Eisdiele oder so???" -
Naja, schaut jeck aus, finde ich . Außerdem: ihr seid frei in eurer Gestaltung, könnt Farben setzen, wie's euch beliebt! ES SIND NUR PIXEL!!!

OK! - Das war's . Wir haben fertig!!!

Das Ergebnis speichern wir ab (Datei -> Speichern) und über das Menü "Datei -> Exportieren" exportieren wir unseren Sonnenschirm als PNG-Datei. Hierbei bleibt uns der transparente Hintergrund erhalten.

Die einzelnen Schritte sind wie folgt:

1. im "Dropdown"-Feld rechts und wählen wir "PNG-Bild (*.png)" aus,
2. wir klicken darunter auf "Exportieren",
3. in dem sich nun öffnenden Dialog setzen wir alle Häkchen ("Kommentar speichern" ist abgeblendet, weil wir keinen Kommentar verfasst haben),
4. wir klicken im Dialog auf "Exportieren".




Fertig und ENDE!!!

[Scheich]

[Fuerst_Vlad]

Manche von Euch haben Probleme, Bilder in den Text einzufügen.

Entweder bedient ihr euch der Funktion "angehängter Dateien", was kostbaren Speicherplatz im Forum verbraucht. Ihr könnt das kontrollieren, indem ihr im Browserfenster oben rechts neben "Mein Profil" auf "Einstellungen" klickt und im sich dann öffnenden "Benutzerkontrollzentrum" in der Menuleiste ganz unten auf "Anhänge" klickt. Dann erhaltet ihr eine Übersicht über eure bereits hochgeladenen Dateianhänge, sowie den verbrauchten Speicherplatz.

Diesen Weg kann ich euch daher nicht empfehlen!

Oder ihr richtet eine Verlinkung zu einem externen Bilder-Hoster ein, bei dem ihr kostenlos Fotos und andere Bilder hochladen könnt.
Anschließend erscheint in eurem Beitrag ein kleines Vorschaubild (die berühmten Thumbnails) mit einer Verlinkung zum extern gespeicherten Bild. Leider wird bei einigen Upload-Anbietern der transparente Hintergrund der PNG-Grafiken schwarz dargestellt - auch auf dem Vorschaubild im Beitrag.

So gesehen und von mir getestet bei DirectUpload.net, Bilder-Space.de und Imgbox.de . Vorteil bei allen: der Upload ist kostenlos und ohne Registrierung möglich. Aber das wissen alle, die diese Services nutzen.

Aber befriedigend finde ich auch diese Methode nicht wirklich!

Wir wollen unsere Grafiken ja eigentlich direkt mit in den Text einfügen - oder nicht ?

Dazu benötigen wir einen Hoster, der uns einen Link zur Verfügung stellt, mit dem dies möglich ist. Und das natürlich kostenlos .
Fündig geworden bin ich in diesem Fall bei fotos-hochladen.net

Zunächst bereiten wir das Nachrichtenfenster wie üblich vor: auf "Antworten" klicken und dann rechts unten auf "Erweitert" (3.). So erhalten wir umfangreichere Möglichkeiten unseren Text zu formatieren (1.) und wir sehen rechts vom Editorfenster die Smileys (2.). Außerdem erhalten wir hier die Möglichkeit, unserem Text einen Titel (1.) hinzuzufügen und eine "Vorschau"- Funktion, was uns die Gegenheit bietet, unseren Beitrag vor der endgültigen Veröffentlichung zu kontrollieren und zu sehen, wie er fertig aussieht.



Jetzt besuchen wir fotos-hochladen.net und finden uns hier wieder:



1. auf "Durchsuchen" klicken und die gewünschte Datei auf der Festplatte auswählen,
2. das Häkchen setzen, sonst läuft nichts,
3. Auf "Bild hochladen" klicken.

In der Folge erhalten wir dieses Ergebnis:



hier wählen wir "Fotos für Foren" (4.) aus:



Wir klicken mit der rechten Maustaste auf den angegebenen Link und kopieren diesen (5.):



Wir kehren in unser Nachrichtenfenster zurück:



und fügen über STRG+V (oder Rechtsklick in das Textfenster und "Einfügen") die kopierte URL ein:



Mit einem Klick auf "Vorschau" erhalten wir einen Eindruck davon, wie unser Beitrag fertig ausschauen wird:




Unseren Text können wir nun über oder unter dem Bild einfügen. Wir müssen nur beachten, die Zeile des Links nicht zu "beschädigen".
Ein falsches/fehlendes Zeichen in der Zeile und sie funktioniert nicht mehr. Selbst der Unterschied zwischen Groß- und Kleinschreibung in dem Bildnamen ist wichtig.

Selbstredend, daß es da draußen im weltweiten Netz noch weitere solcher Bilderdienste gibt. Der hier beschriebene steht nur stellvertretend für alle anderen. Und nur wenige genießen den Vorteil des FTP-Uploads auf den eigenen Server, bei dem der Upload via Dateimanager á la TotalCommander ein Klacks ist .

[Fuerst_Vlad]

In diesem Tutorial will ich versuchen, Euch zu zeigen, wie ihr ein Wappen selbst erstellen könnt. Dazu ist zunächst eine wichtige Voraussetzung zu klären:
der Unterschied zwischen einem Photoprogramm (Photoshop, PhotoImpact, PhotoPaint, GIMP, Paint.Net, PaintShopPro etc)
und einem Vektorgrafikprogramm (CorelDRAW/Designer, Macromedia Freehand, Adobe Fireworks/Illustrator, Xara Xtreme etc)

Zitat aus Wikipedia:

"Man unterscheidet zwei Arten von Computergrafiken: Vektor- und Rastergrafiken. Vektorgrafiken sind Zeichnungen aus Linien und Kurven; Rastergrafiken dagegen bestehen aus Pixeln. Ein typisches Beispiel für eine Rastergrafik ist ein mit der Digitalkamera erzeugtes Foto. Dementsprechend spezialisieren sich für diese Computergrafiken bestimmte Programme: Vektorgrafikprogramme und Bildbearbeitungs- bzw. Malprogramme. Manche Hersteller versuchen, die Trennung zwischen Vektor- und Rastergrafiken aufzuheben, indem sie beide Funktionen in ihre Programme integrieren."

"Bildbearbeitungsprogramme spezialisieren sich auf Rastergrafiken (auch Pixel-Grafiken oder Bitmap-Grafiken genannt) und dienen der Erstellung, Verbesserung, Veränderung und Manipulation digitaler Bilder.
...dass Bildbearbeitungsprogramme hauptsächlich zur Optimierung von Bildern eingesetzt werden, teilweise aber auch als Malprogamme."

"Vektorgrafikprogramme dienen zur Erstellung von Zeichnungen oder Illustrationen als Vektorgrafik.
...werden die Objekte innerhalb einer Zeichnung nicht in Form von Pixeln gespeichert, sondern als Vektoren. Daher lassen sich Vektorgrafiken auch beliebig vergrößern, verkleinern oder drehen, ohne dabei Qualitätsverluste hinnehmen zu müssen.
Bei Rastergrafiken hingegen sieht man bei übermäßiger Skalierung die Pixel; zudem werden teilweise Artefakte und ähnliche Bildfehler sichtbar. Ein typisches Beispiel für eine Vektorzeichnung ist ein Clipart."

Zitat Ende

Soweit dies zur Erläuterung für alle Suchenden. Denn für die Erstellung eines Wappens eignet sich kein Bildbearbeitungsprogramm.
Was wir benötigen, ist ein Vektorprogramm. ABER KEINE PANIK!!! Ich habe eines gefunden, das sich sehr gut eignet, und welches uns gar nichts kostet! - Einige von euch werden es wahrscheinlich bereits kennen - es nennt sich InkScape und das gibt es hier: Homepage von InkScape.

Nachdem wir das Programm installiert und gestartet haben, sehen wir ein ätzend kleines Fenster, welches wir erstmal sofort maximieren.
Jetzt sehen wir ein leeres Blatt vor uns in dem Format DIN A4. Dies ist in den Voreinstellungen so hinterlegt und für uns Vorhaben mehr als ausreichend.

Schritt 1: Hilfslinien setzen

Diese Programm hat - meines Erachtens - den Nachteil, daß der Nullpunkt des Dokumentes nicht oben links sitzt, sondern unten links.
Somit geht die Skala des Lineals auch von unten nach oben. Beim Einrichten der Hilfslinien ist für Nutzer von z.B. Photoshop oder CorelDRAW ein Umdenken angesagt . Er ist auch nicht veränderbar (wie etwa jederzeit bei CorelDRAW). Daher habe ich die Werte für die horizontalen und vertikale Hilfslinien angeben.
Sie ergeben einen gut proportionierten Rahmen für unser Wappen.

Ihr klickt mit der linken Maustaste auf das Lineal (oben für horizontal, links für vertikal) und zieht mit gedrückter gehaltener Maustaste nacheinander die dargestellten Hilfslinien in das Dokument - 3x horizontal, 3x vertikal. Die angezeigten kleinen Kreise auf den Linien bleiben unbeachtet.

Tipp 1:

Wenn ihr während des Ziehens in die linke untere Ecke des Programmfensters schaut, könnt ihr die X/Y-Werte für die Position sehen (X=horizontal, Y=vertikal).

Tipp 2:

Keine Angst, wenn ihr die Maustaste zu früh oder zu spät loslasst - steht der Mauszeiger über der Hilfslinie, wird diese rot, und mit einem Doppelklick erscheint ein Dialogfenster, in welchem ihr die Position über Zahlenwerte eingeben könnt.

Schritt 2: Umriss zeichnen

Nun machen wir uns daran, den Umriss zu zeichnen. Wir wählen dazu das Werkzeug "Bézier-Kurven und gerade Linien zeichnen".
Wir beginnen oben links und setzen die Eckpunkte auf die Kreuzungen der Hilfslinien, und zwar so, daß wir in der unteren Hälfte eine Spitze bilden. Nun haben wir ein "Haus", das auf dem Kopf steht.




Schritt 3: Kurven bilden

Unser Umriss ist fertig und wir machen uns daran, aus den geraden Linien der unteren Hälfte Kurven zu bilden. Hierzu die das Werkzeug "Bearbeiten der Knoten oder der Anfasser eines Pfades". Es erscheinen 6 sog. Knotenpunkte (rote Kreise). Wir setzen den Mauszeiger ungefähr auf die Mitte der schrägen Linien (ein Hand-Symbol erscheint), drücken die linke Maustaste und ziehen die Linien nun ein wenig nach links unten.



Das machen wir auf beiden Seiten nach Augenmaß . Die Perfektionisten unter uns beobachten während des Ziehens die Positionsmarkierungen des Mauszeigers auf den Linealen oben und links (kleine schwarze Dreiecke), und werden darauf achten, daß die Werten annähernd übereinstimmen .



Hier das entsprechende Video zu diesem Arbeitsschritt:


Link zum Video


Zur Vorbereitung des nächsten Schrittes klicken wir auf "Objekte auswählen und verändern".
Es erscheinen 8 Rahmenmarkierungen, die uns zeigen, daß das Objekt zur weiteren Bearbeitung "ausgewählt" ist.
Sie dienen dazu, das Objekt in Höhe und Breite in alle vier Richtungen zu verändern, was wir hier allerdings nicht benötigen.




Schritt 4: Füllung und Kontur bearbeiten

Grafik A: Wir füllen das Objekt mit der Farbe [1] aus dem Farbfeld am unteren Bildrand.

Grafik B:: Wir wählen das Werkzeug "Farbverläufe erstellen und bearbeiten", führen es über das Hlfslinienkreuz Mitte-links (2 - roter Kreis
- es erscheint "Anfasser an Führungslinienursprung" am Mauszeiger) und doppelklicken auf diesen Kreuzungspunkt.
Schwupp - der Farbverlauf ist entstanden. Er verläuft verblassend von links nach rechts.

Grafik C: Wir klicken auf den rechten Anfasser des Verlaufs (3) und verschieben ihn auf den Mittelpunkt. Der Farbverlauf beschränkt sich nun auf die linke Seite der Grafik.




Grafik D: Damit unser Wappen einen gespiegelten Farbverlauf bekommt, der einen Lichtstreifen vertikal über die Mitte verlaufend simulieren soll,
müssen wir den linken Verlauf irgendwie auf die rechte Hälfte spiegeln. Dazu wählen wir im Menü "Objekt" den Befehl "Füllung und Kontur" (1).
In dem Bearbeitungsfenster klicken wir auf "Bearbeiten" (2) und in dem Listenfeld darunter wählen wir "alternierend" (3) - den Effekt sehen wir sofort in unserer Grafik. .
Aber das Bearbeitungsfenster "Schließen" wir NOCH NICHT...




...weil wir noch die störende schwarze Kontur entfernen wollen: auf "Farbe der Kontur" (1) klicken und dann auf das "X" (2).
Und schon ist die Kontur verschwunden .




BRAVO!!! Unser Wappenschild ist im Grundsatz fertig .

Und nicht vergessen: zwischendurch immer mal wieder SPEICHERN !!!!


...Fortsetzung folgt alsbald...wir sehen uns...

[Fuerst_Vlad]

In diesem Teil verpassen wir unserem Wappenschild einen würdigen "Anstrich" (oder vielleicht ein krasses Outfit? ).

Und um allen Unkenrufen zuvor zukommen, sei gleich gesagt, daß es in diesem Workshop, sowie in dem Thread "Gildenwappen Kreationen" nicht darum geht, den Regeln der Heraldik gerecht zu werden. Das ist nicht der Sinn des genannten Threads und nicht der Sinn dieses Tutorials. Die strengen Regeln zur Erstellung eines korrekten Wappens würde diesen Rahmen sprengen. Webseiten, auf denen das alles erklärt wird, gibt es im Netz zur Genüge. Und wer an sich selbst den Anspruch stellt, ein regelkonformes Wappen zu kreieren, dem sei das natürlich unbenommen .

Zunächst haben wir da unseren Rohling, der uns als Grundlage für die Anwendung diverser Filter dienen wird. Was ihr im folgenden sehen werdet, ist nur eine von nahezu unendlichen Möglichkeiten, eine Grafik zu gestalten.




Auf den oben gezeigten 'Rohling' habe ich insgesamt 4 Filter nacheinander angewendet.






Die entsprechenden Befehle findet ihr im Menü unter "Filter". Und dort in weiteren Untermenüs:

Filter #1: "Filter" --> "ABCs" --> "Diffuses Licht"
Filter #2: "Filter" --> "Deckschichten" --> "Stacheldraht"
Filter #3: "Filter" --> "Verzerren" --> "Inneres aufrauhen"
Filter #4: "Filter" --> "Verzerren" --> "Verschmierte Pixel"


Im Anschluß habe ich den Farbverlauf nochmals angepasst, da mir das weiße Mittelfeld und der gelbe Rand zu dominant sind.
Hier die Gegenüberstellung "Vorher (links) - Nachher (rechts)":



Wir bewerkstelligen dies, indem wir das Bézier-Werkzeug wählen und anschließend dreimal auf die Verlaufslinie verteilt doppelklicken.
Dadurch entstehen 3 neue Anfasser, mit denen wir durch Verschieben den Farbverlauf verändern können.

Und zu guter Letzt die finale Version im Maßstab 1:1 (PNG-Grafik, 521 x 671 Pixel):



Auweja - das sieht ja voll krass aus!


...Fortsetzung folgt...wir sehen uns...

[Fuerst_Vlad]

Im 3. Teil befassen wir uns mit der Gestaltung eines einfachen Schriftzuges.

Die Gestaltungsmöglichkeiten sind so vielfältig, daß ich hier nicht auf alles eingehen kann (Das möge mir verziehen werden ). Beizeiten oder auf Anfrage will ich allerdings gerne näher darauf eingehen.
Gesagt sei soviel: ein grafischer Text wie in unserem folgenden Beispiel kann immer und in jeder Form manipuliert werden. Sei es die Füllung, die Kontur, der Schriftgrad, der Schrifttyp etc. - solange er nicht in ein Bitmap umgewandelt wird!

OK..los geht's:



Wir sehen oben drei Grafiken, deren Erläuterung wie folgt lautet:

Grafik 1:
Unter Verwendung des "Text"-Tools (1) schreiben wir zunächst unseren Text (1)

Grafik 1:
Mit dem "Bézier"-Tool (2) zeichnen wir eine Linie (2). Den Anfang setzen wir mit einem Linksklick, das Ende mit einem Doppelklick.

Grafik 2:
Wir wählen das "Knoten/Pfad"-Tool (3) und fahren mit der Maus ungefähr über die Mitte der Linie (roter Kreis, ein Hand-Symbol erscheint). Wir klicken die Linie mit der linken Maustaste an und ziehen sie (mit gedrückter Maustaste) ein Stück nach oben - in unserem Beispiel bis knapp unter den Text. Es entsteht ein Bogen.

Grafik 3:
Mit dem "Auswahl"-Tool (4) markieren wir beide Objekte (Text und Linie), entweder bei gedrückter SHIFT-Taste auf beide Objekte klicken oder mit dem Mauszeiger bei gedrückter linker Maustaste einen Rahmen um beide Objekte ziehen und dann die Maustaste loslassen. Beide Objekte sind markiert, wenn beide einen gestrichelten Rahmen anzeigen.



Grafik 4: Anschließend wählen wir im oberen Menü "Text" und dann darunter den Befehl "An Pfad ausrichten".



Grafik 5: Wir sehen, wie sich der Text nun an die Linie angepasst hat.


Grafik 6: Die Linie anklicken




Grafik 7:
Wir klicken mit der linken Maustaste auf den rechten Knotenpunkt (A) und ziehen ihn bei gedrückter Maustaste ein Stück nach oben (B) - wie weit, entscheidet ihr selbst. Während ihr zieht, könnt ihr die Veränderung des Textflusses beobachten. Bei (B) lassen wir die Maustaste wieder los.

Grafik 8: Uns ist beim Ziehen aufgefallen, daß da zwei neue Linien mit runden Endpunkten (blaue Kreise) aufgetaucht sind. Das sind sog. Segmentlinien und die Endpunkte nennen sich "Kontenanfasser" (oder nur "Anfasser"). Fahren wir mit dem Mauszeiger darüber, werden sie rot (wie alle Knoten und Anfasser), dann können sie bewegt werden.

Tipp:

Es ist nicht weiter tragisch, wenn die Linie rechts über den Text hinausragt. Sie darf nur nicht kürzer werden als der Text, sonst wird dieser von hinten nach vorne abgeschnitten. Probiert das aus, spielt mit Knoten und Anfassern rum, und beobachtet die Veränderungen. Ihr werdet staunen, was alles machbar ist .

Grafik 9: So sieht unser fertiges Beispiel aus.


Mit dem "Auswahl"-Tool machen wir nun einen Rechtsklick auf die Linie und wählen "Füllung und Kontur"


In dem nun erscheinenden Bearbeitungsfenster wählen wir "Farbe der Kontur" (1) und dann auf "Nicht zeichnen [X]" (2). Damit machen wir die Linie unsichtbar.



Hinweis:

Wir dürfen die Linie auf keinen Fall löschen, weil sonst alles gelöscht wird. Wir dürfen den Text ebenfalls nicht über das "Text"-Menü wieder vom Pfad trennen, da der Text sonst in seine Urspungsform zurückkehrt.

Tipp:

Löscht die Kontur der Linie also erst dann, wenn ihr absolut sicher seid, ein endgültiges Ergebnis erzielt zu haben. Oder erst dann, wenn eure gesamte Grafik fertig ist - quasi als letzten Arbeitsschritt vor dem Speichern & Veröffentlichen.

Für den Abschluß hab' ich euch noch ein kleines Video dieses Tutorials gemacht. Die Reihenfolge der Arbeitsschritte ist zwar nicht die gleiche, aber es ist alles drin, was ich euch hier gezeigt habe .



Link zum Video


...Fortsetzung folgt...wir sehen uns...

[Fuerst_Vlad]

In diesem Teil erhält unser Schriftzug einen Farbverlauf.

Schritt 1: Zugriff auf den "Farbverlaufs-Editor"

Dazu wählen wir im Menü "Objekt" den Befehl "Füllung und Kuntur..."...




...und erhalten das Bearbeitungsfenster für "Füllung und Kontur..." (das kennen wir bereits aus Teil 1)
Der "Karteikarten-Reiter" steht bereits auf "Füllung" und "Einfache Farbe". Sobald wir auf die Schaltfläche für "Linearer Farbverlauf" (1) klicken,
ändert sich sofort die Farbgebung in unserem Schriftzug. Und nun geht's ans Eingemachte : wir klicken auf "Bearbeiten"...




Der "Farbverlaufs-Editor" öffnet sich (linkes Bild). Dort sehen wir ganz oben einen waagerechten schwarzen Farbbalken, der nach rechts hin blasser wird.
In dem Drop-Down-Feld darunter stehen die verwendeten Farbentöne. Klappt ihr dieses Listenfeld über die Pfeiltaste auf (mittleres Bild), so steht dort 2x Schwarz.

Damit hat es folgende Bewandnis:
das ober der beiden Schwarz-Felder (stop3818, vollflächig gefüllt) hat die volle Deckkraft --> Wert "255" (mittleres Bild),
das untere (stop3820, halb gefüllt) hat keine Deckkraft --> Wert "0" (rechtes Bild).
Der 2-geteilte Balken bedeutet: 1x Farbe und 1x NULL-Deckkraft.



Hinweis:

Habt ihr eurem Schriftzug bereits beim Schreiben einen EINFARBIGEN Anstrich verpasst (z.B. über die Farbfelder im Statusfenster des Programms,
so taucht dieser Farbton im Farbverlaufs-Editor auf und nicht Schwarz! Die weitere Vorgehensweise ändert sich dadurch nicht!

So. Nun werden wir unseren Farbverlauf nach unseren Vorstellungen manipulieren. Ich habe mich für 6 Farbtöne entschieden.
Da wir bereits 2 haben, fügen wir noch 4 weitere hinzu über "Zwischenfarbe hinzufügen" (linkes Bild). Der Farbton spielt erstmal keine Rolle. Einfach 4x klicken .
Das Ergebnis sehen wir im rechten Bild: 6 Schwarztöne




Jetzt ändern wir die 6 Schwarztöne in 6 Farbtöne unserer Wahl. Dazu klicken wir den oberen Farbton in der Liste an (linkes Bild),
denn dieser steht in der Reihenfolge der Farbskala ganz links. Anschließend verändern wir in den unteren 4 Feldern

H (Farbton), S (Sättigung), L (Helligkeit), A (Alpha = Deckkraft) die Einstellungen mit der Maus solange, bis wir mit dem Ergebnis einverstanden sind.

So machen wir das nacheinander und von oben nach unten mit allen Farbtönen. Wir können an der oberen Farbskala die Veränderungen immer in Echtzeit mitverfolgen.
Im rechten Fenster seht ihr das Endergebnis.

Hinweis: Alle Farbtöne erhalten volle Deckkraft!




Zur Verdeutlichung der Zusammenhänge zwischen Oben/Unten und Links/Rechts hab' ich das Listenfeld (1) mal auf die Seite (2) gelegt.
Jetzt können wir deutlich sehen, wie sich unsere Farben auf der Skala verteilen und an welcher Stelle sie stehen. Ist schon ein wenig verzwickt .




Nun wollen wir noch die Position (2) der Farben auf der Skala ändern.
Die ändern wir über den "Versatz" (1). Einfach eine Farbe wählen und den Regler nach links oder rechts verschieben, gerade so, wir wir das haben wollen.
In diesem Beispiel hab' ich den angewählten Farbton nach links verschoben.

Hinweis: Die oberste (erste links) und die unterste (letzte rechts) lassen sich im Versatz NICHT verändern! (Weil wegen Anfang und Ende und so....)




Sind wir mit dem Ergebnis zufrieden, schließen wir den Editor über [X] und das Bearbeitungsfenster über "Schließen".

"Wir haben fertig... !!!"



Zum Schluß will ich euch eine kleine Trickserei nicht vorenthalten: den Farbverlauf drehen und skalieren:

Dazu wählen wir das "Knoten/Anfasser"-Tool und markieren den Schriftzug. Es erscheint eine Linie mit 6 Anfassern (je Farbe 1 Anfasser).
Fahren wir mit dem Mauszeiger über einen Anfasser, wird dieser rot und kann mittels Linksklick und gedrückt gehaltener Maustaste beliebig über das "Blatt" verschoben werden.

Hinweis: Das Verschieben des Anfangs- und Endknotens funktioniert über die gesamte Arbeitsfläche (also auch über den "Blattrand" hinaus)!



Ich hab' euch das in einem Video mal aufgezeichnet:


Link zum Video

Hinweis: Im Video hab' ich das "Farbverlaufs"-Tool benutzt. Das funktioniert zwar auch, aber dafür muß der Schriftzug vorher mit dem "Auswahl"-Tool (F1) markiert werden.


SO...und nun spielt mal richtig mit eurer Grafik rum!!! :o



...Fortsetzung folgt alsbald...wir sehen uns...

[Fuerst_Vlad]

Hier werden wir ein Banner für unser Wappen gestalten. Und gleich zu Beginn sei gesagt: es wird ein wenig knifflig werden, weil wir ausschließlich mit Bézeir-Kurven, Knoten, Anfassern und Farbverläufen arbeiten.

Unser Ziel wird es sein, dieses Banner zu erstellen:




1 Auswahl_Tool
Zu Beginn richten wir einige Hilfslinien ein: horizontale Hilfslinien ziehen wir aus dem oberen (horizontalen) Lineal und vertikale aus dem linken (vertikalen) Lineal.
Ich war so frei und hab' die Maßangaben bereits vorgegeben.




2 Bézier-Tool
Jetzt ziehen wir 8 Linien, wobei wir die Endpunkte jeweils auf die Kreuzungen (Überschneidungen) der Hilfslinien setzen.
Den letzten Endpunkt (9, hier nicht zu sehen) setzen wir mit einem Doppelklick auf den ersten (1).




3 Knoten/Anfasser-Tool
Wir die mittleren Knoten (2 und 6).
Entweder mit gedrückter linker Maustaste ein Rechteck um beide Knoten ziehen, oder mit gedrückter SHIFT-Taste beide Knoten anklicken.




4 Bézier-Tool
Das Ergebnis sieht so aus (rotes Rechteck). Im oberen Werkzeug-Menü klicken wir auf die Schaltfläche "Die gewählten Knoten Symmetrisch machen".




5 Bézier-Tool
Es erscheinen sodann je Knoten 2 Anfasser:



Hinweis:

In anderen Programmen heißen sie Anker/Ankerpunkte.

6 Bézier-Tool
Wir markieren die 3 Anfasser A+B+C und ziehen sie auf eine neue Position A+B+C:



7 Bézier-Tool
Entsprechend verfahren wir mit den 3 Anfassern auf der rechten Seite der Grafik (rotes Rechteck):




8 Bézier-Tool
Wir setzen zwei vertikale Hilfslinien (auf 300 und 700) und ziehen die Anfasser A+B der beiden mittleren Knoten auf die "Gitter-Überschneidung" (die zwei linken auf 300er und die beiden rechten auf die 700er Hilfslinie). Wir machen dies, um den Kurvenverlauf der Grafik anzupassen, weil er ein wenig "spitz" erscheint.




9 Bézier-Tool
Die beiden Anfasser (A+B) ziehen wir einen Tick nach oben (damit's besser ausschaut):




10 Bézier-Tool
2 neue vertikale Hilfslinien: 50, 150.
4 zusätzliche Knoten auf die Linien der Grafik setzen (+, bei Hilfslinie 150 und 200).
Die Knoten A+B+C auf eine neue Position ziehen.




11 Bézier-Tool
2 neue vertikale Hilfslinien: 850, 950.
4 zusätzliche Knoten auf die Linien der Grafik setzen (+, bei Hilfslinie 800 und 850).
Die Knoten A+B+C auf eine neue Position ziehen.




12.1 Bézier-Tool
So, und nun wird es erst recht gehörig verzwickt . Darum hab' ich den nächsten Schritt in drei Teile gesplittet; Rot, Blau und Grün.
Zunächst Rot: wie verlegen die 3 gekennzeichneten Knoten (linke Seite der Grafik) A+B+C auf eine neue Position. Dabei lassen wir völlig außer Acht, was mit dem Rest der Grafik geschieht - das interessiert uns erst später.




12.2 Bézier-Tool
Nun kümmern wir uns um die Blau-markierten Knoten. Mit ihnen verfahren wir ebenso, wie mit den roten unter 12.1, und verlegen sie auf eine neue Position. Auch hier achten wir erstmal nicht auf die Auswirkungen auf die Grafik.




12.3 Bézier-Tool
In diesem 3.Schritt geben wir dem Kurvenverlauf unseres Banners durch das Verändern der Anfasser seine endgültige Form.
Dieses Beispiel dient nur als Anhaltspunkt - wie ihr die Kurven gestaltet, bleibt letztendlich euch überlassen.



Unser fertiges leeres Banner sieht dann so aus:



13 Auswahl-Tool
Im Wappen-Tutorial Teil 4 hab' ich bereits erläutert, wie ihr mit InkScape einen Farbverlauf erstellt, darum will ich hier nur zeigen,
welche Farbgebung ich für unser Banner-Beispiel gewählt habe.
Zunächst die Farb-Füllung:




14 Auswahl-Tool
Hier die Konturfüllung:




15 Auswahl-Tool
Und zu guter Letzt noch das "Konturmuster"




Und noch mal das fertige Banner .




Wem es zu groß ist, der sollte es vor der Füllung verkleinern - das ist einfacher .





Hurra! - Und wieder etwas dazu gelernt !!!

[Fuerst_Vlad]

Anhand eines kleinen Beispiels will ich euch zeigen, wie wir Schatten erzeugen und bearbeiten können.
Verwendete Software: GIMP 2.8

Unsere Vorlage ist dieser Pinsel:




Zunächst legen wir unterhalb der Pinselgrafik eine leere und transparente Ebene an.
Anschließend wählen wir im Menü "Filter" --> "Licht und Schatten" den Befehl "Schalgschatten":




Das Script-Fenster "Schlagschatten" öffnet sich:



Hier sehen wir verschiedene Variable, auf die wir Einfluß nehmen können:
"Versatz X:" bedeutet, daß wir den Schatten horizontal verlagern können,
"Versatz Y:" bedeutet, daß wir den Schatten vertikal verlagern können.

Hinweis: bei X=0 und Y=0 liegt der Schatten zentriert unter dem Objekt.

"Weichzeichnenradius" bestimmt den Grad der Unschärfe des Schattenumrisses und dessen "Ausläufer",
"Deckkraft" nimmt Einfluß auf die Durchsichtigkeit des Schattens - für den Fall, daß sich unter dem Schatten eine weitere Ebene verbirgt, die bis zu einem bestimmten Grad sichtbar bleiben soll.
"Größenänderung zulassen" ermöglicht eine spätere manuelle Größenänderung des Schattens.

Hinweis: Der Schatten bildet automatisch eine eigenständige Ebene unterhalb der Grafik.


Beispiel für einen zentrierten Schatten (X=0, Y=0): / Beispiel für einen verlagerten Schatten (X=0, Y=20):




Beispiel für einen manuell verlagerten Schatten:




Im folgenden Schritt drehen wir den Schatten mittels des "Drehen"-Werkzeugs. Das machen wir auf Augenmaß und klicken "Rotieren":




Jetzt benötigen wir einen temporären weißen Hintergrund. Mit dem "Füllen"-Werkzeug füllen wir die Ebene unter dem Schatten:



Hinweis: In diesem Beispiel sind 3 Ebenen im Einsatz. Obere Ebene = Pinselgrafik, mittlere Ebene = Schatten, untere Ebene = Hintergrund


Mit dem "Verschieben"-Werkzeug verschieben wir den Schatten solange, bis sich Schatten und Pinselgrafik ungefähr bei den Pinselhaaren treffen.
Ab dieser Position wählen wir mittels "Freie Auswahl"-Werkzeug (Lasso) den oberen Teil des Schattens aus (siehe Bild) und löschen diesen
mit der "Entf"-Taste.




Desweiteren glätten wir die an der Schnittstelle entstandene scharfe Kante des Schattens mit Hilfe des "Weichzeichnen"-Werkzeugs:
Ich empfehle eine Pinselgröße von 5 Pixeln und einen Vergrößerungsfaktor von 800-1000%.




Nun löschen wir die "Hintergrund"-Ebene, vereinigen die "Pinsel"- und die "Schatten"-Ebene zu einer, und unsere Grafik ist fertig.

Eine unsichtbare Hand führt einen Pinsel.