5 ข้อที่ต้องรู้ เพื่อใช้ Adobe Generator ใน Adobe Photoshop CC 2014

ความสามารถล่าสุด ใน Photoshop CC คือ Adobe Generator ที่ทำให้เราสามารถนำภาพต่างๆ ที่อยู่ใน Photoshop ที่เราออกแบบไว้มาใช้ในการงาน Web Design หรืองานอื่นๆ ได้สะดวกกว่าเดิม

1. วิธีการตั้งชื่อ Layer ใน Photoshop เพื่อใช้งาน Adobe Generator

กลไกการทำงานของ Adobe Generator คือเราต้องตั้งชื่อ layer แต่ละอันในไฟล์งานของเราให้ตรงกับภาพที่เราต้องการนำไปใช้  โดยประเภทการตั้งชื่อ Layer มีดังนี้

วิธีที่ 1: กำหนดชนิดไฟล์ภาพ ด้วยการตั้งชื่อ layer

ขณะที่เขียนบทความนี้อยู่ Photoshop Generator สนับสนุนไฟล์ อยู่ 3 ประเภทคือ JPEG, PNG, และ GIF โดยแบ่งตาม format ของไฟล์ดังนี้

• PNG (.png) สามารถกำหนดด้วย .png8, .png24, .png32
• JPEG (.jpg) สามารถกำหนดตามคุณภาพของ file คือ .jpg(1-10)  ยกตัวอย่างเช่น .jpg3, .jpg7 ซึ่งถ้าเราไม่ใส่ค่า Generator กำหนดให้คือ .jpg9 ครับ
• GIF (.gif)

* คำเตือน * สัญลักษณ์ ‘*’ (ดอกจันทร์) หรือ ‘:’ (โคล่อน) ไม่สามารถใช้เป็นส่วนประกอบได้นะครับ

วิธีที่ 2: กำหนดชนิดไฟล์ภาพ ด้วยการตั้งชื่อ layer group

หากเรารวม layer ไว้ใน folder และตั้งชื่อลงท้ายนามสกุลไฟล์แบบข้อที่ 1 จะทำให้เราได้ภาพของ Layer ทั้งหมดรวมออกมาเป็นอีกภาพหนึง ดังตัวอย่าง

วิธีที่ 3. กำหนดคุณภาพของไฟล์ภาพ

โดยปกติ ตัว Adobe Generator จะตั้งคุณภาพของไฟล์ภาพแต่ละชนิดดังนี้

• JPG: ค่าเริ่มต้นคือ 90%
• PNG: ค่าเริ่มต้นคือ 32-bit
• GIF: ขนาดปกติ และเปิด alpha transparency

ภาพ JPG

สามารถกำหนดคุณภาพของไฟล์ภาพเป็นเลขจำนวนเต็ม (1-10) หรือเป็นเปอร์เซ็นต์ (1-100) ได้ เช่นต้องการคุณภาพ 50% ก็สามารถกำหนดได้แบบนี้

• image.jpg5
• image.jpg50%

ภาพ PNG

สามารถกำหนดค่าที่ต้องการได้ คือ 8-bit, 24-bit, และ 32-bit ได้ดังตัวอย่าง

• image.png8
• image.png24
• image.png32

วิธีที่ 4: สร้างได้หลายไฟล์ โดยการคั่นชื่อด้วยคอมม่า (,) หรือเครื่องหมายบวก (+)

หากเราต้องการได้ไฟล์หลายแบบจาก layer หรือ layer group ล่ะก็ ให้คั่นแต่ละชื่อด้วยเครื่องหมายคอมม่า (,) หรือเครื่องหมายบวก (+) เช่นตัวอย่างด้านล่างครับ

• ใช้เครื่องหมายคอมม่า: logo.png8, logo.jpg, logo.gif
• ใช้เครื่องหมายบวก:  logo.png8 + logo.jpg + logo.gif
• หรือผสมกันแบบนี้ก็ได้: art8.png8 + art.jpg , art32.png32

2. วิธีกำหนดขนาดของภาพ

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

2.1 การกำหนดขนาดภาพเป็น pixel หรือหน่วยอื่นๆ

การตั้งขนาดของภาพเป็น pixel สามารถกำหนดเป็นตัวเลข พร้อมหน่วยวัดได้ครับ เช่น

• 114 x 114 appIcon.png จะทำให้เราได้ภาพกว้าง 114 pixel ยาว 114 pixel แบบ png
• 2cm x 2cm appIcon.jpg จะทำให้เราได้ภาพขนาดกว้าง 2 เซ็นติเมตร ยาว 2 เซ็นติเมตร

และหน่วยที่ Adobe Generator รองรับก็คือ

• px
• in
• cm
• mm

2.2 การกำหนดขนาดภาพเป็นเปอร์เซ็นต์ (%)

ถ้าเราต้องการขนาดของภาพที่ต้องการเช่น “ครึ่งหนึงของขนาดภาพปกติ” หรือ “4 เท่าของภาพปกติ” เราสามารถกำหนดได้แบบตัวอย่างด้านล่าง

• 50% image-name.jpg (ได้ภาพขนาดครึ่งหนึ่งของภาพต้นฉบับ)
• 400% image-name.jpg (ได้ภาพขนาด 4 เท่าของภาพต้นฉบับ)

3. วิธีกำหนด Folder ของรูปภาพ

ในรุ่นล่าสุดของ Adobe Photoshop CC เจ้า Generator ของเราได้รับการปรับปรุงให้สามารถสร้าง folder ขึ้นมาใส่ภาพของเราได้แล้วครับ เช่น

• [subfolder name]/image-name.jpg (ให้ใส่ชื่อ folder ที่ต้องการลงไปแทนที่ [subfolder name])
• ตัวอย่าง: assets/image-name.jpg

4. วิธีกำหนดค่าเริ่มต้นในการสร้างภาพของ Adobe Generator

ในเวอร์ชั่นล่าสุดของ Adobe Photoshop CC 2014 เจ้า Generator ของเราสามารถรับค่าเริ่มต้นที่ใช้กับทุก Layer ที่เราต้องการสร้างภาพได้แล้วครับ

ทำตามคำแนะนำนี้เลย

1. สร้าง Layer เปล่าขึ้นมา 1 อัน (ย้ำ Layer เปล่าๆ เลยนะครับ)
2. ให้ตั้งชื่อนำหน้า Layer ว่า ‘default‘ และตามด้วยค่าที่ต้องการ
   • เช่น default hires/ จะทำให้ภาพที่เราตั้งชื่อตามกฎ Adobe Generator ทั้งหมดไปอยู่ใน folder ที่ชื่อ hires ครับ
   • หรือ default hires/@2x จะทำให้ภาพที่เราได้จาก Adobe Generator ทั้งหมดไปอยู่ใน folder ที่ชื่อ hires และลงท้ายชื่อไฟล์ด้วย @2x ครับ เช่น hires/[email protected] (ใครทำ graphic สำหรับ Retina Display เฮเลย)

5. วิธีสั่ง Adobe Generator ให้ทำงาน

พอเรากำหนดชื่อให้ Layer ทั้งหมดเรียบร้อยแล้ว ให้ไปที่ File > Generator > Image Assets เราจึงจะได้ภาพทั้งหมดอยู่ใน folder “-asset” ซึ่งอยู่ในที่เดียวกับไฟล์ PSD ของเราครับ เท่านี้ก็เหลือขั้นตอนนำไปใช้งานแล้ว ดูตัวอย่างจากภาพด้านล่าง

ก่อนจะไปสนุก

Adobe Generator เป็นของใหม่ที่ผม และหลายๆ คนรอมานาน มันช่วยเราได้มากในการนำงานที่เอาออกแบบไว้ใน Photoshop ไปใช้งานรวมกันในโปรแกรมอื่นๆ อย่างเช่น Adobe Dreamweaver CC, Adobe Edge Animate CC, Adobe Muse CC หรือ Adobe Premiere Pro

สำหรับการใช้งาน เรียนรู้ได้จาก video และติดตาม video อื่นๆ ได้ โดยการ follow ผมใน vimeo ที่นี่ครับ มีคำถามหรือข้อเสนอแนะ คุยกันผ่าน comment ด้านล่างกันนะครับ 🙂