เพิ่มเงาให้รูปภาพ

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

ตัวเลขสามค่าที่สร้างเงา: ออฟเซ็ต ความเบลอ และสเปรด

เงาที่ไม่ดีเกือบทั้งหมดมาจากการตั้งค่าใดค่าหนึ่งในสามนี้ผิด ออฟเซ็ต คือระยะที่เงาถูกดันออกจากวัตถุ — บอกผู้ดูว่าแสงอยู่ที่ไหน และวัตถุลอยสูงแค่ไหน ความเบลอ คือความนุ่มของขอบ: ความเบลอน้อยอ่านได้ว่าแสงแข็งตรง (แสงแดด แฟลช) ความเบลอมากอ่านได้ว่าแสงกระจาย (วันครึ้ม ซอฟต์บ็อกซ์) สเปรด ขยายหรือย่อรูปทรงของเงาก่อนใส่ความเบลอ ซึ่งเป็นวิธีที่ได้รัศมีหนัก หรือเงาที่มุดเข้าไปเล็กน้อยใต้วัตถุ

วิธีเพิ่มเงาให้รูปภาพ

1. อัปโหลดรูปภาพของคุณ: ลากรูปหลายรูปมาวางในกล่องอัปโหลด หรือแตะเพื่อเลือกหลายรูป ไม่มีอะไรถูกอัปโหลด — ไฟล์ทั้งหมดจะถูกอ่านเข้าเบราว์เซอร์โดยตรง
2. วางแหล่งแสง: ลากดวงอาทิตย์บนแผ่น แหล่งแสง เงาตกไปด้านตรงข้าม และการลากออกจากจุดกึ่งกลางจะดันเงาให้ไกลขึ้น ปุ่มลูกศรใช้ได้เช่นกัน
3. จัดรูปทรงเงา: เลือกชนิด — ตกกระทบ, ชั้นซ้อน, ยาว หรือ เรืองแสง — แล้วตั้ง ความเบลอ, สเปรด, ความทึบ และสีเงา
4. เลือกพื้นหลัง: คงเป็น โปร่งใส สำหรับ PNG หรือเติมด้วยสีทึบหรือไล่สี ระยะขอบเพิ่ม เพิ่มพื้นที่หายใจรอบผลลัพธ์
5. ดาวน์โหลดหรือคัดลอก: บันทึก PNG หรือ JPG ที่ขนาดต้นฉบับ ครึ่งขนาด หรือ 2× — หรือคัดลอก CSS ที่สร้างขึ้นเพื่อใช้เงาเดียวกันบนองค์ประกอบเว็บ

เงาที่ตามวัตถุ ไม่ตามกรอบ

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

ควรใช้ชนิดเงาแบบใด?

ทำไมเป็นเปอร์เซ็นต์ ไม่ใช่พิกเซล

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

เคล็ดลับให้เงาดูสมจริง

รูปภาพของฉันเป็นส่วนตัวหรือไม่?

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

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

เครื่องมือเพิ่มเงานี้ฟรีและเป็นส่วนตัวหรือไม่?

ใช่ คุณใช้ได้ฟรีวันละ 3 ครั้งโดยไม่ต้องสมัครสมาชิก (Pro เพิ่มเป็น 60 ครั้ง) เครื่องมือนี้ทำงานในเว็บเบราว์เซอร์ของคุณด้วย HTML5 canvas ดังนั้นรูปภาพไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ใดๆ และยังอยู่บนอุปกรณ์ของคุณ รูปที่ดาวน์โหลดไม่มีลายน้ำ และไม่ต้องสมัครสมาชิก

เงาตามรูปร่างของ PNG โปร่งใสหรือไม่?

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

จะคงพื้นหลังโปร่งใสได้อย่างไร?

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

ความเบลอกับสเปรดต่างกันอย่างไร?

ความเบลอทำขอบเงาให้นุ่ม โดยค่อยๆ จางไปตามระยะ สเปรดขยายหรือย่อรูปทรงของเงาก่อนเบลอ ดังนั้นสเปรดมากกับความเบลอน้อยจะได้รัศมีคม ส่วนสเปรดน้อยกับความเบลอมากจะได้ก้อนเงานุ่ม

ทำไมเงาของฉันถูกตัดที่ขอบรูป?

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

ขอ CSS ของเงาเดียวกันได้หรือไม่?

ได้ แผง CSS แสดงกฎ box-shadow และ filter drop-shadow ที่พร้อมวาง ซึ่งตรงกับการตั้งค่าปัจจุบัน เป็นพิกเซลที่วัดจากรูปของคุณ คัดลอกไปใช้กับองค์ประกอบเว็บให้ได้ลุคเดียวกันโดยไม่ต้องส่งออกไฟล์

แหล่งข้อมูลเพิ่มเติม

• CSS box-shadow — MDN
• filter: drop-shadow() — MDN
• การผสมอัลฟา — Wikipedia