ออกแบบภาพหน้าจอ App Store โดยไม่ใช้ Photoshop
Photoshop และ Figma เป็นเครื่องมือดีไซน์อเนกประสงค์ทำได้ทุกอย่างรวมถึงภาพหน้าจอ App Store แต่ภาพหน้าจอ App Store เป็นพื้นที่ดีไซน์แคบๆที่มีข้อจำกัดเฉพาะเจาะจง (ขนาดตรงตามคลาสอุปกรณ์เลย์เอาต์ซ้ำซ้อนข้ามพาเนลการส่งออกแบบ batch ตาม locale การเรนเดอร์กรอบอุปกรณ์) ที่เครื่องมืออเนกประสงค์จัดการได้อย่างเก้งก้าง
เครื่องมือภาพหน้าจอแบบ browser-native ได้แก่ Mokbi รวมถึง AppLaunchpad, Previewed, AppMockUp, MockUPhone และอื่นๆอีกสองสามตัวออกแบบมาเพื่อพื้นที่แคบๆนี้โดยเฉพาะจึงเร็วกว่าสำหรับงานเฉพาะนี้ข้อแลกเปลี่ยนคือไม่จัดการงานต่อเนื่อง (ดีไซน์กราฟิกทั่วไปการตัดต่อภาพ)
สิ่งที่ข้ามได้
เวลาตั้งค่าของ Photoshop
Photoshop สำหรับภาพหน้าจอ App Store โดยทั่วไปต้องใช้เวลาได้แก่ตั้งค่า artboard ตามขนาดที่ถูกต้องนำเข้า asset กรอบอุปกรณ์ (โดยทั่วไปดาวน์โหลดจาก Apple's Design Resources หรือชุด PSD ฟรี) วางภาพหน้าจอในกรอบครอบมุมเพิ่ม text layer ปรับสเกล Smart Object คูณด้วยทุกคลาสอุปกรณ์
เครื่องมือแบบ browser จัดการสิ่งนี้ด้วยการกดครั้งเดียวเลือกอุปกรณ์วางภาพหน้าจอกรอบเรนเดอร์ทันทีบันทึกตัวแปรตาม locale โดยไม่ต้องตั้งค่าใหม่เวลาตั้งค่าลดจากหนึ่งชั่วโมงเหลือประมาณสามสิบวินาที
ความซับซ้อนของ component ใน Figma
Figma แก้ปัญหาการทำซ้ำผ่าน component, variant และ auto-layout ต้นทุนการตั้งค่ามีอยู่จริงระบบภาพหน้าจอ App Store ที่มี component ถูกต้องใน Figma ใช้เวลาหนึ่งถึงสองวันในการสร้างครั้งแรกหลังจากนั้นก็เร็วแต่ข้อแลกเปลี่ยนคือการเปลี่ยนแปลงที่ไม่เล็กน้อยในระบบ (คลาสอุปกรณ์ใหม่ locale ใหม่อัตราส่วนภาพใหม่) ต้องสร้าง component ใหม่
สำหรับทีมดีไซน์ in-house ที่ส่งภาพหน้าจอรายไตรมาสการลงทุนใน Figma คุ้มค่าสำหรับนักพัฒนา indie ที่ส่งภาพหน้าจอปีละสองครั้งไม่คุ้มค่า
ความยุ่งยากในการส่งออก
การส่งออกด้วยมือตามอุปกรณ์ × ตาม locale ใน Photoshop หรือ Figma หมายถึงการคลิกผ่านการส่งออกหลายร้อยครั้งสำหรับการส่งแบบหลาย locale เครื่องมือแบบ browser สร้าง ZIP ทั้งหมดด้วยคลิกเดียวนี่คือจุดที่การประหยัดเวลาสะสม locale เพิ่มเติมที่ส่งแต่ละ locale แทบไม่มีค่าใช้จ่ายเพิ่ม
สิ่งที่ต้องเสียสละ
การแต่งภาพถ่ายระดับพิกเซล
หากภาพหน้าจอของคุณเกี่ยวข้องกับพื้นหลังภาพถ่ายที่ต้องแต่งแต้มซับซ้อน (ปรับโทนสีภาพถ่ายจริงลบองค์ประกอบที่รบกวนแก้ไขสีผิวในภาพ lifestyle) Photoshop ยังดีที่สุดเครื่องมือแบบ browser สามารถใช้ฟิลเตอร์แบบ CSS (blur ความสว่างคอนทราสต์ความอิ่มสี) แต่ไม่สามารถแต่งแต้มเฉพาะจุดได้
สำหรับภาพหน้าจอ App Store ส่วนใหญ่ซึ่งใช้ gradient ทึบหรือภาพหน้าจออุปกรณ์ที่ค่อนข้างง่ายไม่ใช่ภาพถ่ายที่แต่งแล้วข้อจำกัดนี้ไม่ใช่ข้อจำกัดจริง
Blend mode แปลกใหม่
Multiply, overlay, screen, color-dodge ชุด blend mode เต็มของ Photoshop ไม่ค่อยมีในเครื่องมือแบบ browser ภาพหน้าจอ App Store ส่วนใหญ่ใช้ opacity ตรงไปตรงมาและเอฟเฟกต์เงาไม่ใช่ blend mode สร้างสรรค์หากดีไซน์ของคุณขึ้นอยู่กับ multiply-blended texture overlay เฉพาะ Photoshop ชนะ
การ compositing ขั้นสุดท้ายสำหรับ App Preview video
App Preview video (คลิปเล่นอัตโนมัติ 30 วินาทีบนหน้า App Store) ต้องใช้การตัดต่อวิดีโอได้แก่ After Effects, Premiere, Final Cut หรือเครื่องมือที่คล้ายกันเครื่องมือแบบ browser จัดการภาพหน้าจอแต่ไม่ใช่การ compositing วิดีโอดังนั้นสำหรับฝั่งวิดีโอของหน้า App Store คุณยังต้องใช้เครื่องมือแยกต่างหาก
เวิร์กโฟลว์ผสมผสาน
ทีม indie จำนวนมากเลือกใช้แบบผสมผสาน:
- ถ่ายภาพหน้าจอจริง จากแอปที่รันบน simulator หรืออุปกรณ์จริง
- แต่งเฉพาะ frame ที่ต้องการใน Photoshop หากภาพหน้าจอต้องการการทำความสะอาด (ลบ artifact ของ status bar แก้ไขข้อผิดพลาดกราฟิกปรับสี)
- จัดวางคารูเซลใน Mokbi (หรือเครื่องมือแบบ browser เทียบเท่า) ได้แก่กรอบอุปกรณ์การซ้อนข้อความ gradient แบบหลายพาเนล
- แปลภาษา + ส่งออกแบบ batch ผ่านเครื่องมือแบบ browser
- ตัดต่อ App Preview video ใน After Effects หรือ DaVinci Resolve หากส่งวิดีโอด้วย
เมื่อ Photoshop ยังชนะ
- คุณทำ compositing ภาพถ่ายหนัก (ภาพ lifestyle พื้นหลังซับซ้อนการแต่งภาพถ่ายหลายชั้น)
- คุณมี pipeline และคลังงาน Photoshop ที่มีอยู่แล้วและไม่ต้องการสร้างใหม่
- แบรนด์ของคุณต้องการ typography หรือเอฟเฟกต์กำหนดเองเฉพาะที่เครื่องมือแบบ browser ไม่รองรับ
- คุณเป็นเอเจนซี่ที่มีนักออกแบบอาวุโสที่ทำงานใน Photoshop ทุกวันความติดขัดของเครื่องมือมีความสำคัญน้อยกว่าความเคยชิน
เมื่อเครื่องมือแบบ browser ชนะ
- Indie หรือทีมขนาดเล็กที่ส่งงานไม่บ่อย
- การส่งแบบหลาย locale (ที่การส่งออกแบบ batch และการแปลด้วยคลิกเดียวประหยัดเวลาจริงๆ)
- การอัปเดตภาพหน้าจอ App Store บ่อยครั้ง (ทุก release)
- ไม่มีโครงสร้างพื้นฐานดีไซน์ที่มีอยู่เริ่มจากศูนย์