Geschrieben von newwarrior am 09.10.2005, 07:44

Hi Leute,

ich werde jetzt mal ein Tutorial für Gimp schreiben. Diese Katigorie gibt es ja bei euch noch nicht, und ich hoffe, aber sie wird jetzt enstehen.

Das Tutorial

Als erstes müssen wir uns erstmal überlegen, wie unsere Webseite aussehen soll, und was sie darstellen soll.
Ich habe überlegt, wir machen einfach mal eine Persönliche Webseite.

Allegmeine Infos

Wenn ihr Gimp noch nicht besitzt könnt ihr es euch kostenlos runterladen.
Ihr müsst zuerst GTK runterladen und installieren:

http://mesh.dl.sourceforge.net/sourceforge/gimp-win/gtk+-2.6.9-setup.zip

Und dann noch Gimp selbst:

http://mesh.dl.sourceforge.net/sourceforge/gimp-win/gimp-2.2.8-i586-setup.zip

Diese beiden Sachen installieren und es kann los gehen. Leute die vorher mit Photoshop gearbeitet haben, werden erstmal ihre Probleme mit Gimp gebkommen, weil es einfach ganz anderes aufgebaut ist. Aber die Leistungen und die Ergebnis können locker mti PS mit halten, wenn man mit dem Programm richtig arbeiten kann.

Allgemeines Zur Webseite

Wir schon gesagt, soll die Webseite eine Ich-Webseite werden, also über mich informieren.
Ich habe als Hintergrudn schwarz gewählt, das kommt auch am besten für den Weichzeichern nacher.
Erstellt eine neue Datei mit der Größe 800px x 600px.
(Wie ihr vielleicht sehen könnt, wird die Webseite für 1024 x 768 optiemiert sein)

Header

Wir fangen am besten mit dem Header an.

Erstellt eine neue Datei mit der Größe 700px x 125 px und nennt es Header.
Füllt den Hintergrund mit schwarz.
Jetzt öffnet ihr irgendein Bild, das ihr gerne als Header hintergrund hätte. Dieses Bild müsst ihr mit folgenden maßen skalieren: 680px x 100 px.

(skalieren: Bild -> Bild skalieren //Achtung neben den Zahlen auf diese Klammer klicken!!!)

Wenn ihr das gemacht habt, klickt ihr auf das Symbole mit den vier Pfeilen bei The Gimp.
Dann klickt ihr einmal auf euer Bild was ihr gerade skliert habt, und drückt dann Strg + x.
Dann geht ihr auf das Bild Header und fügt es mit Strg + V wieder ein und schiebt es so zurecht, damit es ungefährt in der mitte ist.

Dann klickt ihr auf Ebenen,Kanäle unt so weiter. Dort seht ihr dann stehen und markiert Schwebende Auswahl.
Jetzt klickt ihr einfach auf das weiße Blatt, was da runter ganz links ist und dann müsste dort stehen Eingefügte Ebene.

Dann geht ihr wieder auf das Bild HEader zurück. Jetzt klickt ihr auf Script-Fu.
Dort auf Schatten -> Schlagschatten.
Folgende Daten gebt ihr ein

Versatz : 2
Radius: 50
Farbe: ededed
Deckkraft: 80

Jetzt kommt ein bisschen fummelarbeit.
Ihr wählt bei The Gimp den Stift und stellt auf ein pixel.
Dann noch auf weiß die Farbe. Jetzt klickt ihr wieder auf die Ebenen, Känale und so weiter.
Dort erstellt ihr eine neue Ebende über dem eingfügten Bild.
Jetzt geht ihr wieder in das Header Bild und stellt die Größe auf 800%. Jetzt müsst ihr eure kanten mit dem weißen Stift nachziehen.

Wenn ihr das gemacht habt, stellt ihr die Größe wieder zurück auf 100%.
Sieht doch garnicht so schlecht aus oder?

Jetzt fügen wir zum Schluß noch ein Schriftzug ein:

Klickt bei The Gimp auf T.
Wählt euch eine Schrift aus, stellt die Farbe auf dedede.
Die Größe auf 75.
Dann schreibt einen kleinen Text und schiebt ihn euch zurcht auf der Ebene.Wenn der text unter dem Bild ist, dann müsst ihr bei Ebenen einfach die Textebene nach ganz oben schieben, schon könnt ihr den Text wieder sehen.
Jetzt geht ihr auf

Filter -> Weichzeichnen -> Grauscher Weichzeichner

Radius beies bei 5

Jetzt haben wie den Header fertig.
Jetzt speichert ihr das unter einem Gimp Format um es später nochmal zu bearbeiten.

Jetzt klickt ihr auf Ebenen und Kanäle.
dort rechts klicke auf die erste Ebene und Nach unten Vereinen klicken.
Und das macht ihr jetzt solange, bis es nur noch eine Ebene gibt.
Jetzt speichert ihr das als .jpg.

Zum Schluss klickt ihr nochmal auf das Bild, so das alles makiert ist.
Und drückt dann Strg + x.
Dann geht ihr auf das Bild (das große mit dem schwarzen Hintergrund) und fügt es mit Strg + V wieder ein und schiebt es so zurecht, damit es ungefährt oben in der Mitte ist.

So wird es später mal aussehen,eure Webseite mit dem Header.

Hier so sieht mein Header aus:

http://newwarrior.milten.lima-city.de/header.jpg

2Teil: Inhaltsbox erstellen
3Teil: Menü erstellen
4Teil: Coden des Layouts

Bei Fragen oder sonstiges einfach eine PN an mich schicken.
Ich hoffe es hat euch Spaß gemacht und wir sehen uns bei den nächsten Teilen.

Bewertung Anzahl
6
12,5 %
1 Bewertungen
5
25,0 %
2 Bewertungen
4
12,5 %
1 Bewertungen
3
12,5 %
1 Bewertungen
2
25,0 %
2 Bewertungen
1
12,5 %
1 Bewertungen