Иконка с отражением

Мода на картинки с отражениями прочно вошла в веб-дизайн, иконки в этом стиле довольно часто применяется при создании сайта. Поэтому, чтобы не отставать от моды, рассмотрим способ создания иконки с отражением в программе Photoshop.

Вначале открываем файл с исходным изображением, к которому будет добавлено отражение (рис. 1).

Рис. 1. Исходная картинка

Расширяем изображение по вертикали, чтобы на свободное место поместить копию. Для этого в меню Image > Canvas Size (Изображение > Размер холста) установим высоту как 200% (рис. 2).

Рис. 2. Изменение высоты холста

Теперь делаем копию слоя и отражаем его содержимое по вертикали через меню Edit > Transform > Flip Vertical (Правка > Трансформирование > Отразить по вертикали). Поскольку картинки накладываются друг на друга, содержимое верхнего слоя необходимо переместить вниз, чтобы создать иллюзию отражения (рис. 3).

Рис. 3. Картинка с будущим отражением

В панели Layers (Слои) для слоя с отражением создаем маску (кнопка ), затем выбираем инструмент Gradient (Градиент). Нам нужен линейный градиент с переходом от белого к черному цвету, как показано на рис. 4.

Рис. 4. Параметры градиента

Инструментом Градиент проводим воображаемую линию от верхней к нижней части отражения. В итоге получится плавное исчезновение части картинки (рис. 5). Если результат с первого раза не устраивает, градиентом можно воспользоваться еще раз, тем более что мы работаем с маской, и сам слой остается нетронутым.

Рис. 5. Отражение после добавления маски к слою

Окончательно уменьшаем значение Opacity (Непрозрачность) в панели Layers до желаемого результата (обычно 20–40%), и отрезаем невидимую нижнюю часть картинки. Набор слоев с их параметрами приведен на рис. 6.

Рис. 6. Слои для создания иконки с отражением

Полученный результат после уменьшения картинки продемонстрирован на рис. 7.

Рис. 7. Окончательная картинка