Exportieren Sie mehrere Zeichenflächen in PNGs, die nach der Zeichenfläche ohne den vorangestellten Dateinamen benannt sind


7

Bei folgendem Setup:

Datei: SomeFilename.ai

Welche Zeichenflächen mit folgenden Namen enthält:

  1. Zeichenfläche_01
  2. Zeichenfläche_02
  3. Zeichenfläche_03

Im Moment, wenn ich die Zeichenflächen exportiere, besteht Illustrator darauf, den Dateinamen den Zeichenflächen voranzustellen. Die generierten Dateien würden also folgendermaßen lauten:

  1. SomeFilename_Artboard_01.png
  2. SomeFilename_Artboard_02.png
  3. SomeFilename_Artboard_02.png

Ich möchte, dass sie benannt werden:

  1. Artboard_01.png
  2. Artboard_02.png
  3. Artboard_02.png

Natürlich weiß ich, dass es eine Vielzahl von Optionen zum Batch-Umbenennen von Dateien gibt, aber dies passt nicht in meinen Workflow. Ich mache viel UI-Design (iOS oder CSS), bei dem eine große Anzahl von Grafiken in Illustrator erstellt und dann exportiert wird. Ich fotografiere oft schnell zwischen Xcode oder einem Browser und Illustrator, um Grafiken zu optimieren. Im Moment kann ich nicht einfach exportieren und neu erstellen / aktualisieren. Ich muss die Datei finden und umbenennen, bevor sie funktioniert. Dies ist ein großer Geschwindigkeitsschub.

Antworten:


5

Wenn Sie in Illustrator anstelle von Zeichenflächen Slices verwenden, können Sie genaue Dateinamen für den Export angeben. Richten Sie einfach eine große einzelne Zeichenfläche ein und fügen Sie alle Elemente hinzu, als würden Sie ein Sprite-Blatt erstellen. Verwenden Sie dann Save for Web, um alles in einem Durchgang zu exportieren.

Adobe Illustrator: Slices und Imagemaps

Einige andere Gründe, Scheiben über Zeichenflächen zu verwenden:

  • Slices rasten am Pixelraster ein. Zeichenflächen nicht.
  • Sie können nur 100 Zeichenflächen in einem Dokument haben. Slices haben diese Grenze nicht.

Zum Umbenennen von Dateien richte ich normalerweise Automator-Workflows ein. Sie können Automator-Workflows sogar pro Projekt einrichten, sodass das Umbenennen und Verschieben mit einem einzigen Klick oder sogar einer Ordneraktion erfolgen kann. In der Tat könnten Sie es wahrscheinlich als Build-Phase in Xcode hinzufügen?

Ich gehe davon aus, dass Sie Ihre @ 2x-Dateien trotzdem umbenennen müssen, es sei denn, Sie haben das Bildmaterial in Illustrator in beiden Größen?

Außerdem wäre ich etwas vorsichtig, wenn ich Illustrator für die UI-Entwurfsarbeit verwenden würde. Das Form-Antialiasing weist einige Probleme auf, und Farbverläufe können nicht gedithert werden. Dies bedeutet, dass Ihre Grafik einen erheblich niedrigeren Standard aufweisen kann, als wenn Sie sie in Photoshop oder Fireworks erstellt hätten.


Vielen Dank. Ich habe noch nie daran gedacht, Scheiben zu verwenden. Das ist wirklich interessant. Normalerweise überlagere ich Farbverläufe, sodass dies kein großes Problem darstellt. Wenn ich dies jedoch unbedingt tun muss, erstelle ich einen Farbverlauf in Ps und platziere ihn in Il. Ich habe keine Probleme mit Form-Anti-Aliasing bemerkt, außer gelegentlichen Störungen. Auf welche Themen beziehen Sie sich?
Undistraction

Streupixel und weniger als ideale Formen. Ich habe hier mehr darüber geschrieben: bjango.com/articles/illustratorandappdesign
Marc Edwards

1
Schöne Zusammenfassung. Wie deprimierend. Ich bin in Illustrator viel produktiver und die Arbeit mit Vektoren ist enorm flexibler. Ich frage mich, ob es einen anderen Workflow gibt. Vielleicht in Illustrator entwerfen, dann das Dokument in Photoshop platzieren und von dort rendern / exportieren.
Undistraction

Deprimierend in der Tat. Ich habe die streunenden Pixel in AI CC 2015.1.0 (v.19.1.0) beim Erstellen von Symbolen gesehen. Ich dachte, ich mache vielleicht etwas falsch; Ich wusste nicht, dass es sich um einen Rendering-Fehler handelt. Wir tendieren dazu, nur SVGs zu verwenden, aber ist es bis dahin möglich, diese Probleme zu vermeiden, indem Sie über Photoshop oder ähnliches nach PNG exportieren?
Jon Coombs

TIPP: Das Aktivieren der Pixelvorschau und das Ändern von Größen / Positionen dient der Übersichtlichkeit und kann auch die streunenden Pixel entfernen. Im Allgemeinen muss ich das Snap-to-Pixel-Raster ausschalten, um diese Art der Optimierung durchzuführen. Tatsächlich habe ich es größtenteils nicht mehr verwendet und mich stattdessen nur auf die Pixelvorschau verlassen.
Jon Coombs

6

Öffnen Sie zum Spaß unter Mac OS das Terminal

cd folder

Tipps: Sie können den Terminalordner in das Terminalfenster ziehen

ls

Datei auflisten und prüfen, ob es der richtige Ort ist

for f in *.png; do  mv "$f" "${f/SomeFilename_/}"; done

schau in Finder


Einer, der ein so oft benötigtes Bash-Skript bereitstellt, obwohl das OP nach etwas anderem gefragt hat. Schön, dies als Referenz zu behalten. Einige Grafikdesigner sind Geeks und einige Geeks sind Grafikdesigner. :)
Ideogramm


2

Warum benennen Sie nicht einfach alle Dateien im Ordner mithilfe der Eingabeaufforderung um, nachdem Sie Ihre PNGs gespeichert haben?

ren "Prefix_*.png" "///////*.png

Beachten Sie, dass Sie so viele "/" eingeben müssen, wie Ihr Präfix Zeichen enthält (einschließlich Unterstrich).

Hinweis: Dieser Befehl kann unter Windows an der Eingabeaufforderung ausgeführt werden.

Subnote: Ich weiß, dass dies mehrmals beantwortet wurde. Ich füge nur diese Antwort hinzu, damit andere diesen supereinfachen Befehl verwenden können, anstatt komplizierte cmd-Skripte oder Batch-Dateien zu verwenden.


Dies ist eine schöne schnelle Problemumgehung für Windows-Benutzer. Sobald es dort ist, ist ein Doppelklick auf eine BAT-Datei wirklich nicht zeitaufwändig.
Jon Coombs

Kleinere Änderungen: Ich habe meine Datei trim4chars.bat benannt und sie mit drei beliebigen Zeichen übereinstimmen lassen, gefolgt von einem Unterstrich. ren "???_*.png" "////*.png" . Ich habe auch eine weitere Zeile für meine Situation hinzugefügt. ren "???_*.svg" "////*.svg"
Jon Coombs

0

Sie haben Bridge, wenn Sie Illustrator haben. Batch Rename ist in Bridge integriert und erledigt diese Aufgabe ganz einfach für Sie, nachdem Sie die Zeichenflächen exportiert haben.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.