Размытые изображения – это сейчас очень модно. Есть несколько различных способов его создания, так что мы изучим эту технику в Photoshop, Illustrator и Sketch.

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

Размытые изображения в Photoshop

Если вам нужно просто огромное размытое изображение для фона или чего-то подобного, тогда неважно, какую программу вы выберите. Но если помимо простого размывания вам необходимо производить и другие манипуляции, такие как создание составного изображения и т.д., лучше воспользоваться другим пакетом. Опять же, название говорит само за себя – Photoshop.
photoshop canvas

Как только изображение открыто внутри Photoshop, никогда не лишним будет сделать копию слоя перед тем, как что-либо редактировать, на случай если в будущем понадобится оригинальный слой. Кликните на слой правой кнопкой мыши и выберите Duplicate Layer (дублировать слой) или нажмите Command + J.
photoshop duplicate layer

Далее мы конвертируем изображение в смарт-объекты. Для этого нажмите правой кнопкой мыши и выберите Convert to a Smart Object. (конвертировать в смарт-объекты).
photoshop smart object

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

Выделив смарт-объект, выберите Gaussian Blur (размытие по Гауссу) из меню Filter > Blur > Gaussian Blur
photoshop gaussian blur

Значение радиуса размытия – это больше дело вкуса и конкретной цели. Для этого примера давайте выберем значение 50.
photoshop gaussian blur panel 50

О да, красиво и размыто.

photoshop blurry

И поскольку мы использовали смарт-объект, а не сырое растрированное изображение, мы можем кликнуть двойным щелчком на smart filter (смарт-фильтр) для повторной активации опции размытия и изменения ее параметров.
photoshop gaussian blur panel 20

Вот так вы можете размыть изображение в Photoshop.

Размытые изображения в Illustrator

illustrator opened

Размывание фотографий в Illustrator очень схоже с Photoshop. Когда изображение открыто или помещено в Illustrator, выделите изображение на холсте и выберите пункт меню Effect > Blur > Gaussian Blur.
illustrator blur

Появится такое же диалоговое окошко для настройки радиуса размытия. Выставьте значение 50, и все!

illustrator 50

В отличие от фотошопа, эти объекты уже по умолчанию “смарт-объекты”, Тут нельзя уничтожить ни один пиксель, так как в Illustrator все векторизировано.

Если вам нужно вернуться назад и перенастроить радиус размытия, убедитесь, что показывается панель Appearance (Window > Appearance), дважды кликните на Gaussian Blur. Теперь вы сможете выполнить настройки.
illustrator appearance

Вот и все, вы стали профессиональным “размывателем фотографий” в Illustrator.

Размытие изображений в Sketch

В Sketch довольно легко сделать размытие по Гауссу. Выделите изображение на холсте.
sketch

Видите тот чекбокс справа, называется Gaussian Blur? Кликните его и введите значение размытия. Вот и все.
sketch checkbox

Можно и по-другому размыть изображение в Sketch, применив фоновое размытие на объект на переднем плане. Фоновое размытие отлично работает для фотографий, но также хорошо подходит для всего, что расположено под объектом – текст, векторные объекты и т.д.

Нажмите R, чтобы выбрать инструмент прямоугольника и нарисуйте фигуру помимо изображения.
rectangle

Выделив прямоугольник, посмотрите вправо и нажмите на текст Gaussian Blur. Откроется выпадающий список, в котором нужно выбрать Background Blur(фоновое размытие). Измените параметр Fill(заливка) на 20%, чтобы посмотреть эффект в действии.
rectangle with blur added

Резюме

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

Похожие записи

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Самое подробное руководство по дизайну в Sketch

Работая со Sketch последние три года, я освоил ряд ключевых техник, которые значительно улучшили мой рабочий процесс. Так как я, помимо рисования, также обожаю прототипировать и кодить, мне нужен инструмент для быстрого выполнения дизайн-проектов и легкой генерации исходников. Sketch вместе с его плагинами и другие инструменты для прототипирования полностью справляются с этой задачей. Часть 1 Часть 3 Часть 4

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5