Forum Wiki Galerie Kontakt Wie man Fragen richtig stellt. Tutorial Forum
Zurück   GIMP-Forum 3.0 > Arbeiten mit Gimp > Tutorials

Hinweise
Alt 17.03.2005, 12:33   #1
Rebell
Erfahrener Benutzer
 
Benutzerbild von Rebell
 
Registriert seit: 20.03.2003
Beiträge: 1.068
Standard Webseitengestaltung mit Pfaden

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 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
Galeriebild


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.
Galeriebild


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 zeigt sie dir. Dort gibt es unterhalb die Schaltfläche "Auswahl aus Pfad" mit der du eine Auswahl aus deinem Pfad erstellen kannst. Zurück zu den Ebenen 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 und einer dir beliebigen Farbe.
Galeriebild


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
Galeriebild


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.
Galeriebild


Gestalte die Oberfläche nach Lust und Laune
Galeriebild


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
__________________
come to daddy, windowlicker!
get m:ke - http://paradies.homelinux.net
Rebell ist offline   Mit Zitat antworten
 

Lesezeichen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist An.
Smileys sind An.
[IMG] Code ist An.
HTML-Code ist Aus.

Gehe zu


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:06 Uhr.


Powered by vBulletin® Version 3.8.2 (Deutsch)
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.