สร้างภาพหน้าจอ App Store ด้วย GPT-Image-2 (ทำรายได้ 1.6 พันดอลลาร์ต่อเดือนใน 36 วัน)

@_frederickjames
อังกฤษ2 วันที่ผ่านมา · 05 ก.ค. 2569
100K
471
27
29
1.5K

TL;DR

คู่มือนี้อธิบายขั้นตอนการทำงานที่รวดเร็วสำหรับการออกแบบภาพหน้าจอ App Store ที่ดึงดูดผู้ใช้งาน โดยใช้ Pinterest ในการค้นหาไอเดีย ใช้ Figma สำหรับการทำ MVP และใช้ GPT-Image-2 เพื่อสร้างเอฟเฟกต์ 3D ระดับมืออาชีพด้วย AI

หน้า App Store ของคุณคือหนึ่งใน 4 ตัวแปรสำคัญของ Conversion:

การตลาด -> หน้า App Store -> การเริ่มต้นใช้งาน -> หน้าจ่ายเงิน

คนส่วนใหญ่ให้ความสำคัญกับการเริ่มต้นใช้งานและหน้าจ่ายเงิน แต่เส้นทางของผลิตภัณฑ์เริ่มต้นที่หน้าแอป! ถ้าภาพหน้าจอของคุณไม่ดี คนก็จะไม่ดาวน์โหลด!

แอปของฉันมีอัตราการเปลี่ยนจากผู้เข้าชมหน้าเป็นการดาวน์โหลด 65%

นี่คือ ส่วนสำคัญ ที่ทำให้ฉันไปถึงรายได้ 1,600 ดอลลาร์ต่อเดือนได้เร็วขนาดนี้

ฉันจะแสดงวิธีทำสิ่งนี้ให้กับแอปใหม่ของฉัน!

**ส่วนที่ดีที่สุด?

  1. **ด้วย AI: ใช้เวลาไม่ถึง 30 นาที!
  2. หน้า App Store ส่วนใหญ่ยังทำได้ไม่ดีนัก ความพยายามที่จะเอาชนะคู่แข่งนั้นน้อยนิด!สิ่งที่คุณต้องมีคือ:
  3. บัญชี Pinterest (ฟรี)
  4. บัญชี Figma (ฟรี)
  5. GPT-Image-2 (ฟรีเมื่อสมัครแผน Codex ราคา $20/เดือน)

ขั้นตอนที่หนึ่ง: ค้นคว้า

เราจะสร้างแอปแนว Manifestation สำหรับผู้หญิง

ขั้นแรก: ดูแอปอื่นๆ ในกลุ่มเดียวกันและสังเกตรูปแบบ

Frederick James - inline image

เครดิต: แอป "Stella" และ "Manifest Affirmations"

สิ่งที่ฉันสังเกตเห็น:

  • โทนสีชมพูและอบอุ่น
  • "สวยงาม" มาก โดยเน้นที่ภาพ
  • ขายผลลัพธ์: ไม่ใช่ตัวผลิตภัณฑ์

ขั้นที่สอง: เรียกดู Pinterest

**สิ่งนี้จะทำให้คุณมีบริบทที่กว้างขึ้นเกี่ยวกับกลุ่มเป้าหมายของคุณ

รวมถึงไอเดียสำหรับใช้เป็นทรัพยากรในภายหลัง

Frederick James - inline image

เทรนด์ทั่วไป:

  • คำ: ดึงดูด, สุขภาพดี, เปล่งปลั่ง, การมีอยู่, ความรัก
  • พลังงานอ่อนโยน, มนตราอันทรงพลัง
  • บันทึกภาพใดๆ ที่คุณชอบจริงๆ:

ภาพมุมซ้ายล่างนั้นเจ๋งมากในตัวมันเอง

ขั้นตอนที่สอง: Figma MVP

เคล็ดลับเด็ดในการได้ผลลัพธ์ที่ยอดเยี่ยมจาก AI:

คือการทำ Mockup ใน Figma ก่อน

*ถ้าคุณ Prompt โดยไม่มีข้อมูลอ้างอิงใดๆ คุณจะได้ผลลัพธ์ที่ไม่ดี การลงแรงเล็กน้อยในตอนเริ่มต้นให้ผลตอบแทนที่คุ้มค่ามหาศาล*

1. เทมเพลต:

**มีเทมเพลตฟรีมากมายบน Figma ฉันใช้เทมเพลตนี้:

Frederick James - inline image

2. ฟอนต์

มีฟอนต์สองแบบที่ ทุกคน ใช้:

  • ลุคพรีเมียมระดับสูง: Instrument Serif
  • ลุคมินิมอลทันสมัยโดดเด่น: SF Pro

เป็นไปไม่ได้ที่จะผิดพลาดถ้าใช้ฟอนต์ใดฟอนต์หนึ่งเหล่านี้:

Frederick James - inline image

เครื่องมืออีกสองอย่างคือตัวสร้างเกรเดียนต์และส่วนประกอบกระจกเหลว

Frederick James - inline image

ฉันสร้าง MVP เหล่านี้ภายในไม่กี่นาที

Frederick James - inline image

ขั้นตอนที่สาม: มายากล AI

ตอนนี้ ให้ Prompt GPT-Image-2 ด้วยข้อมูลอ้างอิง MVP ของเรา

ทำให้ภาพหน้าจอเหล่านี้ดูน่าสนใจยิ่งขึ้นและมีสีสันสดใสขึ้นเล็กน้อย ทำให้องค์ประกอบ UI โผล่ออกมาอย่างมีชั้นเชิง ทับขอบโทรศัพท์ ให้เอฟเฟกต์ 3 มิติ สร้างภาพที่แยกจากกัน x ภาพ

คำแนะนำหนึ่งข้อตรงนี้:

ให้ตั้งค่า Model Effort เป็น Medium

แน่นอนว่าคุณสามารถลองเล่นและทดลองได้ แต่สำหรับฉันแล้ว การตั้งค่าที่สูงขึ้นให้ผลลัพธ์ที่แปลก: อัตราส่วนภาพที่ผิดเพี้ยน, ขนาดตัวอักษรที่เพี้ยน ฯลฯ

นี่คือผลลัพธ์ของฉัน:

Frederick James - inline image
  1. คอนทราสต์ องค์ประกอบ UI เป็นแบบ "3 มิติ" พวกมันโผล่ออกมาจากโทรศัพท์ สิ่งนี้ทำให้ดึงดูดสายตา ถ้าคุณดูแอปยอดนิยม เกือบทั้งหมดทำแบบนี้
  1. ความมีชีวิตชีวาแบบละเอียด เพิ่มองค์ประกอบ UI แบบเรืองแสงและประกายระยิบระยับที่รับรู้สีได้ การอัปเกรดเล็กๆ น้อยๆ เหล่านี้มีผลต่อจิตใต้สำนึกของผู้ใช้ สัมผัสการตกแต่งขั้นสุดท้ายอย่างมืออาชีพ
  1. ฟิลเตอร์ภาพ โมเดลได้เพิ่มความมีชีวิตชีวาและความอิ่มตัวของสี บางครั้งอาจทำมากเกินไป ดังนั้นควรจับตาดูไว้ แต่ในที่นี้ มันดูน่าสนใจกว่าอย่างเห็นได้ชัด!หมายเหตุ:

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

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

ขั้นตอนที่สี่: การตกแต่งขั้นสุดท้าย

Apple กำหนดความละเอียดที่เฉพาะเจาะจงมาก

โมเดลรูปภาพจะไม่ส่งออกในรูปแบบที่ถูกต้อง

เราสามารถทำได้สองวิธี:

  1. แก้ไขด้วยตนเองใน Figma (วิธีที่แนะนำ) ใช้เวลา 2 วินาที
  2. ให้ Codex หรือ Claude ตัดให้ได้ขนาดที่ถูกต้อง

สรุป:

1. ค้นคว้าหน้า App Store และ Pinterest

2. สร้าง MVP ใน Figma

3. มายากล AI

4. ปรับขนาดให้ถูกต้องตามข้อกำหนดของ Apple

สร้างต่อใน YouMind

Turn one viral article into a full content workflow

Collect the source, decode the pattern, create assets, draft the story, and distribute from one AI workspace.

Explore YouMind
สำหรับครีเอเตอร์

เปลี่ยน Markdown ของคุณให้เป็นบทความ 𝕏 ที่สะอาดตา

เวลาคุณเผยแพร่งานเขียนยาวของตัวเอง การจัดรูปแบบรูปภาพ ตาราง และบล็อกโค้ดให้เข้ากับ 𝕏 นั้นน่าปวดหัว YouMind เปลี่ยนร่าง Markdown ทั้งฉบับให้เป็นบทความ 𝕏 ที่สะอาดตาและพร้อมโพสต์ทันที

ลอง Markdown เป็น 𝕏

แพตเทิร์นให้ถอดรหัสเพิ่มเติม

บทความไวรัลล่าสุด

สำรวจบทความไวรัลเพิ่มเติม