ส่งออกขนาดไอคอน iOS ใน Affinity Designer

แม้ว่า Affinity Designer จะมีประโยชน์อย่างมากในการส่งออก @ 1x, @ 2x และ @ 3x แต่ฉันสงสัยว่ามีวิธีการส่งออกในขนาดต่างๆที่จำเป็นสำหรับไอคอน iOS หรือไม่

ฉันพบตารางที่กระชับของขนาดที่ต้องการที่นี่ซึ่งฉันจะทำซ้ำในรูปแบบรายการ:

• 1024x1024
• 180x180
• 152x152
• 120x120
• 87x87
• 80x80
• 76x76
• 58x58
• 57x57
• 40x40
• 29x29

ขนาดไอคอนที่แตกต่างกัน 11 ขนาด!

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

เนื่องจากข้อกำหนดมีการเปลี่ยนแปลงเป็นครั้งคราวจึงเป็นความคิดที่ดีที่จะอ้างอิงแนวทางของ Apple มีเทมเพลต Affinity Designer บนเว็บไซต์ของฉันที่ฉันได้พัฒนาว่าส่งออกขนาด 18 ขนาดที่จำเป็นสำหรับแอปพลิเคชันสากลในปัจจุบัน

ดูเหมือนว่าเป็นรายการที่ซับซ้อนขนาดใหญ่ แต่มีเพียง 5 ขนาดที่คุณต้องสร้าง:

• 29pt
• 49pt
• 60pt
• 76pt
• 1024px

สี่ขนาดแรก (ที่ระบุไว้ในคะแนน) จำเป็นต้องมีรุ่น 1 ×, 2 ×และ 3 × (หากคุณเป็นหลักฐานในอนาคตเช่นเดียวกับครอบคลุม iPhone 6 Plus)

ขนาดบางส่วนที่คุณจะเห็นในเน็ตและบนเว็บไซต์ของ Apple นั้นใช้สำหรับ iOS 6 และต่ำกว่า (57 × 57 เป็นต้น) ไม่จำเป็นหากคุณกำหนดเป้าหมายที่ iOS 7 ขึ้นไป

นี่คือเทมเพลต Photoshop ที่ฉันสร้าง:

ฉันได้ตั้งค่าการแบ่งส่วนเพื่อส่งออกแต่ละไอคอนและการกระทำเพื่อปรับขนาดและส่งออกอีกครั้งดังนั้นฉันจึงจบลงด้วย:

• ไอคอน 29.png
• icon-29@2x.png
• icon-29@3x.png
• ไอคอน 40.png
• icon-40@2x.png
• icon-40@3x.png
• ไอคอน 60.png
• icon-60@2x.png
• icon-60@3x.png
• ไอคอน 76.png
• icon-76@2x.png
• icon-76@3x.png

ไม่ใช่ทุกขนาดที่จำเป็น แต่อาจจะมีในอนาคต เริ่มจากฐานขนาด 4 ทำให้การสร้างไอคอนง่ายขึ้นมาก

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

คุณสามารถทำเช่นเดียวกันโดยใช้คุณสมบัติการตัดของ Affinity ได้หรือไม่

ปรับปรุง: ฉันสร้างบางส่วนมาเปิดแม่แบบไอคอนแอปสำหรับผู้สนใจออกแบบ Sketch, Photoshop และ Illustrator พวกเขาอาจจะมีมูลค่าการพิจารณา

คุณสามารถทำได้ใน Affinity Designer ชิ้นสามารถปรับขนาดเอาต์พุตโดยใช้คำต่อท้ายนี่คือไอคอน iOS ที่ส่งออกโดยใช้คำต่อท้าย 'w':

ฉันเพิ่งพบวิธีที่ดีในการทำสิ่งนี้ใน Affinity Designer มันไม่ได้เป็นไปโดยอัตโนมัติอย่างสมบูรณ์ ฉันจะอธิบายวิธีรับขนาดไอคอนสามขนาดที่จำเป็นสำหรับ iPhone (29 พอยต์, 40 พอยต์, 60 พอยต์) โดยแต่ละภาพมีความละเอียด 2x และ 3x:

1. สร้างเอกสารใหม่ตั้งค่าหน่วยเป็น "คะแนน" ขนาดหน้าเป็น 29x29 และทำเครื่องหมายที่ "สร้างอาร์ตบอร์ด" ในกล่องโต้ตอบ
2. วางและวางงานศิลปะของคุณในกระดานภาพ
3. เปลี่ยนชื่อ artboard เป็น "29pt" ในแผงเลเยอร์ (ไม่บังคับ)
4. คลิกขวาที่บอร์ดอาร์ตและเลือก "ทำซ้ำ"
5. ลาก artboard ใหม่ (เพื่อให้คุณเห็นทั้งสองข้าง) จากนั้นเปลี่ยนชื่อเป็น "40pt" (อีกครั้งขั้นตอนนี้เป็นทางเลือก)
6. ปรับขนาดเลเยอร์ใหม่เป็น 40x40pt โดยใช้แผงการแปลง - งานศิลปะของคุณจะถูกปรับขนาดโดยอัตโนมัติ
7. ทำซ้ำขั้นตอนที่ 4-6 เพื่อสร้าง artboard 60pt เช่นกัน (บวก 76pt และ 83.5pt สำหรับ iPad หากจำเป็น)
8. ไปที่ Export Persona เปลี่ยนไปที่พาเนลสไลซ์แล้วเลือกความละเอียด 2x และ 3x (บวก 1x สำหรับ iPad)
9. เลือกอาร์ตเลเยอร์ทั้งหมดในรายการ ("29pt", "40pt" ฯลฯ ) และคลิก "ส่งออกรายการที่เลือก" ที่ด้านล่างของแผง

ความสัมพันธ์จะสร้างขนาดไอคอนทั้งหมดในทุกความละเอียดที่เลือกดังนั้นคุณอาจได้รับไอคอนมากกว่าที่คุณต้องการจริงๆ แต่พวกมันถูกตั้งชื่อว่าเรียบร้อย "29pt@2x.png" ฯลฯ ดังนั้นจึงเป็นเรื่องง่ายที่จะกำหนดไว้ในแค็ตตาล็อกสินทรัพย์ Xcode ของคุณ

หนึ่งข้อแม้: เมื่อคุณไปที่ Export Persona Affinity จะสร้างชิ้นส่วนการส่งออกโดยอัตโนมัติสำหรับแต่ละบอร์ด (นั่นคือกรอบสีน้ำเงินที่มีป้ายกำกับขนาดอยู่) ฉันพบว่าบางครั้งขนาดของชิ้นส่วนเหล่านี้จะถูกปิดด้วยพิกเซลไม่กี่ ดูเหมือนว่าข้อผิดพลาดในโฆษณา คุณสามารถแก้ไขได้อย่างง่ายดายโดยการลากที่มุมของชิ้น

Marc Edwards มีคำตอบที่ยอดเยี่ยมในแง่ของขนาดของไอคอนที่ต้องสร้างการใช้ชิ้นส่วนในการทำเช่นนั้นและลิงก์ที่ดีไปยังแหล่งข้อมูล Photoshop สำหรับการทำเช่นนี้ อย่างไรก็ตามฉันยังคงมองหาวิธีการส่งออกในหลายขนาดในAffinity Designerโดยเฉพาะ

ในที่สุดฉันก็รู้ว่าสิ่งนี้จะเป็นไปได้โดยใช้เครื่องมือ Place Image สร้างไอคอนของคุณในไฟล์เดียวจากนั้นในไฟล์ "เทมเพลต" อีกอันคุณสามารถใช้เครื่องมือ Place Image เพื่อสร้างเลเยอร์หลายเลเยอร์ที่ดึงเข้าไปในไฟล์ไอคอนของคุณ แต่ละเลเยอร์เหล่านั้นสามารถเปลี่ยนเป็นชิ้นที่มีชื่อ

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