So extrahieren Sie PNGs aus einer Adobe Illustrator-Datei

Mein Grafik-/Webdesigner hat mir eine Adobe Illustrator-Datei meiner Website hinterlassen. Sie sagte, es wäre einfach, die Bilder als PNGs zu extrahieren, damit ich sie in meinem HTML verwenden kann. Aber ich kann das nicht so einfach herausfinden.

Die Bilder scheinen viele Vektorzeichnungen zu sein. Ich kann sie von der umgebenden Kunst trennen und alle Stücke auswählen. Aber wie speichere ich diese Auswahl dann als PNG-Datei?

Übrigens: Ich verwende Adobe Illustrator CS6.

Wenn Sie mit Illustrator nicht vertraut sind, sollten Sie wirklich zum Designer zurückkehren und um die Lieferung von Artikeln bitten, die Sie verwenden können.
@Scott - sie ist extrem temperamentvoll und fühlt sich nicht bereit, mit jemandem zusammenzuarbeiten, der PNGs anstelle einer Illustrator-Datei benötigt. Ich würde lieber jemand anderen beauftragen, die Bilder für mich zu extrahieren, als sie erneut zu beauftragen. Hoffentlich ist es wirklich so einfach, wie sie vorgeschlagen hat, und ich kann das schnell selbst machen.
Ich verwende keinen Illustrator, daher kenne ich den besten Ansatz nicht. Aber wenn ich Vektorebenen daraus extrahieren müsste, würde ich sie wahrscheinlich kopieren und in ein anderes Programm (Feuerwerk, Photoshop) einfügen und "Für Web speichern" verwenden.
Das ist seltsam, hat Ihr Vertrag nicht angegeben, in welchem ​​​​Format Sie die Assets haben möchten? Oder zumindest den Verwendungszweck angeben. In diesem Fall könnte argumentiert werden, dass sein Teil des Vertrages in anderen Fällen nicht so einfach ist. Wenn Sie nach Print-Assets gefragt haben, ist es nicht wirklich überraschend, dass Sie keine PNG-Bilder erhalten.

Antworten (5)

  1. Wählen Sie aus, was Sie möchten
  2. Ctrl+ G(Gruppenauswahl)
  3. Ctrl+ C(Kopieren)
  4. Ctrl+ N(Neue Datei)
  5. Ctrl+ V(Einfügen)
  6. Datei > Für Web und Geräte speichern, dann auf der rechten Seite .JPG in .PNG umschalten , dann möchten Sie auch ganz unten unter den .PNG- Optionen deaktivieren, wo es heißt "Clip to Artboard"
Irgendwie mühsam, ich muss die genaue Auflösung kennen oder die neue Datei zuschneiden. Aber sonst genau das was ich suche. Wie beschneide ich?
Eigentlich scheint es nicht einfach zu sein. Gibt es keine Möglichkeit, in Illustrator zuzuschneiden. Alles oben ist großartig, außer Schritt 6. Wenn ich die Datei speichere, bekomme ich den Leerraum (der zumindest transparent ist) um das Objekt herum, das ich zu speichern versuche. Ich kann die Pixel nicht einfach erraten, bevor ich eine neue Datei erstelle (gibt es einen einfachen Weg?).
Ich habe die Breite und Höhe einer Auswahl gefunden und kann eine neue Datei dieser Größe erstellen. Das eingefügte Design ist nicht genau auf dieser neuen Leinwand zentriert, aber nahe genug, dass ich es leicht bewegen kann, denke ich.
Die Antwort wurde bearbeitet, um zu erklären, wie das Zuschneiden einfach durchgeführt werden kann. Lassen Sie mich wissen, ob das es für Sie löst.
Für einen Nicht-Illustrator-Benutzer ist dies wahrscheinlich die beste Lösung. Und ich stimme dem vorherigen Kommentar zu, dass Sie einen anderen Designer finden sollten, der bereit ist, Ihnen Dateien zu schicken, mit denen Sie tatsächlich arbeiten können.
es befindet sich im Menü unter Objekt > Zeichenfläche > An Grafikgrenzen anpassen

Mit Scripting geht das schneller. Ich habe gerade dieses js-Skript für Illustrator CS4 erstellt. Ich hoffe, CS6 kann es auch ausführen.

  1. Kopieren Sie den folgenden Code in eine neue Datei mit der Erweiterung ".jsx", speichern Sie sie.
  2. Wählen Sie nun in AI aus, was exportiert werden soll (nur ein Element auf einmal; bei Bedarf mehrere gruppieren)
  3. Führen Sie das Skript aus (per Drag-and-Drop oder Datei/Skripte/Anderes Skript...)
  4. Fertig - Exportierte Bilder wurden in dem Ordner gespeichert, in dem sich die AI-Datei befindet.

HINWEIS:

  • Position des exportierten Objekts wird gerundet! Seien Sie also vorsichtig beim Speichern
  • funktioniert auch für png24... ersetzen Sie einfach PNG8 durch PNG24

    function exportFileToPNG(dest, artBoardIndex)
    {
        var exportOptions = new ExportOptionsPNG8(); // or ExportOptionsPNG24
        var type = ExportType.PNG8; // or ExportType.PNG24
        var file = new File(dest + ".png");
    
        exportOptions.artBoardClipping = true;
        exportOptions.antiAliasing = true;
        exportOptions.transparency = true;
        exportOptions.qualitySetting = 72;
        exportOptions.saveMultipleArtboards = false;
        exportOptions.artboardRange = "" + artBoardIndex;
        app.activeDocument.exportFile( file, type, exportOptions );
    }
    
    function execute()
    {
        if (app.documents.length == 0)
        {
            alert('No document open', 'Error');
            return;
        }
    
        if (app.activeDocument.selection.length == 0)
        {
            alert('Nothing selected', 'Error');
            return;
        }
    
        var selectedStuff = app.activeDocument.selection[0];
    
        // snap position to pixels
        selectedStuff.position = [ Math.round(selectedStuff.position[0]), Math.round(selectedStuff.position[1]) ];
    
        // create temporary artboad for exporting
        var docRef = app.activeDocument;
        var rect = selectedStuff.visibleBounds;
    
        try
        {
            docRef.artboards.add(rect);
        }
        catch(e)
        {
            alert('Could not create Artboard as step of export.', 'Failure');
            return;
        }
    
        // determine destination
        var destFolder = docRef.path;
        if(destFolder == "")
            destFolder = Folder.selectDialog('Select the folder to export to:');
    
        if(destFolder)
        {
            try
            {
                exportFileToPNG(destFolder + "/" + docRef.name, docRef.artboards.length);
            }
            catch(e) {}
        }
    
        // delete temp-artboard
        docRef.artboards.remove(docRef.artboards.length - 1);
    }
    
    execute();
    

Funktioniert gut für mich und ich hatte bisher keine (mehr) Fehler. Aber ein Backup kann nicht schaden.

Woah! Funktioniert perfekt.
Der Code wurde zum einfacheren Herunterladen zusammengefasst: gist.github.com/koiyu/b53e3a186fb1158eb9b7 (NB: PNG8 in PNG24 geändert)

Verwenden Sie das Slice-Werkzeug.

Erstellen Sie Slices mit dem Werkzeug und verwenden Sie dann das Dialogfeld Datei->Für Web speichern... (Strg-Umschalt-Alt S, Befehl-Umschalt-Alt S), um die Slices zu exportieren. Doppelklicken Sie im Dialogfeld auf die Slices, die Sie erstellt haben, und geben Sie ihnen einen vernünftigen Dateinamen.

Stellen Sie sicher, dass Export->User Slices ausgewählt ist und klicken Sie auf Save. Wählen Sie ein Verzeichnis (ich verwende gerne einen „Scratch“-Ordner für jede Exportausgabe.) Illustrator erstellt in diesem Ordner ein Verzeichnis namens „images“ und darin befinden sich die Slices, die Sie in dem Format definiert haben, das Sie beim Speichern ausgewählt haben Für Web-Bildschirm.

Speichern Sie für das Web und vergewissern Sie sich, dass "Auf Zeichenfläche beschneiden" nicht ausgewählt ist. Das reicht für Adobe CC aus, ich bin mir nicht sicher, ob CS6 diese Funktion hat.

Verwenden Sie diesen Befehl Strg + Umschalt + Alt + S

Willkommen bei GD.SE! Dies würde das gesamte Bild speichern, nicht nur die ausgewählten Teile, oder?