Twitter Updates

Slicen mit Gimp · Samstag Februar 21, 2009

Hallo, einige haben mich gefragt wie ich mein Blogtemplate hinbekommen habe, weil ich es mit Gimp erstellt habe und nicht Photoshop und Imageready verwendet habe.

Erst einmal überlegt man sich wie das Template denn überhaupt aussehen soll, gut ist auch schon wenn man sich freie Stellen bei der Erstellung markiert (Pfade, Auswahl, Hilfslinien etc.)

Das markiere im Bild sind nur weiße Flächen die ich auf Ebenenmodus Überlagern gesetzt habe und die Sichtbarkeit auf 50% gestellt habe. Keine sorge am Ende des Eintrages ist die xcf Datei mit dabei zum gucken :). Die Schriftart für “Rikku” ist hier bei dafont.com zu finden.

Hat man seine Ebenen so weit das der ganze Spaß ein Layout ergibt heißt es erst mal abspeichern, falls man das noch nicht getan hat.

Nun kommt die eigentliche Slicearbeit, jetzt müssen Hilfslinien gesetzt werden Damit Gimp weiß wo es lang slicen soll. In der XCF von mir sind die schon gesetzt.

Nun am besten noch einmal speichern. Dann auf Bearbeiten>Sichbares kopieren und als neue Ebene einfügen.
Anschließend auf Filter>Web>Zerteilen. Dort dann alles wie gewünscht einstellen, ich rate das ganze erst mal als png Dateien slicen zu lassen, da gimp den jpg Dateien unheimlich schlechte Qualität gibt. Die png Dateien kann man später immer noch in jpg umwandeln mit höherer Qualität. Natürlich muss man dann seinen Quelltext anpassen.

Anschließend unbedingt die erstellte Datei, standardmäßig slice.html angucken und gegebenenfalls bearbeiten, da der dortige HTML code auf gut deutsch scheiße ist.
Wenn man nun ganz viel Langeweile hat macht man dort die tables zu div Containern, das hab ich gemacht.

tut-layout.7z

Live Demo
Live Demo 2

— BloodyWing