วิธีการแยก PNG จากไฟล์ Adobe Illustrator

กราฟิก / นักออกแบบเว็บไซต์ของฉันทำให้ฉันมีไฟล์ Adobe Illustrator ของเว็บไซต์ของฉัน เธอบอกว่ามันจะง่ายกว่าที่จะดึงภาพออกมาเป็น PNGs ดังนั้นฉันจึงสามารถใช้มันใน HTML ของฉันได้ แต่ฉันไม่สามารถเข้าใจได้ง่ายเกินไป

ภาพดูเหมือนจะเป็นภาพวาดเวกเตอร์จำนวนมาก ฉันสามารถแยกพวกมันออกจากงานศิลปะโดยรอบและเลือกชิ้นส่วนทั้งหมดได้ แต่ฉันจะบันทึกสิ่งที่เลือกเป็นไฟล์ PNG ได้อย่างไร

Btw: ฉันใช้ Adobe Illustrator CS6

1. เลือกสิ่งที่คุณต้องการ
2. Ctrl+ G(เลือกกลุ่ม)
3. Ctrl+ C(คัดลอก)
4. Ctrl+ N(ไฟล์ใหม่)
5. Ctrl+ V(วาง)
6. ไฟล์> บันทึกสำหรับเว็บ & อุปกรณ์จากนั้นสลับเป็น. JPGเป็น . PNGจากนั้นคุณต้องการยกเลิกการเลือกที่ด้านล่างสุดภายใต้ตัวเลือก. PNGที่มีข้อความระบุว่า "Clip to Artboard"

คุณสามารถทำได้เร็วขึ้นด้วยสคริปต์ ฉันเพิ่งสร้าง js-script นี้สำหรับ Illustrator CS4 ฉันหวังว่า 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();
  

ทำงานได้ดีสำหรับฉันและฉันไม่มีข้อผิดพลาด (อีก) จนถึงขณะนี้ แต่การสำรองข้อมูลไม่สามารถทำร้ายได้

ใช้เครื่องมือ Slice

สร้างชิ้นโดยใช้เครื่องมือจากนั้นใช้กล่องโต้ตอบไฟล์ -> บันทึกสำหรับเว็บ ... (Ctrl-Shift-Alt S, Command-Shift-Alt S) เพื่อส่งออกชิ้นส่วน ในกล่องโต้ตอบคลิกสองครั้งที่ชิ้นที่คุณสร้างขึ้นให้พวกเขามีชื่อไฟล์ที่เหมาะสม

ตรวจสอบให้แน่ใจว่าได้เลือก Export-> User Slice ไว้แล้วคลิกบันทึก เลือกไดเรกทอรี (ฉันต้องการใช้โฟลเดอร์ 'ลบ' สำหรับเอาท์พุทส่งออกใด ๆ ) Illustrator จะสร้างไดเรกทอรีที่เรียกว่า 'images' ในโฟลเดอร์นั้นและจะมีส่วนที่คุณกำหนดในรูปแบบที่คุณเลือกในบันทึก สำหรับหน้าจอเว็บ

บันทึกสำหรับเว็บและตรวจสอบให้แน่ใจว่าไม่ได้เลือก "Clip to Artboard" นั่นจะเป็นการหลอกลวงสำหรับ Adobe CC ฉันไม่แน่ใจว่า CS6 มีฟังก์ชั่นนี้หรือไม่

ใช้คำสั่งนี้ Ctrl + Shift + Alt + S