โดยค่าเริ่มต้น ไม่ว่าคุณจะชอบหรือไม่ก็ตาม คีย์ลัดของ macOS สำหรับแคปหน้าจอแอปแบบเต็ม (⇧- ⌘- 5) จะเพิ่ม drop shadow จาง ๆ รอบภาพที่บันทึกไว้ ซึ่งช่วยให้ภาพดูสวยงามขึ้นเมื่อนำภาพหน้าจอหรือรูปภาพไปใส่ในเอกสาร แอป convert ซึ่งเป็นส่วนหนึ่งของชุด ImageMagick มีคำสั่ง command line ที่ใช้เพิ่มเอฟเฟกต์ drop shadow แบบเดียวกันนี้ให้กับภาพใด ๆ ของคุณได้ (เช่น ภาพแคปหน้าจอบางส่วนที่ได้จาก .⇧- ⌘- 4)

เมื่อติดตั้งแล้ว คุณสามารถใช้คำสั่งต่อไปนี้เพื่อเพิ่ม drop shadow ให้กับภาพของคุณ:

convert "Screen Shot 2021-07-07 at 09.47.13.png" \( +clone -background black -shadow 80x20+0+15 \) +swap -background transparent -layers merge +repage "Screen Shot 2021-07-07 at 09.47.13.png"

ซึ่งจะเปลี่ยนจากภาพนี้:

ให้กลายเป็นภาพนี้:

Pro-tip: คุณสามารถสร้าง pseudo-function ใน environment ของ BASH หรือ ZSH ได้ เช่น เพิ่มบรรทัดนี้ในไฟล์ ~/.bashrc ของคุณ:

shadow () { convert "$@" \( +clone -background black -shadow 80x20+0+15 \) +swap -background transparent -layers merge +repage "$@"; }

จากนั้น source ไฟล์ ~/.bashrc (เฉพาะครั้งแรก) เพื่อเปิดใช้งาน:

source ~/.bashrc

ตอนนี้คุณสามารถเพิ่ม drop shadow ให้กับไฟล์ภาพใดก็ได้จาก command line เพียงพิมพ์:

shadow "Screen Shot 2021-07-07 at 09.47.13.png"

(อย่าลืมใส่ double-quote ครอบชื่อไฟล์ถ้าชื่อมีช่องว่าง)

เพิ่มความโดดเด่นให้ภาพ PNG ด้วย Drop Shadow

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

วิธีเพิ่ม Drop Shadow ด้วย CSS

สำหรับนักพัฒนาเว็บที่ต้องการเพิ่ม drop shadow ให้ภาพ PNG ผ่าน CSS พร็อพเพอร์ตี้ box-shadow เป็นเครื่องมือที่ยืดหยุ่นมาก ตัวอย่างสั้น ๆ:

css img { box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); }

โค้ดตัวอย่างนี้เพิ่มเอฟเฟกต์เงาจาง ๆ ให้กับภาพ โดยใช้เงาสีดำที่มีความทึบ 50% ปรับค่าต่าง ๆ ได้ตามระยะและความเข้มของเงาที่ต้องการ

ไอเดียการใช้ภาพ Shadow PNG อย่างสร้างสรรค์

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

ด้วยเครื่องมืออย่าง ImageMagick หรือ CSS คุณสามารถใส่เอฟเฟกต์ drop shadow ให้ภาพ PNG ได้อย่างง่ายดาย ช่วยเพิ่มพลังให้ภาพและดึงดูดสายตาผู้ชมได้อย่างแน่นอน

เสร็จเรียบร้อย