Дизайн скриншотов в стиле Google - Фокус

Сегодня позаимствуем концепт у дизайнеров Google с их нового сайта про подсказки и воспроизведём такой же эффект фокуса на своём скриншоте в фоторедакторе Adobe Photoshop. Наверняка фирменные дезигнеры делают его по одному щелчку мыши, но я разберу его создание пошагово, так как лёгких путей фотожаберы искать не привыкли.

Образец от Google:

Скриншот из сообщества G+ в качестве исходника:

Обратите внимание, что гугловский скриншот состоит из двух областей:

• область выделения - стандартная и чёткая, с завышенной контрастностью и даже немного темнее
• область за выделением - размытая, осветлённая, скорее всего наложена белая заливка

Само выделение имеет серый кант и белую обводку.

Результат:

В нём я немного добавил отсебятины - увеличил белую область фокусного круга.

Приступаем к реализации намеченной цели - созданию фокусного круга и размытию всего остального.
Базовые статьи, где описано большинство упомянутых ниже техник (упоминать каждый раз пути к инструментам в статьях - не comme il faut):

• Инструменты выделения Marquee Tools и меню Select
• Дизайн скриншотов в стиле Google
• Дизайн скриншотов в стиле Яндекс

На всех скриншотах будет присутствовать окошко Layers, чтобы продемонстрировать кол-во слоёв в документе.
Сначала рисуем выделением (как это сделать ссылки выше) стандартный эллиптический круг:

Это выделение нужно сохранить, делаем Save Selection.

Затем копируем всё, что внутри выделения и два раза вставляем. Получится два одинаковых слоя, два кругляка поверх базового скриншота. Сразу в окошке Layers делаем самый нижний слой и самый верхний пока невидимыми глазу мастера, чтобы не мешались. Нас интересует только второй слой, он же  - первый нами вставленный:

Выделяем его в окошке Layers и загружаем сохранённое выделение Load Selection:

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

Применяем к белому кругу эффекты слоя:

В ссылках на статьи (см. выше) эти эффекты подробно описаны. Они создадут у кругляша необходимые размытые тени. С параметрами тени желательно поиграться.

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

Что получается? Мы нашему будущему фокусу возвращаем содержимое.

Теперь возвращаемся к самому первому слою, активируем его, делаем видимым, загружаем сохранённое выделение, затем инвертируем:

Теперь важный момент. Нужно создать ещё один слой и поместить над базовым так, чтобы он получился под нашими двумя кругляшами. Затем этот слой заливается обычным белым цветом за один щелчок с лёгкими параметрами (см. на скрине):

Это даёт эффект мягкого фокуса без применения фильтров семейства Blur.

Возвращаемся к самому верхнему слою - содержимому нашего фокусного круга, добавляем ему чуток контрастности и немного (-8 единиц) уменьшим яркость, чтобы он стал чуть темнее белого задника. Можно даже туда немного blue (синего) добавить, как на гугловском скриншоте, но я не стал:

На этом скрине видна история всех действий. Так что завершающим аккордом станет сведение слоёв - Flatten Image и сохранение файла в обычный веб-формат скриншотов (png или jpeg).

Базовый скриншот взят с этой страницы. Все права на него принадлежат компании Google.