Screenshots mit Photoshop und Illustrator: The fast and the furious

Bei Online­hil­fe oder mehr­spra­chi­gen Web­sites kommt häu­fi­ger vor, dass Bil­der nicht nur mit Text (bei­spiels­wei­se Num­mern) ver­se­hen wer­den müs­sen, son­der auch in meh­re­ren Spra­chen iden­tisch aus­se­hen sol­len. Klingt nach Mühe und viel Arbeit? Nicht, wenn man weiß, wie’s schnel­ler geht.

Neh­men wir das Bei­spiel einer Online­hil­fe. Dar­in sol­len Menüs abge­bil­det wer­den, in denen der Benut­zer auf bestimm­te Stel­len hin­ge­wie­sen wer­den soll. Bei­spiels­wei­se But­tons. Und jetzt kommt Trick Num­mer 1:

1. Im Datei­sys­tem für jede Spra­che einen Ord­ner anle­gen.
2. Den Screen­shot in der Quell­spra­che erstel­len.
3. Das Bild im Datei­sys­tem in dem Ord­ner für die jewei­li­ge Spra­che able­gen.
4. Das Bild in Illus­tra­tor plat­zie­ren. Es wird eine Ver­knüp­fung erstellt in den Sprach­ord­ner.
5. Die Illus­tra­tor-Datei eine Ord­ner­ebe­ne höher able­gen und den Text in der Gra­fik in einer neu­en Ebe­ne anle­gen (mit Pfei­len oder Lini­en, sie­he Bei­spiel unten).
6. Das Bild als PNG in den sprach­be­zo­ge­nen Gra­fik­ord­ner expor­tie­ren – am bes­ten unter einem neu­en Namen.
7. Spra­che wech­seln, den glei­chen Screen­shot erstel­len und im ent­spre­chen­den Ord­ner able­gen.
8. Die Illus­tra­tor-Datei öff­nen und eine neue Ebe­ne anle­gen unter­halb der Text­ebe­ne.
9. Den zwei­ten Screen­shot plat­zie­ren. Da die Text­ebe­ne höher liegt, wer­den die glei­chen Stel­len wie im ers­ten Screen­shot ange­zeigt.
10. Das Bild wie­der als PNG spei­chern – dies­mal mit dem glei­chen Namen im dazu gehö­ren­den Sprach­ord­ner.

Das lässt sich jetzt für alle iden­ti­schen Screen­shots wie­der­ho­len. Die Arbeit mit der Text­ebe­ne hat man nur ein­mal.

Und wo bleibt Pho­to­shop?

Es geht aber noch einen Tritt schnel­ler: Falls Sie im Screen­shot Ein­trä­ge (bei­spiels­wei­se Text­fel­der) ange­legt haben, die Sie nicht in jeder Spra­che wie­der­ho­len möch­ten, benö­ti­gen Sie Pho­to­shop.

1. Die Ein­trä­ge in der Quell­spra­che anle­gen.
2. Den Screen­shot in der Quell­spra­che erstel­len
3. Die Text­fel­der mit Pho­to­shop aus­schnei­den und an der glei­chen Stel­le in einer neu­en Ebe­ne plat­zie­ren („Pas­te in place“).
4. Das Bild als Pho­to­shop-Datei in der Ebe­ne höher als die Sprach­ord­ner spei­chern und in Illus­tra­tor plat­zie­ren.
5. Neu­en Ebe­ne anle­gen und mit Num­mern und Text fül­len.
6. Das Bild wie­der in den ent­spre­chen­den Ord­ner als PNG expor­tie­ren.
7. Spra­che wech­seln, glei­chen (lee­ren) Screen­shot erstel­len.
8. Pho­to­shop-Datei öff­nen, neu­en Screen­shot unter­halb der aus­ge­schnit­te­nen Fel­der ein­set­zen. – Jetzt sind die Text­fel­der plötz­lich gefüllt.
9. Spei­chern und mit Illus­tra­tor öff­nen. Durch die Ver­knüp­fung erkennt Illus­tra­tor, die Ände­run­gen in der Pho­to­shop-Datei und aktua­li­siert die Ansicht auto­ma­tisch.
10. Und wie­der able­gen als PNG im jewei­li­gen Sprach­ord­ner.

Fazit: Durch die Kom­bi­na­ti­on aus Ebe­nen und Ver­knüp­fun­gen las­sen sich mit wenig Auf­wand iden­ti­sche Screen­shots in meh­re­ren Spra­chen erstel­len. Und falls die Screen­shots aktua­li­siert wer­den müs­sen: Das schreckt jetzt auch nicht mehr.