---
title: "เพิ่ม drop shadow สไตล์ macOS ให้ภาพแคปหน้าจอแบบ \"บางส่วน\" หรือภาพขอบเรียบ"
description: "โดยค่าเริ่มต้น ไม่ว่าคุณจะชอบหรือไม่ก็ตาม คีย์ลัดของ macOS สำหรับแคปหน้าจอแอปแบบเต็ม (⇧- ⌘- 5) จะเพิ่ม drop shadow จาง ๆ รอบภาพที่บันทึกไว้ ซึ่งช่วยให้ภาพดูสวยงามขึ้นเมื่อ…"
canonical: https://oozou.com/til/add-a-macos-style-drop-shadow-to-your-partial-screen-captures-or-plain-bordered-images-153
locale: th
date: 2021-08-20
topic: macos
---

# เพิ่ม drop shadow สไตล์ macOS ให้ภาพแคปหน้าจอแบบ "บางส่วน" หรือภาพขอบเรียบ

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

Published: 2021-08-20 · Topic: [macos](https://oozou.com/th/til-topics/macos) ([markdown](https://oozou.com/th/til-topics/macos.md))

โดยค่าเริ่มต้น ไม่ว่าคุณจะชอบหรือไม่ก็ตาม คีย์ลัดของ macOS สำหรับแคปหน้าจอแอปแบบเต็ม (⇧- ⌘- 5) จะเพิ่ม drop shadow จาง ๆ รอบภาพที่บันทึกไว้ ซึ่งช่วยให้ภาพดูสวยงามขึ้นเมื่อนำภาพหน้าจอหรือรูปภาพไปใส่ในเอกสาร แอป convert ซึ่งเป็นส่วนหนึ่งของชุด [ImageMagick](https://imagemagick.org/script/download.php#macosx) มีคำสั่ง 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"
```

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

![](https://oozou.com/images/til/til-153-1.png)

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

![](https://oozou.com/images/til/til-153-2.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 ได้ง่าย ๆ ภาพจะดูโดดเด่นและดึงดูดสายตาผู้ชมมากขึ้น

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

---

Contact OOZOU: hello@oozou.com · +66 2544 0000 · https://oozou.com/th/contact

More for AI agents: https://oozou.com/llms.txt · every page has a markdown twin at its URL plus ".md"