Photoshop:如何创建看起来“被巧妙地推动”的按钮?

平面设计 adobe-photoshop Photoshop 效果 按钮
2022-02-16 11:04:12

任何想法如何创建“巧妙地推动”按钮,如以下屏幕截图中的“活动过滤器”按钮?

带有微妙按钮的样机

样机来自这里

更新:这是我到目前为止所得到的:

当前状态

3个回答

尝试使用Inner Shadow图层样式:

内阴影图层样式

您可以调整大小和不透明度以调整您希望效果的微妙程度

按下按钮

编辑 - 如何密切复制示例:

仔细看看这个例子,它使用 3 个特性“弹出”:

细节

  1. 给按钮深度的内部阴影
  2. 提供前景深度的白色阴影
  3. 渐变笔触,使按钮更有深度

我使用以下图层样式设置来尝试尽可能接近地重新创建示例(Gradient Overlay当然除了 a):

图层样式

结果:

结果

这是一个在 PSD 中复制的相当简单的 CSS 按钮。我相信约翰看到的内部阴影实际上只是一个未对齐的像素。

以下是基本成分:

  1. 深色外边框
  2. 中等到浅色渐变(与边框相同的色调)
  3. 文字阴影使用边框颜色向下移动 1px

按钮上看起来凹陷的“移除”按钮提供了进一步的深度错觉。

为了改善样式的 3D 效果,我将对文本阴影进行更改。如果文本被压入按钮而不是坐在按钮上,阴影将向相反方向移动。

在此处输入图像描述

典型的技术是反转梯度。标准按钮通常从上到下从浅到深。然后按下按钮从暗到亮。此外,还可以应用内阴影。