Иконка щита в Фотошопе

Очередной перевод урока от дизайнера фрилансера, основателя ряда интернет проектов (tutsplus.com) . Перед уроком хочется сказать несколько слов о методе автора -а. Автор урока несомненно растровик, и работает исключительно олдскульными методами. Благо и урок написан лет 5 назад. Тем не менее нет способов плохих, и хороших. И если вы всерьез занимаетесь дизайном вам понадобится весь инструментал и мощь Фотошопа. Стиль работы автора не гибок. Он не использует маски, почти не работает со стилями слоя. С другой стороны подобный стиль дает ему больше гибкости и свободы для творчества. А итоговый дизайн выглядит не типично и базовые эффекты в глаза не бросаются. Перевод подготовлен специально для hronofag.ru

[divider top=»0″]

В этом уроке мы будем пользоваться инструментом Перо Pen Tool, при помощи которого мы нарисуем форму иконки щита. Затем мы применим градиенты, придадим щиту металлические края и блики по центру. Фактически эту иконку я сделал, когда подготавливал графику для некоторых новостных сообщения для psd.tutsplus.com В этом уроке я постараюсь описать все свои шаги.

Задний фон

Начнем работу с градиента от темно-серого до черного. Я нарисовал его радиальным градиентом, о котором вы можете подробнее прочесть в статье Как сделать градиент в Фотошопе.

Нажмите комбинацию Ctrl+R чтобы включить линейки. И вытащите несколько направляющих из линеек на рабочую область. Это можно сделать кликнув по линейке мышкой и вытянув из неё направляющую. Расставьте их так как у меня на картинке ниже. Так как я рисую треугольник, я хочу быть уверенным в том, что все получится красиво и симметрично.

Помните, что в любой момент вы можете скрыть направляющие комбинацией Ctrl+’ . Это полезно, так как порой направляющие начинают мешать. Так же кликнув по линейке левой кнопкой мышки вы увидите список различных единиц измерений. Для веб, конечно проще всего работать с пикселями. Так как моя рабочая область равна 500 на 500 пикселей, я поставил направляющие на 100, 250 и на 400 пикслей по горизонтали. А по вертикали на 100 и 250 пикселей.

Рисуем основу иконки в векторе

Далее выбирайте инструмент Pen Tool (P). Как им пользоваться читайте в статье Инструмент Перо в Фотошопе.

Этим инструментом нарисуйте треугольник. Можете нарисовать его тремя точками. Как только вы ставите точку, у вас есть возможность настроить “направляющие” кривой. Технически они называются кривые безье. Но нам они не нужны. Поэтому просто ставьте три точки без направляющих и все.

Если вы зажмете SHIFT то инструмент Pen Tool будет крепиться к линиям по вертикали, горизонтали или под углом в 45 градусов. Это может быть весьма полезным, если вы решили нарисовать нечто геометрически правильное. И конечно не забудьте включить снаппинг к направляющим View > Snap To > Guides В этом случае ваши кривые будут примагничиваться к установленным нами ранее направляющим.

А теперь выберем вариацию инструмента Pen Tool под названием Add Anchor Point tool.

Инструментом Add Anchor Tool мы добавим несколько дополнительных точек так как показано ниже на картинке.

И вы наверное думаете, а почему мы не поставили эти точки сразу, когда рисовали треугольник? В фотошопе сложно добиться точной гиометрии. Фотошоп не заточен под векторное рисование. Точки, которые мы ставим после, создаются с готовыми направляющими безье. Эти направляющие распределяются симметрично той области, на которой новая точка добавлена. Если бы мы изначально рисовали все точки, то и направляющие пришлось бы рисовать вместе с ними, и выровнять все симметрично друг другу было бы очень сложно.

Теперь мы будем использовать инструмент Direct Selection Tool (A), который управляет точками вектора. Иконка в виде белой стрелочки.

В фотошопе вообще то целых три инструмента с иконкой стрелочки. Это инструменты Direct Selection Tool (A), Path Selection Tool и Move Tool. В чем же разница?

Инструмент Move Tool предназначен для передвижения графических слоев. А предудущие два только для передвижения точек и векторных контуров. Direct Selection tool передвигает точки, или векторные края (область между точками). В тоже время передвигает весь векторный контур. То есть всю фигуру.

Используйте Direct Selection Tool чтобы кликнуть по верхней точке и подвинуть её выше. Не забудьте при этом нажать SHIFT чтобы изменение происходило ровно вертикально. Тоже самое проделайте с левой и правой точками. Чтобы передвинуть эти точки симметрично, передвигайте их не мышкой, а стрелочками на клавиатуре.

Не так важно, как именно вы передвинете эти точки. Просто передвиньте их таким образом, чтобы форма треугольника стала похожа на иконку шита. Я сохранил форму этого контура в своем PSD фаиле, если вы хотите сравнить ваш результат с моим.

Когда вы создаете некий контур, который по вашему мнению может пригодиться позднее, просто переключитесь на панель Path и кликнув по небольшой иконке стрелки в углу выберите из меню Save Path.

Заливаем иконку градиентом

Теперь создайте новый слой. Выберите Pen Tool, сделайте правый клик по рабочей области и из меню выбирайте Make Selection. Появится диалоговое окно, которое спросит вас, не хотите ли вы размыть выделение. Ставьте по умолчанию 0 размытия и ОК. После чего залейте область выделения мягким градиентом как показано ниже.

Не снимая выделение зайдите в опцию Select > Modify > Contract и поставьте 10px.

И снова создайте новый слой и залейте его градиентом от серого до светло серого. Но на этот раз этот градиент должен идти в другую сторону. Через нехитрую игру теней мы получаем эффект выдавливания.

После, не снимая выделение второго слоя, опять выберите Select > Modify > Contract и снова ставьте 10 пикселей. Создавайте новый слой и залейте его радиальным градиентом. Выберите мягкие пастельные цвета, как показано ниже. О подробной работе с градиентами читайте в статье Как в фотошопе сделать Градиент.

Теперь вернитесь к среднему слою, нажмите CTRL и кликните по иконке слоя, чтобы выделить пиксели. Создайте новый слой поверх него и залейте его белым цветом.

Идите в Select > Modify > Contract и поставьте значение в 1 пиксель. После чего удалите содержание слоя нажав DELETE. Останется полоска в 1 пиксель толщиной, цель которой придать иконке щита более контрастирующий вид.

Как видите, использовав два градиента, направленные в противоположные стороны, мы создали подобие трехмерного эффекта, похожего на металлическую окантовку.

Добавляем стили слоя

Теперь добавим простой стиль слоя Drop Shadow и Inner Shadow для оранжевого слоя. В моем PSD исходнике вы сможете подробнее просмотреть настройки стилей слоя, но в целом, это просто внутренняя тень с дистанцией 0 единиц, то есть распространяется равномерно от всех краев слоя. Стиль тени Drop Shadow нам нужен исключительно для взаимодействия оранжевого слоя с металлической окантовкой иконки щита.

Выглядит неплохо. Теперь я добавил стиль слоя тени Drop Shadow для самого первого металлического слоя. И наша иконка щита отбрасывает тень на задний фон.

Рисуем блики и тени на иконке щита

На новом слое в самом верху нарисуйте эллипс инструментом Elliptical Marquee Tool (M) и залейте его белым цветом, как показано ниже.

Теперь нажмите CTRL+T и трансформируйте объект перевернув его на бок. О инструментах трансформирования читайте в статье Free Transform в Фотошопе.

После того как вы развернули эллипс, удерживая CTRL кликните по иконке слоя чтобы выделить эллипс, после чего удалите сам слой, создайте новый, и залейте его Radial Gradient радиальным градиентом от белого к прозрачному.

Комментарии переводчика: Скрывать нечего, Колин использует достаточно старомодные способы работы, получая при этом хороший результат. Но тут уже и я не могу удержаться от критики. Создавать эллипс, заливать белым, и все ради того чтобы перевернуть фигуру и получить область выделения наискосок — верх извращения. Просто нарисуйте область выделения и примените команду Select > Transform Selection, после чего крутите и деформируйте область выделения как душе угодно.

Зажмите CTRL и кликните по иконке оранжевого слоя. После чего инвертируйте выделение CTRL+SHIFT+I. После этого будет выделено все кроме слоя щита. Нажмите DELETE чтобы удалить ненужные блики эллипса.

Теперь примените режим наложения Overlay и невидимость Opacity до 60%. Эти настройки дадут вам приятный золотой блик, как показано ниже.

Создайте новый слой. Нажмите CTRL и снова кликните по иконке оранжевого слоя чтобы загрузить выделение. На новом слое нарисуйте линейный градиент от черного к невидимому.

Задайте новому слою режим наложения Soft Light и удерживая CTRL кликните по оранжевому слою снова. Появится область выделения. Нажмите SHIFT и стрелочками на клавиатуре сдвиньте область выделения вниз. Нажмите DELETE чтобы оставить лишь полоску тени на верху.

После я решил немного подкрасить и металлический слой. Чтобы сделать это выберите второй металлический слой и инструмент Burn Tool (O) вместе с мягкой кистью. Затемните часть слоя, как показано на картинке. Моя цель — добиться большего контраста.

Лучи света на заднем фоне

Теперь перейдем к солнечным бликам. Выберите инструмент Custom Shape Tool и фигуру, которую я отметил на изображении.

Создайте новый слой над темным слоем, и выбрав белый, как основной цвет, нарисуйте большую версию фигуры.

Теперь снизим визимость до 30% и поставим режим наложения Overlay. Наконец я добавил огромную букву S темно красного цвета с режимами наложения Multiply и 20% видимости. После чего я написал поверх иконки щита слово Photoshop и наш урок можно считать законченным.

Скачать исходник

Чтобы скачать исходник просто кликните по большой кнопке. Регистрации не требуются. Если вам понравился урок добавляйтесь в наши группы Вконтакте, Фэисбук. Подписывайтесь на RSS, Твиттер чтобы следить за новыми статьями не отрываясь от любимых мест пребывания. До следующих статей.

Скачать фаил

P.S. Вы любите мангу и аниме? На сайте Naruto-grand.ru вы сможете скачать любимые комиксы о наруто шипуден. Комиксы манги, статьи и даже видео о Наруто.