Рисуем стеклянные иконки

Вот такие вот иконки у нас получатся :-)

Урок Adobe PhotoshopУрок Adobe Photoshop


Для этого урока использовал всего-то 7-ю версию фотошопа (english) Итак, начнем. Вот что должно получиться:
Урок Adobe Photoshop
Шаг 1: Для начала создаем изображение 128*128.

Заливаем его нужный фоном или оставляем прозрачный фон.
Создаем новый слой (ctrl+shift+N).
Далее выбираем инструмент "скругленный прямоугольник" (shift+U несколько раз пока не попадем на то что нам нужно).

Урок Adobe Photoshop

Задаем скругление 10 пикселей.
Выставляем его в режим Path как показано на рисунке.


Урок Adobe Photoshop

При зажатой клавиже shift рисуем скругленный прямоугольник на слое что мы создали.
Нажимаем ctrl+enter для преобразования контура в выделение и заливаем любым цветом (на данный момент цвет не важен).
Должно получится что-такое:

Урок Adobe Photoshop

Шаг 2: Создаем тень для полученного скругленного прямоугольника.

В свойствах слоя задаем следующие параметры тени:

Урок Adobe Photoshop

Налаживаем градиент (цвет вы можете выбирать сами - поэкспереминтируйте). Я, например, использовал следующий градиент:

Урок Adobe Photoshop

Можно также наложить любую текстуру (я использовал текстуру 4*2 пикселя, где половину высоты занимает черный цвет, а другую половину прозрачные пиксели, таким образом я получил линии):

Урок Adobe Photoshop

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

Шаг 3. Создаем еще один слой на котором мы размещаем текс или рисунок.

Это может быть цветной рисунок/текст или одноцветный рисунок/текст. Я использовал нашего с вами мега-обзорного человечка:-) уж очень забавный он :-) Вот он:

Урок Adobe Photoshop

Урок Adobe Photoshop

Далее в свойствах слоя выставляем параметры тени:

Урок Adobe Photoshop

Цвет тени выбирайте исходя из цвета фона.

Шаг 4. Создание блика.

Создаем еще один слой где изпользуя инструмент "скругленный прямоугольник" (уже просто U) рисуем контур с скруглением 9 пикселей и отступами по боках от "основного тела" иконки порядка 1-2 пикселя. Нажимаем ctrl+enter для преобразования контура в выделение и заливаем его полупрозрачным градиентом (от белого до прозрачного). Должно получится как на рисунке:

Урок Adobe Photoshop

Далее используя инструмент "pen" (нажимаем "P"), отрисовуем дугу среза по середине иконки. Должно получится что похожее как на рисунке. Нажимаем ctrl+enter для преобразования контура в выделение и удаляем лишний градиент (del).

Урок Adobe Photoshop

В результате должно получится что-то похожее на это:

Урок Adobe Photoshop
Такой метод дает довольно неплохие результаты:

Урок Adobe Photoshop и тд...
Всем спасибо.
Tecno Next-Gen Bezelless Concept Phone, POVA 8 Pro 5G Tonino…
После дебюта модульного концепт-смартфона TECNO на MWC 2026 компания не останавливается в поиске новых ре…
На IFA 2026 бренд Dreame представили экшен-камеры и 3D-принт…
На выставке IFA 2026 мировой бренд Dreame демонстрирует очередной этап расширения своей глобальной экосис…
Американцы научились направлять солнечные лучи ночью…
Американский стартап Reflect Orbital получил разрешение Федеральной комиссии по связи США на запуск перво…
Dreame стала лидером по количеству проданных робот-пылесосов…
Dreame Group стала мировым лидером в сегменте роботов-пылесосов как по количеству проданных устройств, та…
МегаОбзор
ЭЛ № ФС 77 - 68301. Выходные данные СМИ МегаОбзор
2006-2026
© MegaObzor