平面设计 - 如何创建无损且可重复使用的模糊/磨砂玻璃效果？ - 吾爱随笔录

平面设计 adobe-photoshop 模糊

2022-01-16 06:34:44

如何创建可用于多个图像的通用模糊背景，类似于下面的示例？

我需要一个看起来像白色磨砂玻璃的 png，我可以将它设置为用于叠加在常规图像上，使它们看起来像磨砂玻璃一样（就像你几乎可以辨认出它背后的东西；也许是一些颜色）。

例子：

在此处输入图像描述

也许是带有纹理（颗粒状纹理）的白色背景，然后对其进行高斯模糊处理，然后将其用作我所有图像的图层。

我知道我上面发布的链接可能只是一个模糊的图像，但我需要一个可以在 iOS 项目中重用的层。这样，它可以用作图像部分的视图层，并使下面的图像看起来模糊。也许我不应该在这里使用模糊作为术语。我正在寻找磨砂玻璃外观。

我试图对这张图片做的是将它导入到我的 iOS 应用程序中，使用它作为视图背景。然后，当此视图超过其他视图（地图视图、照片等）时，它们都会被磨砂。我正在尝试从 iOS 7 创建此图像的效果。不，我不想使用新的 iOS 7 设计功能，因为我的大多数用户仍在使用 iOS 5。不，我不想强迫他们升级。

4个回答

您不能只叠加一个模糊其背后随机图像的“模糊”图像。模糊效果需要对后面的图像进行采样以转置/扩展像素，因此需要在此处应用。

但是，您可以制作沙质/颗粒状纹理并将其用作多层以获得颗粒状纹理外观。

更新 - 正如 Derek 在另一个答案中建议的那样，您可以通过将图像层转换为智能对象来进行非破坏性模糊，然后对其应用模糊。然后，您可以输入智能对象并独立于模糊进行编辑。

看看您提供的第二张图片，使用 PNG 叠加层是不可能的。这绝对是以某种方式以编程方式完成的，而不是使用 PNG 覆盖。我已经尝试过这里发布的其他一些建议，但没有一个接近（但也许你会有更好的运气）

这确实超出了您的要求，但这是否必须通过覆盖来完成？我不确定你会得到你希望使用这种方法达到的效果。如果您有能力，我会改为以编程方式执行此操作。

我不了解您的应用程序是如何设置的，但是您可以使用 CSS3 过滤器来做到这一点：

.blurred {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

[为清楚起见：该过程是带有 alpha 蒙版的产品的前景图像，以及使用 CSS 过滤器模糊的背景图像]

前

我们的产品！

你可以在这里查看一个现场演示

将来，使用提议的 CSS 样式可能会更容易backdrop-filter，但目前对此的支持几乎不存在。

另一种选择是创建一个智能对象，并将模糊和效果应用于智能对象。这样做，仍然可以让您打开智能对象并更改其中的内容。

- -编辑 - -

自从我发布了上面的答案以来，这个问题已经被编辑并略有改变。现在的请求是在 iOS 应用程序中实现模糊，我建议使用代码进行模糊，这样它可以影响您想要的任何图像。

private static Bitmap Blur(Bitmap image, Int32 blurSize)
{
    return Blur(image, new Rectangle(0, 0, image.Width, image.Height), blurSize);
}

Dribble 上有几个关于如何在 Photoshop 中制作模糊的好过滤器。也许这些对你也有帮助。我特别喜欢这种非破坏性的方式来获得效果。我知道这已经有一些东西了，但这里是链接：

其它你可能感兴趣的问题