GIMP-Forum 3.0

GIMP-Forum 3.0 (http://www.gimpforum.de/index.php)
-   Tutorials (http://www.gimpforum.de/forumdisplay.php?f=10)
-   -   Webseitengestaltung mit Pfaden (http://www.gimpforum.de/showthread.php?t=1346)

Rebell 17.03.2005 11:33

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

lox2eagle 17.03.2005 12:21

Fleißig fleißig http://www.laut.de/lautbar/forum/images/smilies/alk.gif
Hehe, und ich hatte angenommen, daß er das mit dem Pfaden begriffen hatte; aber scheinbar kommt nicht jeder mit den Textbeispielen gleichermaßen zurecht http://www.laut.de/lautbar/forum/ima...ilies/sigh.gif

Artanis 17.03.2005 12:48

textbeispiele waren noch nie meine stärke :D

miketmc 17.03.2005 14:29

:lol: :lol: :lol:

hab das Tut mal nachvollzogen !!!

SUPER ARBEIT !!

Flinthrc 17.03.2005 19:55

Gut gemacht!

Nur wie hast du den "Blendeffekt" und die Wolken hinbekommen?

Rebell 17.03.2005 22:09

Lade dir das xcf runter, dann siehstes.

Adstriker 21.04.2005 18:22

hey! :lol:
erstmal danke für die coolen tutorials hier! :)
Bin ganz neu in der Materie der Grafikprogramme und hab direkt mal mit gimp angefangen.
Habe nun auch mit den Pfaden die Linien konstruiert aber immer wenn ich eine neue Ebene einfüge sind die Linien weg und wenn ich es dann mit Farbe fülle is das ganze Bild gefüllt! :roll:

Hoffe mir kann wer helfen...
bin wie gesagt ganz neu, und hab das programm erst seit heute... :oops:

Hans 21.04.2005 21:48

Das sieht nur so aus, als dass die Pfade weg sind. Wechsele in den Pfaddialog und mache deinen Pfad wieder sichtbar
Galeriebild

Bevor du das Bild füllst, gehst du in den Pfaddialog und wählst Auswahl aus Pfad :selection-replace-: . Dann sollte anschließend nur der gewählte Breich geflutet werden.

Hans

Adstriker 21.04.2005 22:12

ah, gut funktioniert!:)
danke!
Echt schön, dass ihr hier einem so schnell helft.

mfg Adstriker

LeoManiac 21.08.2005 10:38

Re: Webseitengestaltung mit Pfaden
 
Zitat:

Zitat von Rebell
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.

Jo feste größen sehen zwar schon professionell aus aber noch professioneller siehts aus wenn man die Breite variable hält das ist zwar noch komplizierter aber es kommt gut an ;-)


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:03 Uhr.

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