ภาพหน้าจอดิบดูแบนเมื่อวางลงในทวีต สไลด์ หรือแลนดิงเพจ เครื่องมือนี้วางมันบนไล่สีสวย ๆ (หรือสีทึบ) เพิ่มระยะขอบให้หายใจ ทำมุมมน และใส่เงานุ่มด้านล่าง — ลุคเนี้ยบที่คุณเห็นในภาพหน้าจอผลิตภัณฑ์ทั่วไป เลือกอัตราส่วนภาพสำหรับโซเชียลหรือปล่อยเป็นอัตโนมัติ
ทุกอย่างประกอบแบบเรียลไทม์บนแคนวาสในเบราว์เซอร์ของคุณและส่งออกเป็น PNG ภาพหน้าจอของคุณ — ที่อาจแสดงข้อมูลส่วนตัว — ไม่มีการอัปโหลด
วิธีใช้งาน
- เพิ่มภาพหน้าจอลากภาพที่ต้องการแต่งเข้ามา
- จัดสไตล์กรอบเลือกพื้นหลัง ระยะขอบ รัศมีมุมและเงา เลือกอัตราส่วนภาพหากต้องการ
- ดาวน์โหลด PNGบันทึกภาพที่แต่งแล้ว พร้อมสำหรับโซเชียล เอกสารหรือสไลด์
เปลี่ยนภาพแคปดิบ ๆ ให้เป็นภาพระดับโปรดักต์
เครื่องมือตกแต่งภาพหน้าจอวางภาพแคปของคุณลงบนพื้นหลัง แล้วเพิ่มสามสิ่งที่ทำให้ภาพหน้าจอดูผ่านการออกแบบแทนที่จะดูแค่กดแคปมา: padding รอบภาพ มุมโค้งมนบนตัวภาพแคปเอง และเงานุ่ม ๆ ที่ยกมันลอยขึ้นจากพื้น เลือกพรีเซ็ตไล่สี สีทึบ หรือฉากหลังโปร่งใส ปรับแต่ละตัวควบคุม แล้วดูพรีวิวอัปเดตสดก่อนส่งออก PNG
ทั้งหมดประกอบขึ้นบน canvas ในเบราว์เซอร์ ภาพหน้าจอจึงไม่ถูกอัปโหลดเลย เรื่องนี้สำคัญเพราะภาพแคปอาจมีข้อความส่วนตัว ใบแจ้งหนี้ แดชบอร์ด หรือโทเคนในแถบ URL — แค่เพิ่มเงาไม่ควรต้องแลกกับการส่งข้อมูลพวกนั้นไปเซิร์ฟเวอร์ ไม่ต้องมีบัญชี และหลังหน้าเว็บโหลดแล้วก็ทำงานออฟไลน์ต่อได้
รูปทรงที่ใช่สำหรับทุกที่ที่มันจะไป
ทุกที่ที่คุณโพสต์ภาพมีสัดส่วนที่ชอบ ล็อกเอาต์พุตเป็น 16:9 สำหรับสไลด์และการ์ดโซเชียลแนวกว้าง 1:1 สำหรับโพสต์จัตุรัสบน Instagram หรือ LinkedIn 3:4 สำหรับภาพแนวตั้งที่กินพื้นที่จอโทรศัพท์มากขึ้น หรือปล่อยเป็น Auto ให้เฟรมห่อภาพแคปพร้อม padding ของมัน เมื่อล็อกสัดส่วน padding จะเติมเต็มส่วนที่เหลือของเฟรม ไฟล์ส่งออกจึงวางลงช่องได้พอดีโดยไม่ต้องครอปเก้ ๆ กัง ๆ
ตั้งพื้นหลังเป็นโปร่งใสแล้ว PNG จะส่งออกโดยพื้นที่ padding ว่างเปล่า — padding รัศมีมุม และเงายังอยู่ครบ หายไปแค่สีพื้นหลังเงา นั่นคือเวอร์ชันที่คุณนำไปวางบนพื้นหลังของตัวเองใน Figma, Keynote หรือภาพ thumbnail
ผู้คนใช้ทำอะไรบ้าง
ภาพเปิดตัวและ changelog — ลอยภาพหน้าจอโปรดักต์บนไล่สีนุ่ม ๆ ให้โพสต์รีลีสหรือ changelog ดูตั้งใจ ไม่ใช่ดิบ ๆ
ทวีตและเธรดขัดเงาแล้ว — เพิ่ม padding มุมโค้ง และเงาจาง ๆ ให้ภาพแคปเลิกตีกันกับข้อความรอบตัว
สไลด์นำเสนอ — ส่งออกที่ 16:9 พร้อมพื้นหลังสะอาด ให้ภาพหน้าจอนั่งเรียงสม่ำเสมอทั้งพรีเซนเทชัน
โพสต์โซเชียลจัตุรัส — ล็อก 1:1 ให้ภาพแคปแนวกว้างลงกริด Instagram หรือ LinkedIn ได้โดยไม่ถูกครอป
แอสเซตสำหรับ Figma และ Keynote — ส่งออกบนพื้นหลังโปร่งใสเพื่อคงมุมโค้งและเงาไว้ แล้ววางลงเลย์เอาต์ของคุณเอง
ภาพหัวเอกสาร — วางภาพหน้าจอบนสีแบรนด์ทึบ ได้ภาพ hero เรียบร้อยตรงแบรนด์สำหรับ docs หรือ wiki
ภาพหน้าจอเปล่า ๆ ดูแบนไม่ว่าคุณจะวางที่ไหน
ภาพหน้าจอที่จับตรงจากจอของคุณคือสี่เหลี่ยมของพิกเซลที่มีขอบคมทั้งสี่ด้าน ในตัวมันเองก็โอเคสำหรับรายงานบั๊ก แต่ทันทีที่คุณหย่อนมันลงในทวีต สไลด์ ส่วนหัวของแลนดิงเพจ หรือเอกสาร Notion มันดูทำไม่เสร็จ มันชนกับข้อความรอบ ๆ พอดี มุมรู้สึกคมและถูก และไม่มีการแยกระหว่างภาพกับพื้นหลัง คุณเคยเห็นเวอร์ชันที่ขัดเกลามาร้อยครั้งแล้ว ภาพหน้าจอสินค้าลอยอยู่บนไล่เฉดสีนุ่ม ๆ มีที่หายใจรอบ ๆ มุมมนอ่อน ๆ และเงาจาง ๆ ที่ยกมันขึ้นจากหน้า ลุคนั้นไม่ใช่ฟิลเตอร์หรือเทมเพลตสำเร็จรูป มันคือสิ่งเล็ก ๆ สามอย่างซ้อนกัน และเครื่องมือนี้ทำสามอย่างนั้นพอดี
คุณหย่อนภาพหน้าจอลงบนแคนวาสแล้วมันจัดวางภาพเสร็จแบบสดในเบราว์เซอร์ของคุณ คุณเลือกพื้นหลัง ไล่เฉดสีสำเร็จรูป สีทึบ หรือโปร่งใส ตั้งว่าจะให้มีช่องว่างรอบภาพหน้าจอเท่าไร เลือกรัศมีมุม และปรับเงาตกขึ้นหรือลง พรีวิวอัปเดตขณะคุณทำ เมื่อดูใช่แล้ว คุณ export PNG ภาพหน้าจอที่อาจมีเธรดอีเมล แดชบอร์ด แชต หมายเลขบัญชี อะไรก็ตาม ถูกวาดตรงลงบนอิลิเมนต์ <canvas> และไม่เคยออกจากแท็บ ไม่มีการอัปโหลด ไม่มีบัญชี และเมื่อหน้าเว็บโหลดแล้ว มันทำงานต่อได้ตอนปิดเครือข่าย
ช่องว่าง มุมมน เงา และไล่เฉดสี ทำอะไรจริง ๆ
- ช่องว่าง ให้ภาพหน้าจอมีระยะขอบไม่ให้อัดชนขอบ ช่องว่างนั้นคือสิ่งที่ทำให้มันอ่านเป็นวัตถุที่จงใจวางบนพื้นผิวมากกว่าการจับภาพดิบ
- มุมมน บนตัวภาพหน้าจอทำให้มุมฉากคมสี่มุมนุ่มลง เป็นการเปลี่ยนเล็กจิ๋วที่อ่านได้ทันทีว่า "ออกแบบมา" แทน "คว้ามา"
- เงาตกนุ่ม แยกภาพหน้าจอจากพื้นหลัง มันจึงดูเหมือนนั่งอยู่สูงกว่าพื้นผิวเล็กน้อยแทนที่จะแปะแบนราบ คงมันให้จาง นั่นคือสิ่งที่ขายความลึกโดยไม่ดูหนัก
- พื้นหลังไล่เฉดสี (หรือทึบ) เติมสีลงในช่องว่าง ไล่เฉดสีสองโทนอ่อน ๆ คือเหตุผลใหญ่ที่สุดเดียวที่ทำให้ภาพหน้าจอเปิดตัวแอปและบันทึกอัปเดตดูแพง สีทึบเป็นทางเลือกที่สงบกว่าและเข้ากับแบรนด์
รวมกันเหล่านี้คือลุค "ภาพหน้าจอสินค้า" และนั่นคือขอบเขตทั้งหมดของเครื่องมือ ไม่มากไม่น้อยไปกว่านั้น
อัตราส่วนสำหรับที่ที่มันจะไป
ผลลัพธ์เป็น อัตโนมัติ ได้ (เฟรมแค่ห่อภาพหน้าจอบวกช่องว่าง) หรือล็อกเป็น 16:9, 4:3, 1:1 หรือ 3:4 อัตราส่วนสำคัญเพราะทุกที่ที่คุณโพสต์มีรูปทรงที่มันชอบ 16:9 สำหรับชุดสไลด์และการ์ดโซเชียลกว้าง 1:1 สำหรับโพสต์สี่เหลี่ยม Instagram หรือ LinkedIn 3:4 สำหรับภาพสูงที่เต็มหน้าจอมือถือมากกว่า ล็อกอัตราส่วนแล้วช่องว่างจะเติมส่วนที่เหลือของเฟรมรอบภาพหน้าจอของคุณ การ export จึงหย่อนลงช่องนั้นได้โดยไม่ถูกครอปอย่างเก้กัง
พื้นหลังโปร่งใส โดยตั้งใจ
ตั้งพื้นหลังเป็น โปร่งใส แล้ว PNG จะ export โดยพื้นที่ช่องว่างใสแทนที่จะมีสี นั่นคือตัวที่คุณต้องการเมื่อคุณจะวางภาพหน้าจอมุมมนมีเงาลงบนพื้นหลังของคุณเองใน Figma, Keynote หรือภาพย่อ คุณคงช่องว่าง รัศมี และเงาไว้ และหย่อนมันลงบนพื้นผิวใดก็ตามที่คุณมีอยู่แล้ว เงายังอยู่ แค่การเติมสีหลังมันหายไป
ทำไมในเครื่องเท่านั้นคือประเด็นตรงนี้
ภาพหน้าจอเป็นหนึ่งในสิ่งส่วนตัวที่สุดที่คุณจะอยากแชร์เวอร์ชันหนึ่งของมันอย่างเงียบ ๆ การจับภาพเดียวแสดงชื่อลูกค้า ใบแจ้งหนี้ DM ส่วนตัว ตัวเลขภายใน โทเคนในแถบ URL ได้ ตัวปรับสวยที่อัปโหลดภาพของคุณไปยังเซิร์ฟเวอร์เพื่อ "ประมวลผล" กำลังขอให้คุณส่งมอบทั้งหมดนั้นแค่เพื่อเพิ่มเงา ที่นี่การจัดวางเป็นงานแคนวาสธรรมดาในเบราว์เซอร์ของคุณเอง จึงไม่มีอะไรให้อัปโหลดและไม่มีอะไรให้ต้องไว้ใจ
หมายเหตุตรงไปตรงมาหนึ่งข้อเรื่องขอบเขต ตัวนี้เพิ่มความขัดเกลาแบบไล่เฉดสี-ช่องว่าง-เงา และไม่มีอะไรอื่น มันไม่ห่อภาพหน้าจอของคุณในกรอบเบราว์เซอร์หรือกรอบมือถือจำลอง และมันไม่เพิ่มลูกศร ความเบลอ หรือคำอธิบายประกอบ มันคือลุคปรับสวย ทีละภาพหน้าจอ
ทำไมต้อง IMG.DIY
ไล่สีหรือสีทึบ
ไล่สีพรีเซ็ตหรือสีทึบใดก็ได้
ระยะขอบและมุมมน
เว้นที่หายใจและมุมมน
เงานุ่ม
ปรับความลึกได้เพื่อลุคลอยตัว
เป็นส่วนตัว
ประกอบในเครื่อง — ไม่มีการอัปโหลด