PSD เป็น SVG โดยไม่เสียเลเยอร์: อะไรคงอยู่ได้

คุณแปลงทุกเลเยอร์ Photoshop เป็นเลเยอร์ SVG ที่เทียบเท่าไม่ได้ PSD ผสมเลเยอร์รูปทรง ข้อความแก้ไขได้ มาสก์ เอฟเฟกต์ Smart Objects และพิกเซลทั่วไปได้ SVG แทนพาธ ข้อความ กลุ่ม และภาพได้ แต่วัตถุเหล่านั้นไม่ตรงกับโมเดลเอกสาร Photoshop อย่างเรียบร้อย เวิร์กโฟลว์ปลอดภัยที่สุดคือรักษาเนื้อหาเวกเตอร์ด้วยการส่งออกจากโปรแกรม แล้วแกะรอยเฉพาะงานแรสเตอร์ที่ไม่มีต้นฉบับเวกเตอร์นำกลับใช้ได้

ตัดสินใจอย่างรวดเร็ว

• หาก PSD มีพาธรูปทรงสะอาดอยู่แล้ว ให้รักษาหรือย้ายไปโปรแกรมเวกเตอร์
• เก็บข้อความเป็นข้อความที่แก้ไขได้เฉพาะเมื่อปลายทางมีฟอนต์และจัดการข้อความ SVG เชื่อถือได้ ไม่เช่นนั้นแปลงสำเนาส่งงานเป็นเส้นรอบรูป
• มองมาสก์ เอฟเฟกต์ Smart Objects และเลเยอร์พิกเซลเป็นรูปลักษณ์ที่เห็น ไม่ใช่โครงสร้างเลเยอร์ที่ย้ายข้ามได้
• หากต้องการเพียงงานรวมเป็นรูปทรงแก้ไขได้ ให้ตรวจภาพรวมที่บันทึกแล้วแกะรอย
• เปิด SVG สุดท้ายและตรวจวัตถุ นามสกุล .svg ไม่พิสูจน์ว่าเลเยอร์คงอยู่หรือพิกเซลกลายเป็นพาธ

เลเยอร์ PSD ไม่ใช่เลเยอร์ SVG

แผง Layers ของ Photoshop อธิบายวิธีแก้ไขเอกสาร SVG อธิบายสิ่งที่ตัวแสดงผลวาด เป็นคนละหน้าที่

เวิร์กโฟลว์ Image Assets ปัจจุบันของ Adobe สร้างไฟล์ SVG จากเลเยอร์หรือกลุ่มที่ตั้งชื่อได้ เอกสารเดียวกันระบุว่าไฟล์จากกลุ่มเลเยอร์จะรวมเป็นภาพแบน แม้กลุ่มมีรูปทรงและข้อความที่แก้ไขได้ กล่าวคือ การเลือก SVG ไม่ได้เปลี่ยนลำดับชั้น Photoshop เป็นลำดับชั้น SVG เทียบเท่า

สำรวจไฟล์ก่อนแปลง

ทำสำเนา PSD ก่อนเปลี่ยนอะไร แล้วตรวจแผง Layers, Paths, Properties และ Smart Objects

1. ซ่อนเลเยอร์พิกเซล หากงานที่มีประโยชน์ยังอยู่ คุณอาจมีรูปทรงเวกเตอร์ที่ควรรักษาแล้ว
2. เลือกเลเยอร์ข้อความแต่ละชั้น จดตระกูลฟอนต์และน้ำหนักก่อนแปลงเป็นเส้นรอบรูปหรือย้าย
3. เปิด Smart Objects ไฟล์ Illustrator ลิงก์หรือต้นฉบับเวกเตอร์อื่นดีกว่าการแกะรอยตัวอย่างเรนเดอร์
4. เปิดปิดมาสก์และเอฟเฟกต์ ตัดสินว่าโครงสร้างแก้ไขสำคัญหรือเพียงรูปลักษณ์สุดท้าย
5. ตรวจภาพรวมที่บันทึก หากไฟล์เปิดบนเครื่องอื่นแล้วต่าง ให้บันทึกสำเนาที่ตรวจยืนยันใหม่ก่อนใช้เวิร์กโฟลว์รวมภาพ

Adobe อธิบายส่งออกเลเยอร์ที่เลือกเป็นไฟล์แยก ด้วย การส่งแยกรักษาขอบเขตระหว่างไฟล์ที่มีประโยชน์ได้ แต่ยังไม่ได้สร้าง SVG เดียวที่ทำงานเหมือนกองเลเยอร์ PSD เดิม

เลือกแนวทางตามชนิดวัตถุ

แนวทางที่ 1: รักษาเนื้อหาเวกเตอร์

ใช้กับเลเยอร์รูปทรง พาธปากกา ข้อความเรียบง่ายที่แก้ไขได้ และ Smart Objects ที่ยังมีต้นฉบับเวกเตอร์

ย้ายหรือส่งออกองค์ประกอบงานทีละชิ้น แล้วเปิดใน Illustrator, Inkscape หรือโปรแกรม SVG อื่น ตรวจว่ามีพาธและกลุ่มแทนภาพสี่เหลี่ยมหนึ่งชิ้น หากข้อความต้องยังแก้ไขได้ ให้เปิด SVG บนเครื่องอื่นที่ไม่มีเอกสาร Photoshop ของคุณ และยืนยันว่าฟอนต์ที่ต้องการโหลด สำหรับโลโก้และไฟล์ผลิต เก็บไฟล์หลักข้อความแก้ไขได้และทำสำเนาส่งงานเป็นเส้นรอบรูป

อย่ารวมต้นฉบับเวกเตอร์ดีเป็นภาพแบนเพียงเพื่อนำไปแกะรอย การแกะรอยวาดรูปลักษณ์ที่เรนเดอร์ใหม่ จึงอาจเพิ่มโหนด เปลี่ยนเส้นโค้ง และเปลี่ยนข้อความเป็นเส้นรอบรูปประมาณ รูปทรงต้นฉบับเป็นจุดเริ่มต้นสะอาดกว่า

แนวทางที่ 2: รวมภาพที่เห็นแล้วแกะรอย

ใช้การแกะรอยเมื่องานที่มีประโยชน์มีเฉพาะพิกเซล หรือเมื่อรูปลักษณ์ที่บันทึกไว้ใน PSD เป็นต้นฉบับดีที่สุดที่เหลือ โลโก้สีเรียบ ตราสัญลักษณ์ ไอคอน ตัวอักษร และภาพที่มีขอบสีชัดมักเหมาะ ภาพถ่าย การไล่สีละเอียด พื้นผิวพู่กัน และเงานุ่มมักไม่เหมาะ

ก่อนแกะรอย:

1. ซ่อนทุกอย่างที่ไม่ควรอยู่ในเวกเตอร์
2. วางงานบนพื้นหลังหรือความโปร่งใสที่ต้องใช้ส่งงาน
3. ตรวจช่องตัวอักษรเล็ก รู และตัวอักษรละเอียดที่ขนาดผลลัพธ์ที่ต้องการ
4. บันทึกสำเนาความเข้ากันได้หรือส่ง PNG คุณภาพสูงเมื่อ PSD ไม่มีภาพรวมเชื่อถือได้
5. เก็บ PSD ต้นฉบับ ผลแกะรอยเป็นไฟล์ส่งงานใหม่ ไม่ใช่ตัวแทนเอกสาร

SVG มีแรสเตอร์ฝังได้ตามโมเดลเนื้อหาฝัง SVG 2 เครื่องมือที่แปลงเฉพาะรูปแบบอาจวางพิกเซล PSD ที่รวมแล้วใน SVG โดยไม่แกะรอย การซูมและตรวจชนิดวัตถุช่วยจับผลเวกเตอร์ปลอม นี้

เวิร์กโฟลว์นี้กับ PerfectVector

PerfectVector เปิด PSD หรือ PSB ที่รองรับผ่านภาพรวมเพื่อความเข้ากันได้ที่บันทึกไว้ เบราว์เซอร์เตรียมภาพที่เห็นภายในเครื่องและให้ตรวจทานก่อนแปลง ไม่อัปโหลดเอกสาร Photoshop ต้นฉบับหรืออ้างว่าสร้างเลเยอร์ มาสก์ ข้อความแก้ไขได้ เอฟเฟกต์ พาธ อาร์ตบอร์ด หรือ Smart Objects กลับมา เวิร์กโฟลว์ Photoshop เป็น SVG สร้างพิกเซลที่เตรียมใหม่เป็นพาธ SVG

จึงเป็นแนวทางแกะรอย ไม่ใช่รักษาเลเยอร์ ใช้เมื่อภาพรวมที่บันทึกมีรูปลักษณ์ถูกต้อง และพาธแก้ไขได้มีประโยชน์กว่าโครงสร้าง Photoshop เดิม หลังแปลง ตรวจภาพเงา พื้นที่สี รูปตัวอักษร พื้นที่ว่าง และโหนด หาก PSD มีต้นฉบับเวกเตอร์สะอาดแล้ว ให้ย้ายต้นฉบับตรงแทน

ตรวจสิ่งที่คงอยู่ใน SVG

เปิด SVG ที่ดาวน์โหลดในโปรแกรมเวกเตอร์อีกครั้ง แทนเชื่อตัวอย่างแรก

• เลือกพื้นที่สีหนึ่งส่วน ควรทำงานเป็นพาธหรือรูปทรง ไม่ใช่ส่วนของสี่เหลี่ยมภาพเดียว
• เปิดแผง Layers หรือ Objects มองหาโครงสร้างกลุ่มที่จัดการได้ แทนคาดว่าชื่อเลเยอร์ PSD จะอยู่
• ซูมเส้นโค้งและช่องตัวอักษร ตรวจส่วนแบน การปิดโดยไม่ตั้งใจ และขอบมีสัญญาณรบกวน
• เปลี่ยนสีเติมหนึ่งสี พาธจริงควรเปลี่ยนสีโดยไม่กระทบพื้นที่ข้างเคียง
• ค้นหาองค์ประกอบ <image> ในซอร์สเมื่อส่วนใดยังเป็นพิกเซล
• นำ SVG เข้าแอปปลายทางจริงแล้วตรวจขนาด ฟอนต์ มาสก์ และเอฟเฟกต์ที่นั่น

หากทุกชิ้นที่เห็นทำงานเป็นวัตถุเดียว อ่านการวิเคราะห์ SVG ยกเลิกกลุ่มไม่ได้ ก่อนใช้คำสั่งพาธที่เปลี่ยนโครงสร้างถาวร ไฟล์อาจเป็นพาธประกอบเดียวหรือภาพฝัง ไม่ใช่กลุ่ม

เมื่อ PSD ควรยังเป็น PSD

เก็บ Photoshop เป็นไฟล์หลักเมื่อยังต้องใช้ข้อความแก้ไขได้ เลเยอร์ปรับภาพ มาสก์ Smart Objects อาร์ตบอร์ด พื้นผิวภาพถ่าย หรือเอฟเฟกต์ SVG เป็นรูปแบบส่งงานที่ดีสำหรับรูปทรงกราฟิกปรับขนาดได้ แต่ไม่ได้แทนเอกสาร Photoshop

สุดท้ายอาจมีสองไฟล์: PSD เป็นต้นฉบับแก้ไขได้ และ SVG เป็นไฟล์ผลิต เป็นการส่งต่องานที่เหมาะสม สองไฟล์รักษาความสามารถแก้ไขคนละประเภท

คำถามที่พบบ่อย

แปลง PSD เป็น SVG โดยคงทุกเลเยอร์ได้ไหม? ทำไม่ได้อย่างเชื่อถือได้ เนื้อหารูปทรงและข้อความบางส่วนย้ายเป็น SVG ได้ แต่มาสก์ เอฟเฟกต์ Smart Objects เลเยอร์ปรับภาพ ชื่อเลเยอร์ และเลเยอร์พิกเซลไม่มีสิ่งเทียบเท่า SVG แบบหนึ่งต่อหนึ่ง รักษาวัตถุเวกเตอร์ต้นฉบับก่อน แล้วมองส่วนอื่นเป็นรูปลักษณ์เรนเดอร์

ทำไมผล PSD เป็น SVG มีเลเยอร์เดียว? เครื่องมือน่าจะใช้ภาพรวมแบนหรือฝังแรสเตอร์หนึ่งภาพ วัตถุ SVG เดียวอาจเป็นพาธประกอบหรือกลุ่มได้ด้วย จึงตรวจชนิดก่อนถือว่าไฟล์ยังเป็นแรสเตอร์

บันทึกไฟล์ Photoshop เป็น SVG แปลงพิกเซลเป็นเวกเตอร์ไหม? ไม่ SVG มีแรสเตอร์ได้ การส่งออกรูปแบบอาจวางพิกเซลใน SVG โดยไม่แกะรอย ตรวจว่าเลือกงานเป็นพาธและยังแก้ระดับวัตถุได้หรือไม่

ควรแปลงข้อความเป็นเส้นรอบรูปก่อนส่ง SVG จาก Photoshop ไหม? แปลงสำเนาส่งงานเมื่อรูปลักษณ์ต้องคงที่และไม่ต้องแก้ข้อความแล้ว เก็บไฟล์หลักข้อความแก้ไขได้หากคำหรือภาษาอาจเปลี่ยน การแปลงเป็นเส้นรอบรูปไม่ได้รักษาการแก้ฟอนต์ แต่เปลี่ยนตัวอักษรเป็นพาธ

PerfectVector กู้เลเยอร์ Photoshop จาก PSD ได้ไหม? ไม่ได้ PerfectVector ใช้ภาพรวมความเข้ากันได้ที่บันทึกในไฟล์ที่รองรับ แล้วแกะรอยภาพที่เห็นเป็นพาธ ไม่สร้างกองเลเยอร์ Photoshop เดิมหรือฟีเจอร์เอกสารที่แก้ไขได้กลับมา

แหล่งอ้างอิง

1. Adobe — สร้างไฟล์ภาพจากเลเยอร์ — อธิบายการสร้างไฟล์ SVG และการรวมไฟล์จากกลุ่มเลเยอร์เป็นภาพแบน
2. Adobe — ส่งออกเลเยอร์เป็นไฟล์ — อธิบายการส่งออกต่อเลเยอร์ปัจจุบัน
3. Adobe — วาดรูปทรงและพาธใน Photoshop — นิยามเครื่องมือรูปทรง ปากกา และพาธของ Photoshop
4. W3C — เนื้อหาฝัง SVG — อธิบายเหตุใด SVG จึงยังมีข้อมูลภาพแรสเตอร์ได้
5. PerfectVector — Photoshop เป็น SVG — อธิบายเวิร์กโฟลว์ภาพรวมที่บันทึกซึ่งรองรับและข้อจำกัดกู้เลเยอร์

---

หากภาพรวมที่บันทึกเป็นต้นฉบับที่ต้องการ ตรวจในเครื่องมือ Photoshop เป็น SVG แปลงเป็นเวกเตอร์ แล้วเปิด SVG ใหม่เพื่อยืนยันว่าพื้นที่สำคัญเป็นพาธ