Entries tagged as graphics

01 Jul 2008 Simple Image Replacement im Blog

Die Bastelei geht weiter …

Für die Überschriften der Seitenleisten kommt nun in diesem Template Simple Image Replacement nach der Methode von Mike Rundle zum Einsatz – der »Grunge«-Look schreit einfach danach. (Die verwendete Schrift ist übrigens die freie 3rd Man.)

Was ist Image Replacement? Dabei werden ausgewählte (X)HTML-Elemente durch (Hintergrund-)Bilder ersetzt, wobei die Struktur und Semantik des Dokumentes erhalten bleibt. Bilder bieten jedoch größere Freiheit in der Typographie.

Die Haken dieser Methode sind klar, bekannt und meines Erachtens den optischen Gewinn wert:

  • die Texte in den Bildern skalieren nicht
  • die Texte in den Bildern können nicht per copy & paste kopiert werden
  • schaltet der Besucher Bilder im Browser aus, CSS jedoch an, sieht er gar nichts

Zumindest die letzten beiden Punkte sind meines Erachtens in diesem speziellen Fall zudem zu vernachlässigen, da die Methode nur auf die Seitenleisten-Überschriften angewendet wird.

Read more →

12 Jun 2008 Unglaublich: Die Kunst des Stephen Wiltshire

Die bessere Hälfte sieht nicht gerne Fussball, insofern ist der gemeinsame EM-Kompromiss, zwar die deutschen Begegnungen, aber nicht jedes Spiel zu gucken. Gut so, denn ansonsten hätte ich gestern den mittleren Teil von Expedition ins Gehirn auf 3sat verpasst. Die dreiteilige Dokumentation befasst sich unter anderem mit Savants – Menschen, die aufgrund einer kognitiven Behinderung, oft Autismus oder Asperger-Syndrom, über herausragende Fähigkeiten und Kreativität in einer sogenannten Inselbegabung verfügen. (Ja, so wie Dustin Hoffman in Rain Man; das wäre ein Beispiel für einen mathematischen Savant.)

Einer dieser Menschen ist Stephen Wiltshire – »die menschliche Kamera«. Er ist aufgrund seiner außergewöhnlichen Fähigkeiten in der Lage, ein Bild nach einmaligem(!) Betrachten perspektivisch korrekt und bis in kleinste Feinheiten detailgetreu nachzuzeichnen, beispielhaft illustriert an einer atemberaubenden Panorama-Zeichnung Roms, welche er nach einem Helikopter-Rundflug aus dem Gedächtnis in drei Tagen nachzeichnete.

Definitiv einen Besuch wert ist auch die Bildergallerie auf seiner Webseite. Und immer daran denken: Das ist alles aus dem Gedächtnis nachgezeichnet …

30 Apr 2008 Liquide skalieren in Gimp

Seit Hardy Heron ist nun auch das Plugin Liquid Rescale für Gimp in den Paketrepositories von Ubuntu verfügbar – zu installieren über das Paket gimp-plugin-registry, welches noch etliche weitere nützliche Plugins enthält.

Was genau kann Liquid Rescale? Es verändert die Größe eines Bildes unabhängig vom Seitenverhältnis unter Beibehaltung des Bildinhaltes. Häh?

Beispiel: Man nehme eine Grafik von 1600x250 Pixeln, die auf 1280x250 Pixel verkleinert werden soll – etwa ein Banner für ein Blog. Normalerweise müsste man nun das Original beschneiden, damit das Bild nicht verzerrt. Liquid Rescale schafft das ohne Beschneiden, indem es »unwichtige« Teile des Inhaltes entfernt, soweit ich das Patent verstanden habe.

Die Technik ist natürlich nicht für jede Art Bild gleich gut geeignet, die Ergebnisse sind aber auf jeden Fall vielversprechend bis überzeugend. Liquid Rescale ist allerdings gut versteckt: Man findet es nicht, wie vielleicht zu erwarten wäre, in den Filtern oder Plugins von Gimp, sondern im Menü »Ebene«.

22 Apr 2008 Bettina K. Lechner: »Gimp ab Version 2.4«

Das knapp 360 Seiten starke, reich bebilderte Werk richtet sich an Benutzer, die Gimp »für digitale Fotografie, Webdesign und kreative Bildbearbeitung« einsetzen wollen. Unterteilt ist es in einen gut 190 Seiten umfassenden theoretischen Teil, welcher grundsätzlich einem »Rundgang« durch Gimp und seine Möglichkeiten entspricht, und einen knapp 130 Seiten langen Praxisteil.

Den Grundlagenteil ergänzen Exkurse zu Themen wie digitale Bilder und Farbmanagement, welche Grundlagenwissen unabhängig vom Programm vermitteln. Grundsätzlich deckt dieser einführende Teil alles ab, was Gimp kann – an der einen oder anderen Stelle hätte ich mir hier mehr Details gewünscht, aber das mag jedem Leser mit unterschiedlichen Stellen so gehen.

Der Praxisteil vermittelt praxisnahe Tipps für etliche Anwendungsfälle, zunächst allgemein (allerdings mit deutlichem Hang zur Fotobearbeitung), dann speziell für Fotografen und schließlich für Webdesigner.

Letzterem Teil galt natürlich meine besondere Aufmerksamkeit. Er ist für ein Printmedium erfreulich aktuell gehalten, allerdings finde ich die Gewichtung in diesem Teil des Buches unglücklich. Der wesentliche Teil dieses Abschnittes beschäftigt sich damit, eine Webseite komplett in Gimp zu gestalten und dann in ihre Bestandteile zu zerlegen – für mich persönlich ist dieser Abschnitt komplett unbrauchbar, weil ich so nicht arbeite.

Der Anhang schließlich illustriert ein grundsätzliches Manko bei Büchern über Programme, die auf allen drei großen Plattformen – Linux, Mac, Windows – verfügbar sind: Man verschwendet leider wertvollen Platz mit Installationsanleitungen für alle drei. Schwamm drüber, grundsätzlich liefert Bettina Lechner Grafikdeppen wie mir eine wertvolle Dokumentation mit leicht nachvollziehbaren Kurzanleitungen für gängige Problemchen des Alltags und ausführlichem Grundlagenwissen.

05 Oct 2007 Potentiell problematisch: Banner

Diese Diskussion in den Kommentaren des Bulletproof-Dokumentationsblogs wirft ein altes Problem neu auf – Flexible Layouts vs. Banner.

Nehmen wir an, wir haben für ein Blog eine tolle Banner-Grafik gefunden, Format: 960x150 Pixel. Klarer Pawlow für Webgestalter: Fixe Breite und Höhe. Man legt dieses Banner als Hintergrundgrafik hinter ein Container-div, im Falle eines Serendipity-Blog bietet sich #serendipity_banner an, und zurrt für dieses div mittels width: 960px; und height: 150px; die Maße via CSS fest. Im Fall von BP, wo alle Elemente des Blogs über ein umfassendes div namens #wrapper zusammengehalten werden, würde man die Breite vermutlich eher diesem Container zuweisen, und damit hat es sich dann schon erledigt mit dem flexiblen Layout. Nun bekommt jeder Besucher unabhängig von der eigenen Größe des Browserfensters das Blog auf 960 Pixeln Breite serviert.

Lässt man jedoch die Breite des Containers flexibel, sieht das Ganze in breiteren Browserfenstern suboptimal aus. Nehmen wir mal ein 1024 Pixel breites Browserfenster und ein Standard-BP an – dort ist #wrapper in base.css auf 95% Breite eingestellt, was ungefähr auf 972 Pixel hinausläuft, ergo 12 Pixel »Rand« ergibt. Was in 1024 durchaus noch zu verschmerzen wäre, ist bei 1280 und mehr Pixeln Breite nur noch hässlich.

Vorab: Die Ideallösung gibt es so nicht. Meine persönliche Empfehlung wäre die folgende: Man nehme ein Banner von 1280 Pixeln Breite, lasse die Breite für #wrapper flexibel auf 95%, weise jedoch #wrapper mittels max-width: 1280px; eine maximale Breite zu. Bei der Wahl des Banners sollte man bedenken, dass ggf. rechts ein gehöriges Stück abgeschnitten wird. »Wichtige« Einzelheiten sollten sich also links befinden. Wie weit links, das hängt letztlich von den eigenen Besuchern ab – ich würde dabei nach wie vor von 800x600 Pixeln ausgehen, was bedeuten würde, dass diese Besucher nur die »linken 760 Pixel« des Banners sehen.