Как воссоздать этот эффект размытия iOS7

Ответы:

29

Нижняя часть размыта по Гауссу и имеет полупрозрачное белое наложение.

Шаг 1: Выберите область наложения на фоне (исходное изображение) и примените размытие по Гауссу с радиусом 12 пикселей.

Шаг 2. Создайте новый слой, выберите ту же часть для наложения, залейте его белым и дайте этому слою непрозрачность 66%.

Воспроизведено с верхней частью вашего эталонного изображения:
РЕДАКТИРОВАТЬ: новые параметры в соответствии с оригиналом

введите описание изображения здесь

Питер Уолсер
источник
Я бы предположил, что это сделано с кодом, если это скриншот. Я предполагаю, что это сводится к тому, просит ли он или она сделать это в композиции или макете, или внедрить это онлайн.
Эрик
@ Питер Уолсер, как создать область наложения, которая будет применена к гауссову, если есть еще слои? Нужно сначала объединить их?
Фред Коллинз
1
@FredCollins: да, вы сначала объединяете их и размываете выделение, либо создаете новый слой с копией объединенного выделения (которое необходимо будет воссоздавать при каждом изменении слоя).
Питер Уолсер
@PeterWalser спасибо. Последний вопрос. Чтобы создать новый прозрачный слой с непрозрачностью 66%, я использую инструмент прямоугольник, но я чувствую, что есть лучший способ. Например, создать маску / обтравочную маску для размытого слоя или что-то подобное. Что ты посоветуешь?
Фред Коллинз
С помощью отдельного слоя вы можете быстро настроить общую непрозрачность. Решение для маски непрозрачности дает тот же результат, здесь вы можете даже настроить непрозрачность на пиксель. И, конечно, вы можете комбинировать оба подхода (маска + прозрачность слоя). Все, что работает лучше для вас.
Питер Уолсер
7

Вы не определили, какую программу или технологию вы используете. Итак, хотя Питер описал хороший способ сделать это с помощью Photoshop , я хотел бы добавить, что этот эффект также можно создать с помощью CSS3.

Вот вершина необходимого CSS:

#iOSblur
{
    -webkit-filter: blur(12px);
    -moz-filter: blur(12px);
    -o-filter: blur(12x);
    -ms-filter: blur(12px);
    filter: blur(12px);
}

#iOSopacity
{
    opacity: 0.6;
}

Не говоря, что это то, как вы должны это делать ... на самом деле, я бы лично использовал процедуру Питера.

е-суши
источник