OOZOU
与我们联系
返回 TIL 列表
macos

为你的“局部”截图或纯边框图片加上 macOS 风格的阴影

August 20, 2021

不管你喜不喜欢,macOS 截取完整应用程序窗口的快捷键(⇧- ⌘- 5)默认会在保存的图片周围加上一层淡淡的阴影。当你把截图或图片放进文档时,这能让画面更有视觉吸引力。convert 这个程序是 ImageMagick 工具包的一部分,提供了一个好用的命令行功能,可以为你的任何图片加上同样的阴影效果(例如用 .⇧- ⌘- 4 截取的局部截图)

安装完成后,你可以用以下命令行命令为图片加上阴影:

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"

运行后会把这张图:

变成这张:

小技巧:你可以在 BASH 或 ZSH 环境中创建一个伪函数,例如在你的 ~/.bashrc 文件里加入这一行:

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

然后(第一次使用时)source 你的 ~/.bashrc 文件使其生效:

source ~/.bashrc

现在,你只要在命令行输入以下命令,就能为任何图片文件加上阴影:

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

(记得如果文件名包含空格,要在文件名前后加上双引号)

用阴影强化 PNG 图片

为 PNG 图片加上阴影可以大幅提升它的视觉吸引力,让它在任何背景上都更加突出。这种阴影效果能营造出深度感,让图片看起来更立体。对设计师和内容创作者来说,在项目中运用带阴影的 png 图片能提升整体美感,让设计更吸睛、更专业。

如何用 CSS 加上阴影

对想通过 CSS 为 PNG 图片加上阴影的网页开发者来说,box-shadow 属性是个非常灵活的工具。下面是一个简单的示例:

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

这段代码会为图片加上淡淡的阴影效果,使用不透明度 50% 的黑色阴影。你可以调整数值来达到想要的阴影投影范围与强度。

阴影 PNG 图片的创意用法

带阴影的 png 图片不只是为了美观,在设计上也能发挥实际作用。例如,阴影可以把观看者的注意力引导到特定元素上、营造层次感,或为扁平化设计增添质感。无论你是在设计网站、创作数字艺术,还是准备演示文稿,阴影都是创作工具箱里的一件利器。

借助 ImageMagick 或 CSS 这类工具,你可以轻松为 PNG 图片应用阴影效果,强化它们的视觉冲击力,确保能抓住观看者的目光。

完成。

更多关于 macos 的笔记

macosNovember 7, 2020

将 SVG 转成 PNG

在 MacOS 上,安装 inkscape(用 brew),然后这样使用:

macosOctober 13, 2020

在 macOS 的 Dock 加入空白间隔来为应用程序分组

打开 term(或同类终端)并粘贴下面这行命令:

macosOctober 13, 2020

在 macOS 上更改系统名称

在 term(或同类终端)中,复制并粘贴:

有项目想法吗?

我们很想听听您正在做的产品。

开始对话hello@oozou.com
OOZOU Logo

曼谷 · 新加坡 · 香港

X
Facebook
Instagram
LinkedIn
OOZOU Co., Ltd.
548 One City Centre
Ploenchit Road
Bangkok 10330
Thailand
+66 2544 0000
hello@oozou.com

服务

  • Web 开发
  • AI 智能体与生成式 AI
  • 移动应用开发
  • 数据分析与工程
  • UI/UX 与产品设计
  • 数字化转型

公司

  • 关于我们
  • 加入我们
  • 博客
  • 案例研究
  • Today I Learned
  • 联系我们

更多

  • 行业
  • 合作伙伴网络
© 2026 OOZOU. 版权所有。
隐私政策行为准则反贿赂反贪腐政策