Как создать неразрушающий и многоразовый эффект размытого / матового стекла?

Как я могу создать общий размытый фон, который можно использовать на нескольких изображениях, как в примере ниже?

Мне нужен png с белым матовым стеклом, который я могу использовать для наложения поверх обычных изображений, чтобы придать им всем вид матового стекла (как будто вы почти можете разобрать, что за этим стоит; возможно, некоторые цвета).

Примеры:

^{Нажмите на изображение для полного разрешения}

Возможно, белый фон с текстурой (зернистая текстура), затем размытие по Гауссу, а затем использование его в качестве слоя поверх всех моих изображений.

Я знаю, что ссылка, которую я разместил выше, вероятно, просто размытое изображение, но мне нужен слой, который можно повторно использовать в проекте iOS. Таким образом, можно использовать слой представления поверх разделов изображения и сделать изображение под ним размытым. Может быть, я не должен использовать размытие в качестве термина здесь. Я ищу матовое стекло.

То, что я пытаюсь сделать с этим изображением, это импортировать его в мое приложение iOS и использовать его как фон просмотра. Затем, когда этот вид перекрывает другие виды (вид карты, фото и т. Д.), Все они становятся матовыми. Я пытаюсь создать эффект этого изображения из iOS 7. И нет, я не хочу использовать новые функции дизайна iOS 7, потому что большинство моих пользователей все еще работают на iOS 5. И нет, я не хочу заставлять их обновляться.

Вы не можете просто наложить «размытое» изображение, которое размывает случайное изображение позади него. Эффект размытия должен сэмплировать изображение позади, чтобы транспонировать / растягивать пиксели, поэтому его нужно применять там.

Тем не менее, вы можете сделать песчаную / зернистую текстуру и использовать ее в качестве многослойного слоя, чтобы получить зернистую текстуру.

Обновление - как Дерек предлагает в другом ответе, вы можете сделать неразрушающее размытие, преобразовав слой изображения в смарт-объект, а затем примените к нему размытие. Затем вы можете ввести смарт-объект и редактировать его независимо от размытия.

Взглянув на второе предоставленное вами изображение, что-то подобное невозможно с наложением PNG. Это абсолютно сделано программным способом, а не наложением PNG. Я попробовал некоторые из других предложений, опубликованных здесь, но ни одно из них не подошло близко (но, возможно, вам повезет больше)

Это действительно выходит за рамки ваших требований, но нужно ли это делать с наложением? Я не уверен, что вы получите эффект, который вы надеетесь достичь, используя этот метод. Если у вас есть такая возможность, я бы сделал это программно.

У меня нет понимания того, как настроено ваше приложение, но вы могли бы сделать это с помощью фильтра CSS3:

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

[примечание для ясности: процесс представляет собой изображение продукта на переднем плане с альфа-маской и фоновое изображение, которое размыто с использованием фильтра CSS]

До

После

^{Изображение предоставлено: Филипп Леара}

Вы можете проверить живую демонстрацию этого здесь

В будущем это может быть сделано намного проще, используя предложенный backdrop-filterстиль CSS, но в настоящее время его поддержка практически отсутствует .

Другой вариант - создать смарт-объект и применить к нему свои размытия и эффекты. Делая это таким образом, вы все равно сможете открыть смарт-объект и изменить то, что внутри него.

---Редактировать---

Так как я разместил свой ответ выше, вопрос был отредактирован и немного изменен. Теперь необходимо добиться размытия в приложении для iOS, я бы предложил сделать размытие с помощью кода, чтобы это могло повлиять на любое изображение, которое вы хотите.

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

Более подробная информация об этом здесь: http://notes.ericwillis.com/2009/10/blur-an-image-with-csharp/

На Dribble есть пара хороших фильтров о том, как сделать размытие в Photoshop. Может быть, это может быть полезно и для вас. Мне особенно нравится этот неразрушающий способ получить эффект. Я знаю, что уже есть что-то об этом, но вот ссылки:

http://dribbble.com/shots/1210251-Live-Blur-Free-PSD

http://dribbble.com/shots/1109921-iOS7-Blur-Photoshop-Action

Если это все еще необходимо, я пытался добиться того же эффекта и не мог.

Я сделал это с помощью плагина html2canvas и stackBlur, который я нашел здесь: http://jsfiddle.net/WtQjY/201/ .

Я не автор плагинов. И это всего лишь фрагмент кода. Я изменил это, чтобы быть проще и быстрее:

.blur {
    -webkit-фильтр: размытие (7 пикселей);
-moz-фильтр: размытие (7 пикселей);
-о-фильтр: размытие (7 пикселей);
-ms-фильтр: размытие (7 пикселей);
фильтр: размытие (7 пикселей);

}

//////////////////////////////////
// включить библиотеку jquery
// JQuery
$ (Документ) .ready ({
$ ( '# YourButton'). Нажмите ({

$ ( '# YourContainer') toggleClass ( 'размывание').

});
});

это все еще очень медленно, но это работает.

Поэтому я создал свою собственную версию этого сценария, которую я решил поделиться. Я сделал два фоновых изображения и прикрепил одно из них к дочернему элементу div, а затем четкую и ясную версию к основному фону. Просто установите фоны обоих объектов фиксированными и центрированными, и они будут совпадать.

Вот демоверсия: http://www.palandforsale.us/frosted-glass/

Если я правильно понимаю ваш вопрос, я не думаю, что вы можете. «Размытие» - это операция, которая выполняется в программном обеспечении, каждое по-своему. Как эскиз применяет размытие, может отличаться от того, как это делают Photoshop или Google Chrome.

Следовательно, вы не можете экспортировать изображение с «размытием». Blur всегда взаимодействует с тем, что стоит за ним, и его нельзя экспортировать из приложения, в котором вы его создаете.

1. Сделайте 50% серый слой поверх слоя, который вы хотите создать размытый и матовый слой.
2. Заполните его шумом, количество которого зависит от ваших потребностей
3. Размытие по Гауссу, как вам нужно.
4. Над этим слоем вы можете добавить слой кривых и отрегулировать значения белого и черного, потянув за белый конец или подняв черный конец слоя кривых.

Эти два слоя должны дать морозный и размытый эффект. Порядок этих двух слоев может быть изменен.

Создайте действие, которое дублирует изображение и применяет размытие по Гауссу. Я верю, что это единственный способ сделать это.