如何创建一个底部有两个阴影的按钮?

平面设计 adobe-photoshop 网站设计
2022-02-15 04:03:45

我不是一个设计师。我想知道如何在 Photoshop 中创建类似 Wix 的按钮。

他们提供多种按钮,但我想要底部两侧都有阴影的按钮。任何帮助,将不胜感激。

在此处输入图像描述

4个回答

这是一个常见问题,但通常用于代码。要在 Photoshop 中创建它:

  • Photoshop 中的新图层

在此处输入图像描述

  • 在下面画一个稍微小一点的矩形
  • 填充黑色

在此处输入图像描述

  • 滤镜>高斯模糊
  • 半径大约 5-7 像素,玩设置

在此处输入图像描述

  • 编辑 > 变换 > 变形

在此处输入图像描述

  • 将不透明度降低 20% 左右

在此处输入图像描述

另一个教程在这里

免费文件

免费 .psd 文件在这里用于阴影。

代码

就个人而言,如果它要在一个站点内,我会对其进行编码。要了解如何对其进行编码,您可以在此处查看堆栈的答案。一个投影生成器在这里和另一个选项在这里

编辑: 查看您的示例后,请注意已完成两次。该图层的不透明度约为 80-90%,并在靠近边缘的位置弯曲,然后复制一个更宽的阴影,更改为 15-20% 左右并拉伸。

该人很可能使用 3D 软件工具或 Photoshop 中的基本 3D 工具来创建阴影。

但是,可以通过复制蓝色形状图层、在副本上创建投影、将填充设置为 0%、渲染图层并使用变形工具调整阴影形状来制作此特定示例。阴影层将放置在蓝色形状层下方。

而且,随着对级联样式表 rev 的持续扩散和支持。3、你可以简单地用CSS创建阴影:

CSS 阴影代码示例

您给出的图像看起来像是一条黑线,上面设置了不透明度过滤器,因此它部分显示。您可以通过小心地将曲线与按钮底部对齐来创建它。

高温高压