Як створити неруйнівний та багаторазовий ефект розмитого / матового скла?

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

Мені потрібно біле матове скло, яке шукає 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-filter: blur (7px);
-moz-фільтр: розмиття (7 пікселів);
-o-фільтр: розмиття (7 пікселів);
-ms-filter: blur (7px);
фільтр: розмиття (7 пікселів);

}

////////////////////////////////////
// включати бібліотеку jquery
// jQuery
$ (документ). вже ({
$ ('# YourButton'). Click ({

$ ('# YourContainer'). ToggleClass ('розмиття');

});
});

це все ще дуже повільно, але це працює.

Тому я створив свою власну версію цього сценарію, на яку я подумав, що поділюсь. Я зробив два фонові зображення і приєднав одне з них до дочірнього діва, а потім чітку і чітку версію до основного фону. Просто встановіть фони обох об'єктів зафіксованими та по центру, і вони будуть збігатися.

Ось демонстрація: http://www.palandforsale.us/frosted-glass/

Якщо я правильно розумію ваше запитання, я не думаю, що можете. "Розмиття" - це операція, яка виконується за допомогою програмного забезпечення, кожен по-своєму. Те, як ескіз застосовує розмиття, може бути іншим способом, ніж те, як це роблять Photoshop або Google Chrome.

Отже, ви не можете експортувати зображення із "розмиттям". Розмиття завжди взаємодіє з тим, що за ним стоїть, і його неможливо експортувати з програми, в якій ви створюєте.

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

Ці два шари повинні надавати морозний і розмитий ефект. Порядок цих двох шарів можна змінити.

Створіть дію, яка дублює зображення та застосує розмиття Гаусса. Це єдиний спосіб PS це зробити, я вважаю.