Рисуем симпатичный ярлык для Twitter

Сегодня мы будем рисовать вот такую прелестную птицу для Twitter`а, чтобы использовать ее в дальнейшем в качестве кастомного ярлыка на своих сайтах. Усилий понадобится — довольно много, умений — также приличное количество, потому как в уроке некоторые очевидные нюансы пропускаются и делается ставка на то, что пользователь уже знаком с основными приемами работы со слоями, инструментами и масками. Если со всем этим — порядок, приглашаем к прочтению!

1 Шаг

Создайте новый документ размерами 800×600px, разрешением 72dpi с белым фоном и нанесите на него синий векторный круг цвета #0099FF. Правильную окружность можно получить, зажав клавишу Shift при растягивании фигуры — пропорции будут сохраняться симметричными.

2 Шаг

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

3 Шаг

Теперь изменим пропорции дубля. Нажмите Ctrl + T, чтобы активировать инструмент Free Transform Tool.

4 Шаг

При помощи Direct Selection Tool скорректируйте верхнюю дугу малой окружности так, как показано на рисунке ниже, чтобы получилось плавное сопряжение двух кривых друг с другом.

5 Шаг

Сейчас мы создаем подобные векторные слои Shape Layers, чтобы впоследствии задать им стили. Для глаз создадим пару вертикальных овальных форм, используя дублирование, как мы делали до этого.

6 Шаг

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

7 Шаг

Теперь пришла очередь рисовать перья для хвоста. Создайте векторный прямоугольник со скругленными углами с радиусом закругления примерно 30px. Инструментом Direct Selection Tool выберите 3 верхних точки и, нажав Ctrl + T, переключитесь на инструмент Free Transform Tool. Теперь обратитесь к панели опций инструмента в верхней части экрана и измените значение ширины (W — width) со 100% до 60%.

8 Шаг

Сейчас продублируем 4 раза оригинал этого пера для хвоста, чуть уменьшим дубли и повернем их, чтобы сформировать полноценное оперение.

9 Шаг

Теперь чуть сожмем перья по вертикали: выберите их и нажмите Ctrl + T, после чего выполните необходимые преобразования.

10 Шаг

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

11 Шаг

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

12 Шаг

Снова выберем инструмент Rounded Rectangle Tool с радиусом углов 30px и с помощью него нарисуем три фигурки в месте, где должна быть левая нога птицы. Затем дублируйте ее и получите правую.

13 Шаг

При помощи Pen Tool нарисуем ветку дерева. Посредством зажатия левой клавиши мыши и перетаскивания вы сможете создавать узловые точки со свойствами кривых, чтобы в дальнейшем иметь возможность их изменять курсором Path Selection Tool.

14 Шаг

Продублируйте этот контур и увеличьте его на 20%, следуя тому принципу, по которому мы меняли масштаб посредством верхнего меню.

15 Шаг

Теперь поработайте с началом ветки, чтобы сделать его более толстым по мере приближения к стволу дерева. Затем следует объединить обе линии с помощью Pen Tool, чтобы получить один целостный векторный объект.

16 Шаг

Теперь нарисуем пальцы нашему персонажу. Начните с круга, который затем следует изменить в соответствии с рисунком ниже. Для того чтобы получить острые углы в ваших кривых, необходимо разъединить точки управления направлением кривой, чего можно добиться, нажав Alt при работе с ними. Как вы сможете увидеть, узловая точка превратится после этого в точку с углом, а не точку кривой и теперь имеет две независимых друг от друга ручки для управления состоянием кривых, приходящих в этот угол.

17 Шаг

Сейчас нарисуем по три пальца для каждой руки. Они будут сплетены в молящей просьбе.

18 Шаг

После того, как вы нарисуете пальцы для одной руки, дублируйте их, перетащив на новое место, удерживая нажатыми Alt + Shift, а затем выполните Path > Flip Horizontal, для отображения по горизонтали полученного дубля.

19 Шаг

При помощи Pen Tool создайте руки для нашего персонажа.

20 Шаг

Далее в три приема создадим каплю слезы, стекающую по щеке птицы. Сначала нарисуем круг, затем, выделив верхнюю узловую точку, перетащим ее чуть выше. После этого, переключившись на Convert Point Tool, кликните по точке, чтобы преобразовать ее в угловую.

21 Шаг

Здесь мы начнем задавать слоям некоторые стили. Спрячьте слои с руками и хохолком для более полной визуализации дальнейших действий. Затем добавьте слою с телом стиль Inner Shadow, при этом уберите опцию Use Global Light и установите угол направления эффекта равным -90 градусов для получения тени в нижней части туловища персонажа.

22 Шаг

Далее снова включите видимость слоя с хохолком. Поскольку из-за применения эффекта Inner Shadow цвет по краям туловища стал немного темнее, нам предстоит покрасить хохолок в точно такой же цвет. Поэтому выполните двойной щелчок по цвету векторного слоя с хохолком, чтобы появилось меню с цветовой палитрой для выбора нового цвета для слоя. В этом режиме курсор за пределами окна с палитрой будет превращаться в пипетку для выбора цветов рисунка. Кликните пипеткой по краю туловища птицы и получите образец цвета, которым был закрашен выбранный пипеткой пиксель. Все: перья хохолка теперь имеют цвет, ничем не отличающийся от цвета туловища по краям и прекрасно вписываются в общую картину.

23 Шаг

Теперь пришла очередь придать объема глазам. Используем радиальный градиент для стиля Gradient Overlay, отменив при этом опцию Align With Layer, чтобы градиент не был ограничен краями векторной фигуры. Теперь уменьшим его размеры до 50%, чтобы переход между цветами был более очевидным.

24 Шаг

В редакторе градиента (выполните двойной щелчок по линейке с цветами) поместите бегунок с белым цветом в область первой трети всего диапазона, чтобы эффект был еще более выраженным и очерченным.

25 Шаг

Теперь примените к глазам стиль Inner Shadow, но только с использованием белого цвета, чтобы придать эффект отблеска в нижней их части от внешнего источника света.

26 Шаг

Здесь применим стиль Inner Glow к слою с глазами, указав в окне настроек приведенные ниже значения.

27 Шаг

Сейчас создадим скос по кромке глаз, используя для этого стили Stroke и Bevel and Emboss. Для начала примените стиль Stroke того же цвета, что и тело персонажа #0099FF.

28 Шаг

Далее применяем стиль Bevel and Emboss, чтобы получить аккуратный эффект выдавливания по контуру и затенения в верхней части (так как свет, понятное дело, туда не должен попадать).

29 Шаг

Теперь немного свечения по контуру при помощи Outer Glow.

30 Шаг

Ну и, в конце концов, добавим мягкую тень (стиль Drop Shadow), идущую от глаз, в соответствии с противоположной дугой туловища птицы.

31 Шаг

Теперь поместим в радужку зрачки при помощи стилей слоев. Для этого используем стиль Inner Glow черного цвета и смешение Multiply с источником свечения из центра (Source: Center), а не по краям, как это обычно задано по умолчанию. Также задайте значения Choke и Glow равными 100 и 10 соответственно. В результате мы получим два черных идеально четких кружка.

32 Шаг

Сейчас применим линейный Gradient Overlay для создания ощущения полноты внутри радужки. В любое время, когда вам понадобится создать эффект глянцевого отблеска, лучше сначала затемнять градиентом верхнюю часть объекта.

33 Шаг

Теперь примените к радужке стиль Inner Shadow для высветления нижнего ее края. Внимательно перенесите параметры с окна на приведенном ниже рисунке (используется другой тип контура в блоке Quality, отличный от выставленного по умолчанию). Также выключите опцию Use Global Light.

34 Шаг

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

35 Шаг

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

36 Шаг

Сведите на 0% значение Opacity для слоев с блеском и примените к ним стиль Gradient Overlay со значениями, показанными ниже. Не забывайте, что положение градиента можно менять, физически передвигая его по документу, захватив мышкой в то время, как вы находитесь в режиме его редактирования.

37 Шаг

Затем добавьте сверху еще один отблеск, который еще больше усилит отблеск источника света на поверхности с повышенной отражаемостью.

38 Шаг

Пришло время позаботиться о тенях на хохолке. Вам предстоит поочередно выбрать обе фигуры с перьями на панели Layers, а затем переключиться на вкладку Paths, где также будут выделены наши векторные слои. Далее загрузим по слоям выделение, нажав соответствующую кнопку в нижней части панели Paths, как показано на рисунке ниже.

39 Шаг

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

40 Шаг

При помощи ластика (Eraser Tool) с параметрами, приведенными ниже, уберите излишки тени. Повторите то же самое для создания тени на другом пучке перьев.

41 Шаг

Теперь поработаем над клювом птицы. Для начала нарисуем тень, спроецированную прямо вниз.

42 Шаг

Далее применим внутреннюю тень Inner Shadow к нижней части клюва птицы:

43 Шаг

По контуру клюва окружим его небольшим отблеском при помощи Inner Glow:

44 Шаг

Создадим два отверстия в клюве с помощью пары черных векторных кружков с 30% Opacity. Задайте им стиль Drop Shadow белого цвета с 80% Opacity. Так мы получим видимость того, что это все-таки отверстия в клюве, а не просто два непонятно откуда взявшихся пятнышка.

45 Шаг

Теперь поработаем со слезой. Примените радиальный Gradient Overlay к этому слою, чтобы придать капле объема.

46 Шаг

Теперь примените к слою эффект Inner Shadow белого цвета, выключив Use Global Light и скопировав значения параметров с иллюстрации.

47 Шаг

Ну и, наконец, отбрасываемая каплей тень отделит слезу от ее фона.

48 Шаг

Перейдем к ногам птицы. Примените к слою с ними стиль Inner Shadow c Opacity 40% и настройками, показанными на иллюстрации. Тень показывает, что источник света по-прежнему находится сверху.

49 Шаг

Добавление Inner Glow позволяет добиться еще большего объема:

50 Шаг

Перейдем к хвостовому оперению. Градиент посредством Gradient Overlay создаст отличную тень по хвосту, который находится, к тому же, под веткой.

51 Шаг

В конечном счете, наведите контур хвостового оперения при помощи стиля Stroke в 3px шириной, используя более темный оттенок синего, чем тело птицы.

52 Шаг

Сейчас добавим объема ветке, на которой сидит птица. При помощи стиля Bevel and Emboss со следующими значениями, зададим ветке цилиндрическую форму:

53 Шаг

Теперь время добавить Inner Shadow белого цвета для усиления объема, чтобы продемонстрировать отражение, идущее от основного источника света.

54 Шаг

Переключим свое внимание на птичьи руки. Задайте им также стиль Bevel and Emboss со значениями, приведенными ниже.

55 Шаг

Не забывайте проверять опцию Layer Mask Hides Effect, которая позволяет прятать участки слоев, закрытых вручную нанесенной маской.

56 Шаг

Сейчас создадим выделение, закрыв им руки и превратим его в маску.

57 Шаг

Теперь начнем наносить маску. Черным цветом в режиме маски можно смазать области перехода с рук на туловище персонажа, что поможет визуально слить объекты друг с другом.

58 Шаг

Далее создадим тень, идущую от рук, но это нельзя будет сделать при помощи скриптов — стилей слоев, потому как нам понадобится спрятать некоторые фрагменты тени. Выделив векторы рук, преобразуем их в выделение во вкладке Path.

59 Шаг

Затем закрасьте полученное выделение черным, как показано ниже (сместив его предварительно чуть ниже) на новом слое, расположенном под слоем с руками и, нажав Ctrl + T, кликните по иконке Wrap Tool в верхнем меню, после чего измените эту тень так, чтобы ее форма отличалась от формы рук.

60 Шаг

Теперь размоем тень при помощи фильтра Filter > Blur > Gaussian Blur радиусом 2px.

61 Шаг

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

62 Шаг

Кисти также требуют добавления стилей и маскирования. Начнем с отбрасываемой тени.

63 Шаг

При помощи стиля Bevel and Emboss придадим объема обеим фигурам.

64 Шаг

Усилим нижнюю часть кистей тенью с помощью внутренней тени Inner Shadow.

65 Шаг

Немного Inner Glow придаст освещенности верхней части кистей персонажа.

66 Шаг

Теперь для каждого пальца по отдельности загрузим выделение и нарисуем их на новом слое.

67 Шаг

На новом слое, загрузив выделение мизинца, начните наносить на него тень. Используйте маленькую мягкую Brush Tool черного цвета с 10% Flow не перебарщивая и добавляя лишь самые необходимые, аккуратные штрихи.

68 Шаг

Теперь сузьте выделение на 1px, выполнив Select > Modify > Contract, чтобы затем удалить лишние участки.

69 Шаг

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

70 Шаг

Повторите эти шаги для каждого пальца в отдельности — каждый на своем слое. Как закончите — уберите лишние штрихи, выходящие за точки пересечения плосок с тенью, чтобы ладони выглядели сплетенными. После того, как будете уверены, что закончили, выделите все слои с пальцами и слейте их в один, нажав Ctrl + E. Теперь вы можете убавить интенсивность теней, уменьшив Opacity этого слоя.

71 Шаг

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

72 Шаг

Сузьте выделение примерно на 5-6px (Select > Modify > Contract).

73 Шаг

Затем сделайте это выделение мягче на 2-3px (Select > Modify > Feather).

74 Шаг

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

75 Шаг

На этом шаге продолжим сужение выделенной области, чтобы удалить лишнее свечение по бокам исходя из тех соображений, по которым боковые блики должны быть в виде тонких полосок (нам нужно создать подобие скоса по краям).

76 Шаг

Здесь начнем удалять лишние блики. Нажав Ctrl + H можно на время скрыть выделение, чтобы было лучше видно, с чем работать.

Заключение

Осталось дополнить картинку мягким фоном, каким-нибудь ярким, запоминающимся заголовком и вуаля: наша иконка готова к использованию!

alt=

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта psd.tutsplus.com, автор перевода указан в начале урока.

Лучшее предложение: Ленточный герметик, дымоходы сэндвич нержавейка . Время работы магазина печи дымоходы. наличие на складе