สร้างแอสเซทภาพจากเลเยอร์

อัปเดตครั้งล่าสุดเมื่อ 2 พ.ย. 2026

ใช้ Generator เพื่อสร้างไฟล์โดยอัตโนมัติด้วยการเพิ่มส่วนขยายรูปแบบไฟล์ เช่น .png หรือ .jpg ต่อท้ายชื่อเลเยอร์

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

เวิร์กโฟลว์นี้เหมาะที่สุดเมื่อต้องการการส่งออกที่สม่ำเสมอและทำซ้ำได้ในหลายรูปแบบหรือหลายความละเอียด เช่น การสร้างเวอร์ชัน @1x, @2x และ @3x สำหรับการออกแบบที่ตอบสนองทันใจ สำหรับการส่งออกเพียงครั้งเดียว หรือเมื่อต้องการตัวเลือกควบคุมเฉพาะรูปแบบ ให้ใช้ ไฟล์ > ส่งออก > ส่งออก เป็น แทน

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

เอกสาร Photoshop ที่มีเลเยอร์หรือกลุ่มเลเยอร์ที่ตั้งชื่อไว้
บันทึกเอกสารไปยังตำแหน่งที่ทราบ (หรือแอสเซทจะปรากฏบนเดสก์ท็อป)
ความรู้เกี่ยวกับรูปแบบเอาต์พุตที่ต้องใช้สำหรับโปรเจค

เปิดใช้งานการสร้างแอสเซทรูปภาพ

เลือก ไฟล์ > ทำงานอัตโนมัติ > Generator ปลั๊กอิน > แอสเซทรูปภาพ.

ในแผง เลเยอร์ ให้ค้นหาเลเยอร์หรือกลุ่มที่ต้องการส่งออก

เปลี่ยนชื่อเลเยอร์โดยเพิ่มส่วนขยายไฟล์ต่อท้าย: .jpg, .png, .gif หรือ .svg ตัวอย่างเช่น เปลี่ยนชื่อ “logo” เป็น “logo.png”

บันทึกเอกสารด้วย Ctrl + S (Windows) หรือ Command + S (macOS)

Photoshop จะสร้างไฟล์รูปภาพในโฟลเดอร์ย่อยที่อยู่ติดกับเอกสารที่บันทึกไว้ หากยังไม่ได้บันทึกเอกสาร แอสเซทจะปรากฏในโฟลเดอร์ใหม่บนเดสก์ท็อป Generator จะยังทำงานอยู่ การเปลี่ยนแปลงใดๆ ในเลเยอร์ที่เปิดใช้งาน Generator จะทริกเกอร์การอัปเดตแอสเซทที่เกี่ยวข้องโดยอัตโนมัติ

หมายเหตุ

ชื่อเลเยอร์ต้องไม่มีเครื่องหมาย : (โคลอน) หรือ * (ดอกจัน) เนื่องจากอักขระเหล่านี้จะขัดขวางการสร้างแอสเซท

สร้างหลายรูปแบบจากเลเยอร์เดียว

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

เลือกเลเยอร์ในแผง Layers

เปลี่ยนชื่อเลเยอร์โดยใช้รูปแบบที่คั่นด้วยจุลภาค เช่น button.png, button.jpg90, 200% button@2x.png

บันทึกเอกสาร

Photoshop จะสร้างไฟล์แยกกันสามไฟล์จากเนื้อหาเลเยอร์เดียวกัน ทำให้ไม่ต้องส่งออกกราฟิกเดิมด้วยตนเองในรูปแบบต่างๆ

ควบคุมคุณภาพและปรับขนาดแอสเซทสำหรับหน้าจอต่างๆ

เลือกเลเยอร์ในแผง Layers

เพิ่มพารามิเตอร์คุณภาพหรือขนาดในชื่อไฟล์ ตัวอย่างเช่น "button.jpg90" กำหนดคุณภาพ JPEG เป็น 90% หรือ "200% logo@2x.png" จะเพิ่มขนาดแอสเซทเป็นสองเท่า

สำหรับความละเอียดหลายระดับ ให้คั่นแต่ละข้อกำหนดด้วยจุลภาค: "icon.png, 200% icon@2x.png, 300% icon@3x.png"

บันทึกเอกสารเพื่อสร้างรูปแบบทั้งหมด

คำต่อท้ายคุณภาพจะควบคุมการบีบอัดสำหรับไฟล์ JPG (1-100) และความลึกของบิตสำหรับไฟล์ PNG (8, 24 หรือ 32) คำนำหน้าขนาดรองรับเปอร์เซ็นต์สำหรับการปรับขนาดแบบสัมพัทธ์หรือขนาดพิกเซลแบบสัมบูรณ์ สามารถใช้หน่วยผสมกันได้ เช่น "10in x 5cm banner.jpg" และสามารถละเว้นมิติหนึ่งเพื่อปรับขนาดตามสัดส่วนได้ เช่น "1080 x icon.png" จะกำหนดความกว้างเป็น 1080 พิกเซล พร้อมคงอัตราส่วนไว้

เคล็ดลับ

ใช้รูปแบบการตั้งชื่อ @2x และ @3x เพื่อสร้างเวอร์ชัน Retina และ DPI สูงโดยอัตโนมัติสำหรับโปรเจคเว็บแบบตอบสนองทันใจและแอปพลิเคชันมือถือ

ตัวอย่างการปรับขนาดแบบสัมพัทธ์:

200% logo.png เพิ่มขนาดแอสเซทเป็นสองเท่า

50% thumbnail.jpg ลดขนาดแอสเซทลงครึ่งหนึ่ง

ตัวอย่างการกำหนดขนาดแบบสัมบูรณ์:

300 x 200 hero.png สร้างรูปภาพขนาด 300×200 พิกเซล

10in x 5cm banner.jpg ใช้หน่วยผสมกัน (กว้าง 10 นิ้ว สูง 5 เซนติเมตร)

1080 x icon.png กำหนดความกว้างเป็น 1080 พิกเซล โดยความสูงจะปรับตามสัดส่วน

เคล็ดลับ

เมื่อระบุขนาดเป็นพิกเซล ให้เขียนตัวเลขโดยตรงโดยไม่ต้องระบุหน่วย ใช้ "300 x 200" แทน "300px x 200px"

จัดระเบียบแอสเซทลงในโฟลเดอร์ย่อย

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

ระบุพาธโฟลเดอร์ย่อยในชื่อเลเยอร์โดยใช้เครื่องหมายทับ (/): subfolder/filename.png หรือ icons/logo.svgสามารถซ้อนหลายระดับได้ เช่น assets/icons/logo.png

ส่งออกแอสเซทไปยังโฟลเดอร์ที่ระบุ

เปลี่ยนชื่อเลเยอร์โดยใช้พาธโฟลเดอร์ย่อยในชื่อไฟล์ตัวอย่างเช่น mobile/button.png, desktop/button.png

บันทึกเอกสาร

Photoshop จะสร้างโครงสร้างโฟลเดอร์โดยอัตโนมัติและวางแอสเซทแต่ละรายการไว้ในตำแหน่งที่กำหนดการรวมโฟลเดอร์ย่อยเข้ากับคำนำหน้าขนาดและการตั้งค่าคุณภาพช่วยให้ควบคุมการจัดระเบียบแอสเซทได้อย่างสมบูรณ์ เช่น mobile/200% button@2x.png, desktop/button.jpg90

กำหนดค่าเริ่มต้นสำหรับทั้งเอกสาร

สร้างเลเยอร์พิเศษเพื่อกำหนดการตั้งค่าเส้นฐานที่ใช้กับแอสเซทที่สร้างทั้งหมดวิธีนี้ช่วยลดการระบุพารามิเตอร์ซ้ำๆ ในชื่อเลเยอร์แต่ละรายการ

สร้างเลเยอร์เปล่าและตั้งชื่อโดยเริ่มต้นด้วยคำว่า "default" ตามด้วยการตั้งค่าที่ต้องการการกำหนดค่าทั่วไป ได้แก่ "default 200%" เพื่อปรับขนาดแอสเซททั้งหมดเป็น 200%, "default assets/" เพื่อบันทึกทุกอย่างไว้ในโฟลเดอร์ย่อย assets หรือ "default @2x" เพื่อเพิ่มคำต่อท้าย @2x ให้กับชื่อไฟล์ทั้งหมด

สามารถรวมค่าเริ่มต้นหลายรายการเข้าด้วยกันได้ เช่น "default 200% retina/ @2x" จะปรับขนาดแอสเซททั้งหมดเป็น 200% บันทึกไว้ในโฟลเดอร์ย่อย retina และเพิ่มคำต่อท้าย @2x ให้กับชื่อไฟล์การตั้งค่าเลเยอร์แต่ละรายการจะมีผลเหนือค่าเริ่มต้นของเอกสาร หากค่าเริ่มต้นระบุเป็น "default 200%" แต่ชื่อเลเยอร์มีคำว่า "50% thumbnail.png" เลเยอร์นั้นจะสร้างขึ้นที่ 50%

ใช้งานเอกสารระบบคลาวด์

เอกสารระบบคลาวด์จะจัดเก็บแอสเซทที่สร้างขึ้นไว้ในเครื่องแทนที่จะเก็บไว้ร่วมกับไฟล์ PSD โดยตรงPhotoshop แยกส่วนนี้ไว้เพื่อแยกความแตกต่างระหว่างเนื้อหาในเครื่องและเนื้อหาที่ซิงค์กับระบบคลาวด์

แอสเซทสำหรับเอกสารระบบคลาวด์จะปรากฏในตำแหน่งต่อไปนี้:

Windows: C:\Usersusername>\Documents\Adobe\Photoshop Cloud Associates
macOS: /Users//Documents/Adobe/Photoshop Cloud Associates

เอกสารระบบคลาวด์แต่ละรายการจะสร้างโฟลเดอร์ย่อยของตัวเองไว้ในไดเรกทอรีนี้แอสเซทจะถูกสร้างขึ้นโดยอัตโนมัติขณะทำงาน แต่จะยังคงอยู่ในเครื่องคอมพิวเตอร์จนกว่าจะแชร์หรือซิงค์ใน Creative Cloud อย่างชัดเจน

ปิดการสร้างแอสเซท

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

หากต้องการปิดการสร้างแอสเซทสำหรับเอกสารปัจจุบัน ให้ยกเลิกการเลือก ไฟล์ > การทำงานอัตโนมัติ > ปลั๊กอิน Generator > แอสเซทรูปภาพวิธีนี้จะหยุดการสร้างแอสเซทโดยอัตโนมัติ แต่จะยังคงแอสเซทที่มีอยู่และการตั้งชื่อเลเยอร์ไว้

หากต้องการปิดการทำงานของ Generator ทั้งหมดในทุกเอกสาร ให้เลือก การแก้ไข > การกำหนดลักษณะ > ปลั๊กอิน ยกเลิกการเลือก เปิดใช้งาน Generator แล้วเลือก ตกลงวิธีนี้จะปิดฟังก์ชันการใช้งานของ Generator ทั้งหมดจนกว่าจะเปิดใช้งานอีกครั้งในการกำหนดลักษณะ

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

เปิดแอป

บันทึกและส่งออกไปยังระบบคลาวด์

ส่งออกเทมเพลตปรับค่าสี

เรียนรู้

เรียนรู้ด้วยวิดีโอช่วยสอนทีละขั้นตอนและคำแนะนำแบบลงมือปฏิบัติจริงในแอปโดยตรง

ชุมชน

เข้าร่วมการสนทนา ค้นหาคำตอบ เรียนรู้จากผู้เชี่ยวชาญ และแบ่งปันความรู้ของคุณ

หน้าหลักของ Adobe

การเข้าถึงแอป Creative Cloud บริการ การจัดการไฟล์ และอื่นๆ ที่คุณชื่นชอบ