Jeden Monat eine kostenlose Schrift

SoftMaker ist nicht nur Hersteller einer leistungsfähigen Bürosoftware, sondern auch bekannt für seine hochwertigen Schriften. Jeden Monat kann man sich eine Desktop-Schrift als Open Type Font oder True Type Font kostenlos von www.freefont.de herunterladen. Im Dezember 2015 wird die 1925 gestaltete Goudy Heavyface angeboten, die mit ihren stark abgerundeten Serifen sehr freundlich aussieht und sich beispielsweise gut für markante Plakatüberschriften eignet.

Photoshop: Bild auf vorgegebene Maße verkleinern

Aus meiner Kundschaft kam folgende Frage: Wie kann ich in Photoshop ein Foto so fürs Web verkleinern, dass es in die vorgegebenen Abmessungen passt, aber dabei nicht unproportional skaliert wird?

Die Lösung lautet: Man muss in zwei Schritten vorgehen. Und so geht’s:

Nachdem das Foto in Photoshop geladen wurde (zu sehen ist ein Beispielbild aus meinem eigenen Fundus an experimentellen und/oder missratenen Fotos, denn auf Motiv und Qualität kommt es hier nicht an), klickt man in der Menüleiste auf Bild > Bildgröße.

Bild auf vorgegebene Maße verkleinern (1)
(Aufs Bild klicken zum Vergrößern)

In dem nun erschienenen Fenster gibt man in die Eingabefelder die Abmessung der kleineren Endgröße ein. Angenommen, es sind die Abmessungen 960 Pixel Breite und 260 Pixel Höhe als Maximalmaße für das Bild auf der Webseite vorgegeben, so verkleinern wir das Foto auf die Breite 960 Pixel. Dabei ist darauf zu achten, dass Proportionen erhalten angeklickt ist und dass rechts neben den Eingabefeldern die Klammer Breite und Höhe aneinander koppelt.

Bild auf vorgegebene Maße verkleinern (2)
(Aufs Bild klicken zum Vergrößern)

Die Höhe überragt jetzt das vorgegebene Maß, und wir kommen zum zweiten Schritt. In der Menüleiste wird Bild > Arbeitsfläche angeklickt.

Bild auf vorgegebene Maße verkleinern (3)
(Aufs Bild klicken zum Vergrößern)

In dem nun erscheinenden Fenster lässt sich per Eingabefeld die gewünschte Größe eintippen. Darunter kann man noch die Position angeben, denn die Höhe kann ja zu gleichen Teilen von oben und unten beschnitten werden oder aber auch nur von oben oder nur von unten, je nach Motiv. Das Motiv sollte solche Beschneidungen natürlich erlauben.

Bild auf vorgegebene Maße verkleinern (4)
(Aufs Bild klicken zum Vergrößern)

Photoshop weist nun noch darauf hin, dass die Arbeitsfläche nach diesem Bearbeitungsschritt kleiner sein wird als das Bild, sodass Teile des Bildes eben abgeschnitten werden. Nun, genau das wollen wir ja.

Bild auf vorgegebene Maße verkleinern (5)
(Aufs Bild klicken zum Vergrößern)

Und als Endergebnis haben wir jetzt unser Bild in der vorgegebenen Größe und können es als neue Datei abspeichern, am besten in einer fürs Web optimierten Dateigröße (Datei > Fürs Web speichern …). Anschließend kann das Bild auf den Webserver hochgeladen und in die Webseite eingefügt werden.

Bild auf vorgegebene Maße verkleinern (6)
(Aufs Bild klicken zum Vergrößern)

Vielleicht wird der/die eine oder andere Leser/in jetzt sagen: »Öh, das ist doch profan!« Dazu möchte ich sagen: Es ging mir in diesem Blogartikel nicht darum, Photoshop-Profis spezielle Tricks zu vermitteln – dafür gibt es diverse Fachblogs und Regale voller Bücher in den Buchhandlungen und Bibliotheken. Vielmehr kam die Fragestellung, wie eingangs schon erwähnt, aus der Praxis; und meine Kundinnen und Kunden sind in aller Regel keine Grafikdesigner, die tagtäglich mit Grafiksoftware arbeiten, möchten aber ihre Webseiten weitgehend selber pflegen. Wenn dabei Fragen auftauchen und ich ein wenig Hilfestellung geben kann, freut das sowohl meine Kunden als auch mich. Und für den Fall, dass jemand anders mal vor dem gleichen Problem steht und im Web danach sucht, habe ich diesen Blogartikel geschrieben.

Affinity für Mac: Die Kampfansage an Adobe

Der Grafiksoftware-Hersteller Serif hat zusätzlich zu seiner sehr guten Software für Windows nun auch Grafikprogramme für den Mac auf den Markt gebracht. Zwei Anwendungen gibt es bisher, nämlich eine für die Bearbeitung von Bitmapgrafiken und eine für die Erstellung von Vektorgrafiken. Sie nennen sich Affinity Photo und Affinity Designer. Beide Programme gibt es zur Zeit für den Markteinführungspreis von jeweils 40 Euro. Später soll der Preis bei je 50 Euro liegen, was natürlich immer noch ein Kampfpreis ist.

Man könnte denken, dass man für dieses kleine Geld auch keine besonders leistungsfähige Software bekommt, aber das dürfte ein Irrtum sein. Ich kann zwar leider die Programme nicht testen, weil ich keinen Mac mein Eigen nenne, aber ich verwende schon seit Jahren die Windows-Software von Serif. Und die braucht sich vor den Anwendungen aus dem Hause Adobe nicht zu verstecken.

Mac-Anwender, denen Photoshop und Illustrator zu teuer sind, die aber dennoch mit professioneller Grafiksoftware arbeiten möchten, können sich näher informieren auf der sehr chic aufgemachten Website von Serif. Und bitte mit einem ordentlich großen Bildschirm, nicht mit einem winzigen Mobiltelefönchen.

Serif Affinity für Mac
Bild: © Serif

CoffeeCup Web Image Studio

Eine Grafiksoftware, die sich speziell an Webdesigner richtet, ist CoffeeCup Web Image Studio. Sie kam mir recht interessant vor, und so teste ich sie gerade.

Angefangen habe ich, ein Foto damit bearbeiten zu wollen. Das Programm bietet nämlich ganz hübsche Effektfilter und diverse Korrekturmöglichkeiten.
Effekte in Web Image Studio

Also habe ich mein nicht optimal fotografiertes Test-Rinderfoto ins Programm geladen und mit Filtern bombardiert. Und da zeigte sich schon, dass mein Webdesign-Computer dafür offenbar zu schwach ist, denn das Programm beanspruchte die CPU bei meinen Bearbeitungsversuchen immer so zwischen 50 und 80 Prozent, selbst dann noch, als ich die Größe des Bildes auf 800 Pixel mal 600 Pixel verkleinert hatte. Weil natürlich noch andere Programme liefen, zum Beispiel der Webbrowser, war die CPU teilweise bis zu 100 Prozent ausgelastet. Ich habe in diesem Computer einen Pentium-IV-Einkernprozessor mit Hyper Threading und 3 GHz Taktrate; an Arbeitsspeicher sind 2 GiB verbaut. Eine alte Gurke also, aber die reichte bisher für alle Grafikprogramme völlig aus, die ich so benutze. Ich hätte noch mit einem meiner besseren Computer testen können, aber wozu, ich will das Programm ja an ebendiesem PC benutzen.

Mit PNG-Grafiken, die wenige Farben und einfache Formen haben, kommt Web Image Studio etwas besser zurecht als mit JPG-Fotos. Logos und Buttons lassen sich also ganz gut bearbeiten. Damit wirbt der Hersteller auch: nämlich, dass man Webgrafiken an seine Bedürfnisse anpassen kann. Tatsächlich lässt sich recht leicht die Farbgebung verändern, ein Schatten um einen Schriftzug legen oder ein plastischer 3D-Effekt für eine Schaltfläche erzeugen.
Effekte in Web Image Studio

Doch was fehlt, sind Ebenen, die eigentlich jede bessere Grafikanwendung bietet. Ich habe es auch nicht geschafft, eine Vektorform automatisch auf der Bildfläche zentrieren zu lassen. Überhaupt ist das Programm nicht gerade intuitiv bedienbar. Manchmal klappen angebotene Bearbeitungsoptionen nicht; man sieht nie einen Fortschrittsbalken, wenn das Programm mal etwas länger braucht, um eine Bearbeitung durchzuführen; und der Image Editor, eine Art Werkzeugleiste, lässt sich nirgendwo andocken, sondern schwebt frei im Raum, selbst dann noch, wenn eine andere Anwendung im Vordergrund ist. So etwas ist natürlich nervig.

Mein Fazit: Webgrafiken und Fotos lieber mit den bisher gewohnten Programmen bearbeiten. Die Anschaffung von CoffeeCup Web Image Studio lohnt sich nicht, schon gar nicht für einen Preis von $ 39.

Kostenlos: Microsoft Expression Design 4

Expression Design ist, wie der Hersteller schreibt, ein Werkzeug für kreative Profis und Entwickler, die Grafiken für Anwendungsoberflächen, das Web oder jedes andere Medium erstellen möchten. Die Software wurde in dieser Version im Jahr 2012 auf den Markt gebracht und ist seit einiger Zeit kostenlos erhältlich. Der Dateiname beinhaltet noch immer den Vermerk »trial«, aber Einschränkungen im Funktionsumfang oder eine zeitliche Begrenzung gibt es nicht, und so wie ich erkennen kann, darf man es auch im geschäftlichen Bereich einsetzen. Natürlich hat man keinen Anspruch auf Hilfe und Support. Erhältlich ist es für das Windows-Betriebssystem ab XP. Die Hardware-Anforderungen sind moderat, denn die Software soll auf Computern laufen mit 1-GHz-CPU und 1 GiB RAM.

Aber was kann das Programm? Expression Design ist ein Vektorgrafikprogramm. Es verfügt über die in solchen Programmen üblichen Werkzeuge: geometrische Formen (Rechteck, Ellipse, Polygon und Linie), Zeichenstift (Bézierkurve, Polylinie und B-Spline), Freihandpinsel, Text, Füllwerkzeug, Schere, Pipette. Leider werden keine komplizierteren Formen angeboten, etwa Spirale, Stern, Wolke, … Und beim Erstellen eines Polygons wird, so weit ich erkennen kann, auch nicht gefragt, wie viele Ecken es bekommen soll, es wird immer ein Dreieck vorgegeben. Zwar kann man hinterher mit dem Zeichenwerkzeug Vektorpunkte hinzufügen, aber das finde ich im Vergleich zu anderen Vektorgrafikprogrammen doch recht umständlich.

Dennoch kommt man, zumindest wenn es um weniger aufwändige Gestaltungen geht, recht schnell ans Ziel. Die Software bietet Ebenen an, und darüber hinaus lassen sich Objekte, die sich überschneiden, auch bei Mausklick per Kontextmenü in den Vorder- oder Hintergrund verschieben. Beides sind natürlich Grundfunktionen, die ich aber trotzdem nicht unerwähnt lassen wollte. Natürlich lassen sich auch Fotos und sonstige Bitmapgrafiken importieren und in gewissem Umfang bearbeiten oder mit Filtern versehen.

Winddrachen

Die Import- und Export-Möglichkeiten sind gut. Es lassen sich alle üblichen Pixel-Bilddateien wie auch Dateien im Postscript-Format öffnen, und außerdem werden Photoshop- und Illustrator-Dateien importiert. Als Exportformat werden alle wichtigen Pixel-Grafikformate angeboten (BMP, JPG, PNG, TIF etc.), als Vektorgrafik-Formate fürs Web SVG und XAML. Als Vektorformat für den Druck findet man PDF vor, doch leider gibt es keine Ein­stellungs­möglich­keiten. Weder lässt sich ein Farbprofil einbinden, noch kann man angeben, ob in RGB oder CMYK abgespeichert werden soll, geschweige denn, in welcher PDF-Version. Druckereien verlangen in aller Regel PDF/X-3 oder PDF/X-1a. Immerhin wandelt das Programm Fonts in Kurven um.

Dass Micorosoft dieses Expression Design 4 als »Werkzeug für kreative Profis und Entwickler« anpreist, finde ich ein wenig übertrieben. Zwar ist die Software durchaus brauchbar und hat eine schöne Benutzeroberfläche, aber einige Arbeitsschritte sind etwas umständlich und so manche Profifunktion fehlt eben doch.

Die korrekte Verwendung des Apostrophs

Ich rege mich immer wieder auf, in welch unsinniger Weise der Apostroph, also das Auslassungszeichen, verwendet wird. Dieses eigentlich eher selten verwendete Zeichen muss wohl äußerst beliebt sein, denn es wird gern und häufig an den unmöglichsten Stellen gesetzt, also dort, wo es überhaupt nicht hingehört. Und dann wird dieser scheue und rare Apostroph auch noch mit anderen Zeichen verwechselt. Doch ein Akzent zum Beispiel ist nun mal schlicht und ergreifend kein Apostroph. Das mag typografisch desinteressierten Menschen alles pingelig und kleinkariert vorkommen, aber Typografie hat nicht nur sehr viel mit guter Lesbarkeit, sondern genauso viel auch mit Ästhetik und Schönheit zu tun. Man trägt ja zum Nadel­streifen­anzug oder schwarzen Kostüm auch keine Badelatschen, nur weil die gerade am griffbereitesten im Schuhschrank liegen.

Wie der Apostroph korrekt verwendet wird, kann man bei Typefacts – Typografie verstehen nachlesen.

Nett und seriös

Ich bin neulich im Web auf eine Design-Agentur namens nice & serious aus London gestoßen. Diese Leute stellen ihre Leistungen mittels Video vor, und dieses Video ist echt witzig. Überhaupt ist der ganze Webauftritt sehr individuell und kreativ gestaltet. Gefällt mir!
http://www.niceandserious.com

Image Studio Pro zum Komprimieren von JPG-Fotos

Bei Terrashop.de gab es mal die Software Image Studio Pro des Herstellers Proxma für nur 3,99 Euro plus Versandkosten. Dort ist sie nicht mehr erhältlich, aber man kann sie gelegentlich auch bei Amazon.de für einen kleinen Preis finden. Das Programm läuft auf Windows ab Version XP. Hat man es installiert, nennt es sich allerdings, entgegen dem Aufdruck auf der Verpackung, Image Compressor 6.

Und dieser Name beschreibt eher die Stärke des Programms, nämlich Bilder fürs Web zu komprimieren, um Ladezeiten möglichst gering zu halten. Man muss allerdings die höchste Kompressionsstufe einstellen, um nennenswerte Verkleinerungen der Dateigröße zu erreichen. Bei normaler Kompression kann es passieren, dass die Datei gleich groß wie vorher bleibt oder sogar größer wird. Die Qualität des Bildes ist bei der höchsten Kompressionsstufe fürs Web immer noch erstaunlich gut. Andere Grafikprogramme würden zum Beispiel bei einer Verkleinerung der Dateigröße um 80 % schon deutliche Artefakte erkennen lassen. Leider lassen sich mit Image Studio Pro aber nur JPG-Dateien komprimieren, keine PNG-Dateien, die im Web auch sehr verbreitet sind.

Image Studio Pro bietet auch Retuschefunktionen an. Diese sind, wenn man gutwillig ist, gerade mal so «Na ja«. Der Automatische Weißabgleich korrigierte in meinem Testbild nicht den starken grünen Farbstich, sondern hellte die zu dunklen Bildbereiche auf. Die Automatische Tonwertanpassung machte eigentlich gar nichts, und die Automatische Histo­gramm­abglei­chung (eigentlich ist das die Tonwertanpassung) hellte das Bild insgesamt zu stark auf, also auch die sowieso schon recht hellen Bereiche. Einen Weißpunkt scheint das Programm also gar nicht gesetzt zu haben. Einstellungsmöglichkeiten von Hand hat man gar nicht, etwa wie in Photoshop. Der Rundumschlag Bild verbessern bringt bei manchen Fotos gute Ergebnisse, bei anderen schlechte.

Kurz gesagt: Zur Retuschierung von Fotos würde ich eine andere Software benutzen, aber wenn es darum geht, JPG-Fotos fürs Web zu komprimieren, spielt Image Studio Pro seine Stärke aus, doch nur, wie gesagt, wenn man auch die höchstmögliche Kompressionsstufe einstellt.

testbild-isp-original.jpg
Testbild (Ausschnitt) im Original – 74,8 KB

testbild-isp-irfanview.jpg
Testbild (Ausschnitt), komprimiert mit IrfanView bei 95-prozentiger Kompression – 68,2 KB

testbild-isp-imagestudiopro.jpg
Testbild (Ausschnitt), komprimiert mit Image Compressor 6 Pro Edition bei höchster Kompressionsstufe – 58,1 KB

Logogestaltung

Das Logo ist das Wiedererkennungszeichen eines Unternehmens (oder Vereins etc.). Ursprünglich bezeichnete das Wort Logo nur den Schriftzug eines Unternehmens, heutzutage verwendet man es aber auch für eine Kombination aus Buchstaben und Bildzeichen. Ein Firmenzeichen, das nur aus einem Bild besteht, nennt man hingegen Signet. Manchmal liest man hierfür auch den Begriff Bildlogo. Und in der Umgangssprache ist das Wort Signet fast unbekannt, und jede Art von Firmenzeichen wird Logo genannt.

Wir konzentrieren uns hier auf den Bildanteil eines Logos. Das soll nicht heißen, dass die Wahl der Schrift unwichtig wäre. In den meisten Fällen trifft man aber heute eine serifenlose Linearantiqua an.

Ein Logo symbolisiert entweder die Produkte und Dienstleistungen des Unternehmens oder dessen Werte, Ziele und Bestrebungen. Im Idealfall sogar beide Bereiche. Und da sind wir schon bei den Anforderungen für den Gestalter. Da der Wiedererkennungswert und die Reproduzierbarkeit in verschiedenen Größen und Medien gut sein müssen, muss auch der Abstraktionsgrad hoch sein. Genau das ist die Kunst. Der Schriftsteller Antoine de Saint-Exupérie drückte es so aus: Perfektion ist nicht dann erreicht, wenn man nichts mehr hinzufügen, sondern wenn man nichts mehr weglassen kann.

Ein Logo zu entwerfen ist also ein gutes Stück Arbeit, die natürlich auch Geld kostet. Dass ein Logo schlicht wirkt, bedeutet eben nicht, dass es mal eben in einem Stündchen so dahin geklatscht wurde. Sondern die Entwicklung erfordert viel »Gehirnschmalz«, einen gekonnten Umgang mit einem Vektorgrafikprogramm und natürlich Kenntnisse in Typografie, Farbpsychologie, der Wirkung von Formen und das Wissen über weitere Gestal­tungs­grund­lagen.

Schauen wir uns einmal die Logos von vier verschiedenen Banken an (aus rechtlichen Gründen bzw. aufgrund des hohen Aufwands veröffentliche ich sie hier nicht, aber Sie können sie sich auf den Websites der Banken ansehen). Meine Interpretationen, was ausgesagt werden soll, sind wertneutral, aber rein persönlich, und es kann durchaus sein, dass sie nicht in allen Punkten zutreffend sind.

  • Deutsche Bank
    • Form: Quadrat mit einem nach rechts aufsteigenden Balken darin – weiter kann man nicht abstrahieren.
    • Aussage: Aufsteigende Bilanz.
    • Farbe: Kräftiges Blau, das Vertrauen und Zuverlässigkeit symbolisieren soll.
    • Schrift: Univers, blau.
  • Commerzbank
    • Form: Dreieckig gefaltetes Band, nach oben weisend.
    • Aussage: Stabil, aufstrebend, gemeinschaftlich.
    • Farbe: Kräftiges Orangegelb, das man auch Gold nennen könnte. Reichtum, Optimismus, Lebensfreude, Wärme.
    • Schrift: By Luc(as) de Groot, schwarz.
  • EthikBank
    • Form: Scheibe, die von Streifen durchdrungen wird. Erinnert leicht an das Euro-Zeichen.
    • Aussage: Förderung von Solarenergie, Sonne, Ganzheitlichkeit, Geld im Kreislauf.
    • Farbe: Goldgelb, siehe oben.
    • Schrift: Myriad Pro, schwarz.
  • GLS Bank
    • Form: Geschwungene Streifen, die an ein Tuch im Wind, einen Wind-Drachen oder einen Vogel im aufsteigenden Flug erinnern.
    • Aussage: Bewegung, Aufstieg, Freiheit, Loslösung, Lebendigkeit.
    • Farbe: Dunkelblau mit etwas Weiß. Vertrauen, ruhige Kraft, Solidität, Sauberkeit.
    • Schrift: Frutiger, schwarz.

Jedes der Logos ist prägnant, also leicht zu merken, sich vorzustellen und wiederzuerkennen. Interessant ist, dass sich auch die jeweiligen Ziele und Werte darin wiederspiegeln – oder was als Werte propagiert wird.

Und nun testen Sie in den nächsten Tagen einmal selbst – sei es bei Banken, Autos oder Eiscrème: welche Logos können Sie gut mit Worten beschreiben oder mit einem Stift skizzieren? Und welche geben Ihnen ein gutes »Bauchgefühl«, welche ein nicht so tolles?


Torsten Kelsch