กฎไอคอนแอป: แชนเนลอัลฟาและขนาดไฟล์ของสองสโตร์

คุณมีโลโก้อยู่ชุดเดียวแต่มีสโตร์อยู่สองที่ และไฟล์ที่ผ่านเกณฑ์ของ Apple ก็ไม่ใช่ไฟล์ที่ Google ต้องการ เรื่องนี้มักโผล่มาในจังหวะที่แย่ที่สุด คือตอนที่บิลด์เสร็จแล้วแต่อัปโหลดไม่ผ่านสักทีเพราะแชนเนลอัลฟา

Apple ต้องการไอคอนสี่เหลี่ยมจัตุรัสขนาด 1024x1024 ที่มีพื้นหลังทึบสนิท ส่วน Play ต้องการไฟล์ PNG แบบ 32 บิตขนาด 512x512 ซึ่งในทางเทคนิครองรับอัลฟา แต่สเปกการออกแบบของ Google เองกลับบอกว่าไม่ควรใช้ และไม่มีสโตร์ไหนอยากได้ไฟล์ที่ตกแต่งมาจนดูเสร็จสมบูรณ์แล้ว — ทั้งคู่จะใส่มุมโค้งมนและเอฟเฟกต์ของตัวเองลงไปหลังอัปโหลด นี่คือสิ่งที่แต่ละฝั่งเรียกร้อง และวิธีทำไฟล์ทั้งสองแบบออกมาจากโลโก้ชุดเดียว

Apple: 1024 พิกเซล สี่เหลี่ยมจัตุรัส ห้ามโปร่งใสแม้แต่จุดเดียว

Human Interface Guidelines ของ Apple ระบุขนาดเลย์เอาต์ของไอคอนแอปสำหรับ iOS iPadOS และ macOS ไว้ที่ 1024x1024 px เป็นสี่เหลี่ยมจัตุรัส ในปริภูมิสี sRGB Gray Gamma 2.2 หรือ Display P3 เส้นทางที่ Apple แนะนำตอนนี้คือ Icon Composer ซึ่งคุณนำเข้าเลเยอร์ส่วนหน้าแล้วกำหนดพื้นหลังในเครื่องมือนั้น แต่ภาพที่ยุบรวมชั้นแล้วก็ยังใช้ได้อยู่ เลเยอร์แค่ให้การควบคุมที่มากกว่า ไม่ใช่ของบังคับ

คนที่ส่งแอปครั้งแรกมักสะดุดตรงพื้นหลัง คำสั่งของ Apple สำหรับเลเยอร์พื้นหลังที่นำเข้ามาพูดตรง ๆ ว่าให้เต็มขอบและทึบสนิท ไฟล์ PNG ขนาด 1024px ที่พื้นหลังโปร่งใสไม่ใช่ไอคอน App Store ที่ถูกต้อง ลองอัปโหลดขึ้นไปแล้ว App Store Connect จะตอบกลับมาว่า ITMS-90717: the App Store icon can't be transparent or contain an alpha channel ข้อยกเว้นเดียวคือไอคอนเวอร์ชันสำหรับโหมดมืด ซึ่ง Apple ขอให้คุณส่งมาแบบพื้นหลังโปร่งใส เพื่อให้พื้นหลังที่ระบบเตรียมไว้ทะลุขึ้นมาได้ นอกนั้นทั้งหมดให้ตัดสินใจว่าจะใช้สีอะไรอยู่หลังเครื่องหมายของคุณ แล้วยุบรวมมันลงไปในไฟล์เลย

แพลตฟอร์มอื่นของ Apple เปลี่ยนขนาดเลย์เอาต์ไปอีก: watchOS ใช้ 1088x1088 และ visionOS ใช้ 1024x1024 โดยทั้งคู่ถูกมาสก์เป็นวงกลม ส่วน tvOS เป็นแนวนอนขนาด 800x480 และยังเปลี่ยนวิธีทำด้วย: ไอคอนของ tvOS และ visionOS ถูกประกอบเป็นสแต็กภาพหลายเลเยอร์ใน Xcode แทนที่จะทำใน Icon Composer

Google Play: 512 พิกเซล อัลฟาใช้ได้ แต่ความโปร่งใสก็ยังเป็นความผิดพลาดอยู่ดี

ไอคอนสำหรับลิสติ้งบนสโตร์ของ Play คือ ไฟล์ PNG แบบ 32 บิตที่มีอัลฟา ขนาด 512x512 px ในปริภูมิสี sRGB ใหญ่สุดไม่เกิน 1024KB อ่านแค่บรรทัดนี้บรรทัดเดียว ภาพไดคัทโปร่งใสที่คุณมีอยู่แล้วก็ดูเหมือนจะใช้ได้เลย

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

กฎของ Play อีกสองข้อ: ห้ามมีตราหรือข้อความที่สื่อถึงอันดับ ราคา หรือหมวดหมู่บน Play และไอคอนสำหรับลิสติ้งบนสโตร์เป็นคนละไฟล์กับไอคอนหน้าโฮมบนเครื่อง ไอคอนแบบปรับได้ (adaptive icon) ตัวนั้นใช้เลเยอร์ขนาด 108x108 dp ซึ่งมีเพียงพื้นที่ด้านในขนาด 66x66 dp เท่านั้นที่รับประกันว่าจะไม่ถูกมาสก์ของผู้ผลิตเครื่องตัดออก

ทำไฟล์ทั้งสองแบบออกมาจากโลโก้ชุดเดียว

ไฟล์ทั้งสองเริ่มจากสิ่งเดียวกัน: เครื่องหมายของคุณที่ถูกแยกออกมาอย่างสะอาดจากอะไรก็ตามที่มันเคยวางอยู่ ถ้าโลโก้ของคุณมีอยู่แค่ในไฟล์ JPEG ที่ซัพพลายเออร์ส่งมา หรือเป็นรูปถ่ายหัวจดหมายที่พิมพ์ออกมาแล้ว ให้ไดคัทมันออกมาก่อน เพื่อให้รูปทรงถูกแยกออกมาพร้อมแชนเนลอัลฟาจริง ๆ remover.bg ยกเครื่องหมายออกจากพื้นหลังให้ แล้วให้คุณวางมันลงบนสีทึบหรือสีประจำแบรนด์แบบกำหนดเองในโปรแกรมแก้ไข — ซึ่งก็คือขั้นตอนยุบรวมชั้นที่ Apple ต้องการนั่นเอง

ลำดับที่ได้ผลจริง:

1. ลบพื้นหลังออกให้โลโก้ยืนอยู่ลำพัง ตรวจขอบโดยวางทับบนสีเข้ม ไม่ใช่สีขาว — เส้นบาง ๆ และหัวเชิงตัวอักษรชอบซ่อนตำหนิของมันไว้บนพรีวิวสีขาว
2. ตั้งพื้นหลังเป็นสีประจำแบรนด์แล้วส่งออกเป็น PNG เก็บเวอร์ชันโปร่งใสไว้ด้วย สำหรับชุดสื่อประชาสัมพันธ์และ favicon
3. ในโปรแกรมออกแบบของคุณเอง ให้วาง PNG นั้นลงบนแคนวาสสี่เหลี่ยมจัตุรัส แล้วส่งออกที่ 1024x1024 สำหรับ Apple และ 512x512 สำหรับ Play การกำหนดขนาดเป็นงานของโปรแกรมออกแบบ ไม่ใช่งานของเครื่องมือลบพื้นหลัง

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

ปล่อยให้สโตร์เป็นคนวาดมุมโค้งและเงาเอง

Play พูดเรื่องนี้ไว้ชัดเจน: มันมนมุมให้เองที่รัศมี 30% ของขนาดไอคอน ใส่เงาของตัวเองลงไปหลังอัปโหลด และขอให้คุณไม่ต้องทำทั้งสองอย่างมาเอง ส่วน Apple จะมาสก์ภาพสี่เหลี่ยมจัตุรัสของคุณให้กลายเป็นสี่เหลี่ยมมุมมนตามระบบ แล้วใส่ไฮไลท์ การหักเหของแสง และความโปร่งแสงของตัวเองลงไป พร้อมเตือนว่าเลเยอร์ที่ถูกมาสก์มาก่อนแล้วจะทำให้เอฟเฟกต์เหล่านั้นเสีย และทำให้ขอบดูหยักเป็นขั้นบันได

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

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

สิ่งที่รัศมี 30% กินเข้าไปจริง ๆ คือมุมทั้งสี่ โลโก้แบบตัวอักษร (เวิร์ดมาร์ก) ที่ถูกดันไปชนมุมจึงโดนตัดปลายหายไป และบนมาสก์วงกลมของ watchOS กับ visionOS เวิร์ดมาร์กที่ยาวจรดขอบจะเสียตัวอักษรตัวแรกและตัวสุดท้ายไปเลย

ก่อนกดอัปโหลด

• Apple: PNG ขนาด 1024x1024 สี่เหลี่ยมจัตุรัส ทึบสนิททั้งภาพ ปล่อยมุมให้คมไว้
• Play: PNG แบบ 32 บิต ขนาด 512x512 ใหญ่สุด 1024KB ใช้พื้นหลังสีประจำแบรนด์แทนความโปร่งใส ปล่อยมุมให้คมไว้
• งานกราฟิกและสีชุดเดียวกันทั้งสองสโตร์: ผู้ใช้ควรจำได้ว่านี่คือแอปเดียว ไม่ใช่สองแอป
• ดูพรีวิวทั้งคู่ตอนย่อเป็นภาพขนาดย่อ รายละเอียดที่อ่านออกตอน 1024 จะหายไปตอน 40 พิกเซล

แก้ไอคอนให้จบครั้งเดียว แล้วมันก็จบไปตลอดทุกเวอร์ชันที่ปล่อยหลังจากนี้