Стеклянные иконки для сайта

14 апреля 19:37 2012

Добрый день, давайте сегодня попытаемся сделать вот такую красивую иконку:
Стеклянные иконки для сайта
Они отлично подойдут для оформления сайта, будет удачным решением для социальных кнопок. На основе этого урока можно расширить идею и уже доработать ещё какие-нибудь эффекты для иконок.

И так, давайте по порядку:

Этап 1. Заготовка

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

Теперь, добавьте новый слой (Ctrl+Shift+N), чтобы мы смогли нарисовать саму иконку с округлёнными уголками.

Для этого выберите инструмент "Скругленный прямоугольник"

Стеклянные иконки для сайта

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

Стеклянные иконки для сайта

После этого, можно начинать рисовать нашу иконку. Для этого проведите инструментом "Прямоугольник" по новому слою, только не забудьте зажать кнопку Shift, чтобы стороны у иконки были равны.

Когда вы начертите квадрат, нажмите сочетание клавиш ctrl+enter — это выделит нашу иконку. Теперь залейте её каким-нибудь цветом (цвет сейчас не важен).

Вы должны получить, что-то похожее на это:

Стеклянные иконки для сайта

Этап 2. Наложение эффектов для иконки

Чтобы иконки выглядели как иконки :), надо добавить к ним тень, для этого в свойствах слоя (два клика по самому слою в окне слоёв, приведут вас в свойства), укажите вот такие настройки для тени (Drop Shadow):

Стеклянные иконки для сайта

Так же надо нанести какой-нибудь градиент, тут всё зависит от вкуса и от того, какие вы хотите видеть иконки. Я использовал вот такой градиент:

Стеклянные иконки для сайта

Для того, чтобы разнообразить фон иконок, можно добавить какую-нибудь лёгкую текстуру, я добавил текстуру 4 на 2 пикселя, у неё половину высоты занимают прозрачные пиксели, а вторую половину чёрные пиксели.

Стеклянные иконки для сайта

Прозрачность подбирайте сами, индивидуально.

Этап 3. Окончательный

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

Для своей иконки я использовал одноцветный рисунок, как говорится просто и со вкусом. Для этого графического элемента, надо добавить лёгкую, едва заметную тень:

Стеклянные иконки для сайта

В свойствах тени я указал вот такие значение:

Стеклянные иконки для сайта

Цвет тени надо подбирать, опираясь на цвет фона, поэтому не следует всё слепо повторять за этим уроком, надо немного экспериментировать.

Этап 4. Создание блика

Это самый главный этап, так как в эпоху WEB2.0, всё должно выглядеть естественно и запоминающе, простые иконки с простым фоном, уже никого не удивят, поэтому давайте сделаем блик.

Создайте ещё один слой у нашего проекта и опять выберите инструмент "Скругленный прямоугольник", тот которым мы вначале урока рисовали нашу иконку, только теперь выставьте округление в 9 пикселей и нарисуйте новый контур, чтоб он визуально оставался внутри основного слоя иконки (2-3 пикселя достаточно).

Нажимаем ctrl+enter, чтобы выделить наш квадрат и заливаем его полупрозрачным градиентом.

У вас должно получится вот так:

Стеклянные иконки для сайта

После этого, выберите инструмент "Pen" и нарисуйте линию среза, по середине нашей иконки. Потом доведите этим инструментов весь низ, то есть надо выделить всю нижнюю часть, нажать сочетания клавиш ctrl+enter для выделения и нажать кнопку Delete, чтобы удалить градиент с нижней части иконки.

Стеклянные иконки для сайта

В конце вы должны получить вот такую иконку:

Стеклянные иконки для сайта

Но а дальше только ваши эксперименты с цветом, текстурами, может быть даже размерами.

Если на данном этапе вам сложно выполнять урок, то я советую вам практиковаться на простых уроках, так же оставляйте ваши вопросы на форуме http://www.cyberforum.ru/photoshop/, он полностью посвящён фотошопу и вам всегда помогут в решение вашей проблемы. И помните, никакие учебники не научать вас хорошо работать в программе Photoshop, только постоянная практика залог успеха.

На этом всё, спасибо за внимание.