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

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

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

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

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


Предварительный обзор Razer Project Lind...
Предварительный обзор Razer Project LindПрежде, чем вы начнете говорить о том, что данный ноутбук выглядит нереальным и что его никогда не выпуст...
Обзор World of Warships Blitz. Лучшая мо...
Обзор World of Warships Blitz. Лучшая моНаверное, я никого не удивлю, если скажу, что компания Wargaming является ярким примером того, как можно ...
Предварительный обзор Dell Alienware AW3...
Предварительный обзор Dell Alienware AW3Когда впервые видишь монитор Alienware AW3418HW на фотографиях или вживую, то первая мысль в голове лишь ...
Обзор DQ Heroes. Игра на длительное врем...
Обзор DQ Heroes. Игра на длительное времНесмотря на развитость мобильных игр и большие возможности любого современного смартфона, разработчики иг...
Предварительный обзор Cooler Master Mast...
Предварительный обзор Cooler Master MastКомпьютерный корпус - достаточно важная составляющая вашего настольного ПК, хотя многие и пренебрегают им...
Обзор Elmedia Player. Красиво и удобно...
Обзор Elmedia Player. Красиво и удобноПлееры для просмотра фильмов и сериалов на компьютере в последнее время утратили свою популярность, плюс ...
Предварительный обзор Cooler Master COSM...
Предварительный обзор Cooler Master COSMКомпьютерный корпус является лишь каркасом для сборки компьютера в определенном диапазоне бюджета - если ...
Обзор Psebay. Красивые гонки...
Обзор Psebay. Красивые гонкиВ большинстве случаем я говорю о том, что мобильные игры совершенно не обязаны быть красивыми - вы вполне...
Обзор RIVA case 8460 Black. Ультимейт ре...
Обзор RIVA case 8460 Black. Ультимейт реВступление На протяжении своего дня я активно использую массу разных устройств, которые должны ...
Обзор ORICO QSE-5U-EU-BK. Умное зарядное...
Обзор ORICO QSE-5U-EU-BK. Умное зарядноеПрактически у каждого человека в пользовании есть сразу несколько мобильных устройств, которые частенько ...
Предварительный обзор Samsung Notebook 7...
Предварительный обзор Samsung Notebook 7На протяжении достаточно длительного времени компания Samsung проигрывает на рынке ноутбуков - релизов ма...
Предварительный обзор Dell 2018 XPS 13. ...
Предварительный обзор Dell 2018 XPS 13. Рынок ультрабуков переживает заметный спад - производители не могут конкурировать с Apple в сегменте бизн...
МегаОбзор
МегаОбзор
MegaObzor в социальных сетях:
Яндекс.Метрика
2006-2018 © MegaObzor