Schlagwort: webdesign

Mit Gimp könnt ihr ganz einfach ein Webdesign in seine Einzelteile zerlegen (engl. slicen). Die einzelnen Bilder könnt ihr dann bei der Programmierung des Webdesigns in die Website einarbeiten.

Insgesamt sind für das Slicing des Webdesigns 3 Arbeitsschritte notwendig:

1. ungewünschte Ebenen / Objekte entfernen
2. Hilfslinien setzen
3. Slicing-Filter anwenden

Wer Gimp noch nicht installiert hat, findet hier eine Anleitung.

Ungewünschte Ebenen / Objekte entfernen

Blendet alle Ebenen aus, die ihr nicht für die Programmierung benötigt, z.B. Text, Menü und Logo. Dinge die stören und nicht als eigene Ebene im Bild sind, schneidet ihr aus oder überzeichnet sie (in Zukunft aber immer Ebenen verwenden).

Hilfslinien in Gimp setzen

Dann zieht ihr die Hilfslinien in das Webdesign. Die Hilfslinien dienen später beim Slicing als Schnittkanten an denen das Webdesign zerteilt bzw. gesliced wird.

Exkurs: Hilfslinien in Gimp verwenden

Um Hilfslinien in Gimp zu verwenden, fasst ihr mit der Maus einfach ein Lineal an und zieht dann die Hilfslinien in das Bild. Wenn ihr keine Hilfslinien seht, müsst ihr die Hilfslinien evtl. mit Strg+Shift+T oder unter Ansicht > Hilfslinien anzeigen aktivieren.

Webdesign slicen

Zum Abschluss wählt ihr im Menü Filter > Web > Zerteilen. Im darauf folgenden Dialog wählt ihr das gewünschte Verzeichnis und Format; sonst könnt ihr die Einstellungen so lassen, wie sie sind.

Das Ergebnis könnt ihr dann im zuvor gewählten Ordner anschauen. Dort findet ihr eine HTML-Datei mit einer Layout-Tabelle und die zerteilten Bilder. Im Video seht ihr die einzelnen Schritte nochmal live in Action. Jetzt könnt ihr loslegen und euer mit Gimp geslicetes Webdesign programmieren.

Gimp ist die Bildbearbeitung für Webdesign mit Ubuntu. Jeder der Websites unter Ubuntu gestalten will braucht dazu Gimp. Wie man Gimp einrichtet so, dass keine Wünsche mehr offen bleiben, will ich euch hier zeigen.

Wer meint, er braucht auch unter Ubuntu Photoshop zum Webdesign, der kann sein Glück mit Wine versuchen. Ich bin der Meinung, das ist nicht nötig, aber, wenn man schon seit Jahr und Tag Photoshop benutzt, kann ich das verstehen.

Wir werden im Folgenden:

1. Paketquellen für Gimp und bestimmte Plugins hinzufügen
2. Gimp, die Plugin-Registry und den Resynthesizer installieren

Paketquellen installieren

Wir müssen nur eine PPAs installieren: und zwar die von Webup8.org, damit können wir den aktuellsten Stable-Release von Gimp und die Plugin-Registry installieren. Im Terminal eineinfach:

sudo add-apt-repository ppa:nilarimogard/webupd8
sudo apt-get update

Gimp, Plugin-Registrym, Resynthesizer in Ubuntu installieren

Gimp installiert ihr denkbar einfach, im Ubuntu App-Store, ich meine natürlich Software Center, nach Gimp suchen und auf installieren klicken. Analog installiert ihr die Registry (Paketname: gimp-plugin-registry) und den Resynthesizer (Paketname: gimp-resynthesizer).

Etwas schneller könnt ihr  Gimp mit den beiden anderen Paketen natürlich auch im Terminal installieren:

sudo apt-get install gimp gimp-plugin-registry gimp-resynthesizer


Das ganze sollte dann so aussehen:

Gimp bringt für das Webdesign schon eine ganze Menge Funktionen mit. Mit der Plugin-Registry und dem Resythesizer sollten kaum noch Wünsche für das Webdesign mit Ubuntu mehr offen sein.

Übrigens: Wenn ihr keine Lust habt, das selbst zu machen, könnt ihr auch einfach Rockiger OS installieren.