Jak wyodrębnić PNG z pliku Adobe Illustrator


13

Mój grafik / projektant stron internetowych zostawił mi plik Adobe Illustrator mojej witryny. Powiedziała, że ​​łatwo będzie wyodrębnić obrazy jako pliki PNG, dzięki czemu będę mógł ich używać w swoim HTML. Ale nie mogę tego zbyt łatwo zrozumieć.

Obrazy wydają się być wieloma rysunkami wektorowymi. Mogę oddzielić je od otaczającej sztuki i wybrać wszystkie elementy. Ale jak zapisać ten wybór jako plik PNG?

Btw .: Korzystam z programu Adobe Illustrator CS6.


Jeśli nie znasz programu Illustrator, powinieneś naprawdę wrócić do projektanta i poprosić o dostarczenie przedmiotów, których możesz użyć.
Scott

@Scott - jest bardzo temperamentna i nie chce pracować z kimś, kto potrzebuje plików PNG zamiast pliku programu Illustrator. Wolę zatrudnić kogoś, kto wydobyłby dla mnie obrazy, niż zatrudnić ją ponownie. Mam nadzieję, że to naprawdę tak proste, jak zasugerowała, i mogę to zrobić sam szybko.
o.

Nie używam ilustratora, więc nie znam najlepszego podejścia. Ale gdybym musiał wyodrębnić z niego warstwy wektorowe, prawdopodobnie skopiowałbym je i wkleił w innym programie (fajerwerki, photoshop) i użyłbym polecenia „Zapisz dla Internetu”.
Yisela,

To dziwne, czy Twoja umowa nie określała, w jakim formacie chcesz aktywów? Lub przynajmniej określić zamierzone zastosowanie. W takim przypadku można argumentować, że jego część umowy w innych przypadkach nie jest tak prosta. Jeśli poprosiłeś o zasoby do drukowania, nic dziwnego, że nie dostaniesz obrazów PNG.
joojaa

Odpowiedzi:


18
  1. Wybierz, co chcesz
  2. Ctrl+ G(Wybór grupy)
  3. Ctrl+ C(Kopiuj)
  4. Ctrl+ N(Nowy plik)
  5. Ctrl+ V(Wklej)
  6. Plik> Zapisz dla Internetu i urządzeń, a następnie prawym przełącznikiem .JPG na .PNG , a następnie chcesz odznaczyć na samym dole pod opcjami .PNG, gdzie jest napisane „Klip do obszaru roboczego”

1
Coś w rodzaju bólu, muszę znać dokładną rozdzielczość lub wykadrować nowy plik. Ale poza tym dokładnie tego, czego szukam. Jak mogę przyciąć?
o.

W rzeczywistości nie wydaje się to łatwe. Czy nie ma możliwości przycinania w programie Illustrator. Wszystko powyżej jest świetne, z wyjątkiem kroku 6, jeśli zapiszę plik, dostaję spację (przynajmniej przezroczystą) wokół obiektu, który próbuję zapisać. Nie mogę łatwo odgadnąć pikseli przed utworzeniem nowego pliku (czy istnieje prosty sposób?).
o.

Znalazłem szerokość i wysokość zaznaczenia i mogę utworzyć nowy plik o tym rozmiarze. Wklejony projekt nie jest wyśrodkowany dokładnie na tym nowym płótnie, ale wydaje mi się, że jest wystarczająco blisko, aby łatwo go przenieść.
o.

Edytowałem odpowiedź, aby wyjaśnić, jak łatwo przycinać. Daj mi znać, jeśli to rozwiąże problem.
Ryan

2
jest w menu w Object> Artboard> Fit to Artwork Bounds
vahanpwns

5

Możesz to zrobić szybciej dzięki skryptom. Właśnie stworzyłem ten skrypt js dla programu Illustrator CS4. Mam nadzieję, że CS6 też to wykona.

  1. Skopiuj poniższy kod do nowego pliku z rozszerzeniem „.jsx”, zapisz go.
  2. Teraz w AI wybierz, co chcesz wyeksportować (tylko jeden element na raz; w razie potrzeby zgrupuj wiele)
  3. Uruchom skrypt (przeciągnij i upuść lub Plik / skrypty / Inny skrypt ...)
  4. Gotowe - wyeksportowane zdjęcia zostały zapisane w folderze, w którym znajduje się plik AI.

UWAGA:

  • pozycja eksportowanego obiektu zostanie zaokrąglona! Zachowaj więc ostrożność przy zapisywaniu
  • działa również dla png24 ... wystarczy zastąpić 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();
    

Działa dla mnie dobrze i do tej pory nie miałem (więcej) błędów. Ale tworzenie kopii zapasowych nie może zaszkodzić.


Łał! Działa idealnie.
Dennis G

Utworzono streszczenie kodu w celu łatwiejszego pobierania: gist.github.com/koiyu/b53e3a186fb1158eb9b7 (NB zmieniono PNG8 na PNG24)
Jari Keinänen

2

Użyj narzędzia Kromka.

Utwórz plasterki za pomocą narzędzia, a następnie użyj okna dialogowego Plik-> Zapisz dla Internetu ... (Ctrl-Shift-Alt S, Command-Shift-Alt S), aby wyeksportować plasterki. W oknie dialogowym kliknij dwukrotnie utworzone plasterki, nadając im odpowiednią nazwę pliku.

Upewnij się, że wybrano opcję Eksportuj> Fragmenty użytkownika i kliknij przycisk Zapisz. Wybierz katalog (lubię używać folderu „scratch” do dowolnego eksportu). Program Illustrator utworzy w tym folderze katalog o nazwie „images”, w którym znajdą się plasterki zdefiniowane w formacie wybranym w polu Zapisz Dla ekranu internetowego.


0

Zapisz dla Internetu i upewnij się, że opcja „Klip do obszaru roboczego” nie jest zaznaczona. To załatwi sprawę dla Adobe CC, nie jestem pewien, czy CS6 ma tę funkcję.


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.