Bilder mit Gimp für Typo3 vorbereiten
Ich empfehle Ihnen die freie Grafiksoftware Gimp um Bilder für Ihre Typo3 Seite vorzubereiten. Das Bearbeiten geht, nach kurzer Einarbeitungszeit, recht flott von der Hand.
Sollte Ihre Webseite einen Bereich mit Bildern haben, die bestimmte Formate erfordern, beispielsweise Ihre Headergrafik, lassen sich Standardwerte als Templates speichern (Breite und Höhe).
Ich möchte vorab schonmal auf das deutsche Handbuch zu Gimp verweisen, da ich mich hier nicht mit Installationsfragen auseinandersetzen möchte. In der Regel ist die Installation ein Kinderspiel. Laden Sie sich Ihren Gimp herunter, und lesen Sie die Einführung im Gimp-Handbuch. Lesen SIe auch die Einleitung von Spiegel.de.
Nachdem Sie den Gimp gestartet haben, präsentiert sich die Software sehr spartanisch, nicht wie die meisten Benutzer von Paint oder Photoshop gewöhnt sind.
Schritt 1: Bild öffnen
Beachten Sie, das Gimp mehrere Fenster öffnet, um Ihnen mehr Fläche für das Bild zu geben. Platzieren Sie das Tools-Fenster von Gimp an Ihrem linken Bildschirmrand und öffnen Sie ein Bild. Ziehen Sie sich das Fenster mit dem Bild rechts neben das Tools-Fenster, passen Sie die Größe des Fensters an.
Schritt 2: Bild für Typo3 zuschneiden
Wählen Sie das Zuschneide-Werkzeug aus der Palette Links aus, und geben Sie Ihre gewünschte Grösse wie auf dem Bild gezeigt ein. Haken Sie das Kästchen "Fixed Aspekt Ratio" an. Geben Sie in das Feld unterhalb Ihre gewünschte Grösse ein, in der Form: "640:240" (das fertige Bild wird die Seitenmaße 640px mal 240 px haben). Der Doppelpunkt ist wichtig, und ohne Gänsefüßchen natürlich.
Klicken Sie auf das rechte Fenster und ziehen Sie den Bildausschnitt zurecht, bis Sie mit dem Bildausschnitt zufrieden sind. Die Rechtecke in den Ecken dienen zum Ziehen des Bildausschnittes.
Ein Klick in die Mitte schneidet das Bild zu. Gefällt Ihnen der Ausschnitt nicht, drücken Sie die Tastaturkombination STRG-Z um Änderungen rückgängig zu machen.
Schritt 3: zugeschnittenes Bild für Typo3 skalieren
Das Bild ist jetzt in der Dimension schon maßgerecht zugeschnitten. Wir möchten das Bild aber noch etwas skalieren und optimiert abspeichern. Dazu wählen Sie im Bildfenster in der Leiste oben "Bild-Bild skalieren" aus. Der Skalieren-Dialog öffnet sich. Tragen Sie dort wieder Ihre Bildgröße ein, in unserem Beispiel 640 und 240 Pixel. Rechts neben den beiden Feldern gibt es ein kleines Kettensymbol, wenn das geschlossen ist, verändert sich die Höhe des Bildes maßstabsgerecht. Geben Sie 640 in das obere Feld und klicken Sie mit der Maus in das untere Feld, schon sollte dort 240 stehen.
Nach dem Skalieren ist das Bild recht klein. Am unteren Fensterrand links können Sie die Vergrößerung einstellen, dann kontrollieren Sie das fertige Bild.
Schritt 4: Bild für Typo3 richtig speichern
Speichern Sie das Bild mit "Datei-Speichern als ...". Verwenden Sie nicht "Bild-Speichern...", damit überschreiben Sie Ihr Original-Bild. Im Speichern-als-Dialog geben Sie oben den Bildnamen ein, beispielsweise gimp-tutorial.png ; beachten Sie die Dateierweiterung ".png". PNG speichert mehr Bildinformationen als JPG, ist als Ausgangsbild für Typo3 also genau richtig. Dateigrößen bis zu einem Megabyte sind denkbar, je nach Größe des Bildes.
Schritt 5: Bildqualität für Typo3 optimieren
Nachdem Sie auf Speichern geklickt haben, kommt noch der Dialog zur Bildqualität. Speichern Sie zusätzliche Bildinformationen in das Bild, vergrössert sich die Datei, das wollen wir nicht. Entfernen Sie alle Häkchen die Sie vorfinden, und regeln Sie die Kompression ganz nach Links, also ohne Kompression. Drücken Sie nochmals auf Speichern - Fertig!
Das fertige Bild:
