Bildkomposition mit Inkscape

Die Titelbilder der PCNEWS werden in Inkscape hergestellt. Inkscape ist ein Vektorgrafik-Programm ähnlich wie Adobe Illustrator oder Corel Draw. Sein Vorteil: es ist kostenlos. Es gibt kein proprietäres Datenformat, denn es wird das SVG-Format (Scalable Computer Graphics), das „HTML der Grafik“ verwendet. Man verwendet Inkscape zur Erstellung von Vektor-Grafiken oder zum Anordnen verschiedener Bilder zu einem Gesamtbild.

Man muss das SVG-Format nicht erlernen, Inkscape bietet eine Oberfläche für alle Einstellungen.

Pixabay

Von wo kommen aber die Bilder? Würde man alle diese Titelbilder selbst herstellen wollen, wäre das einerseits zeitaufwändig und anderseits bräuchte man dazu weitergehende Praxis mit Grafikprogrammen.

Es ist aber auch möglich, kostenlose Bilder zu verwenden. Pixabay ist eine gute Quelle dafür. Die Bilder sind überwiegend im Querformat und eignen sich daher meist nicht direkt als Bild für eine Titelseite. Bei der Suche nach einem Bild zum Begriff „Software“ fand ich auf Pixabay das folgende Bild:

Die oberste Bildzeile ist Werbung! Das sind kostenpflichtige Bilder verschiedener Anbieter.

Die Schachtel und die CD waren für das Cover für die Ausgabe PCNEWS-174 gut geeignet.

Das Bild hat aber einen weißen Hintergrund und Schachtel und CD werfen einen Schatten. Beides wird mit einem Bildbearbeitungsprogramm entfernt; ich verwende Gimp oder Paint.Net. Danach sind die Objekte freigestellt und können auf einem anderen Hintergrund dargestellt werden. Im folgenden Bild wurde ein grauer Hintergrund gewählt, der zeigt, dass das Bild entsprechend zugeschnitten wurde. Gespeichert wird das ursprüngliche JPG-Bild im PNG-Format, um die Transparenz der freigestellten weißen Bildbereiche auch ausnutzen zu können.

Inkscape

Inkscape speichert eine Grafik im SVG-Format. Das fertige Titelbild heißt u1-klein.svg (ohne eingebettete Bilder) und u1-klein.svg (mit eingebetteten Bildern). Der Wunsch war, den Code dieser Grafik als Hintergrund für das Bild aus Pixabay zu verwenden. Der Code der Datei U1-klein.svg in Visual Studio Code zeigt das folgende Bild:

Man kann den Code in Inkscape in einen Textrahmen einbauen, allerdings geht dabei die Farbcodierung verloren, weil Inkscape mit den HTML-Tags leider nichts anfangen kann.

Umweg über Word

Dieser Code wurde daher in eine Word-Datei kopiert, denn dabei bleibt die Farbcodierung erhalten. Die Zeichengröße wurde so eingestellt, dass der Code gerade auf vier Seiten Platz hat. Diese vier Seiten wurden als Screenshot in vier Dateien gespeichert:

Diese vier Teilbilder werden in Inkscape nahtlos in zwei Spalten aneinandergereiht und das Bild aus Pixabay drübergelegt. Danach wurde noch ein schwarzes Rechteck unterlegt, um den für den Druck notwendigen Beschneidungsrand zu haben.

Der Code für dieses Bild ist nur etwa 4 kB groß, und das deshalb, weil die Bilder nicht eingebettet sind, sondern im Code über Links eingebunden sind. Eine solche Einbettung für das erste Code-Teilbild:

<image
  sodipodi:absref="S:\OneDrive\desktop\back-1.JPG"
  xlink:href="back-1.JPG"
  width="106.12772"
  height="149.05663"
...

Das fertige Bild schaut dann so aus:

Die Attraktivität dieses Bildes ist, dass der im Hintergrund dargestellte Code eine maschinenlesbare Darstellung desselben Bildes ist.

Man könnte dieses Bild auch direkt im Microsoft Publisher konstruieren, doch im Publisher stehen nicht ausreichend viele Werkzeuge zur Verfügung. Daher dient dieses vorgefertigte Bild als Hintergrundbild für die erste Seite der PCNEWS. Die weiteren Beschriftungen werden im Publisher über dieses Bild gelegt.

Titelbild mit Beschriftung

Links

• Inkscape (Homepage)
• Pixabay (Homepage)