Dokumente für den Druck vorbereiten

Print

Wenn es darum geht, Dokumente für den Druck vorzubereiten, sollte man von vornherein schon Einiges beachten. Natürlich kann man zunächst auch seiner kreativen Leidenschaft nachgehen, allerdings spart man sich durch gewisse Vorarbeiten späteres Korrigieren und damit pure Zeit.

Welche Software?

Zunächst stellt sich die Frage der adäquaten Software. Einfache Textverarbeitungsprogramme vermitteln zwar manchmal den Eindruck, man könnte mit ihnen ein druckfähiges PDF erstellen. Beim weiteren Arbeiten  kommt man dann aber doch ganz schnell an ihre Grenzen. Bei GoogleDrive’s integriertem Google Docs ist es beispielsweise gar nicht möglich, Bilder in CMYK einzubinden und verbietet sich eigentlich schon von selbst!

Drucksachen werden daher am besten mit professionellen Satzprogrammen wie InDesign oder, etwas antiquierter, mit QuarkXPress angelegt. Das Arbeiten mit solcher Software hat viele Vorteile und vereinfacht das Arbeiten enorm – wenn man sich etwas auskennt… Die Einstellmöglichkeiten sind vielfältig, hinzu kommen Fachtermini oder Spezialansichten, die Einsteiger und Neulinge oft erst mal überfordern.

Wie lege ich eine Druckdatei an?

Schon beim ersten Anlegen der Druckdatei sollte man wissen, ob man zusätzlich Beschnitt braucht oder nicht. Wer diesbezüglich unsicher ist, fragt bei der Druckerei nach. Heutzutage kann man oft schon auf der Homepage der Druckereien die Druckspezifikationen einsehen und seine Dokumente entsprechend anpassen. Nichts ist ärgerlicher, als kurz vor der Deadline das gesamte Dokument wegen ein paar Millimetern Beschnitt korrigieren zu müssen! Das gleiche gilt natürlich auch für Falzabstände bei Flyern oder für Sicherheitsabstände bei Rollups.

Welche Auflösung?

Oft diskutiert wird die Frage der richtigen Auflösung. Für die meisten Standard-Drucksachen werden 300 dpi benötigt. Besonders bei Fotos und Illustrationen steigt die Qualität des Drucks enorm, vor allem, wenn zusätzlich noch auf hochwertigem, veredelten Papier produziert wird (Hochglanz-Magazine).

Ganz anders sieht es bei großen Bannern aus: Umso größer das Format, umso weniger Auflösung. Bei Baugerüstbannern und bedruckten LKW-Planen  reichen in der Regel 150 dpi, aber auch an dieser Stelle hilft Euch die Druckerei Eures Vertrauens gerne weiter.

Je nach Umfang des Druckdokumentes lohnt der Einsatz von Masterseiten und Formatvorlagen, auf die man immer wieder zurückgreifen kann, sobald man sie einmal erstellt hat. Die Vorarbeit lohnt sich und bietet ein Höchstmaß an Genauigkeit und ein konsistentes Erscheinungsbild.

Welcher Farbmodus?

Wie im vorhergehenden Artikel bereits erwähnt, müssen für Printprodukte sämtliche Bilder und Fotos in CMYK vorliegen. Aber auch alle Farben, die im Dokument benutzt werden, sollten in CMYK (Vollton) angelegt sein.

Letzte Kontrolle

Ist das Dokument fertig und alle o.g. Punkte berücksichtigt, sollte man noch einmal alle Seiten sorgfältig kontrollieren:

  • Stimmen die Seitenzahlen (noch)?
  • Habe ich alle nicht benötigten Elemente und Farben gelöscht?
  • Bei mehreren Ebenen: Haben alle Ebenen die richtige Reihenfolge?
  • Habe ich die automatische Rechtschreibprüfung durchgeführt?

In InDesign gibt es die tolle Möglichkeit, sich unter „Verwendung“ alle eingefügten Bilder, Schriften und sonstige Medien anzeigen zu lassen, auch an der richtigen Stelle im Dokument. Solltet Ihr also während der Arbeit ein Bild modifiziert oder eine Schrift geändert haben, wird Euch das dort detailliert aufgelistet. Zusätzlich kann man dort Bildmaterial (erneut) mit dem Dokument verknüpfen oder auch bestimmte Schriften ausschließen.

Damit wäre das Dokument für’s Ausschießen und die anschließende PDF-Erstellung vorbereitet.

RGB oder CMYK?

Print, Webdesign

Kurz und knapp: RGB (Rot-Gelb-Blau) wird für die Darstellung von Farben am Monitor benutzt, während CMYK (Cyan-Magenta-Yellow-Black[=key]) für die Mischung von Farben beim Druck auf Papier benötigt wird.

Im Klartext heisst das, alle Online-Grafiken in RGB und alle Druck-Grafiken in CMYK umzuwandeln.

[Mehr Infos zum Thema „Druckvorbereitung“ folgen bald in einem eigenen  Artikel…]

Wie und wo kann man das überprüfen?

rgb-groesserBei Bildern und Fotos geht es ganz einfach über das Kontextmenü (Rechtsklick) der Maus: Unter „Informationen“ ist vermerkt, in welchem Format die Farbinformationen vorliegen.

Das Umwandeln geht mit den gängigen Bildbearbeitungsprogrammen sehr schnell. Wer z.B. mit Adobe Photoshop arbeitet, kann unter dem Tab „Bild“ den benötigten Farbraum unter „Modus“ auswählen.

Achtung: Lasst Euch nicht von Euren Augen täuschen und überprüft es immer (!), aber es macht einen riesengroßen Unterschied, ob man (fälschlicher Weise) CMYK bei der Ausgabe am Monitor benutzt oder Farbwerte beim Druck in RGB angegeben hat.

Am Monitor sind die Unterschiede in einigen Fällen vielleicht nur in Nuancen erkennbar, beim Druck wird falsches Farbmanagement oft zum reinen Glücksspiel und mitunter sehr häßlichen Farbabweichungen!

Breakpoints – was ist das?

Design, Webdesign

Kürzlich wurde ich  gefragt, was das denn sei: Breakpoints?
Das sind genau die Stellen, an denen sich das Layout einer responsiven Webseite ändert, antwortete ich. Sichtbar wird das, wenn man das Browserfenster in der Größe verändert und Elemente der Webseite an einer anderen Position erscheinen oder wenn aus Text-Links plötzlich kleine Icons werden.

Anschließend wurde ich gefragt, „welche Breakpoints“ ich denn genau kennen würde.
Gängige Praxis im Webdesign ist immer noch, dass man durch (möglichst viele) Media-Queries-Abfragen versucht, (möglichst viele) User an möglichst vielen Endgeräten zu erreichen und ihnen hierfür die jeweils optimierte Version anzubieten. Bei einigen Webdesignern führt diese Praxis zu bis zu 20 verschiedenen Abfragen!

Bei diesen Abfragen orientiert man sich an den unterschiedlichen Abmaßen, den Auflösungen und der Orientation (Hoch bzw. Querformat) von iPhone und iPad, kleineren Tablets anderer Anbieter, Laptops und internetfähigen TVs.
Im Klartext heißt das, mit Hilfe der Media-Queries verschiedene Versionen mit Breakpoints bei

  • 320 px,
  • 480 px,
  • 600 px,
  • 768 px,
  • 1024 px,
  • 1200 px und eventuell noch bei
  • 1750 px

zu erstellen. Jeder merkt schon beim Mitlesen: Das sind aber viele! Und trotzdem fehlen welche! Rein theoretisch kann nämlich jede beliebige Stelle im Layout ein Breakpoint sein und zusätzlich gibt es noch verschiedene Gestaltungsansätze à la „Mobile First“ oder „Content First“ bzw. „Graceful Degradation“ und „Progressive Enhancement“.

Fazit

Für mich persönlich ist und bleibt der Inhalt „König“ und nur dieser sollte maßgeblich bestimmen, wann und wo Breakpoints eingesetzt werden, wobei einige, zielgerichtete MQ-Abfragen erlaubt sein und ein flexibles Layout (in % oder em) angestrebt werden sollte. Einen sehr interessanten Ansatz hierzu verfolgt der Designer David Hellmann in seinem Beitrag „CSS Media Queries: Das Problem mit fixen Breakpoints„. Leider habe ich mich bisher noch nicht viel mit Sass/SCSS beschäftigt, bin nun aber echt „angefixt“: Da ich u.a. über PHP-Kenntnisse verfüge, bin ich natürlich von der Struktur und den Einsatzmöglichkeiten von Sass begeistert! Das wird sicherlich noch den künftigen Einsatz von HTML und CSS entscheidend erweitern und bereichern!

Was meint Ihr dazu? Wie arbeitet Ihr selber und was haltet Ihr von Davids Alternative, den CSS-Code direkt ans Element zu binden? Ich bin gespannt auf Eure Ideen und Gedanken!

Welche Anführungszeichen..?

Design, Typographie

anfuehrung_neu
Immer wieder hört man die Frage, wann man eigentlich genau welche Anführungszeichen benutzt, vor allem, wenn auch noch Fremdspachen im Spiel sind. Ich zeige Euch hier die verschiedenen Möglichkeiten und ihren genauen Einsatz.

In Deutschland gibt es drei gängige Varianten. Das erste Beispiel zeigt die typische, deutsche Anführung mit Gänsefüßchen, die unten beginnen und aussehen wie eine 99. Die Ausführungszeichen (ja, so heißt das richtig!) enden oben und sehen aus wie eine 66.
Im Allgemeinen ist diese Art der Kennzeichnung jedoch nicht so gut lesbar.

Neben der deutschen Anführung mit Gänsefüßchen benutzt man auch noch spitze Klammern, Guillemets genannt. Es gibt sie in 2 Versionen, nämlich mit der Spitze jeweils nach innen bzw. nach außen. In Deutschland benutzt man eher Guillemets mit der Spitze nach innen, so wie im 2. Beispielsatz.

Das dritte Beispiel zeigt den Einsatz von Anführungszeichen wie man sie in der Schweiz und Frankreich benutzt.

Und wann benutzt man Anführungszeichen, die am Anfang und am Ende oben sitzen?

In England und Irland zum Beispiel! Und in Indonesien wiederum ist der doppelte Strich als Anführung gar nicht üblich. Dort ist die einfache Anführung normal.

Hilfreiche Webdesign-Tools

Design, Webdesign

Heute möchte ich Euch eine Liste mit hilfreichen Webdesign-Tools präsentieren. Einige werdet Ihr davon sicherlich kennen, allerdings wollte ich sie mal gebündelt haben, um sie griffbereit abzuspeichern. Da es ausschließlich um Design-Tools zur Webseiten-Erstellung geht, lohnt sich für Euch vielleicht auch ein Blick in meine anderen Link-Empfehlungen?! Außerdem kennt Ihr bestimmt auch noch weitere coole Tools, also kommentiert bitte fleißig, damit sich die Liste auch wirklich lohnt!

W3C-Validierer

Auf den Seiten des W3C kann man probeweise den Code validieren lassen: Entweder gibt man den Code direkt ein (Copy & Paste) oder man überprüft gleich eine ganze URL, wie praktisch!

Umrechnungs-Tools

Gerade, wenn man responsive arbeiten möchte, muß man viele Längenangaben in em oder % angeben. Um die ganze Rechnerei zu erleichtern, gibt es auch da tolle Tools.

Grids

Wer ein Grid einfügt, ist meistens schön aus dem Schneider und muß fast nicht mehr selber rechnen..  🙂  Manche sind wirklich simpel und eignen sich deshalb hervorragend v.a. für responsive Webseiten.

Von wirklich anspruchsvollen, wie z.B. Bootstrap etc., würde ich Anfängern jedoch abraten. Sie sind enorm umfangreich und richten sich daher meist an Profis.

Frameworks

Die ultimative Unterstützung stellen wohl Frameworks dar, wo gleich mehrere Funktionen gebündelt zur Verfügung gestellt werden. An dieser Stelle möchte ich direkt  auf eine externe Liste verlinken:

Wie erstelle ich eine WP-Seite oder Blog?

Design, Webdesign, Wordpress
Technische Voraussetzungen

Natürlich muss dein Computer über allerlei Systemkomponenten verfügen, damit WordPress installiert werden kann, allerdings ist das bei fast allen neueren Computern der Fall. Ihr braucht auf jeden Fall einen Linux-Server mit Apache, PHP, MySQL usw.

Zusätzlich braucht Ihr einen FTP-Client, wie z.B. FileZilla, damit Ihr an den Dateien Einstellungen vornehmen könnt. Die genauen Details könnt Ihr natürlich bei WordPress selbst nachlesen.

Download

Wollt Ihr Eure WP-Installation auf Englisch haben, dann solltet Ihr sie am besten direkt von www.wordpress.org downloaden. Für eine deutsche WP-Installation könnt Ihr die Dateien auch von der deutschen WordPress-Seite runterladen. Für andere Sprachausgaben müsst Ihr die entsprechenden Sprachdateien auf jeden Fall zusätzlich runterladen.

Nach dem Download müsst Ihr Euch über FileZilla mit dem Server verbinden. Sollte sich auf dem Server schon eine Datei index.html befinden, sollte sie sofort gelöscht werden! Dann werden alle WP-Dateien auf den Server in das Verzeichnis .htdocs oder .html hochgeladen.

Konfiguration

Nun braucht Ihr einen Editor wie z.B. NotePad++, mit dem Ihr die Datei wp-config-sample.php öffnet. In dieser Datei müsst Ihr anschließend einige Platzhalter-Namen ersetzen:

Ihr braucht einen Namen für die Datenbank, ein Benutzername muss angegeben und ein sicheres Passwort angelegt werden. Etwas weiter unten in der Datei kommen die WP-Sicherheitsschlüssel, die Ihr Euch aber nicht merken müsst. Folgt einfach den Hinweisen in der Datei und generiert Euch neue Sicherheitsschlüssel, mit denen Ihr die alten einfach ersetzt.

Speichert alles ab und schließt den Editor. Wechselt ins lokale Verzeichnis und benennt die Datei wp-config-sample.php um in wp-config.php. Nun könnt Ihr die Datei auf den Server hochladen.

Installation

Die eigentliche Installation ist nur noch eine Kleinigkeit. Öffnet einen Browser und gebt Eure URL ein (einschließlich eventueller Unterverzeichnisse) mit der Angabe /wp-admin/install.php. Es öffnet sich dann ein Fenster, in dem Ihr den Blogtitel oder Namen der Webseite angeben könnt (kann man später auch noch ändern). Den Benutzernamen solltet Ihr aus Sicherheitsgründen ändern und ein sicheres Passwort anlegen. Auch Eure E-Mail-Adresse ist wichtig: Melden sich neue User an oder werden Beiträge kommentiert, werden auch diese Vorgänge an die E-Mail-Adresse gesendet.

Nun kann WordPress installiert werden.

Hoster mit vorinstallierten Anwendungen

Abhängig vom jeweiligen Hoster gibt es manchmal die Möglichkeit – wie in meinem Fall – dass bestimmte Anwendungen schon vorinstalliert sind, so: Einige bekannte CMS wie TYPO3, Joomla oder eben auch WordPress waren schon vorinstalliert und können bei Bedarf ganz schnell und einfach aktiviert werden. Innerhalb weniger Schritte waren eine Datenbank angelegt, Verzeichnisse erstellt, etc.

Daher solltet Ihr Euch vorher (!) genau bei dem Hoster Eures Vertrauens informieren.

Themes

Das hatte ich mir doch etwas leichter vorgestellt. Obwohl ich recht genau wusste, wie alles aussehen sollte, dauerte schon die Auswahl des Themes länger als erwartet. Kein Wunder – mittlerweile gibt es fast 2.800 zur Auswahl! Dank der Filter und Tags kann man zwar schon viele näher eingrenzen, allerdings sollte man sich vorher einige Gedanken machen:

  • Unumgänglich ist die Frage: Responsive oder nicht?
  • Gibt es einen Blog?
  • Soll ein Shop integriert werden?
  • Sollen Social-Media-Interaktionen ermöglicht werden?
  • Werden große Bildergalerien gebraucht?

…um nur ein paar zu nennen. Nachdem ich ein adäquates Theme gefunden hatte, war die Installation wirklich ein Klacks!

Warum WordPress..?!

Design, Webdesign, Wordpress

Erst durch meine Weiterbildungen wurde mir klar, wie häufig WordPress eingesetzt wird: Mittlerweile gibt es mehr als 60 Mio. WordPress-User weltweit, von allen genutzten CMS generell ist WP mit 66% der Marktführer! Die Bedienung ist in der Tat relativ leicht, PHP-Kenntnisse sind jedoch von Vorteil.

Mit mehr als 34.500 Plugins und fast 2.800 Themes lassen sich fast alle Wünsche bezüglich Funktionalität und Design erfüllen. Und außerdem – um nicht nur kostenlose Werbung für WordPress zu machen 😀 – brauchte meine persönliche Homepage dringend einen Relaunch!