Gimp zum slicen eines Webdesigns

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).

Gimp: Ebenen ausblenden

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.

Gimp: Lineal anfassen

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.

Gimp: Hilfslinien anlegen

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.

Gimp: Slcing-Filter

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: einzelne Bilder nach Slicing


Mitarbeiter des Monats

Seit gestern haben wir hier einen neuen Mitarbeiter bei Rockiger: Tux.

Obwohl er erst seit gestern dabei ist, hat er sich schon ganz klar zum Mitarbeiter des Monats qualifiziert.

Großer Dank geht an B1-Systems für die gelungene Vermittlung, aber die kennen sich ja auch mit Linux/Open Source Consulting, Training, Support & Development aus. Klar das der Tux eine gute Ausbildung genossen hat.

Großer Stofftux bei der Arbeit

Großer Stofftux bei der Arbeit

Großer Stofftux bei der Arbeit

Großer Stofftux bei der Arbeit


Warum ist Ubuntu besser als X?

Warum ist Ubuntu besser als Windows 7, OS X und Fedora? Welche Vorteile hat Ubuntu gegenüber anderen Betriebssystemen? Diese Frage gilt es zu beantworten.

Aus diesem Grund möchte ich hier im Planeten eine Blogparade starten, die genau auf dieses Thema eingeht.

Auf Youtube gibt ja eine Menge guter und schlechter Videos, die die Überlegenheit von Ubuntu ansprechen. Sie sind meistens aber recht unsachlich und begründen die Vorteile von Ubuntu nur selten. Deswegen habe ich gedacht, lassen wir doch mal die Blogger im Planeten darüber schreiben.

Mich interessiert warum findet Ihr Ubuntu besser als andere Betriebssysteme? Jeder Grund zählt und ist richtig. Es gibt kein wahr oder unwahr; es geht um persönliche Meinungen. Jeder kann seine ganz eigenen Gründe haben.

Edit: Wer will muss Ubuntu nicht mit einem anderen Betriebssystem vergleichen, sondern kann natürlich einfach nur über besonders nützlich Features schreiben.

Blogparade über Ubuntu's Vorteile

Was ist eine Blogparade? Für alle die nicht wissen, was eine Blogparade ist. In einer Blogparade gibt der Initiator (das bin in diesem Fall ich) ein Thema vor, ein interessierter Blogger (dass seid hoffentlich ihr) veröffentlichen dann einen Artikel zu diesem Thema (Warum ist Ubuntu besser als X?). Die Veröffentlichung teilt der Blogger mir dann mit (marco@rockiger.com) und ich liste die Artikel hier auf. Am Ende der Blogparade werde ich einen eigenen Artikel ein Resümee ziehen.

Wie nehmt Ihr an der Blogparade teil? Es gibt zwei Möglichkeiten:

  1. Ihr schreibt einen Blogartikel und sendet mir den Link mit eurem Namen/Pseudonym zu. Ich veröffentliche den Link dann hier auf der Website.

  2. Falls Ihr keinen eigenen Blog habt und trotzdem einen Artikel schreiben wollt, könnt ihr hier einen Gastbeitrag schreiben.

    Bis wann läuft die Blogparade? Die Blogparade läuft bis zum 28.04.2011 – an diesem Tag erscheint Ubuntu 11.04 Natty Narwhal.

    Jetzt hoffe ich auf rege Beteiligung.

    Beiträge in chronologischer Folge

    1. Ubuntu macht Werbung von Gregor Fröhlich, eingereicht am 11.03.2011
    2. Warum ich Ubuntu benutze von Valentin, eingereicht am 12.03.2011
    3. Why Choose Ubuntu von Martin Gebhardt, eingereicht am 01.04.2011

    Gimp für Webdesign

    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 in Ubuntu mit
Plugin-Registry installiert

    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.


    Linux auf der Cebit 2011

    Schielender
Tux auf der Cebit 2011

    Eigentlich wollte ich ja jetzt was Tolles über die Linux, Ubuntu und Open-Source auf der Cebit 2011 schreiben, aber leider habe ich nichts spannendes gefunden.

    Das Beste war noch das Gewinnspiel von B1, die einen schielenden Tux verlost haben. Er erinnert mich an das Opossum Heidi – wahrscheinlich weil er auch zu dick ist.

    Ausgestellt haben nur die üblichen Firmen in Halle 2 und im Open-Source-Park waren ein paar unerschütterliche Open-Source-Projekte wie Enlightenment, Firefox und LibreOffice zu sehen – die den Menschen Open-Source näher gebracht haben.

    Wirkliche Neuerungen oder spannende Projekte wie Qt, Android, etc. habe ich aber leider keine entdeckt – schade eigentlich.

    Apropos Android in Halle 16 wurden gefühlte 100.000 Android-Tablets ausgestellt. Scheinbar der Megatrend für 2011.


    Hardware-Tests für Ubuntu

    Hardware-Benchmarking für Linux

    OpenBenchmarking.org ist die größte Linux-Hardware-Datenbank im Internet. OpenBenchmarking.org bietet euch die Möglichkeit die passende Linux-kompatible Hardware für Ubuntu  zu finden.

    Die Inhalte von OpenBenchmarking.org entstehen automatisiert durch die Verwendung der Phoronix Test-Suite 3.0. Wenn ein Nutzer der Übermittlung der Daten zustimmt, werden automatisch die Testergebnisse an OpenBenchmarking.org übertragen. 

    OpenBenchmarking.org ist somit ein riesiges Crowdsourcing-Projekt. Der Vorteil gegenüber den herkömmlichen Harware-Datenbanken für Linux: Die Tester müssen nicht mehr aufwendige "Testberichte" schreiben, sondern sie testen ihre Hardware mit der Phoronix Test-Suite und die Daten werden dann automatisch übermittelt. Die Folge: Einfachere Testberichte führen zu mehr Tests, dadurch entsteht eine bessere Datenbasis für Ubuntu-Hardware. Ihr könnt euch beispielsweise die getestete Hardware für Ubuntu 10.10 ansehen. Allerdings würde ich, bevor ich einen Laptop kaufen würde, nochmal recherchieren.

    Selber Hardware für Ubuntu testen

    Wenn ihr nun selbst auch eure Hardware mit Ubuntu testen wollt, müsst ihr euch die Phoronix Test-Suite runterladen.

    Einzige Vorraussetzung ist, dass ihr php5 installiert habt. Unter Ubuntu einfach in der Konsole:

    sudo apt-get install php5-cli

    eingeben. Dann entpackt ihr die Phoronix Test-Suite, wechselt in das entpackte Verzeichnis und installiert die Test-Suite mit

    sudo ./install-sh

    Hardware Tests anzeigen

    Jetzt könnt ihr euch alle Hardware-Tests anzeigen lassen:

    phoronix-test-suite list-tests

    Wenn ihr nun den X-Plane Grafikkarten-Test machen wollt:

    phoronix-test-suite benchmark pts/xplane9

    Die Phoronix Test-Suite fragt euch dann, ob ihr eure Testdaten zu OpenBenchmarking.org übertragen wollt; installiert die Abhängigkeiten  für den Test (Achtung: Root-Passwort wird evtl. benötigt); dann startet der Test.

    Kann OpenBenchmarking.org einen Unterschied machen?

    Wie seht ihr das, ist ein OpenBenchmarking.org ein guter Ansatz, um etwaige Hardware-Probleme mit Ubuntu zu lösen bzw. die Auswahl der richtigen Hardware für Ubuntu-Anwender zu erleichtern?


    Ubuntu für Webworker: Apache, MySQL und PHP installieren

    Ubuntu für Webworker: Entwicklungs-Server

    Wer unter Ubuntu Websites entwickeln will, der sollte auch einen Webserver installiert haben. Klassisch ist hier der Lamp-Stack mit Apache, MySQL und PHP.

    Wer also mit Pencil Wireframes von seinen Website-Ideen entworfen hat und diese nun programmieren will kann sich unter Ubuntu ganz leicht einen Webserver installieren.

    Webserver Meta-Package installieren

    Als Erstes installiert ihr das Meta-Package "lamp-server". Dafür  einfach ein Terminal öffnen und Folgendes eingeben:

    sudo apt-get install lamp-server^

    Während der Installation müsst ihr für den MySQL-Datenbankserver das Root-Passwort festlegen. Dieses Passwort braucht ihr später für die Verwaltung der Datenbank, also bitte gut merken oder besser in einen Passwortmanage für Ubuntu speichern.

    Nützliche Tools für den Ubuntu Webserver

    Eigentlich könnten wir jetzt aufhören, ein paar wichtige Tools solltet ihr trotzdem noch installieren:

    sudo apt-get install php5-cli php5-gd phpmyadmin

    Mit phpmyadmin könnt ihr nachher ganz komfortabel unter http://localhost/phpmyadmin neue Datenbanken anlegen (Ich hoffe ihr habt euer Datenbank-Passwort noch).

    Jetzt steht das Grundgerüst für eure Dev-Umgebung und ihr könnt anfangen mit PHP zu programmieren oder ein CMS wie Drupal zu installieren. Es gibt natürlich noch eine Menge andere Konfigurationsmöglichkeiten. Diese hier vorzustellen würde aber den Artikel sprengen.

    Was habt ihr noch so auf eurem Dev-Server eingestellt? Mich interessiert besonders: Was habt ihr für rewrite-Regeln – damit kenne ich mich nämlich nicht so gut aus 🙂


    Ubuntu für Webworker: Pencil

    Ubuntu für Webworker: Pencil Wireframe

    Ich bin neulich wieder mal auf die großartige Sketching-Software Pencil gestoßen. Ich muss sagen die Software hat sich in den letzten zwei Jahren wirklich super entwickelt.

    Mit Pencil kann man sogenannte Wireframes oder auch Skizzen zeichnen. Das ist besonders sinnvoll in der Planungsphase von Webseiten und Software- Programmen.

    Mit Pencil könnt ihr anderen (Kunden, Partnern) leicht eure Ideen und Vorstellungen darstellen, wie eure Website oder Software aussehen soll. So spart ihr euch eine Menge Entwicklungsarbeit später.

    Die Funktionsweise ist ziemlich simpel: Pencil gibt euch bestimmte Widgets (Stencils) vor. Ihr zieht das Widget in den Arbeitsbereich passt die Größe an und holt dann dass nächste Widget. Ihr müsst also nicht selbst irgendetwas zeichnen, sondern ordnet nur vorhandene Objekte an.

    Ubuntu für Webworker: Pencil Programm

    Mit Pencil könnt ihr noch einen Schritt weiter gehen. Anstatt nach den Wireframes gleich in die entgültige Gestaltung oder die Programmierung einzusteigen, bietet euch Pencil die Möglichkeit die Interaktionsprozesse eurer Website nachzuspielen (oder besser vorzuspielen).

    Ihr könnt mit Pencil nämlich mehrere Seiten in einem Dokument anlegen und diese Seiten untereinander verlinken. Wenn ihr dieses Dokument dann als Html exportiert, habt ihr einen Wireframe-Protypen eurer Website. So könnt ihr schon mal eure Ideen testen und anpassen – ohne dass ihr etwas programmieren müsst.

    Wer von euch arbeitet denn schon mit Pencil oder anderen Wireframing-Tools? Für welche Aufgaben benutzt diese Tools denn noch?


    Ubuntu und Unity – Warum ich an Unity glaube

    Unity wird in der Ubuntu-Community kontrovers diskutiert. Einige begrüßen es, für andere ist der Grund mit Ubuntu zu brechen. Auf Twitter schrieb mir _zero:

    unitiy is the reason i'm gonna move away from ubuntu. ugly windowmanager

    Ich bin da es etwas anderer Meinung: Ich glaube Ubuntu hat mit Unity das Zeug, die Art wie wir mit PCs und Laptops arbeiten, grundlegend zu verändern.

    Ubuntu kann mit Unity die heutigen GUIs ablösen

    Für viele ist das heutige GUI-Konzept, das in den 70ern entwickelt wurde, einfach nicht geeignet. Ich glaube wir müssen die Art wie wir mit Computern arbeiten grundlegend verändern. Momentan werden zu viele Menschen einfach ausgeschlossen. Mir ist das erst vor zwei Tagen wieder aufgefallen, als ich meinem Vater beim Schreiben eines Briefs geholfen habe: Die heutigen Fenster-Manger/Betriebsysteme haben nichts intuitives. Alles muss man neu lernen, nichts ist für einen Anfänger wirklich klar, wirklich intuitiv.

    Heutigen GUIs sind nicht mehr geeignet

    Es spielt meiner Meinung auch keine Rolle, ob Windows, OS X oder Ubuntu – alle Systeme sind für Ungeübte nicht geeignet.

    Ich hoffe, dass Ubuntu mit Unity hier eine wirkliche Verbesserung herbeiführt:

    • tätigkeitsbasierte Benutzung vs. programmbasiert Benutzung
    • Zeitgeist
    • intuitivere Optik.

    Ubuntu 11.04 – Natty Narwhal wird hoffentlich nur der Anfang sein. Das große Ziel sollte eine perfektes Unity für das nächste Ubuntu LTS (also Ubuntu 12.04) sein. Die LTS-Versionen von Ubuntu sind für durchschnittliche Computer-Nutzer besser geeignet. Also, habt noch ein wenig Geduld mit Unity.

    Ubuntu 12.04 wird wirklich entscheidend

    Werde ich auf Unity umsteigen? Selbst bin ich mir noch nicht sicher, ob ich Unity benutzen werde. Immerhin habe ich mein Gnome liebevoll optimiert und mich an die vielen optimierten Einstellungen gewöhnt; ich bin aber auch nicht der entscheidende Anwender. Testen werde ich Unity jedenfalls ausführlich!

    Wie sieht es mit euch aus? Werdet ihr auf Unity umsteigen?

    PS: Ich habe ja schon geschrieben, dass ich Unity bei meinen Eltern testen wollte. Bis jetzt scheiterte der Test aber an der WLAN-Karte meiner Eltern, deswegen habe ich eine neue, Ubuntu-freundlichere gekauft und werde den Test mit Unity demnächst wiederholen und hier darüber berichten.


    Panel-Icons in Ubuntu ändern

    Ubuntu App des Tages: Tray Icon Changer

    Auf der Suche nach Wegen, wie man die Panel-Icons in Ubuntu ändern kann, habe ich ein interessantes Skript im Ubuntuusers.de-Forum gefunden: Tray Icon Changer

    Meister0815 hat das Skript geschrieben um die Icons im Panel zu verändern. Das Skript funktioniert am besten mit den Standard-Icon-Sets von Ubuntu. Es überschreibt die bestehenden Panel-Icons mit dem von euch gewähltem Icons. So müsst ihr das nicht mehr selbst mit der Hand machen.

    Ihr könnt Tray Icon Changer auf der Profil-Seite von Meister0815 downloaden.