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

Hinweise
Alt 03.05.2006, 00:37   #1
karagez
Erfahrener Benutzer
 
Benutzerbild von karagez
 
Registriert seit: 20.03.2004
Beiträge: 727
Standard Von GIMP zum Browser

Es handelt sich hierbei zwar nicht um ein GIMP-Tutorial im Wortsinn, allerdings taucht im Forum immer mal wieder die Frage auf, wie man mit GIMP eine schicke Homepage baut. Darum habe ich den Versuch unternommen, dies möglichst idiotensicher, zu veranschaulichen.

Wer zu faul ist diese Website nachzubauen, der kann sich auch einfach das fertige Template und die XCF-Datei herunterladen.
Vorwort

Dieses Tutorial behandelt fast ausschließlich, den Weg des Quasi-Screenshots zum schlüsselfertigen Websitetemplate (wobei ich mir hier tiefer gehende Informationen, bezüglich des Aufbaus einer solchen – ja, sogar meine höchsteigene Meinung, was diese aufweisen sollte und was nicht – verkniffen habe). Ein paar HTML-Grundkenntnisse sind sicher hilfreich (aber nicht zwingend erforderlich), die verwendeten CSS-Angaben werden jedoch mehr als ausführlich erklärt.

Zunächst einmal werden wir in GIMP einen Quasi-Sceenshot unserer Website erstellen. Wenn dabei Fragen auftreten, zögern wir nicht vom Forenbereich „Hilfe und Fragen“ gebrauch zu machen (selbstverständlich aber erst nachdem wir die Forensuche betätigt haben, um uns keinen Rüffel einzuhandeln).

Zur Veranschaulichung dieses Tutorials habe ich hier ein, nicht besonders originelles, aber zu Anschauungszwecken ausreichendes, Beispiel hochgeladen (Sollte jemand, in Ermangelung eigener Ideen, diese Grafiken für seine Website verwenden wollen, so sei mir das von Herzen gleich. Ich deklariere sie hiermit als Allgemeineigentum).

Die Arbeit in GIMP

Erster Schritt

Wir erstellen also das Template einer Website mit den elementar wichtigen Rubriken, „Wurst“ und „Schnitzel“(wichtig ist, dass zwischen dem oberen und dem unteren Teil ein kleiner einfarbiger Bereich ist, der in der Website später beliebig gestreckt werden kann).



Um unsere XCF-Datei nicht durch versehendliches Speichern unter gleichem Namen zu versauen (ich habe nicht mitgezählt, wie oft mir das schon passiert ist), beklicken wir unser Bild zunächst mit der rechten Maustaste und wählen den Menü-Eintrag Bild > Duplizieren, wodurch eine Kopie des Bildes im Arbeitsspeicher erstellt und im GIMP als neues Bild geladen wird.

Anschließend blenden wir zunächst die Ebene mit den Navigation-Einträgen aus, da diese nicht in der Hintergrundgrafik enthalten sein sollen. Dies können wir erreichen indem wir im Ebenen-Dialog (im Hauptfenster Datei> Dialoge > Ebenen) auf das Auge neben der auszublendenden Ebene klicken.



Indem wir zunächst auf das Lineal am oberen Rand des Bildes klicken und, bei gedrückter linker Maustaste, den Cursor ins Bild ziehen, erstellen wir eine horizontale Hilfslinie. Diese sollten wir irgendwo in dem einfarbigen Bereich in der Mitte positionieren (einfach die Maustaste loslassen – sie läuft schon nicht davon. Im Beispiel befindet sie sich 185 Pixel vom oberen Bildrand entfernt). Es ist leider erforderlich, dass das Bild nur diese eine Hilfslinie aufweist, wir löschen also ggf. alle anderen indem wir sie „nehmen“ und aus dem Bild hinausziehen.



Ist das alles geschehen, klicken wir wieder mit der rechten Maustaste ins Bildfenster und wählen den Eintrag Bild > Transformieren > Guillotine. GIMP teilt nun die Grafik an der soeben gesetzten Hilfslinie. Die beiden Grafiken speichern wir unter zwei aussagekräftigen Namen wie „oben.jpg“ und „unten.jpg“ (Webgrafiken sollten immer im JPG-, PNG- oder GIF-Format gespeichert werden. Wobei GIF nur für Grafiken mit sehr wenigen Farben geeignet ist und PNG-Dateien oftmals einfach zu groß sind).

Zur Beachtung: Wir schließen die Datei „oben.jpg“ noch nicht, da wir aus ihr noch die Navigation separat speichern müssen.

Zweiter Schritt

Wir beklicken das Bildfenster, welches „oben.jpg“ beinhaltet und machen die Navigation-Ebene (wie oben beschrieben) wieder sichtbar. Dann müssen wir noch ein paar Hilfslinien setzen. Im Beispiel geschah das mit den folgenden Koordinaten:

Horizontale-Linien: 110px; 590px; Vertikale-Linien: 50px; 120px;

(gut, ich habe ein idiotensicheres Tutorial angekündigt und daran muss ich mich nun auch halten: Horizontal sind die Linien, die von links nach rechts gehen und vertikal eben die anderen)



Nun führen wir wieder die Guillotine aus (und weil wir ein gutes Gedächtnis haben, müssen wir jetzt nicht noch einmal gesagt bekommen, wie das geht).

Diesmal produziert GIMP, neben den erwünschten Bildern, noch eine ganze Menge Abfall. Diesen entsorgen wir indem wir die entsprechenden Bildfenster schließen und GIMPs besorgte Nachfrage mit einem Beklicken des Nicht-Speichern-Buttons abfertigen. Wir benötigen ausschließlich die Bilder mit unseren Navigation-Einträgen (in diesem Falle „Wurst“ und „Schnitzel“).

Da wir bei unserer Website nicht ganz auf „Buntiklicki“ zu verzichten gedenken, erstellen wir nun gleich zwei Bilder pro Navigation-Eintrag: Einen für den normalen Zustand und einen, der dann angezeigt wird, wenn man, unsicher ob man nun wirklich klicken möchte oder nicht, den Mauszeiger über die Schaltfläche bewegt.

Nun kommt der Deckkraft-Regler ins Spiel (diesen finden wir im Ebenendialog ganz oben). Wir wählen für die Navigation-Ebene zunächst eine verringerte Deckkraft (im Beispiel 60%) und speichern das Schnitzel-Bild als „schnitzel1.jpg“. Anschließend stellen wir die Deckkraft wieder voll her (also 100%) und speichern dies als „schnitzel2.jpg“. Selbiges tun wir auch mit unserem Wurst-Bild (selbstverständlich verwenden wir im Namen „wurst“ anstelle von „schnitzel“).



Zwischenspiel

Wir können GIMP nun schließen, da wir die Arbeit in einem stinknormalen Texteditor fortsetzen. Für den Fall, dass wir Windows verwenden und bislang keinen Texteditor besitzen (Vorsicht: Word, so wie das Notepad sind zum Erstellen von Websites absolut ungeeignet), können wir uns unter http://mb.eson.de einen solchen herunterladen.

...Fortsetzung folgt.
__________________
„Höflichkeit ist die Haltung die wir gegen Leute einnehmen von denen wir persönlich nicht erbaut sind.“
(Oscar Wilde)

Geändert von karagez (03.05.2006 um 01:16 Uhr)
karagez 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

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Gimp besorgen und installieren. Rebell Technische Fragen 106 28.10.2014 18:30
The GIMP 2.2.0 schumaml Neues von GIMP 8 01.07.2006 20:35
The GIMP 2.2-pre2 schumaml Neues von GIMP 11 25.01.2005 20:51
The GIMP 2.2-pre1 (Halloween Release) schumaml Neues von GIMP 2 14.11.2004 20:12


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:38 Uhr.


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