Добрый день, давайте сегодня попытаемся сделать вот такую красивую иконку: Они отлично подойдут для оформления сайта, будет удачным решением для социальных кнопок. На основе этого урока можно расширить идею и уже доработать ещё какие-нибудь эффекты для иконок. И так, давайте по порядку:
Создайте новое изображение (ctrl+N) с размером 128*128 пикселей. Залейте его каким-нибудь фоном или можно даже оставить прозрачным.
(ctrl+N)
Теперь, добавьте новый слой (Ctrl+Shift+N), чтобы мы смогли нарисовать саму иконку с округлёнными уголками.
(Ctrl+Shift+N)
Для этого выберите инструмент "Скругленный прямоугольник"
"Скругленный прямоугольник"
Задайте округление для прямоугольника в 10 пикселей, не забудьте выставить режим Path:
Path
После этого, можно начинать рисовать нашу иконку. Для этого проведите инструментом "Прямоугольник" по новому слою, только не забудьте зажать кнопку Shift, чтобы стороны у иконки были равны.
"Прямоугольник"
Shift
Когда вы начертите квадрат, нажмите сочетание клавиш ctrl+enter — это выделит нашу иконку. Теперь залейте её каким-нибудь цветом (цвет сейчас не важен).
ctrl+enter
Вы должны получить, что-то похожее на это:
Чтобы иконки выглядели как иконки :), надо добавить к ним тень, для этого в свойствах слоя (два клика по самому слою в окне слоёв, приведут вас в свойства), укажите вот такие настройки для тени (Drop Shadow):
(Drop Shadow)
Так же надо нанести какой-нибудь градиент, тут всё зависит от вкуса и от того, какие вы хотите видеть иконки. Я использовал вот такой градиент:
Для того, чтобы разнообразить фон иконок, можно добавить какую-нибудь лёгкую текстуру, я добавил текстуру 4 на 2 пикселя, у неё половину высоты занимают прозрачные пиксели, а вторую половину чёрные пиксели.
Прозрачность подбирайте сами, индивидуально.
Теперь надо создать ещё один дополнительный слой, в нём будет размешаться текст или какой-нибудь графический элемент, это уже вам выбирать.
Для своей иконки я использовал одноцветный рисунок, как говорится просто и со вкусом. Для этого графического элемента, надо добавить лёгкую, едва заметную тень:
В свойствах тени я указал вот такие значение:
Цвет тени надо подбирать, опираясь на цвет фона, поэтому не следует всё слепо повторять за этим уроком, надо немного экспериментировать.
Это самый главный этап, так как в эпоху WEB2.0, всё должно выглядеть естественно и запоминающе, простые иконки с простым фоном, уже никого не удивят, поэтому давайте сделаем блик.
Создайте ещё один слой у нашего проекта и опять выберите инструмент "Скругленный прямоугольник", тот которым мы вначале урока рисовали нашу иконку, только теперь выставьте округление в 9 пикселей и нарисуйте новый контур, чтоб он визуально оставался внутри основного слоя иконки (2-3 пикселя достаточно).
Нажимаем ctrl+enter, чтобы выделить наш квадрат и заливаем его полупрозрачным градиентом.
У вас должно получится вот так:
После этого, выберите инструмент "Pen" и нарисуйте линию среза, по середине нашей иконки. Потом доведите этим инструментов весь низ, то есть надо выделить всю нижнюю часть, нажать сочетания клавиш ctrl+enter для выделения и нажать кнопку Delete, чтобы удалить градиент с нижней части иконки.
"Pen"
Delete
В конце вы должны получить вот такую иконку:
Но а дальше только ваши эксперименты с цветом, текстурами, может быть даже размерами.
Если на данном этапе вам сложно выполнять урок, то я советую вам практиковаться на простых уроках, так же оставляйте ваши вопросы на форуме http://www.cyberforum.ru/photoshop/, он полностью посвящён фотошопу и вам всегда помогут в решение вашей проблемы. И помните, никакие учебники не научать вас хорошо работать в программе Photoshop, только постоянная практика залог успеха.
На этом всё, спасибо за внимание.