如何从 Adob​​e Illustrator 文件中提取 PNG

平面设计 adobe-illustrator 向量 PNG 切片 cs6
2022-01-21 00:37:22

我的图形/网页设计师给我留下了我网站的 Adob​​e Illustrator 文件。她说很容易将图像提取为 PNG,这样我就可以在我的 HTML 中使用它们。但我不能很容易地弄清楚这一点。

这些图像似乎是许多矢量图。我可以将它们与周围的艺术品分开并选择所有的作品。但是,如何将该选择保存为 PNG 文件?

顺便说一句:我正在使用 Adob​​e Illustrator CS6。

4个回答
  1. 选择你想要的
  2. Ctrl+ G(组选择)
  3. Ctrl+ C(复制)
  4. Ctrl+ N(新文件)
  5. Ctrl+ V(粘贴)
  6. File > Save for Web & Devices然后在右侧将.JPG切换为.PNG,然后您还想取消选中.PNG选项下最底部的“剪辑到画板”

您可以使用脚本更快地做到这一点。我刚刚为 Illustrator CS4 创建了这个 js 脚本。我希望,CS6 也可以执行它。

  1. 将下面的代码复制到扩展名为“.jsx”的新文件中,保存。
  2. 现在在 AI 中,选择要导出的内容(一次只能导出一个元素;如果需要,可以组合多个元素)
  3. 执行脚本(通过拖放或文件/脚本/其他脚本...)
  4. 完成 - 导出的图片已保存到 ai 文件所在的文件夹中。

笔记:

  • 导出对象的位置将被四舍五入!所以保存的时候要小心
  • 也适用于 png24... 只需将 PNG8 替换为 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();
    

对我来说效果很好,到目前为止我没有(更多)错误。但是备份事情不会受到伤害。

使用切片工具。

使用该工具创建切片,然后使用 File->Save for Web... 对话框(Ctrl-Shift-Alt S、Command-Shift-Alt S)导出切片。在对话框中双击您创建的切片,给它们一个合理的文件名。

确保选择了 Export->User Slices,然后单击 Save。选择一个目录(我喜欢对任何导出输出使用“scratch”文件夹。)Illustrator 将在该文件夹中创建一个名为“images”的目录,其中将包含您以您在保存中选择的格式定义的切片对于网页屏幕。

保存为网络并确保未选择“剪辑到画板”。这对 Adob​​e CC 有用,我不确定 CS6 是否有这个功能。