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

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

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

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

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


Предварительный обзор Smartisan Nut Pro ...
Предварительный обзор Smartisan Nut Pro Иногда малоизвестные компании показывают решения, которые явно заслуживают внимания пользователей. Наприм...
Обзор Sleep Cycle. Настраиваем свой сон...
Обзор Sleep Cycle. Настраиваем свой сонСон - весьма важная составляющая нашей жизни и от качества и продолжительности вашего сна будет зависеть ...
Предварительный обзор Panasonic Lumix DC...
Предварительный обзор Panasonic Lumix DCРелиз камеры Panasonic Lumix DC-G9 получил далеко не таким веселым, как ожидали разработчики, мне так каж...
Обзор Star Wars: Battlefront II. Во всей...
Обзор Star Wars: Battlefront II. Во всейВступление Мне очень трудно оценивать игру объективно, так как я большой фанат «Звездных войн» ...
Предварительный обзор Nokia Steel. Обнов...
Предварительный обзор Nokia Steel. ОбновНикогда бы не подумал, что в сети серьезно будут обсуждать новые умные часы компании Nokia. Однако, совре...
Обзор Destiny 2. Заявка на "Шутер года"...
Обзор Destiny 2. Заявка на Вступление Первая часть игры Destiny игрокам понравилась, но было ощущение, что некоторые момен...
Предварительный обзор Razer Tartarus V2....
Предварительный обзор Razer Tartarus V2.Стоит сразу отметить, что Razer Tartarus V2 - девайс далеко не для всех и не каждый покупатель из числа г...
Обзор Афиша-Еда. Готовим вкусно...
Обзор Афиша-Еда. Готовим вкусноСтоит сразу отметить, что приложение будет интересно далеко не всем - если вы не готовите вообще и это де...
Предварительный обзор LucidSound LS25 eS...
Предварительный обзор LucidSound LS25 eSВ последнее время стало модно все делать для киберспорта - мониторы, игровая периферия, кресла даже. Все ...
Xiaomi Mi Mix 2 официально представлен в...
Xiaomi Mi Mix 2 официально представлен в9 ноября в Москве состоялась российская презентация Xiaomi Mi Mix 2. Это уже второе поколение безработно...
Обзор Need for Speed: Payback. Адреналин...
Обзор Need for Speed: Payback. АдреналинВступление Прежде чем начать обзор на Need for Speed: Payback, а руки уже трясутся рассказать в...
Предварительный обзор SteelSeries Apex M...
Предварительный обзор SteelSeries Apex MВ наше время, как бы это не звучало странно, играя периферия перестала быть просто способом давать команд...
МегаОбзор
МегаОбзор
MegaObzor в социальных сетях:
Яндекс.Метрика
2006-2017 © MegaObzor