Rebell
17.03.2005, 12:33
Hi, this is Rebell, welcome to my first Gimp tutorial.
Dieses Tutorial ist Artanis gewidmet, der so verzweifelt nach Hilfe gesucht hat. Dieses Tutorial soll kurz angeschnitten zeigen, wie man Gimp zum Webseiten-Design nutzen könnte. Ich möchte mich hiermit bei meiner Freundin, meiner Familie für das Verständnis und tatkräftige Unterstützung bedanken.
(C) by the Common Creative License
Aller Anfang ist schwer
Das wichtigste beim Layout-gestalten sind die Maße. Du musst also vorher wissen wie groß deine Seite sein soll und welche Aufösungen sie unterstützen wird. Es lohnt sich auf einem Blatt Papier skizzenhaft Bereiche zu markieren, die du in Kopf, Menü, Navigation, Inhalt und Fuß unterteilst.
Professionelle Webseiten sind in der Breite nicht weiter als 800 Pixel. du solltest also generell Webseiten auf 800*XXX optimieren[1]. Da sich die Artikel dann auch besser lesen lassen.
Starte Gimp, auf der Stelle!
Da du beim Zeichnen mehr Platz brauchst, empfehle ich immer mehr Arbeitsfläche zu reservieren als notwendig. Bei einem 800*irgendwas Bild also mindestens 900*500 Pixel. Erstelle ein Bild in dieser Größe.
Zu den Waffen
Komplexe Gebilde zeichnest du am besten mit der Pfadwerkzeug :tool-path-22: Der Umgang damit ist in Gimp 2.0 etwas gewöhnungsbedürftig, in Gimp 2.2 ist das besser gelöst. Es gibt 3 wichtige Bearbeitungsmodi: Design (damit setzt du Punkte), Bearbeiten (damit verschiebst, tangierst und löschst du sie) und Verschieben (damit verschiebst du den gesamten Pfad).
Fang also an, wie wild Punkte zu setzen die deiner Wunschfigur am nächsten kommen. Kurven erstellst du im Bearbeitungsmodus. Klicke dazu einen Punkt an und ziehe aus ihm die Tangenten heraus. Löschen kannst du einen Punkt im Bearbeitungsmodus bei gedrückter UMSCHALT-Taste. Hinzufügen kannst du Punkte im Designmodus bei gedrückter Steuerungstaste (STRG). Am Ende sollte sowas hier rauskommen
584
Schni-Schna-Schnappi
Parkinson-Leidende wissen sie zu schätzen: Die Hilfslinien. Wenn du Punkte nicht genau verschieben kannst, dann zieh dir Hilfslinien links und oben aus den Liniealen. Ausblenden kannst du sie im Ansichts-Menü oder über UMSCHALT+STRG+T.
585
Man, bist du voll
Jetzt hast du ne nette Form, die es zu füllen gilt. Ein Pfad ist ab seiner Erstellung im Dialog "Ebenen, Kanäle und Pfade zu finden". Ein Klick auf :path-22: zeigt sie dir. Dort gibt es unterhalb die Schaltfläche "Auswahl aus Pfad" :selection-replace-: mit der du eine Auswahl aus deinem Pfad erstellen kannst. Zurück zu den Ebenen :layers-16: wo du eine neue Ebene anlegst. Die erzeugte Maske kannst du durch Druck auf STRG+T ein- und ausblenden (falls sie mal nicht sichtbar sein sollte). Anschließend füllst du sie mit dem Füllwerkzeug :tool-bucket-fill-2: und einer dir beliebigen Farbe.
586
Schatten boxen
Zu dem gibts nicht viel zu sagen: Script-Fu -> Schatten -> Schlagschatten. Mit den Werten kannst du spielen (aber nicht so lange), meine Einstellungen waren: Versatz X/X = 2, Radius des Weichzeichners = 5, Deckkraft = 55, [ ] Größenänderung zulassen
587
Ab 5:30 wird zurückgeschnitten!
Jetzt kannst du anfangen, die Oberfläche der Figur mit beliebigen Formen und Farben auszuschmücken. Vorraussetzung dafür ist, dass du jedes Element in eine neue Ebene packst. Du kannst (wie auf meinem Bild zu sehen) ruhig über deine Figur zeichnen, denn ich erklär dir wie du überstehende Bereiche abschneidest. Erstelle erneut eine Maske aus deiner Pfad-Form, wähle deine Ebene aus die abgeschnitten werden soll drücke nun STRG+I um die Auswahl zu invertieren (das geht auch im Auswahl-Menü) und anschließend STRG+K um den Bereich zu löschen.
588
Gestalte die Oberfläche nach Lust und Laune
589
Will Code HTML for Food
Schaltest du deine Hilfslinien wieder ein, kannst du diese dafür nutzen aus den Bereichen Einzelbilder zu generieren[2]. Diese speicherst du extra ab und fügst sie mit hervorragenden HTML-Kenntnissen[3] zu einem Tabellen-Layout zusammen.
Das Endergebnis gibts hier zum Download: http://paradies.homelinux.net/webtut_produkt.xcf
[1] Unterlasst bitte Aussagen auf euren Webseiten wie "Optimiert für Auflösung x und Browser a". Das zeigt einem in Webseitengestaltung-involviertem Besucher dass ihr von Anfang an nicht geplant hattet andere Systemeigenschaften zu unterstützen und keine Lust habt es zu verbessern (wer sich an die Standars hält, kann nichts falsch machen)
[2] http://www.gimpforum.de/viewtopic.php?t=1327
[3] http://www.selfhtml.net
Dieses Tutorial ist Artanis gewidmet, der so verzweifelt nach Hilfe gesucht hat. Dieses Tutorial soll kurz angeschnitten zeigen, wie man Gimp zum Webseiten-Design nutzen könnte. Ich möchte mich hiermit bei meiner Freundin, meiner Familie für das Verständnis und tatkräftige Unterstützung bedanken.
(C) by the Common Creative License
Aller Anfang ist schwer
Das wichtigste beim Layout-gestalten sind die Maße. Du musst also vorher wissen wie groß deine Seite sein soll und welche Aufösungen sie unterstützen wird. Es lohnt sich auf einem Blatt Papier skizzenhaft Bereiche zu markieren, die du in Kopf, Menü, Navigation, Inhalt und Fuß unterteilst.
Professionelle Webseiten sind in der Breite nicht weiter als 800 Pixel. du solltest also generell Webseiten auf 800*XXX optimieren[1]. Da sich die Artikel dann auch besser lesen lassen.
Starte Gimp, auf der Stelle!
Da du beim Zeichnen mehr Platz brauchst, empfehle ich immer mehr Arbeitsfläche zu reservieren als notwendig. Bei einem 800*irgendwas Bild also mindestens 900*500 Pixel. Erstelle ein Bild in dieser Größe.
Zu den Waffen
Komplexe Gebilde zeichnest du am besten mit der Pfadwerkzeug :tool-path-22: Der Umgang damit ist in Gimp 2.0 etwas gewöhnungsbedürftig, in Gimp 2.2 ist das besser gelöst. Es gibt 3 wichtige Bearbeitungsmodi: Design (damit setzt du Punkte), Bearbeiten (damit verschiebst, tangierst und löschst du sie) und Verschieben (damit verschiebst du den gesamten Pfad).
Fang also an, wie wild Punkte zu setzen die deiner Wunschfigur am nächsten kommen. Kurven erstellst du im Bearbeitungsmodus. Klicke dazu einen Punkt an und ziehe aus ihm die Tangenten heraus. Löschen kannst du einen Punkt im Bearbeitungsmodus bei gedrückter UMSCHALT-Taste. Hinzufügen kannst du Punkte im Designmodus bei gedrückter Steuerungstaste (STRG). Am Ende sollte sowas hier rauskommen
584
Schni-Schna-Schnappi
Parkinson-Leidende wissen sie zu schätzen: Die Hilfslinien. Wenn du Punkte nicht genau verschieben kannst, dann zieh dir Hilfslinien links und oben aus den Liniealen. Ausblenden kannst du sie im Ansichts-Menü oder über UMSCHALT+STRG+T.
585
Man, bist du voll
Jetzt hast du ne nette Form, die es zu füllen gilt. Ein Pfad ist ab seiner Erstellung im Dialog "Ebenen, Kanäle und Pfade zu finden". Ein Klick auf :path-22: zeigt sie dir. Dort gibt es unterhalb die Schaltfläche "Auswahl aus Pfad" :selection-replace-: mit der du eine Auswahl aus deinem Pfad erstellen kannst. Zurück zu den Ebenen :layers-16: wo du eine neue Ebene anlegst. Die erzeugte Maske kannst du durch Druck auf STRG+T ein- und ausblenden (falls sie mal nicht sichtbar sein sollte). Anschließend füllst du sie mit dem Füllwerkzeug :tool-bucket-fill-2: und einer dir beliebigen Farbe.
586
Schatten boxen
Zu dem gibts nicht viel zu sagen: Script-Fu -> Schatten -> Schlagschatten. Mit den Werten kannst du spielen (aber nicht so lange), meine Einstellungen waren: Versatz X/X = 2, Radius des Weichzeichners = 5, Deckkraft = 55, [ ] Größenänderung zulassen
587
Ab 5:30 wird zurückgeschnitten!
Jetzt kannst du anfangen, die Oberfläche der Figur mit beliebigen Formen und Farben auszuschmücken. Vorraussetzung dafür ist, dass du jedes Element in eine neue Ebene packst. Du kannst (wie auf meinem Bild zu sehen) ruhig über deine Figur zeichnen, denn ich erklär dir wie du überstehende Bereiche abschneidest. Erstelle erneut eine Maske aus deiner Pfad-Form, wähle deine Ebene aus die abgeschnitten werden soll drücke nun STRG+I um die Auswahl zu invertieren (das geht auch im Auswahl-Menü) und anschließend STRG+K um den Bereich zu löschen.
588
Gestalte die Oberfläche nach Lust und Laune
589
Will Code HTML for Food
Schaltest du deine Hilfslinien wieder ein, kannst du diese dafür nutzen aus den Bereichen Einzelbilder zu generieren[2]. Diese speicherst du extra ab und fügst sie mit hervorragenden HTML-Kenntnissen[3] zu einem Tabellen-Layout zusammen.
Das Endergebnis gibts hier zum Download: http://paradies.homelinux.net/webtut_produkt.xcf
[1] Unterlasst bitte Aussagen auf euren Webseiten wie "Optimiert für Auflösung x und Browser a". Das zeigt einem in Webseitengestaltung-involviertem Besucher dass ihr von Anfang an nicht geplant hattet andere Systemeigenschaften zu unterstützen und keine Lust habt es zu verbessern (wer sich an die Standars hält, kann nichts falsch machen)
[2] http://www.gimpforum.de/viewtopic.php?t=1327
[3] http://www.selfhtml.net