Eigene Bilder im Template (Gimp)

Wer anstelle von Photoshop lieber die kostenlose Software Gimp nutzen möchte hält sich an folgendes Vorgehen.

1. Die Gimp Template-Dateien herunterladen
Da Gimp nicht alle Eigenschaften von Photoshop unterstützt (z.B. Ebeneneffekte) ist es wichtig, die Gimp Template Dateien zu verwenden.

2. Datei in Gimp öffnen
Hier wird Gimp 2.2 für Windows verwendet
1

3. Neues Bild ins Template laden
z.B. per Drag und Drop einfach ins Template ziehen
1

4. Ebenen einstellen
Das neue Bild muss unterhalb der "angefressenen" Ecke sein (hier Hintergrund Kopie)
1

5. Grösse des Bildes ändern
Die Gröesse des Bildes anpassen. Wichtig ist, dass das Verhältniss gewahrt bleibt
1

6. Grösse anpassen
1

7. Bild zuschneiden
Da wir für das Template nur die Ecke oben Links benötigen, können wir den Bereich anhand der Hilfslinien auswählen und mit Bild zuschneiden das Bild auf diesen Bereich reduzieren
1

8. Bild speichern
Das Bild nun abspeichern. Da wir nur noch die gewünschte Ecke haben, setzen wir den Namen gleich auf bg_01_xx.jpg (xx ist eine vortlaufende Zahl)
1

9. Beim Speichern die Einschränkungen akzeptieren
Das Originalbild wird bei diesem speichervorgang nicht verändert.
1

10. Die Qualiät einstellen
Beim speichern von JPEG kann die Qualität mit angegeben werden. Je besser umso grösser das Bild, was automatisch auch zu längeren ladezeiten führt.
1

11. Bild zerschneiden
Alternativ zum Vorgehen in Schritt 8, können wir das Bild auch entlang der Hilfslinen zerschneiden. Das generiert viele Einzelbilder für jeden Teilbereich des Templates. Falls die Hintergrundfarbe geändert werden soll, ist dieser Schritt aber nötig.
1

12. das fertige Bild
1

13. Bild auf den Server laden
Das Bild muss nun mit einem geeigneten Programm (z.B. WinSCP oder auch per Joomla Xplorer) auf den Server geladen werden. Das Bild gehört ins Verzeichniss: templates\namibia_css\images 

14. Anpassung der HTML Datei
Nun muss noch die HTML Datei angepasst werden. Im Template Manager das Template wählen und mittels Edit HTML den Code bearbeiten.
11

15. Code bearbeiten
Im Code die folgende Zeile suchen (ca. Zeile 13):

$imgid = sprintf("_%02d",rand(1,xx));

Die Zahl xx gibt die Anzahl der Bilder an und muss nun entsprechend mit der Zahl xx des Bildes (siehe Schritt 9) angepasst werden.

16. Speichern und ausprobieren
Nun muss die Änderung nur noch gespeichert werden und anschliessend die Seite zum Testen natürlich neu geladen werden.