เครื่องมือสร้างม็อกอัพอุปกรณ์

วางภาพหน้าจอลงในกรอบ iPhone, Android, iPad, MacBook, หน้าต่างเบราว์เซอร์ หรือจอภาพ แถบวัดการครอปแสดงว่าถูกตัดออกเท่าไรพอดี และไฟล์ PNG ถูกวาดในเบราว์เซอร์ของคุณ

ใช้งานฟรีไม่ต้องสมัครสมาชิกผลลัพธ์ทันที

เครื่องมือสร้างม็อกอัพอุปกรณ์ลองใช้เลย — ฟรี ▼

📱

วางภาพหน้าจอที่นี่

หรือคลิกเพื่อเลือกไฟล์ · หรือกด Ctrl + V เพื่อวาง

PNG JPG WebP อยู่ในเบราว์เซอร์ของคุณ

screenshot.png

ขนาดส่งออก 0 × 0 ภาพหน้าจอเดโมในตัว — วางรูปของคุณเพื่อแทนที่

📱 กรอบอุปกรณ์

แต่ละกรอบใช้สัดส่วนหน้าจอจริงของอุปกรณ์นั้น

แนว

🎯 ความพอดีหน้าจอและแถบวัดการครอป

กำลังตรวจความพอดี…

แพนหน้าต่างที่มองเห็น50%

สีระยะขอบด้านหลังภาพหน้าจอ

🎨 สีกรอบ

🌐 ข้อความเบราว์เซอร์

ชื่อแท็บ

แถบที่อยู่

🌈 พื้นหลัง

สีทึบ

✨ งานเก็บ

ระยะขอบ9%

เงา

แสงสะท้อนบนหน้าจอ

📐 ส่งออก

ไม่มีอะไรถูกอัปโหลด — PNG ถูกเข้ารหัสโดยเบราว์เซอร์ของคุณเอง

Embed เครื่องมือสร้างม็อกอัพอุปกรณ์ Widget

เกี่ยวกับ เครื่องมือสร้างม็อกอัพอุปกรณ์

เครื่องมือ เครื่องมือสร้างม็อกอัพอุปกรณ์ วางภาพหน้าจอลงในกรอบอุปกรณ์จริง: iPhone พร้อม Dynamic Island, โทรศัพท์ Android, iPad, MacBook Pro, หน้าต่างเบราว์เซอร์พร้อมแถบแท็บและแถบที่อยู่ หรือจอเดสก์ท็อปบนขาตั้ง ทุกกรอบถูกวาดตามสัดส่วนหน้าจอจริงของอุปกรณ์นั้น ดังนั้นสิ่งที่คุณส่งออกคือสิ่งที่ภาพหน้าจอจะดูบนฮาร์ดแวร์จริง กรอบถูกวาดบนแคนวาสในแท็บเบราว์เซอร์ของคุณเอง ซึ่งหมายความว่าภาพหน้าจอของแอปที่ยังไม่เปิดตัวหรือแดชบอร์ดภายในไม่ออกจากเครื่องของคุณ

สามกรอบที่คนหยิบใช้บ่อยที่สุด

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

กรอบอุปกรณ์ตัวเครื่อง ขอบจอ Dynamic Island รอยบาก หรือส่วนครอบหน้าต่าง วาดจากสัดส่วนจริงของแต่ละอุปกรณ์ ไม่ใช่สี่เหลี่ยมมุมโค้งทั่วไป

ความพอดีหน้าจอวิธีวางภาพหน้าจอบนหน้าจอที่เกือบไม่เคยรูปทรงเดียวกัน: เติมแล้วครอป หรือพอดีทั้งรูปแล้วเติมขอบ

พื้นหลังพื้นที่ระยะขอบด้านหลังอุปกรณ์ ไล่สี สีทึบ สุ่มจากภาพหน้าจอของคุณ หรือโปร่งใสทั้งหมดสำหรับสไลด์

งานเก็บความลึกเงาและแสงสะท้อนบนหน้าจอ สองสิ่งที่ทำให้กรอบแบนไม่ดูเหมือนแผนภาพ

แถบวัดการครอป: ส่วนที่เครื่องมือม็อกอัพส่วนใหญ่ตัดออก

หน้าจออุปกรณ์มีรูปทรงคงที่ หน้าจอ iPhone คือ 1179 คูณ 2556 ซึ่งประมาณ 9:19.5 และแทบไม่มีอะไรที่คุณถ่ายภาพหน้าจอจะตรงนั้นพอดี เครื่องมือสร้างม็อกอัพส่วนใหญ่ย่อขยายรูปของคุณเงียบๆ จนคลุมหน้าจอ แล้วทิ้งส่วนที่ล้นขอบไป ดังนั้นคุณจึงรู้ว่าก้นตารางราคาหายไป หลังจากโพสต์แล้ว

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

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

กฎที่ใช้ได้: ต่ำกว่าประมาณ 8% ที่ถูกครอป ผู้อ่านมองไม่เห็น 8% ถึง 25% ใช้ได้ถ้าคุณแพนเพื่อเก็บตัวแบบ และเกิน 25% คุณควรถ่ายภาพหน้าจอใหม่ที่อัตราส่วนอุปกรณ์ หรือสลับเป็น พอดีทั้งรูป

กรอบไหน และที่ความละเอียดเท่าไร

กรอบ	พิกเซลหน้าจอ	อัตราส่วน	ใช้เมื่อ
iPhone	1179 × 2556	9:19.5	ภาพ App Store โพสต์แอปมือถือ โฟลว์เริ่มต้นใช้งาน
Android	1080 × 2400	9:20	รายการ Play Store และทุกอย่างที่เฉพาะ Android
iPad Pro	1668 × 2388	7:10	แอปแท็บเล็ต เครื่องมืออ่านและวาด จอคีออสก์
MacBook Pro	3024 × 1964	3:2	ซอฟต์แวร์เดสก์ท็อป เครื่องมือออกแบบ เวิร์กโฟลว์นักพัฒนา
เบราว์เซอร์	1440 × 900	16:10	หน้าเว็บและแดชบอร์ด SaaS ที่ URL เป็นส่วนสำคัญ
จอภาพ	2560 × 1440	16:9	แดชบอร์ดแนวกว้าง โปรแกรมตัดต่อวิดีโอ ภาพนิ่งงานนำเสนอ

ภาพหน้าจอที่ขนาดพิกเซลนั้นหรือใหญ่กว่าจะคมที่ทุกขนาดส่งออก ภาพที่เล็กกว่าจะถูกขยายขึ้น และสิ่งแรกที่เสียคือแอนตีเอเลียสบนข้อความเล็กในภาพหน้าจอ

วิธีใช้เครื่องมือสร้างม็อกอัพอุปกรณ์: ทีละขั้นตอน

เพิ่มภาพหน้าจอของคุณ: วางไฟล์ PNG หรือ JPG บนแผงอัปโหลด คลิกเพื่อเลือกไฟล์ หรือกด Ctrl+V เพื่อวางตรงจากคลิปบอร์ด
เลือกกรอบอุปกรณ์: iPhone, Android, iPad, MacBook, เบราว์เซอร์ หรือจอภาพ กรอบโทรศัพท์และแท็บเล็ตสลับระหว่างแนวตั้งกับแนวนอนได้ด้วย
ตรวจแถบวัดการครอป: ถ้าถูกซ่อนมากเกินไป ให้ลากตัวเลื่อนแพน หรือสลับเป็น พอดีทั้งรูป เพื่อไม่ให้มีอะไรหาย
จัดสไตล์กรอบ: ตั้งสีกรอบ พื้นหลัง ระยะขอบ เงา และแสงสะท้อน บนกรอบเบราว์เซอร์ พิมพ์ชื่อแท็บและที่อยู่ของคุณเอง
ส่งออก: เลือกขนาดส่งออก แล้ว ดาวน์โหลด PNG เพื่อบันทึกม็อกอัพ หรือ คัดลอกรูป เพื่อวางลงโพสต์

เคล็ดลับที่ใช้ได้จริง

ถ่ายภาพหน้าจอที่อัตราส่วนอุปกรณ์เมื่อทำได้ หน้าต่างเบราว์เซอร์ที่ย่อเหลือ 1179 คูณ 2556 ก่อนจับภาพ ทำให้แถบวัดการครอปอ่าน 0% และม็อกอัพคมระดับพิกเซล
ใช้กรอบเบราว์เซอร์เมื่อ URL สำคัญ การพิมพ์โดเมนของคุณเองลงแถบที่อยู่ใส่แบรนด์ลงในรูปโดยไม่ต้องใส่คำบรรยาย
รักษาระยะขอบระหว่าง 6% ถึง 12% น้อยกว่านั้นอุปกรณ์ชนขอบโพสต์ มากกว่านั้นหน้าจออ่านไม่ออกในฟีด
จับสีกรอบให้เข้ากับภาพหน้าจอ Space Black ใต้ภาพหน้าจอโหมดมืด เงิน หรือไทเทเนียมใต้ภาพสว่าง ส่วนครอบเบราว์เซอร์ตามตัวเลือกเดียวกันอัตโนมัติ
ลดแสงสะท้อนสำหรับหน้าจอที่มีข้อความมาก เงางามบางๆ อ่านได้ว่าเป็นกระจก แรงเกินไปอ่านได้ว่าเป็นสต็อกโฟโต้และบังข้อความของคุณ
ส่งออกโปร่งใสสำหรับสไลด์ พื้นหลัง ไม่มี ให้คุณได้อุปกรณ์ลอยพร้อมเงา พร้อมวางลงเด็คหรือส่วนฮีโร่ใดก็ได้

ความเป็นส่วนตัว

ทุกขั้นตอนทำงานในแท็บเบราว์เซอร์ผ่าน HTML5 canvas API ภาพหน้าจอของคุณถูกอ่านจาก object URL ในเครื่อง วาดเข้ากรอบ และเข้ารหัสเป็น PNG โดยเบราว์เซอร์เอง ไม่มีรูปถูกอัปโหลด จัดเก็บ หรือส่งต่อ และเมื่อหน้าโหลดแล้ว เครื่องมือทำงานต่อได้โดยไม่ต้องมีเครือข่าย

คำถามที่พบบ่อย

ภาพหน้าจอของฉันถูกอัปโหลดไปเซิร์ฟเวอร์หรือไม่?

ไม่ กรอบอุปกรณ์ถูกวาดด้วย HTML5 canvas API ในแท็บเบราว์เซอร์ของคุณเอง และภาพหน้าจอถูกอ่านจาก object URL ในเครื่อง ไม่มีอะไรถูกส่งไปที่ใด ดังนั้นม็อกอัพของแอปที่ยังไม่เปิดตัว แดชบอร์ดภายใน หรืองานลูกค้าจึงอยู่บนเครื่องของคุณ หลังจากหน้าโหลดแล้ว เครื่องมือทำงานต่อได้โดยไม่ต้องมีเครือข่ายเลย

มีกรอบอุปกรณ์แบบใดบ้าง?

หกแบบ: iPhone พร้อม Dynamic Island, โทรศัพท์ Android พร้อมกล้องเจาะรู, iPad Pro, MacBook Pro พร้อมรอยบากและฐาน, หน้าต่างเบราว์เซอร์พร้อมแถบแท็บและแถบที่อยู่ และจอเดสก์ท็อปบนขาตั้ง แต่ละกรอบใช้สัดส่วนหน้าจอจริงของอุปกรณ์นั้น ดังนั้นม็อกอัพที่ทำที่นี่จึงตรงกับที่ภาพหน้าจอจะดูบนฮาร์ดแวร์

ภาพหน้าจอของฉันไม่ใช่รูปทรงเดียวกับหน้าจออุปกรณ์ จะเกิดอะไรขึ้น?

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

ภาพหน้าจอควรมีความละเอียดเท่าไร?

ให้ตรงกับอุปกรณ์ที่คุณใส่กรอบ: 1179 คูณ 2556 สำหรับ iPhone, 1080 คูณ 2400 สำหรับโทรศัพท์ Android, 1668 คูณ 2388 สำหรับ iPad, 3024 คูณ 1964 สำหรับ MacBook, 1440 คูณ 900 สำหรับหน้าต่างเบราว์เซอร์ และ 2560 คูณ 1440 สำหรับจอภาพ ขนาดนั้นหรือใหญ่กว่าจะคมทุกขนาดส่งออก ภาพหน้าจอที่เล็กกว่ายังใช้ได้ แต่จะถูกขยายขึ้น และขอบนุ่มจะเห็นรอบข้อความ

ส่งออกอุปกรณ์บนพื้นหลังโปร่งใสได้หรือไม่?

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

ทำไมกรอบเบราว์เซอร์ถึงกลายเป็นสีเข้ม?

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

อ้างอิงเนื้อหา หน้าหรือเครื่องมือนี้ว่า:

"เครื่องมือสร้างม็อกอัพอุปกรณ์" ที่ https://MiniWebtool.com/th/เครื่องมือสร้างม็อกอัพอุปกรณ์/ จาก MiniWebtool, https://MiniWebtool.com/

by miniwebtool team. Updated: Sep 4, 2026