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

Мне нравится стиль дизайнеров Google - минимализм в сочетании с превосходной детализацией.  Даже скриншоты на демонстрационных страницах продуктов Google продуманы до мелочей. В этом уроке попробуем повторить гуглостиль при помощи Adobe Photoshop.

Источник исследования находится на странице Сделайте Google поиском по умолчанию:

Эффект лупы на картинке Chrome

Там мы увидим  любопытную деталь на скриншоте окна браузера (я обозначил стрелкой):
  • Эффект фрагментной лупы

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

Создаём скиншот окна браузера

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

Затем расширим при помощи Crop Tool верхнюю часть изображения и "повесим круг" выделения:

Создаём выделение на картинке

Выделение лучше сразу сохранить (Select - Save Selection).
Содержимое выделения нужно скопировать и вставить в отдельный слой:

Вставляем выделенную область

А лучше создать два таких одинаковых слоя с содержимым круга. Один слой будет нести тень, второй - увеличенное изображение.

К слою применяем эффекты (Layer-Layer Style):
  • Drop Shadow
  • Inner Shadow

С одинаковыми параметрами:

Настройка Drop Shadow

Настройка Inner Shadow

Теперь убиваем информацию в слое (я решил эту проблему с помощью яркости-контрастности), чтобы осталась только выше созданная тень:

Стираем информацию в слое

И переходим к самому верхнему слою - вручную его увеличиваем до нужных размеров, загружаем ранее созданное выделение, которое установит ему границу и инвертируем его:

Работа с выделениями на изображении в фотошопе

Затем стираем и вручную немного уменьшаем, чтобы появился белый задник предыдущего стёртого слоя:

Эффект лупы в Adobe Photoshop на скриншоте

Это задник как раз нам и создаст белую рамку.

Результат

Вот что получилось в итоге:
Эффект лупы на изображении Adobe Photoshop скриншот

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

Похожая статья:
Эффект лупы на скриншоте
Загрузка...
Комментарии при помощи соцсетей

Комментариев нет:

Отправить комментарий