ข้ามไปยังเนื้อหา

ตกแต่งภาพหน้าจอและสร้างม็อกอัป

วางภาพหน้าจอบนพื้นหลังไล่สี พร้อมเงา มุมโค้งมน และกรอบเบราว์เซอร์หรืออุปกรณ์ ประมวลผลในเบราว์เซอร์ของคุณ

วางหรือลากภาพหน้าจอมาที่นี่กด Ctrl+V (⌘V) เพื่อวางจากคลิปบอร์ดได้ทันที
เลือกภาพหน้าจอประมวลผลบนอุปกรณ์ของคุณ ไม่ถูกอัปโหลด
ทำงานในเบราว์เซอร์ของคุณ · ไม่ต้องอัปโหลดวิธีการทำงาน

วิธีใช้งาน ตกแต่งภาพหน้าจอ

  1. 1

    วางภาพหน้าจอ

    กด Ctrl+V (⌘V) บนหน้านี้ทันทีหลังแคปหน้าจอ หรือวางไฟล์รูปภาพลงในหน้า

  2. 2

    เลือกพื้นหลัง

    เลือกไล่สี เมช สีพื้น รูปถ่ายของคุณเอง หรือพื้นหลังโปร่งใส

  3. 3

    ใส่กรอบและปรับสไตล์

    เพิ่มกรอบเบราว์เซอร์ หน้าต่าง แล็ปท็อป แท็บเล็ตหรือโทรศัพท์ แล้วปรับระยะขอบ มุมโค้ง เงา และคำบรรยาย

  4. 4

    ส่งออก

    เลือกขนาดที่ตั้งไว้ล่วงหน้าและ 1×, 2× หรือ 3× จากนั้นดาวน์โหลดไฟล์ PNG หรือคัดลอกภาพ

ข้อจำกัดและ Pro

ภาพหน้าจอครั้งละ 1 ภาพ ขนาดสูงสุด 25 MB ใช้ได้ทุกกรอบและพื้นหลัง ส่งออกได้สูงสุด 8000 px ในด้านยาวที่ 1×, 2× หรือ 3× ไม่จำกัดจำนวนและไม่มีลายน้ำ

รองรับไฟล์ต้นฉบับที่ใหญ่กว่า 25 MB ไม่มีกรอบหรือสไตล์ที่ใช้ได้เฉพาะ Pro ดู Pro

เกี่ยวกับ ตกแต่งภาพหน้าจอ

ตัวแต่งภาพหน้าจอจะนำภาพแคปดิบของคุณมาจัดวางเป็นองค์ประกอบที่ออกแบบแล้ว และส่งออกเป็นไฟล์ PNG ขนาดของผลลัพธ์ขึ้นอยู่กับภาพหน้าจอ กรอบ และระยะขอบ เช่น ภาพขนาด 1280 × 800 ในกรอบเบราว์เซอร์ที่ระยะขอบค่าเริ่มต้นจะได้ประมาณ 1510 × 1112 พิกเซลที่ 1× และใหญ่เป็นสองเท่าที่ 2× ส่วนขนาดที่ตั้งไว้ล่วงหน้าอย่าง 16:9, 1:1, 4:5, 9:16, X และ LinkedIn จะขยายผืนผ้าใบให้ได้สัดส่วนของแพลตฟอร์มโดยไม่ครอบตัดภาพ การส่งออกจำกัดที่ 8000 พิกเซลในด้านยาว และหากเลือกพื้นหลังโปร่งใส จะได้ PNG ที่มีช่องอัลฟาซึ่งยังคงมีเงาอยู่

กรอบทั้งหมดเป็นอุปกรณ์และหน้าต่างทั่วไปที่วาดด้วยโค้ดได้ในทุกความละเอียด ได้แก่ เบราว์เซอร์พร้อมแถบที่อยู่แบบสว่างหรือมืด หน้าต่างเดสก์ท็อปพร้อมปุ่มสามสีและชื่อหน้าต่าง แล็ปท็อปที่มีฝาและฐาน แท็บเล็ต และโทรศัพท์ที่มีรอยเจาะแบบเกาะหรือกล้องแบบรูเจาะ มีไล่สีโทนเดียว 12 แบบและเมช 6 แบบ หรือจะใช้สีพื้นหรือรูปถ่ายพร้อมเบลอก็ได้

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

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

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

คุณสมบัติ

กรอบที่วาดด้วยโค้ด

เบราว์เซอร์ หน้าต่าง แล็ปท็อป แท็บเล็ต และโทรศัพท์สองสไตล์ สร้างได้ในทุกความละเอียด

พื้นหลังไล่สีและเมช

ไล่สีโทนเดียวแนว Material เมชผสมสี สีพื้น หรือรูปถ่ายของคุณเอง

ขนาดสำหรับโซเชียล

ผืนผ้าใบ 16:9, 1:1, 4:5, 9:16, X และ LinkedIn ที่ไม่ครอบตัดภาพหน้าจอ

ตกแต่งภาพหน้าจอ: คำถามที่พบบ่อย

ทำให้ภาพหน้าจอดูเป็นมืออาชีพได้อย่างไร?
ให้ภาพมีพื้นที่และมิติ วางบนพื้นหลังไล่สีนุ่ม ๆ ด้วยระยะขอบ 8–12% ทำมุมให้โค้งเล็กน้อย เพิ่มเงาบาง ๆ และใส่ภาพเว็บไซต์ในกรอบเบราว์เซอร์ที่แสดงที่อยู่จริงของคุณ เลือกพื้นหลังที่ไม่ฉูดฉาดเพื่อให้อินเทอร์เฟซเป็นจุดเด่น แล้วส่งออกที่ 2× เพื่อให้ตัวอักษรเล็กยังคมชัดเมื่อโซเชียลย่อขนาดภาพ
ควรเลือกขนาดที่ตั้งไว้ล่วงหน้าแบบไหนสำหรับโซเชียลมีเดีย?
ใช้ 16:9 สำหรับโพสต์บน X และภาพปก YouTube ใช้ LinkedIn สำหรับโพสต์แนวลิงก์ที่สัดส่วน 1.91:1 ใช้ 1:1 หรือ 4:5 สำหรับภาพในฟีด Instagram และ LinkedIn และใช้ 9:16 สำหรับ Stories, Reels และ Shorts ส่วนอัตโนมัติจะปรับผืนผ้าใบให้พอดีกับภาพที่ใส่กรอบ ขนาดที่ตั้งไว้จะขยายเฉพาะพื้นหลัง ภาพหน้าจอจึงไม่ถูกครอบตัดหรือบีบ
ส่งออกพร้อมพื้นหลังโปร่งใสได้หรือไม่?
ได้ เลือก ไม่มี ในส่วน พื้นหลัง แล้ว PNG จะมีช่องอัลฟา โดยมีเพียงภาพหน้าจอที่ใส่กรอบและเงาบาง ๆ เท่านั้นที่ทึบ เหมาะสำหรับวางภาพบนสไลด์สี ส่วนของแลนดิงเพจ หรือไฟล์ดีไซน์ การคัดลอกไปยังคลิปบอร์ดก็คงความโปร่งใสไว้ในแอปที่รองรับ เช่น Figma, Keynote และเครื่องมือออกแบบส่วนใหญ่
กรอบอุปกรณ์เป็นภาพผลิตภัณฑ์จริงหรือไม่?
ไม่ใช่ ทุกกรอบถูกวาดด้วยโค้ดของเครื่องมือจากสี่เหลี่ยม เส้นโค้ง และการไล่สี ไม่ได้นำภาพจากผู้ผลิตมาใช้ จึงขยายได้ทุกความละเอียดและไม่มีภาพเครื่องหมายการค้า รูปทรงเป็นแบบทั่วไปโดยตั้งใจ ได้แก่ โทรศัพท์ที่มีรอยเจาะแบบเกาะหรือกล้องแบบรูเจาะ แล็ปท็อป แท็บเล็ต หน้าต่างเดสก์ท็อป และเบราว์เซอร์
ทำไมจึงควรส่งออกที่ 2× หรือ 3×?
หน้าจอความละเอียดสูงแสดงพิกเซลของอุปกรณ์สองถึงสามพิกเซลต่อหนึ่งพิกเซล CSS ภาพ 1× จึงดูไม่คมบนจอเหล่านั้น และแพลตฟอร์มอย่าง X และ LinkedIn จะย่อภาพที่อัปโหลด ทำให้ตัวอักษรเล็กยิ่งเบลอ การส่งออกที่ 2× ให้พิกเซลเพียงพอสำหรับทั้งสองกรณีในขนาดไฟล์ที่เหมาะสม ส่วน 3× เหมาะกับงานพิมพ์และจอขนาดใหญ่มาก สเกลเปลี่ยนจำนวนพิกเซล ไม่เปลี่ยนเลย์เอาต์
เครื่องมือรูปภาพ ทั้งหมด