RX Grafikleitfaden

How to Gu de Grafikleitfaden

i

Definition Printmedien & Onlinemedien

Was sind Printmedien?

Unter Printmedien versteht man gedruckte Informationsquellen. Dazu gehören die sogenannten klassischen Medien wie Zeitschriften, Zeitungen, Bücher, Kataloge, aber auch Flyer, Plakate, Kalender, uvm. Allen gemeinsam ist der Farbmodus CMYK. Diese Abkürzung steht für die drei Farbbestandteile Cyan, Magenta, Yellow und den Schwarzanteil Key. CMYK ist der sogenannte 4-Farbdruck – hier entstehen alle Farben aus einer Mischung dieser vier Farbbestandteile.

Es gibt aber auch Druckmethoden, bei denen Volltonfarben angewendet werden (was oft bei Werbeartikeln der Fall ist). Diese Farben sind fertig angemischt und werden als Sonderfarbe verarbeitet. Dazu gehören beispielsweise PANTONE- oder HKS-Farben, für die es auch die entsprechenden Farbfächer zur Ansicht der Farbtöne gibt. Aber auch Logos werden häufig in Pantone-Farben erstellt. Das hat einen einfachen Grund: Je nach Maschineneinstellung, Temperatur, Farbauftrag können Farbergebnisse beim 4-Farbdruck leicht variieren. Da die Volltonfarben aus „Farbtöpfen“ stammen, wird ein Logo auf nachbestelltem Briefpapier wieder identisch dargestellt sein.

Wichtig! Logos, die in Pantone-Farben geliefert werden, müssen vor Verwendung im 4-Farbdruck in den ensprechenden CMYK-Farbwert umgewandelt werden.

Was sind Onlinemedien?

Unter Onlinemedien versteht man herkömmliche oder digitale Medien, die a priori online publiziert werden. Das sind hauptsächlich Internetseiten. Newsletter und E-Mails sind weitere digitale Medien, die zum digitalen Informationsaustausch genutzt werden. Social Media Plattformen zählen ebenfalls dazu. Zur Darstellung der Inhalte nutzt man beispielsweise

Bilder/Grafiken

statische Werbebanner

animierte Werbebanner

PDF zum Download, Versand per E-Mail oder zur Ansicht auf der Internetseite Videos

Allen Formaten gemeinsam ist der Farbmodus RGB (Rot-Grün-Blauviolett-System), denn am PC werden alle Farben mithilfe dieser drei Farbanteile definiert.

Das kleine Lexikon der Grafikformate – Pixel oder Vektor, was ist das eigentlich?

Was sind Printmedien?

Unter Printmedien versteht man gedruckte Informationsquellen. Dazu gehören die sogenannten klassischen Medien wie Zeitschriften, Zeitungen, Bücher, Kataloge, aber auch Flyer, Plakate, Kalender, uvm. Allen gemeinsam ist der Farbmodus CMYK. Diese Abkürzung steht für die drei Farbbestandteile Cyan, Magenta, Yellow und den Schwarzanteil Key. CMYK ist der sogenannte 4-Farbdruck – hier entstehen alle Farben aus einer Mischung dieser vier Farbbestandteile.

Pixelbasierte Bildformate – JPG/BMP/PNG/GIF

Diese Grafiken (Rastergrafiken) basieren auf einem Pixelraster, bei dem jeder Bildpunkt einem Farbwert zugeordnet ist. Die Aneinanderreihung dieser Farbpixel ergibt das komplexe Bild. Ein Landschaftsfoto beispielsweise ergibt sich – stark vergrößert – aus einer Aneinanderreihung von Bildpunkten. Die Darstellung auf Computerbildschirmen beruht auf einem Pixelraster. Das bedeutet, dass alle digitalen Medien eine Grafikumsetzung aus Pixeln benötigen. Rastergrafiken können nicht ohne Qualitätsverlust vergrößert (skaliert) werden.

Vektorgrafik – SVG/EPS/AI

Bilder und Formen werden über Vektoren beschrieben. Eine Vektorgrafik ist somit das Gegenstück zur Rastergrafik und wird nicht durch einzelne Pixel sondern durch geometrische Elemente wie Linien, Kreise, Polygone oder allgemeine Kurven zusammengesetzt. Für Vektorgrafiken gibt es verschiedene etablierte Dateiformate wie SVG (Scalable Vector Graphics), EPS (Encapsulated Postscript) oder AI (Adobe Illustrator Document). Der große Vorteil: Eine Vektorgrafik kann ohne Qualitätsverlust skaliert und verlustfrei manipuliert werden.

PNG – Rastergrafik

Portable Network Graphics (PNG) ist ein universelles Grafikformat für Rastergrafiken mit verlustfreier Datenkompression und kann bis zu 16,7 Millionen Farben darstellen. Vorteil: Hohe Auflösung und Transparenzen (Hintergrund) möglich. Anwedungsgebiet: Digital

GIF – Rastergrafik

Das Graphic Interchange Format (Gif ) ist ein Grafikformat, das bis zu 256 Farben darstellen kann. Wegen der geringen Farbtiefe wird es bevorzugt bei Grafiken mit großen, einfarbigen Flächen und sich mwiederholenden Mustern angewendet. Vorteil: Einzelbe Farben können gesichert werden, um eine Farbveränderung auszuschließen (z.B. bei einem Logo). Animationen sind möglich. Anwedungsgebiet: Digital, z. B. für Navigationselemente und Icons auf Webseiten

JPG (manchmal auch JPEG) – Rastergrafik

Das Joint Photographic Expert Group (JEPG) ist das kompatibelste und universell nutzbarste Bildformat, das verlustbehaftet ist und bis zu 16,7 Millionen Farben darstellen kann. Verwendung: Es eignet sich für komplexe Bilder mit vielen Farbinformationen. Anwedungsgebiet: Digital und Druck

TIFF – Rastergrafik

Das Tagged-Image File Format (Tiff ) ist ein Bildformat zur Speicherung von hochauflösenden Bilddaten. Vorteil: Tranzparenzen möglich Anwedungsgebiet: Druck

EPS – Vektorgrafik

Encapsulated PostScript (EPS) ist ein Bildformat in der Seitenbeschreibungssprache PostScript damit eine Grafik in ein Dokument eingefügt werden kann. Ein EPS ist als Vektorgrafik gedacht. Es kommt aber immer wieder vor, dass Pixelgrafiken eingefügt werden. Dann gelten die folgenden Vorteile nicht. Vorteil: Tranzparenzen möglich, Skalierung ohne Qualitätsverliust Anwedungsgenbiet: Druck

Grafiken im Format JPG können für Online- und Druckmedien verwendet werden. Wichtig dabei ist, die Auflösung und der Farbmodus für den jeweiligen Medienkanal.

Die Grafikformate im Überblick

Bildformate

Transparenzen möglich –

Ebenen – – –

Farbmodus

Komprimierung verlustfrei verlustbehaftet verlustbehaftet verlustfrei verlustfrei

Skalierung verlustbehaftet verlustbehaftet verlustbehaftet verlustbehaftet verlustfrei

Auflösung ab 72 dpi aufwärts 72 dpi ab 72 dpi aufwärts ab 300 dpi aufwärts

Besonderheiten

Gewinnt an Bedeutung, da auch hier eine hohe Farbtiefe verlustfrei komprimiert werden kann. Durch die möglichen Tranzparenzen wird das PNG beispielsweise für Bildschirmpräsentationen immer attraktiver.

Animation Kompatibel zu jedem Bildbearbeitungsprogramm

*Indiziert bedeutet, dass das Format auf einer Farbtabelle/Farbpalette abgespeichert wurde.

Genutzt um hochaufgelöste Bilder in druckfähiger, verlustfreier Qualität zur Verfügung zu stellen.

Wichtiges Format zum Austausch von Daten in der Druckvorstufe in Verlagen und Druckereien.

Vektor

Wichtiges Format zum Austausch von Daten in der Druckvorstufe in Verlagen und Druckereien.

Ein EPS ist nicht automatisch eine Vektordatei. Eine Vektordatei wird als EPS abgespeichert, um so einen Daten – austausch in alle Grafikprogramme zu ermöglichen. Wird aber versehentlich eine Rasterdatei als EPS abgespeichert – bleibt der Inhalt eine Rasterdatei.

Farbmodus und Auflösung: Die Basis für eine optimale Darstellung

Bildauflösung per Definition

Für digitale Medien:

PPI (pixel per inch/Pixel pro Zoll) ist die relative Auflösung eines Bildes, die sogenannte Pixeldichte. Die Pixeldichte gibt an wie viele Pixel sich auf einem Inch (Inch = Zoll = 2,54 cm) befinden. Bei einer Auflösung von 72 dpi befinden sich also 72 Pixel auf einer Länge von 2,54 cm.

Für Printmedien:

DPI (dots per inch) ist die Auflösung einer Druckdatei und gibt die Anzahl der Punkte an, die ein Drucker auf einem Inch (= 2,54 cm) drucken soll. Eine gängige Druckauflösung ist 300 dpi. Wird eine Grafik mit einem Layoutprogramm erstellt, werden die Elemente nicht aus Pixeln sondern Vektoren aufgebaut.

Farbmodus per Definition

RGB

Am PC kann eine Farbe durch ihre Anteile an den drei Primärvalenzen Rot, Grün und Blauviolett definiert werden. Dieses sogenannte RGB-System (Rot-Grün-Blauviolett-System) baut also auf der additiven Farbmischung auf. Im höchsten Wert (100 %) ergeben alle drei Farben die Farbe Weiß. Für Printmedien:

CMYK

Die Abkürzung CMYK steht für die drei Farbbestandteile Cyan, Magenta, Yellow und den Schwarzanteil Key. CMYK-Farbräume sind, wie RGB-Farbräume, geräteabhängig und benötigen deshalb Farbprofile, um Farbtöne exakt zu beschreiben.

Volltonfarben

Volltonfarben sind Sonderfarben, die als fertige Farbe zum Einsatz kommen. Dazu zählen Pantone-Farben oder HKS-Farben. Wobei die Pantonefarben eine größere Farbpalette anbieten. Glänzende Farben, wie z.B. Gold oder Silber können nicht im 4-Farbdruck erstellt werden. Hier werden Sonderfarben benötigt.

Graustufen

Bei Bildern im Graustufenmodus werden verschiedene Schattierungen (Stufen) der Farbe Grau verwendet. In 8-Bit-Bildern sind bis zu 256 Graustufen enthalten. Jedes Pixel eines Graustufenbildes hat einen Helligkeitswert zwischen 0 (Schwarz) und 255 (Weiß). In 16- und 32-Bit-Bildern ist die Anzahl der Graustufen wesentlich höher als in 8-Bit-Bildern. Graustufenwerte können auch als Prozentwerte der Deckung mit Schwarz (0 % entspricht Weiß, 100 % Schwarz) gemessen werden. Beim Graustufenmodus wird der im Dialogfeld „Farbeinstellungen“ gewählte Arbeitsfarbraum verwendet.

Jedes Medium hat für die einzelnen Elemente feste Vorgaben für Farben und Größe.

Farbmodus und Auflösung – Praxisbeispiele: Was bedeuten die Vorgaben in der Praxis

Größe, Auflösung und Farbmodus richten sich immer nach dem gewünschten Ergebnis und benötigt auch immer die Vorgabe, wofür das Endprodukt genutzt werden soll.

Dabei gilt:

Druckmedien: mindestens 300 dpi + CMYK-Farbmodus

Onlinemedien: 72 dpi + RGB-Frabmodus

Digitale Medien: mindestens 72 dpi + RGB-Farbmodus

Umsetzungsbeispiele Onlinemedien

Anforderung: Slidergrafik für eine Webseite ohne Animation. Der Slider soll 1170 Pixel breit und 550 Pixel hoch sein.

Ergebnis: RGB-Farbmodus / Auflösung 72 dpi / Größe: 1170 x 550 px (Pixel) / Format: JPG oder GIF

Anforderung: Animierter Superbanner für PSI Webseite. Ein Superbanner ist 728 Pixel breit und 90 Pixel hoch.

Ergebnis: RGB-Farbmodus / Auflösung 72 dpi /

Größe: 728 x 90 px (Pixel) / Format: GIF animiert

In manchen Fällen ist auch eine sehr kleine maximale Dateigröße vorgegeben. Dann richtet sich das Dateiformat nach dem optimalsten Ergebnis bei dieser KB-Zahl. Das kann je nach Motiv das JPG oder das GIF sein.

Umsetzungsbeispiele Printmedien

Anforderung: Firmenlogo als Vektor-EPS

Ergebnis: CMYK-Farbmodus / Auflösung 300 dpi /

Größe: individuell – da Vektoren verlustfrei skalierbar sind/ Format: EPS oder PDF

Anforderung: Produktfoto 90 mm x 127 mm

Ergebnis: CMYK-Farbmodus / Auflösung 300 dpi /

Größe: 90 mm x 127 mm / Format: JPG

Anforderung: Farbige ganzseitige Anzeige zur Verwendung in einem Magazin

Ergebnis: CMYK-Farbmodus / Auflösung 300 dpi /

Größe: 210 mm x 297 mm / Beschnittzugabe 3mm /

Inkl. Schnittmarken / Format: JPG oder PDF (Ideal ist ein druckfähiges PDF siehe S. 10)

Anforderung: Flyerproduktion bei einer Onlinedruckerei wie z. B. www.WirmachenDruck.de

Vorgehen: Zunächst muss auf der Internetseite nach den Druckvorgaben recherchiert werden. Diese lauten für dieses Beispiel: „Flyer DIN lang Quer (21,0 cm x 10,5 cm), beidseitig bedruckt, 90g hochwertiger Qualitätsdruck matt, 4/4 farbig (beidseitiger Druck), Endformat: 21,0 cm x 10,5 cm, Datenformat: 21,6 cm x 11,1 cm

Ergebnis: Zweiseitiges Dokument / CMYK-Farbmodus / Auflösung 300 dpi / Größe: 210 mm x 105 mm / Beschnittzugabe 3mm (zu erkennen an der Größe des „Datenformates“) / keine Schnittmarken / PDF

Printmedien – Das PDF – Portable Document Format

Das PDF-Format wurde ursprünglich erfunden, um den sicheren Austausch von Dokumenten auf digitalem Weg zu erleichtern. Die Vorteile waren (und sind) in erster Linie, dass die Dateien alle Informationen gebündelt enthalten und unabhängig vom Erstell-Programm vom Empfänger geöffnet und genutzt werden können. Diese Eigenschaften macht sich auch die Druckindustrie zunutze und verarbeitet bevorzugt PDF-Dateien, um zeit- und kostenintensive Schritte in der Druckvorstufe zu vermeiden.

Was ist ein interaktives PDF?

Das interaktive PDF ist ein Dokumentenformat. Es wird etwa im Onlinemarketing, der Content-Entwicklung, im E-Learning u. Ä. genutzt und von Web-Entwicklern auf der Website implementiert. Es bietet die Möglichkeit, Dokumente oder Onlinepräsentationen bereitzustellen, die User am Bildschirm bearbeiten, versenden, unterschreiben und archivieren können. Interaktive PDFs eignen sich bspw. für Arbeitsblätter, Dokumente, Checklisten, Präsentationen oder Seminarunterlagen.

Ein PDF ist generell für kollaborative Zwecke geeignet, etwa um Dokumente barrierefrei zu versenden. ‚PDF‘ bedeutet Portable Document Format und ist seit Jahrzehnten das Format, mit denen Sender und Empfänger elektronische Dokumente austauschen können. Unabhängig davon, welches Betriebssystem, Anwendungsprogramm oder Device von ihnen benutzt wird: Das Layout der entsprechenden Datei bleibt unverändert. Das PDF besitzt darüber hinaus eine geringe Dateigröße und kurze Ladezeit und kann optimal und kreativ interaktiv gestaltet, mit einem Passwort versehen und direkt ausgelesen werden. Es ist außerdem möglich, Informationen aus den interaktiven Formularen zu extrahieren und in Datenbanken zu erfassen.

In den interaktiven PDF-Dateien werden Felder, Schaltflächen und Links sowie Videos, Audios, Animationen, GIFs, auch Links, Podcasts, Tabellen und Umfragen etc. eingebunden, um Informationen zu vermitteln oder Produkte und Dienstleistungen passend zu präsentieren. So werden bspw. für eine Präsentation dekorative Elemente wie animierte Seitenübergänge genutzt, um das Erlebnis zu verbessern.

Ausfüllbare Seminarunterlagen oder Dokumente müssen nun nicht mehr ausgedruckt werden, sondern können direkt am Rechner ausgefüllt, zwischengespeichert, weiterbearbeitet (auch von unterschiedlichen Usern) und dann zurückgesendet werden. Sie können durch einfache oder fortgeschrittene Signaturen auch rechtsgültig unterzeichnet werden. Da die Zugangsvoraussetzungen gut sind, eignen sich interaktive PDFs für den massenhaften Informationsaustausch. Sie bieten nicht zuletzt eine optimale Datensicherheit, und bei Bedarf lassen sich einzelne Passagen durch eine Schwärzung unkenntlich machen.

Printmedien – Das Druck-PDF

Da für den Druck jedoch erweiterte, ganz spezielle Vorgaben gelten, wurde ein Standard entwickelt, der eben diese Vorgaben berücksichtigt: das PDF/X

Der Zusatz X steht für exchange, also Austausch. Denn genau darum geht es, um einen sogenannten blinden Austausch zwischen Kunde und Druckerei. Damit ist gemeint, dass die Druckerei die vom Kunden angelieferte PDF-Datei theoretisch ungesehen und ungeprüft verwenden kann. Dennoch erfolgt in der Praxis in der Regel eine Prüfung, bevor die Daten zum Druck freigegeben werden. Der Designer hat so die Gewissheit, dass seine Daten wie gewünscht gedruckt werden, die Druckerei hat den Vorteil, dass das Risiko fehlerhafter Daten minimiert wird.

Das PDF/X-Format stellt sicher, dass bestimmte Grundvoraussetzungen für den Druck erfüllt sind. Dies beinhaltet jedoch nicht die Qualität der Datei (z. B. was die Auflösung von Bildern betrifft). Vielmehr geht es darum, dass Schriften und Bilder eingebettet sind, der richtige Farbraum enthalten ist oder die korrekten Einstellungen für Überfüllen und Überdrucken vorgenommen wurden.

PDF/X Versionen

Da je nach Anwendungszweck und technischen Voraussetzungen die Anforderungen an eine PDF/X-Datei variieren können, sind im Laufe der Jahre verschiedene Varianten entstanden. Die gebräuchlichsten sind PDF/X-1a, PDF/X-3 und PDF/X-4. Sie grenzen sich in erster Linie durch die Unterstützung unterschiedlicher Farbräume ab.

PDF/X-1a erlaubt ausschließlich CMYK und Sonderfarben, jedoch keine Farben auf Basis von ICC-Profilen. Transparenzen sind ebenso wie Ebenen nicht möglich. Während PDF/X1a:2001 auf PDF-Version 1.3 basiert, ist PDF/X1a:2003 auf 1.4 erweitert worden.

PDF/X-3 ermöglicht neben CMYK und Sonderfarben auch den Einsatz von RGB, LAB und ICC-basierten Farben. Eine Umwandlung in CMYK erfolgt bei Bedarf in der Druckvorstufe. In der Regel wird das Zielfarbprofil jedoch beim Export aus dem Layoutprogramm berücksichtigt. Transparenzen und Ebenen werden automatisch reduziert. 2003 wurde wie bei PDF/X1a eine Revision durchgeführt, die Standard-Version ist jedoch PDF/X-3:2002, wie sie von der ECI in Kooperation mit dem Bundesverband Druck und Medien erarbeitet wurde. Sie wird zum Beispiel auch von FLYERALARM verwendet.

PDF/X-4 macht die Verwendung derselben Farbräume wie PDF/X-3 möglich, zusätzlich jedoch auch Transparenzen und Ebenen. Im Druck wird die Version zum Beispiel bei Textilien wie Bekleidung oder Baumwolltaschen genutzt.

Printmedien – Das druckfähige PDF als Druckvorstufe

Satzspiegel

Der Satzspiegel ist die Nutzfläche auf der Seite eines Magazins und wird begrenzt durch Stege, die Abstände zwischen Satzspiegel und Rand. Bsp. Satzspiegel : 185 x 260 mm

Anschnitt/Beschnitt

Als Anschnitt/Beschnitt bezeichnet man den über das Endformat herausragenden Rand zur Vermeidung von unerwünschten „weißen Blitzer“. Beschnitt wird grundsätzlich bei Druckdateien angewendet und bewegt sich im Bereich 1 bis 4 mm an jeder Seite. Bsp. Anschnitt : 3 mm

Das PDF als Druckvorlage

Das druckfähige PDF ist nach den Vorgaben für die Druckproduktion zu erstellen.

In der Vorbereitung sollten folgende Punkte überprüft werden:

Alle Elemente sind im Farbmodus CMYK

Eventuell enthaltene Volltonfarben wurden in CMYK konvertiert

Schriften sind entweder in Pfade konvertiert oder können ins PDF eingebettet werden

Die enthaltenen Grafiken haben eine Auflösung von mindestens 300 dpi

Die Größe der kompletten Datei entspricht den Formatangaben der gewünschten Anzeige

Nicht zu vergessen die Beschnittzugabe, für die das Motiv an allen Seiten 3 mm über das gewünschte Format laufen muss.

Anmerkung

Ein PDF angelegt im Format DIN A5 kann nicht als DIN A4 Anzeige verwendet werden – auch wenn die Proportionen entsprechen - da in diesem Fall die enthaltenen Pixelgrafiken unscharf gedruckt werden.

Schriften in Pfade konvertieren

Um eine Schrift abzubilden muss die jeweilige Schrift (der Schriftfint) im System der Druckerei installiert sein. Das ist nicht immer der Fall. Um Änderungen in der Darstellung zu 100 % zu vermeiden kann man Schriften in Pfade umwandeln. Die Schrift ist danach ein Bild aus Vektoren und kein veränderbarer Text mehr.

Endformat A4 (210x297+3mm)

Schnittmarken

Satzspiegel Anschnitt

Grafikprogramme – Welches Programm zu welchen

Zweck

Adobe Photoshop

Bildbearbeitung und Compositing

Adobe Photoshop ist ein Bildbearbeitungsprogramm für Pixelgrafiken. Es beinhaltet ein Ebenen-basiertes Bearbeitungssystem, Automatisierungsfunktionen und unterstützt

Transparenzen. Sie können Fotos anpassen, beschneiden, retuschieren, unerwünschte

Objekte aus Bildern entfernen und alte Fotos restaurieren.

Adobe InDesign

Layouts für Print- und digitale Publikationen

InDesign ist ein professionelles Layout- und Satzprogramm für das Destop-Publishing.

Das Programm unterstützt Vektorbearbeitung, Tabellen-, Zellen- und Objektformate, Transparenzen, Zeichen- und Absatzattribute, Typografie sowie Ecken- und Überlagerungseffekte.

Hier können in Photoshop erstellte Bildelemente integriert und mit Schriften und Vektorgrafiken zu einem Gesamtobjekt kombiniert werden. InDesign eignet sich daher ebenfalls sehr gut für einseitige Print-Publikationen, wie z.B. Anzeigen.

Adobe Illustrator

Vektorgrafik und Illustration

Adobe Illustrator ist ein Werkzeug für Vektorgrafiken. Erstellen Sie Logos, Symbole, Skizzen, typografische Elemente und andere Illustrationen für Print und Web.

Photoshop vs. InDesign

Mit allen drei Programmen ist es jeweils auch möglich eine Druckvorlage für eine Anzeige für die Printproduktion zu erstellen - oder Banner und Grafiken für Webseiten zu kreieren. Aber mit Einschränkungen. Alle drei Programme sind auf einen bestimmten Bereich spezialisiert. Sollten alle drei Programme zur Verfügung stehen, ist eine Kombination aus allen ideal. Photoshop zur Bildbearbeitung, Illustrator für Vektorgrafiken und InDesign um alle Elemente zu kombinieren. Soll nur eine Programm zum Einsatz kommen empfiehlt sich Photoshop als Bildbearbeitungsprogramm.

Was ist interpolieren?

Interpolieren ist die zusätzliche Berechnung von Bildpunkten zwischen anderen Bildpunkten zur Erhöhung oder Verkleinerung der Auflösung von Grafiken. Führt aber bei Vergrößerungen meist zu Unschärfen.

Es gibt eine Vielzahl an Grafikprogrammen. Die hier genannten sind allerdings in der Druckvererbeitenden Branche führend und werden daher hier verglichen.

Media Solutions