Добрый день, давайте сегодня попытаемся сделать вот такую красивую иконку:

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

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

Этап 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, только постоянная практика залог успеха.

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