Screenshots mit Photoshop und Illustrator: The fast and the furious

Bei Onlinehilfe oder mehrsprachigen Websites kommt häufiger vor, dass Bilder nicht nur mit Text (beispielsweise Nummern) versehen werden müssen, sonder auch in mehreren Sprachen identisch aussehen sollen. Klingt nach Mühe und viel Arbeit? Nicht, wenn man weiß, wie’s schneller geht.

Nehmen wir das Beispiel einer Onlinehilfe. Darin sollen Menüs abgebildet werden, in denen der Benutzer auf bestimmte Stellen hingewiesen werden soll. Beispielsweise Buttons. Und jetzt kommt Trick Nummer 1:

1. Im Dateisystem für jede Sprache einen Ordner anlegen.
2. Den Screenshot in der Quellsprache erstellen.
3. Das Bild im Dateisystem in dem Ordner für die jeweilige Sprache ablegen.
4. Das Bild in Illustrator platzieren. Es wird eine Verknüpfung erstellt in den Sprachordner.
5. Die Illustrator-Datei eine Ordnerebene höher ablegen und den Text in der Grafik in einer neuen Ebene anlegen (mit Pfeilen oder Linien, siehe Beispiel unten).
6. Das Bild als PNG in den sprachbezogenen Grafikordner exportieren – am besten unter einem neuen Namen.
7. Sprache wechseln, den gleichen Screenshot erstellen und im entsprechenden Ordner ablegen.
8. Die Illustrator-Datei öffnen und eine neue Ebene anlegen unterhalb der Textebene.
9. Den zweiten Screenshot platzieren. Da die Textebene höher liegt, werden die gleichen Stellen wie im ersten Screenshot angezeigt.
10. Das Bild wieder als PNG speichern – diesmal mit dem gleichen Namen im dazu gehörenden Sprachordner.

Das lässt sich jetzt für alle identischen Screenshots wiederholen. Die Arbeit mit der Textebene hat man nur einmal.

Und wo bleibt Photoshop?

Es geht aber noch einen Tritt schneller: Falls Sie im Screenshot Einträge (beispielsweise Textfelder) angelegt haben, die Sie nicht in jeder Sprache wiederholen möchten, benötigen Sie Photoshop.

1. Die Einträge in der Quellsprache anlegen.
2. Den Screenshot in der Quellsprache erstellen
3. Die Textfelder mit Photoshop ausschneiden und an der gleichen Stelle in einer neuen Ebene platzieren („Paste in place“).
4. Das Bild als Photoshop-Datei in der Ebene höher als die Sprachordner speichern und in Illustrator platzieren.
5. Neuen Ebene anlegen und mit Nummern und Text füllen.
6. Das Bild wieder in den entsprechenden Ordner als PNG exportieren.
7. Sprache wechseln, gleichen (leeren) Screenshot erstellen.
8. Photoshop-Datei öffnen, neuen Screenshot unterhalb der ausgeschnittenen Felder einsetzen. — Jetzt sind die Textfelder plötzlich gefüllt.
9. Speichern und mit Illustrator öffnen. Durch die Verknüpfung erkennt Illustrator, die Änderungen in der Photoshop-Datei und aktualisiert die Ansicht automatisch.
10. Und wieder ablegen als PNG im jeweiligen Sprachordner.

Fazit: Durch die Kombination aus Ebenen und Verknüpfungen lassen sich mit wenig Aufwand identische Screenshots in mehreren Sprachen erstellen. Und falls die Screenshots aktualisiert werden müssen: Das schreckt jetzt auch nicht mehr.