Wie werden kreative Leistungen kalkuliert?

Wie werden kreative Leistungen kalkuliert?

Die deutsche Eigenart nicht über Preise zu reden, die Intransparenz über Preisgestaltungen sowie fehlende Standards in der Design- und Werbebranche erschweren die Kalkulation und Kostentransparenz von Leistungen im Bereich Grafik-, Industrie- und Fotodesign. Generelle Regelungen, wie wir sie in Form von Tarifverträgen kennen, sind für Selbständige nach dem Kartellgesetz verboten. Erschwerend kommt hinzu, dass die individuellen Parameter zwischen den einzelnen »Designern« bezüglich Fachrichtung, Spezialisierungsgrad, Qualifikation, Leistungsbereitschaft und Kreativität extrem divergent sind.

Folgerichtig kann es natürlich auch keine einheitlichen Vergütungen und Stundensätze für Designleistungen jeglicher Art geben. Die Spanne reicht deshalb vom Amateur, der gelegentlich für 0,- bis 35,- Euro die Stunde als »Freelancer« scheinselbständig für eine Werbeagentur arbeitet und ansonsten vom Wohlwollen seiner Eltern lebt, bis hin zum international renommierten Top-Designer oder Fotografen, der seine Bemühungen mit 80.000,- Euro und mehr am Tag quittiert.

Wie in anderen Branchen auch, bestimmen also Angebot, Nachfrage, und Qualifikation die Vergütung von Designleistungen. Zuverlässige, seriöse Quellen über die Vergütungen von Designleistungen gibt es kaum (Ausnahme: Vergütungstarifvertrag Design SDSt/AGD).

ANMERKUNG FÜR BERUFSEINSTEIGER

Für Berufseinsteiger ist es natürlich relativ schwierig, sich einen Überblick über die Marktsituation im Segment Design zu verschaffen. Tipp: Orientieren Sie sich nicht in den einschlägigen Blogs oder Foren, denn dort werden Sie in der Regel niemals den Leistungsträgern unserer Branche begegnen (… die haben nämlich besseres zu tun). Grundsätzlich ist festzustellen, dass eine Diskussion über »Designhonorare« im Internet nahezu ausschließlich von Amateuren, Semiprofessionellen, Berufseinsteigern und von beruflich nicht sehr erfolgreichen Vereinsfunktionären geführt wird, die sich in Blogs oder Foren rege austauschen. Dieses kollektive Jammern wird wiederum gerne und unreflektiert von einigen branchenspezifischen Medien sowie Agenturbesitzern aufgenommen und verstärkt. Dieses Kleinreden gehört natürlich zum Geschäft. Schließlich profitieren die Agenturinhaber davon, jungen Designern niedrige Löhne zu zahlen.

Auf den Punkt gebracht: Es existieren zwei diametrale Märkte, die nicht unterschiedlicher sein könnten. Zum einen der sehr große, laute Markt der Amateure, Semiprofessionellen und Berufseinsteiger, auf dem ein mörderischer Wettbewerb zu Dumpingpreisen herrscht – und zum anderen der leise Markt der Professionals (Good Design is Good Business).

»Die Gehälter für Designer können zwischen 2.200 Euro (für Berufseinsteiger, die nach Beendigung des Studiums in der Regel noch einiges dazulernen müssen, um im Designalltag bestehen zu können) und 4.500 Euro (für verdiente, selbstständige Kräfte mit einigen Jahren Berufserfahrung) liegen. Der Schnitt liegt wohl bei etwa 3.200 Euro (2010).

Ob die Selbstständigkeit ein höheres Einkommen garantiert?. Ein bereits relativ hoher Tagessatz von 400 Euro für einen guten, erfahrenen Freien würde, auf 20 Arbeitstage hoch gerechnet, spannende 8.000 Euro ergeben. Doch derart durchgebucht ist kaum jemand, freie Tage durch Urlaub oder Krankheit sind nicht bezahlt und es gehen hohe Kosten für Geräte, Hard- und Software und manchmal Raum- oder Platzmiete ab. Unterm Strich verdient ein Freier wahrscheinlich nicht mehr, als ein einigermaßen gut bezahlter Fester, hat jedoch ein wesentlich höheres Risiko zu tragen…«

Siehe dazu auch: »Grafikdesigner verdienen so wenig wie nie zuvor«. Ein Beitrag von Johannes Erler, Factor Design, Hamburg (Quelle: www.page-online.de 2010).

VERGÜTUNGS- UND KOSTENARTEN

Der immer wieder irrtümlich verwendete Begriff »Honorar« ist de facto inkorrekt und somit falsch. Designleistungen werden nicht »honoriert« – sondern vergütet!

Seit Inkraftsetzung des neuen Urheberrechts (UrhG) 2002/2003 betrachtet der Gesetzgeber nun die Schaffung von gestalterischen Werken nicht nur als eine Dienstleistung im Sinne des Bürgerlichen Gesetzbuchs (BGB), sondern sie ist im Sinne des UrhG auch eine persönliche, geistige Schöpfung. Was u.a. bedeutet, dass sich die Gesamtvergütung für eine Designleistung praktisch in eine nachvollziehbare Entwurfs- und Nutzungsvergütung gliedert.

Eine Faktura kann beispielsweise aus folgenden Vergütungs- und Kostenarten bestehen:

  1. Entwurfsvergütung
  2. Nutzungsvergütung
  3. Vergütungen für sonstige Leistungen
  4. Material und Organisationskosten
  5. Fremdkosten

Ziel einer jeden Auftragskalkulation ist natürlich einerseits die Erwirtschaftung einer positiven Umsatzrendite für den »Designer« – man lebt schließlich nicht vom Umsatz, sondern vom Gewinn nach Steuer – anderseits muss die Kalkulation eine lohnende Investition für einen Auftraggeber darstellen. Ein ausgewogene Relation der Interessen ist für beide Vertragsparteien hier nur vorteilhaft; sie garantiert ein konstruktives Miteinander.

Um beispielsweise in Deutschland ein vergleichbares Brutto-Jahres-Tarifgehalt von 47.899,- Euro zu erzielen, musste ein freiberuflicher Systemanalytiker bereits 2001 einen Nettoumsatz von 87.700,- Euro in nur 216 Tagen erwirtschaften. Unternehmerrisiko, Arbeitslosenversicherung, Invalidität, Rücklagen, Akquisition, Buchhaltung, Weiterbildung etc. sowie Anlagevermögen (Rechner, Kameras, usw.) sind hierbei noch nicht berücksichtigt. Um also nicht weniger als ein Angestellter ohne Unternehmerrisiko zu verdienen, musste ein Freiberufler bereits 2001 mindestens 89,- Euro netto pro Stunde umsetzen (Quelle: DGB-Bildungswerk-NRW).

1. Die Entwurfsvergütung

Weit verbreitet ist in Deutschland die Abrechnung für die Vergütung von Entwurfsarbeiten nach Zeitaufwand. Der Basisstundensatz für einen freiberuflich tätigen, also selbständigen Designer ohne nennenswerte Qualifikationen, beginnt in Deutschland, beispielsweise auf Empfehlung der Allianz deutscher Designer (Vergütungstarifvertrag Design, SDSt/AGD), bei netto 80,- Euro ohne Nutzung.

Legt man allerdings allgemeingültige betriebswirtschaftliche Bemessungen zugrunde, deckt dieser empfohlene Basisstunden(um)satz in Städten mit hohem Lebenskostenindex,  heute keinesfalls mehr den Kostendeckungsbeitrag eines Freiberuflers mit eigenem Studio und professionellem Equipment.

Für einen durchschnittlich qualifizierten, selbständigen Designer oder Fotografen mit mindestens 10 Jahren Berufserfahrung, eigenem Studio bzw. professionellem Equipment sind in Deutschland Basisstundensätze ohne Nutzungvergütung von 120,- bis 260,- Euro üblich. Für überregional renommierte freiberufliche Grafikdesigner oder Fotografen werden Mann-Tagessätze von 2.500,- bis 7.500,- Euro berechnet.

Grundsätzlich gilt, dass kreative Designleistungen deutlich besser vergütet werden, als handwerkliche Umsetzungen, die einen niedrigeren künstlerischen Spezialisierungsgrad erfordern.

Beispiel: Der Entwurf eines Signets, einer Geschäftspapierausstattung, einer Website oder eines Geschäftsberichts wird natürlich deutlich besser vergütet, als die Umsetzung eines bereits fixierten Corporate Designs (Reinzeichnungen). Oder die kreative Bildgestaltung bei der Fotografie wird besser vergütet, als erforderliche Retuschearbeit im digitalen Bildergebnis.

2. Nutzungsvergütung

Die Vergütung von eingeräumten Nutzungsrechten, also Lizenzen, wird im Segment Grafikdesign und in der Auftragsfotografie (also kein Stockmaterial) prozentual oder pauschal je nach Nutzungsart, Nutzungsgebiet, Nutzungsdauer und Nutzungsumfang zur Entwurfsvergütung hinzugerechnet. Im Segment Produkt-, Industrie- und Modedesign sind auch Umsatzbeteiligungen bzw. Nutzungsvergütungen nach verkaufter Stückzahl üblich. Im Zeitungs- und Verlagswesen werden für durchschnittliches Bildmaterial mehrheitlich temporäre und auflagenorientierte Lizenzabrechnungssysteme verwendet.

Diese rechnerische Abgrenzung der »Nutzung eines Entwurfs« ist nicht nur seit 2002/2003 rechtskonform, sondern sie bietet auch ein breites Spektrum in der Preisgestaltung. Hat beispielsweise ein Auftraggeber für eine bestimmte Designleistung nur ein bestimmte Investitionskapital zur Verfügung, besteht dadurch die Möglichkeit, die Nutzung (hinsichtlich Nutzungsart, Nutzungsgebiet, Nutzungsdauer, Nutzungsumfang) zu minimieren.

Beispiel: Um einen Invest realisieren zu können, werden anstatt zehn Jahren Nutzung nur drei Jahre Nutzung vereinbart. Nach Ablauf der drei Jahre kann eine weitere Nutzung vereinbart werden, deren Konditionen natürlich a priori fixiert werden können, die aber gegebenenfalls erst in drei Jahren wirksam werden.

3. Vergütungen für sonstige Leistungen

Hier sind Dienstleistungen gemeint, die im Sinne des UrhG keine persönliche, geistige Schöpfungen sind und nur als pure Dienstleistung ohne Nutzungsrecht abgerechnet werden. Also beispielsweise Reinabwicklung, Recherche, Kontakt, Reinzeichnungen, Schriftsatzarbeiten im Sinne von simpler Textverarbeitung, Bildbearbeitung, Programmierung, Texterfassung, Datenübernahme, Autorenänderungen, Modellbau etc. Viele Studios bieten hier Stundensätze an, die vom Basisstundensatz für Entwurfsarbeiten abweichen. Oftmals werden auch unterschiedliche Stundensätze je nach Kostenart (z.B. Fahrt oder Präsentation) und Qualifikation (z.B. Praktikant oder Inhaber) angesetzt.

Tipp: Klären Sie bereits im Vorfeld ab, welche Leistungen unter das UrhG fallen und welche nicht. Beispielsweise ist Entwicklung eines Corporate Designs unbestritten eine schöpferische Tätigkeit (Entwurfsvergütung plus Lizenz); die fortlaufende Implementierung eines bereits vorhandenen Corporate Designs dagegen in der Regel nicht (sonstige Leistung). Gleiches gilt z.B. für die Bildbearbeitung. Entsteht eine eigenständige Collage, fallen Entwurfsvergütung plus Lizenz an. Werden Bilder nur für die Druckvorstufe (Farbkorrekturen, Schärfe, Schmutzentfernung usw.) bearbeitet, ist dies eine reine Dienstleistung ohne Nutzungsrechte.

4. Material- und Organisationskosten

Hier werden verauslagte Kosten beispielsweise für Material, Fahrten, Kuriere, Taxi, Reisekosten, Telekommunikation, Porto, Kopien, Proofs, Andrucke, Papiere, Scans, Foto- und Filmmaterial, Chemikalien etc. abgerechnet. Die meisten Agenturen, Designbüros und Fotografen addieren eine sogenannte »Service-Fee« in Höhe von 10% bis 20% bzw. sie rechnen auf im Großhandel eingekauftes Material eine übliche Einzelhandelsspanne hinzu. Oft werden auch Pauschalen oder Obergrenzen für Fremd- und Organisationskosten vereinbart, was in der Regel ratsam ist.

5. Fremdkosten

Fremdkosten, z.B. Offsetdruckkosten etc., werden von Designstudios und Werbeagenturen nur nach separater schriftlicher Vereinbarung nebst Service Fee und meist nur gegen Vorkasse verauslagt. In der Regel wickelt der Auftraggeber diese Kosten auch bei Produktionsüberwachung durch das Designbüro über seine eigene Buchhaltung ab.

Tipp: Viele Werbeagenturen oder Designer »erhalten« von Lieferanten – oftmals auch unaufgefordert – eine Art »Vermittlungsprovision«, von der der Auftraggeber in der Regel nichts bemerkt, sie aber natürlich indirekt finanziert. In München beispielsweise, beträgt diese Provision erfahrungsgemäß 5% bis 25% vom Nettoauftragswert. Dieses Provisionssystem ist insbesondere dann fragwürdig, wenn das Designstudio oder die Agentur zusätzlich dem Auftraggeber die Produktionsüberwachung (Druckabnahme, Reinabwicklung Druckerei etc.) in Rechnung stellt. Professioneller ist es sicherlich, hier im Vorfeld mit offenen Karten zu kalkulieren.

Tipp: Des Weiteren muss in diesem Zusammenhang darauf hingewiesen werden, dass durch »Provisionsgeschäfte« ein freiberuflicher Designer bzw. Fotodesigner seine steuer- und sozialrechtlichen Privilegien als freiberuflicher »Schöpfer oder Autor« (kein Gewerbe, keine Gewerbesteuer, Möglichkeit der KSK etc.) verlieren und dadurch automatisch zum freiberuflichen »Gewerbetreibenden« werden könnte. Eine Rücksprache mit einem Fachmann (Wirtschaftsprüfer, Steuerberater, Jurist) wäre hier sicherlich ratsam.

 

Kalkulationsbeispiel im Sinne des »Vergütungstarifvertrags Design SDSt/AGD«

Der »Vergütungstarifvertrag Design SDSt/AGD« der »Allianz deutscher Designer« ist in Deutschland für freiberufliche  professionelle Designer, das prominenteste und durchdachteste Kalkulationsmodell. Er berücksichtigt die Segmente Fotodesign, Illustration, Kommunikationsdesign, Messe- und Ausstellungsdesign, Modedesign, Produktdesign, Text und Textildesign. Er skizziert einzelne Design-, PR- und Werbemittel und relationiert sie in durchschnittliche Stundenaufkommen.

Dieses Kalkulationsmodell ist bereits auf das aktuelle UrhG abgestimmt und bietet eine sehr große Bandbreite der Preisgestaltung. Der »Vergütungstarifvertrag Design SDSt/AGD« wird erfahrungsgemäß auch sehr gerne von Juristen und Gutachter herangezogen, um die Ansprüche ihrer Klienten zu formulieren.

Berechnungsbeispiel

LEISTUNG
Illustration für die Titelseite eines Geschäftsberichts für ein mittelständiges Unternehmen. Das Werk soll vorerst nur für ein Jahr auf dem gedruckten Bericht genutzt werden.

ZEITAUFWAND
6 Stunden Entwurf, 1 Stunde Reinzeichnung

KALKULATION ENTWURF
Vergütung für Entwurfsarbeiten: Zeitaufwand für Entwurf x Basis-Stundensatz 6 x 85,– Euro = 510 Euro

KALKULATION NUTZUNG
Nutzungsart: einfach > 0,2
Nutzungsgebiet: national > 0,3
Nutzungsdauer: 1 Jahr > 0,1
Nutzungsumfang: gering > 0,1
Ergibt in der Summe einen Nutzungsfaktor (NF) von 0,7

Vergütung für die Nutzungsrechtseinräumung:
Nutzungsfaktor x Vergütung für Entwurfsarbeiten
Faktor 0,7 x 510 ,- Euro = 357,– Euro

RECHNUNG
Illustration für eine Titelseite
Euro 510,–
Nutzungsechtseinräumg einfach, national, ein Jahr, Nutzungsumfang: gering
Euro 357,–
Eine Stunde Reinzeichnung
Euro 45,-
––––
Gesamtvergütung Euro 912,– (zuzüglich Mehrwertsteuer)

Beispielkalkulation HDR-Fotografie

Bilder für das Web optimieren

Bilder für das Web optimieren

Wie ein Bild richtig für das Internet aufgearbeitet wird erfährst du in diesem Blog, denn optimierte Bilder im Web machen schneller „Peng!“.

Falls du noch in der Planung deiner Webseite stehst, solltest du dir Gedanken über das Seitenverhältnis der Bilder machen. Die Zeiten in denen ein Monitorstandard von 4 : 3 galt sind längst vorbei. Die Großzahl unserer Displays haben ein querformatiges Seitenverhältnis von 16 : 9.

Für ein Gestaltungsraster bietet sich daher z.B. ein Format im Verhältnis von 9 : 6 an. Das ist ein gängiges Format für Online-Medien und passt von den Proportionen gut in die meisten Layouts. Auch beim Teilen auf Sozialen Netzwerken machst du mit diesem Format nichts falsch. Aus den Proportionen 9 : 6 ergeben sich unterschiedliche Möglichkeiten: Wenn du weißt, dass du eher kleine Bilder zur Verfügung hast, empfiehlt es sich, 720 x 400 Pixel als Standard-Format zu verwenden.

Der Trend geht jedoch in allen Medien aufgrund von immer schnelleren Internetverbindungen und hochauflösenden Retina-Displays zu eher größeren Bildformaten. Wenn du mit imposanten Bildern überzeugen willst, wählst du ein Format von 900 x 600 oder 1080 x 720 Pixeln wie bei dem nachfolgende Beispielfoto. Aber aufgepasst: Wenn du nicht gerade ein Fotografie-Portfolio veröffentlichst, solltest du das als Richtwert für deine Maximalgröße sehen. Alles andere wäre verschwendete Ladezeit. Will man auf seiner Website Bilder in ausreichender Qualität und Schärfe anzeigen, geht das immer auf Kosten der Ladezeit und sollte daher gut durchdacht und auf das nötigste beschränkt werden. Bereits nach drei Sekunden Ladezeit brechen ein Drittel der Besucher und potentiellen Kunden genervt ab.

Matterhorn
jpg Bildformat 720 x 1080 mit 102kb

Bildoptimierung für eine kürzere Ladezeit

Die Bildkomprimierung ist ein sehr guter Weg um Ladezeiten einer Webseite zu verkürzen und beeinflusst das Ranking deiner Website ebenfalls und sollte daher nicht vernachlässigt werden. Google erkennt, in wie weit Bilder komprimiert sind und bewertet zu große Dateigrößen als schlecht!

Es gibt drei universell unterstützte Web-Bildformate: GIF, PNG und JPEG. Neben diesen Formaten unterstützen manche Browser auch neuere Formate wie WebP, JPEG XR und JEPG 2000, die eine insgesamt bessere Komprimierung (im Durchschnitt eine Verringerung der Dateigröße um 30 %) und weitere Funktionen bieten.

Format Transparenz Animation Browser
GIF Ja Ja Alle
PNG Ja Nein Alle
JPEG Nein Nein Alle
JPEG XR Ja Ja IE
WebP Ja Ja Chrome, Opera, Android

Für geometrischen Formen unbedingt eine Konvertierung in das Vektorformat SVG erwägen!

Wie groß darf das Dateivolumen für ein Bild sein?

High DPI (HiDPI)-Bildschirme ermöglichen die Darstellung wunderschöner Bilder. Allerdings erfordern hochauflösende Bildschirme auch hochauflösende Bilder! Die Bildobjekte müssen detailreicher sein, um von den höheren Gerätepixelzahlen profitieren zu können.

Vektorformate bevorzugen

Positiv ist zu bewerten, dass Vektorgrafiken sich für diese Aufgabe ideal eignen, da sie in jeder Auflösung scharf dargestellt werden können. Zwar können für das Rendern der feineren Details höhere Verarbeitungskosten anfallen, aber das zugrundeliegende Objekt ist identisch und bietet stets scharfe Resultate, weil sie unabhängig von Auflösung und Größe sind.

Auf der anderen Seite stellen Rastergrafiken eine wesentlich größere Herausforderung dar. Wenn wir die Auflösung des Monitors verdoppeln, nimmt die Gesamtzahl der Pixel um den Faktor vier zu: die doppelte Anzahl der horizontalen Pixel mal der doppelten Anzahl der vertikalen Pixel. Bei einem Bildschirm mit doppelter Auflösung vervierfacht sich also die Zahl der erforderlichen Pixel! Bildoptimierung ist hier oberstes Gebot.

Mit den Qualitätseinstellungen für Rasterformate experimentieren

Bei Verwendung eines verlustbehafteten Formats wie JPEG steht in dem Komprimierungsdialog in der Regel eine anpassbare Qualitätseinstellung zur Verfügung. Experimentieren Sie mit verschiedenen Qualitätseinstellungen für Ihre Bilder und schrecken Sie nicht davor zurück, die Qualität herabzusetzen: Die visuellen Resultate sind oftmals sehr gut und die Verringerung der Dateigröße kann erheblich sein.
Beachte, dass Qualitätsstufen für unterschiedliche Bildformate aufgrund der verschiedenen Algorithmen zur Codierung der Bilder nicht direkt vergleichbar sind: JPEG mit Qualitätsstufe 60 unterscheidet sich erheblich von WebP mit Qualitätsstufe 60. Tatsächlich kann auch eine Qualitätsstufe für dasselbe Bildformat aufgrund des Bildinhaltes zu unterschiedlichen Komprimierungsergebnis führen!

Unnötige Metadaten von Bildern entfernen

Viele Rastergrafiken enthalten unnötige Metadaten zum Objekt: geografische Informationen, Kamerainformationen und so weiter. Entferne diese Daten mit geeigneten Tools aber gebe deine eigenen Copyrightdaten und das Farbprofil sRGB den Bilddaten mit.

Skalierte Bilder bereitstellen 

Stell sicher, dass bei statischen Bildgrößen die angezeigte Größe im Web so weit wie möglich der ursprünglichen Größe des jeweiligen Bildes entspricht! Zusätzlich eine oder mehrere optimierte Bildvariante für die hochauflösende Bildschirme (_@2x) oder gar für UHD (_@3x). Ich rate hier zu einer maximalen Größe bis zu 200 KB für ein normales Bild, welches im Contentbereich untergebracht wird.

HTML-Beispiel für Webimplementierung unterschiedliche Bildschirmauflösungen:

<img src=“meinBild.jpg“ srcset=“meinBild.jpg 1x, meinBild_@2x.jpg 2x, meinBild_@3x.jpg 3x“ alt=“Text zum Motiv”>

 

Guidelines für Responsive Bilder

Responsive Bilder auf der Website benötigen Bildvarianten hinsichtlich ihrer Breite (w). Unterschiedliche Bildinhalte ergeben unterschiedliche Anforderungen hinsichtlich der Anzahl der “Breakpoints”, also wann eine neue Bildgrößenvariante nötig wird.

Breakpoints-Beispiel
Breakpoints-Beispiel bei ca. 60k Filesize-Differenz für Bildweiten von 360px bis 1920px

Ein Onlinegenerator dafür findet ihr bei „Claudinary„: Make Image Breakpoints with 20-80K File-Size Jumps between the smallest size of the image and the largest size of the image. Sample Page. See how the number of breakpoints vary even through all the images start with the same resolution end points.

HTML-Beispiel für die Einbindung von Responsive Images nach obigen errechneten Breakpoints:

<img sizes=“(max-width: 1920px) 100vw, 1920px“
srcset=“matterhorngipfel_360.jpg 360w, matterhorngipfel_715.jpg 715w, matterhorngipfel_961.jpg 961w,matterhorngipfel_1148.jpg 1148w,matterhorngipfel_1283.jpg 1283w, matterhorngipfel_1414.jpg 1414w, matterhorngipfel_1535.jpg 1535w, matterhorngipfel_1650.jpg 1650w, matterhorngipfel_1748.jpg 1748w, matterhorngipfel_1848.jpg 1848w, matterhorngipfel_1919.jpg 1919w, matterhorngipfel_1920.jpg 1920w“ src=“matterhorngipfel_1920.jpg“ alt=“Mountaintop of Matterhorn”>

Einen passenden Dateinamen vergeben

Dateinamen sind jedoch gerade bei Bildern extrem wichtig, um von der Suchmaschine erkannt zu werden. Besonders wichtig ist es, dass der Name den Bildinhalt präzise beschreibt. Für das Web zu speichern bedeutet auch, die Datei webkonform zu benennen. Konkret:

  • keine Umlaute wie ä,ö,ü
  • keine Sonderzeichen wie ß,‘,?
  • keine Leerzeichen

Ein optimaler Dateiname sieht zum Beispiel so aus: weisze-maeuse.jpg.

Mit Photoshop richtig für’s Web speichern

Bildoptimierung mit dem "für Web speichern" Dialogfenster
das „Für Web speichern“ alte Dialogfenster aus CS6

Im Gegensatz zum normalen „Speichern-unter“-Prozess, bietet Photoshop die Möglichkeit Bilder für das Web optimiert zu speichern. Den Befehl dazu findest du in den älteren Photoshopversionen unter dem Menüpunkt „Datei“ > „Für Web speichern“.

Mit Photoshop CC wurde dieser Dialogfenster endlich modernisiert. Das neue „Bild-Assets“ basiert auf einer neuen Technologie namens „Adobe Generator“, die mit Photoshop CC 14.1 eingeführt und mit CC 2015.5 weiter verbessert wurde. Wenn die Bild-Assets aktiviert sind, erzeugt Photoshop automatisch einen Ordner am Speicherplatz der Photoshop-Datei, bzw. auf dem Desktop wenn das Dokument ungespeichert ist. In diesen Ordner exportiert Photoshop dann automatisch den Inhalt bestimmter Ebenen und aktualisiert die Bild-Dateien, sobald innerhalb der Bildbearbeitung eine Änderung stattgefunden hat.

Damit der Echtzeit-Export funktioniert, müssen die Ebenen allerdings einer festgelegten Namensgebung folgen.

Bild-Dateien in Echtzeit generieren lassen

Um Bild-Assets zu verwenden, aktiviere zunächst die entsprechende Photoshop-Funktion unter „Datei > generieren > Bild-Assets“. Die Funktion ist bei neuen Dokumenten ausgeschaltet. Sobald das Programm mindestens eine Ebene anhand einer Reihe von vorgegebenen Schlüsselbezeichnungen erkennt, erstellt Photoshop einen neuen Ordner und legt die Ebenen als exportiere Datei darin ab. Ändert ihr den Inhalt der Ebene wird diese Datei aktualisiert.

Standard-Export mit Dateinamen und Dateiendung

Die einfachste Variante der Schlüsselbezeichnung beinhaltet lediglich den gewünschten Dateinamen, sowie die Dateiendung. Photoshop exportiert dann diese Ebenen als Webdatei in den Ordner.

beispieldatei.jpg
Erzeugt eine JPG-Datei mit dem Namen „beispieldatei“ und 80% Qualität.

beispieldatei.png
Erzeugt eine PNG32-Datei mit dem Namen „beispieldatei“

beispieldatei.gif
Erzeugt eine GIF-Datei mit dem Namen „beispieldatei“

beispieldatei.jpg4
Erzeugt eine JPG-Datei mit 40% Qualität. Mögliche Werte (1-10)

beispieldatei.jpg7%
Erzeugt eine JPG-Datei mit 7% Qualität. Mögliche Werte (1-100%)

Ihr könnt sogar mehrere Dateien parallel exportieren lassen. Trennt dazu die Bezeichnungen im Dateinamen einfach per Komma.

beispieldatei.jpg, 200% beispieldatei_@2x.jpg
Erzeugt eine JPG-Datei mit 100% Größe sowie eine JPG-Datei mit 200% Größe und dem Suffix @2x.

WebP

Das „weppy“ ist ein Bildformat, welches von Google 2010 ins Leben gerufen wurde und einige Vorteile gegenüber PNG und JPG hat. Es erreicht bei sehr hoher Komprimierung mehr Bildqualität pro Datenmenge als ein JPEG. Es arbeitet besonders effektiv bei der Komprimierung von detailarmen, gleichförmigen Bildteilen. Eure Bilder könnt ihr in das WebP-Format online konvertieren. Es gibt aber auch kostenlose Plug-Ins für Photoshop zum download Webp Plugin For Mac.

Bildoptimierung mit dem WebP Photoshop Plugin
Popup-Fenster des WebP-PlugIn im „Speichern unter“ Menü

Fallbacks beim WebP-Bildformat

Dem Vorteil der kleineren Bilddateien wie des WebP-Formates, steht der Nachteil dass diese noch nicht universell unterstützt werden gegenüber. Google honoriert diese kleinere Dateien zwar positiv im Ranking, der Gebrauch erfordert aber auch das ein JPEG-Fallback bereit gestellt wird.

HTML-Beispiel für Browser, die kein WebP-Format anzeigen können:

<picture>
<source srcset=“beispielbild.webp 1x, beispielbild_@2x.webp 2x” type=“image/webp“>
<source srcset=“beispielbild.jpg 1x, beispielbild_@2x.jpg 2x” type=“image/jpeg“>
<img src=“beispielbild.jpg“ alt=“Text zum Motiv”>
</picture>

Damit können alle old Browser, die auch kein <picture> Tag unterstützen, zumindest die Bildquelle anzeigen welche im <img> Tag angegeben wurde.

Zum Test ob dein Browser ein WebP Bildformat anzeigen kann.

Richtig Schärfen

zauberwaldSchärfen

Die Basis zum guten Schärfen liegt im allgemeinen Verständnis der menschlichen Wahrnehmung. Wir konzentrieren uns bei der Verarbeitung von Sehinformationen auf die Kanten, die das Objekt vom Hintergrund trennen. Unser Gehirn versucht zuerst klare horizontale und vertikale Linien zu erkennen – also die Umrisse eines Objektes. Anhand der Umrisse wird uns meistens bereits nach Sekundenbruchteilen klar, womit wir es zu tun haben. Können wir jedoch keine klaren Umrisse wahrnehmen, haben wir oft erhebliche Schwierigkeiten das Gesehene einem uns bekannten Bild zuzuordnen. Deshalb beurteilen wir ein Bild als scharf, wenn die Motivkanten gut akzentuiert sind. Die Flächen spielen nur eine untergeordnete Rolle.

Schärfe und Bildinhalt

Technisch bedingt ist jedes Digitalfoto immer etwas unscharf und muss nachgeschärft werden! Leider ist es eine weit verbreitete Vorgehensweise, dass alle Bilder in einem Workflow einmalig und identisch geschärft werden. Zudem kommt, dass alle Photoshop Schärfungsfilter ein Problem haben: Sie unterscheiden nicht zwischen wichtigen, zu schärfenden Details und Bildflächen, die außerhalb der Motivschärfe liegen. Sie behandeln alle Bildteile gleich.

Doch sollte je nach Bildinhalt mit einer eigenen Technik und speziellen Einstellungen nachgeschärft werden. Wenn Sie sich für die falsche Vorgehensweise entscheiden, zerstören Sie im schlimmsten Fall die Bildstimmung und die Kernaussage des Bildes.

Basisfunktion der Schärfungsfilter

Phase 1: Konturen finden

Wie das menschliche Auge muss auch ein Programm zuerst ausfindig machen, «wo markante Kontraste» in einem Bild zu finden sind. Fortschrittliche Anwendungen sind zusätzlich in der Lage, unterschiedlich starke Konturen zu erkennen und geben dem Anwender die volle Kontrolle (Schwellenwert), welche Konturen später betont werden sollen.

Phase 2: Kontrast verstärken

Sind die Konturen einmal gefunden, müssen diese stärker betont werden. Dies geschieht ganz einfach, indem der Kontrast lokal verstärkt wird: Helle Bereiche werden noch heller, dunkle noch dunkler. Durch den zusätzlichen Kontrast erkennt das menschliche Auge die Konturen schneller und empfindet das Bild als schärfer. Auch hier geben uns gute Anwendungen die Kontrolle über die «Stärke des Kontrastes» und die «Breite (Radius) der Konturen».

Schärfen in mehreren Durchgängen

1: RAW Unschärfe korrigieren

Im ersten Schärfedurchgang versuchen wir wiederherzustellen, was bei der Bilderfassung technisch bedingt verloren ging. Dies geschieht am besten im RAW-Konverter. Bei dieser Gelegenheit auch gleich dem Bildrauschen einen ersten Seitenhieb verpassen. Hier unterscheidet man zwei Arten des Rauschens: Das Chrominanz- oder Farbrauschen: macht sich durch rote, grüne und blaue Pixelflecken bemerkbar. Solche Pixelfehler können im RAW-Konverter oder in Photoshop meist problemlos und ohne grossen Schärfeverlust eliminiert werden. Wesentlich mehr Schwierigkeiten bereitet das Helligkeitsrauschen, auch Luminanzrauschen genannt. Im Gegensatz zum Farbrauschen sind diese falschen Pixelinformationen in sämtlichen Kanälen vorhanden, die für die Detailzeichnung des Bildes verantwortlich sind.

Im Falle von Adobe Camra RAW und Lightroom können Sie mit den richtigen Voreinstellungen neben RAW-Dateien auch JPEG- und TIFF-Dateien (ohne Ebenen) öffnen.

2: Inhaltsgerecht schärfen

Nachdem Sie Ihre Bilder in Camera RAW vorbehandelt haben, bearbeiten Sie diese wie gewohnt in Photoshop. Wenn Sie so weit fertig sind, sollten Sie dem Rauschen endgültig den Kampf ansagen!  Am Ende Ihrer Arbeit (und nach der Rauschreduktion) erfolgt eine Unscharfmaskierung, unterschieden in  Detailschärfung und/oder Kontrastschärfung. Der Bildinhalt spielt dabei eine Hauptrolle: detailreiche Bilder werden anders geschärft als Bilder mit wenigen Details aber bitte immer als Smart-Objekte und Smartfilter angewendet.

Im Grunde genommen enthalten die meisten Bilder Stellen mit mehr oder weniger Details, so dass es nicht immer einfach erscheint, Bilder einer Detailkategorie zuzuordnen. Überlegen Sie in solchen Situationen einfach, was denn überhaupt der bildwichtige Inhalt des Motives ist.
Tipp: Isolieren Sie die Stelle im Bild, die für die Bildaussage verantwortlich ist, und ordnen Sie es einer Inhaltskategorie zu.

Differenzieren sie in Ihre Schärfungstechnik zwischen “Detailreiche Bilder“ (meist Landschaftsaufnahmen). Hier gilt eine „Unscharf Maskierung“ mit angemessenem Stärkewert zwischen 150 und 180%, einem sehr engen Radius (< 1,5 Pixel) und keinem oder nur geringem Schwellenwert.

Bei “detailarme Bilder”, oft Beauty-Portraits, findet eine „Kontrastschärfung“ mit geringer Stärke und stark erhöhtem Radius Anwendung oder eine „Schärfungstechnik mit Konturenmaske“.

3: Für die Ausgabe schärfen

Bilder, die nur im Internet betrachtet werden, müssen nicht erneut geschärft werden. Im letzten Durchgang schärfen Sie Ihr Bild gezielt für einen konkreten Verwendungszweck. Diese Schärfung sollte zwingend nach jeglicher Auflösungsneuberechnung oder Skalierung erfolgen! Aufgrund seiner Besonderheit explizit in den Mitteltönen eine sehr ausgeprägte, aber dennoch harmonische Schärfe zu erzeugen, bietet sich die Nachschärfung mit dem „Hochpass-Filter“ an. Allerdings erfordern unterschiedliche Papiere oder Druckverfahren jeweils eigene Einstellungen. Für den kommerziellen Offsetdruck empfehlen sich folgende Einstellungen:

Druckauflösung (in dpi) –  Hochpass-Einstellungen

150 – 1.1 Pixel, Lineares Licht, 65% Deckkraft
180 – 1.2 Pixel, Lineares Licht, 60% Deckkraft
220 – 1.5 Pixel, Lineares Licht, 52% Deckkraft
250 – 1.8 Pixel, Lineares Licht, 45% Deckkraft
300 – 2.0 Pixel, Lineares Licht, 40% Deckkraft
360 – 2.4 Pixel, Lineares Licht, 30% Deckkraft

(Für ungestrichene Papiere 10% mehr Deckkraft; für Zeitungspapiere ca. 15% bis 20% mehr Deckkraft)

» © Copyright Guido Sonnenberg und www.guidosonnenberg.de, 2016. Unautorisierte Nutzung von Inhalten oder Teilen der Inhalte ist ohne eine schriftliche Zustimmung des Autors nicht gestattet.  Auszüge können hingegen genutzt werden, jedoch nur mit einer eindeutigen Nennung der Quelle. Diese muss folgendermaßen stattfinden: Nennu1ng des Autors, der Website inklusive einem Link zum Original-Artikel.«