โดยค่าเริ่มต้น ไม่ว่าคุณจะชอบหรือไม่ก็ตาม คีย์ลัดของ 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 ช่วยเพิ่มความน่าสนใจได้อย่างมาก ทำให้ภาพโดดเด่นบนพื้นหลังแบบใดก็ตาม เอฟเฟกต์เงานี้สร้างมิติความลึก ทำให้ภาพดูมีความเป็นสามมิติมากขึ้น สำหรับนักออกแบบและคนทำ Content การใช้ภาพ shadow png ในงานช่วยให้งานโดยรวมดูสวยขึ้น น่าสนใจ และดูเป็นมืออาชีพยิ่งขึ้น

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

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

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

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

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

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

แค่ใช้เครื่องมืออย่าง ImageMagick หรือ CSS ก็ใส่เอฟเฟกต์ drop shadow ให้ภาพ PNG ได้ง่าย ๆ ภาพจะดูโดดเด่นและดึงดูดสายตาผู้ชมมากขึ้น

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