So extrahieren Sie PNGs aus einer Adobe Illustrator-Datei

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

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

Übrigens: Ich verwende Adobe Illustrator CS6.

1. Wählen Sie aus, was Sie möchten
2. Ctrl+ G(Gruppenauswahl)
3. Ctrl+ C(Kopie)
4. Ctrl+ N(Neue Datei)
5. Ctrl+ V(Einfügen)
6. Datei> Für Web & Geräte speichern , dann rechts .JPG auf .PNG umschalten , dann das Häkchen ganz unten unter den .PNG- Optionen entfernen , dort steht "Clip to Artboard"

Mit Skripten können Sie dies schneller erledigen. 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" und speichern Sie sie.
2. Wählen Sie nun in AI aus, was exportiert werden soll (nur ein Element auf einmal; ggf. mehrere gruppieren)
3. Führen Sie das Skript aus (per Drag & Drop oder Datei / Skripte / Anderes Skript ...)
4. Fertig - Die exportierten Bilder wurden in dem Ordner gespeichert, in dem sich die AI-Datei befindet.

HINWEIS:

• Position des exportierten Objektes wird gerundet! Seien Sie also vorsichtig beim Speichern

• funktioniert auch für png24 ... einfach PNG8 durch PNG24 ersetzen

  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 einwandfrei bei mir und ich hatte bisher keine (mehr) Fehler. Aber das Sichern von Dingen kann nicht schaden.

Verwenden Sie das Slice-Tool.

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

Stellen Sie sicher, dass Exportieren-> Benutzer-Slices ausgewählt ist, und klicken Sie auf Speichern. Wählen Sie ein Verzeichnis aus (ich verwende für jede Exportausgabe gerne einen Arbeitsordner). Illustrator erstellt in diesem Ordner ein Verzeichnis mit dem Namen "images". Darin befinden sich die Slices, die Sie in dem Format definiert haben, das Sie beim Speichern ausgewählt haben Für den Web-Bildschirm.

Für das Web speichern und sicherstellen, dass "Clip to Artboard" nicht ausgewählt ist. Das wird den Trick für Adobe CC tun, ich bin nicht sicher, ob CS6 diese Funktion hat.

Verwenden Sie diesen Befehl Strg + Umschalt + Alt + S