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

2008-02-16, Автор - Mushroom; [12225]

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

Урок 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 и тд...
Всем спасибо.

Комментарии:
Последние комментарии на сайте:
Поделиться в социальных сетях:


Предварительный обзор Huawei Honor V9 Pl...
Предварительный обзор Huawei Honor V9 PlКогда состоялся официальный анонс мобильного телефона Honor V9 Play от компании Huawei, все сразу стали с...
Samsung The Frame стал частью выставки в...
Samsung The Frame стал частью выставки вТелевизоры компании Samsung The Frame стали частью экспозиции 7-ой Московской Международной биеннале Совр...
Предварительный обзор Samsung Galaxy J7+...
Предварительный обзор Samsung Galaxy J7+В последнее время стало достаточно много мобильных телефонов компании Samsung, которые привлекают даже бо...
Предварительный обзор BlackBerry KEYone ...
Предварительный обзор BlackBerry KEYone Мобильный телефон BlackBerry KEYone Black Edition в сравнении с оригинальной версией не получил глобальны...
Предварительный обзор ASUS ROG Swift PG2...
Предварительный обзор ASUS ROG Swift PG2Несмотря на то, что игровых мониторов на рынке уже достаточно много, производители продолжают выпускать в...
Обзор The Journey Down: Chapter One. Сме...
Обзор The Journey Down: Chapter One. СмеНа рынке не так много игр в жанре Adventure, ведь это не так эпично выглядит, пользователи в последнее вр...
Philips представила в России 40-дюймовый...
Philips представила в России 40-дюймовыйНа днях, в Москве были представлены две обновленные линейки мониторов: AOC и Philips. Чтобы не быть голос...
Предварительный обзор Xiaomi Mi Notebook...
Предварительный обзор Xiaomi Mi NotebookКомпания Xiaomi вновь покушается на рынок ноутбуков, только если предыдущая модель была вариантов для тек...
Обзор ATOMEGA. В такое вы еще не играли...
Обзор ATOMEGA. В такое вы еще не игралиКогда я первый раз увидел трейлер к игре ATOMEGA, то появилось двоякое чувство. С одной стороны - выгляде...
Предварительный обзор Xiaomi Mi Mix 2. Ш...
Предварительный обзор Xiaomi Mi Mix 2. ШОфициально анонсирован новый мобильный телефон Xiaomi Mi Mix 2, который мы все так давно ждали и верили, ...
Обзор The Coma. Раннер для сильных духом...
Обзор The Coma. Раннер для сильных духомНаверное, когда вы прочитали заголовок к этому обзору, то мысленно уже начали думать о том, зачем создава...
Предварительный обзор Vivo V7+. Шикарное...
Предварительный обзор Vivo V7+. ШикарноеЧто же, можно официально говорить о том, что производители со всего мира резко решили сменить дизайн свое...
МегаОбзор
МегаОбзор
MegaObzor в социальных сетях:
Яндекс.Метрика
2006-2017 © MegaObzor