Рисуем иконки в стиле Nokia

233
yand2

Мы с Вами будем рисовать иконки в стиле Nokia на примере иконки PC Suite.

Рисуем иконки в стиле Nokia 1

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

Рисуем иконки в стиле Nokia 2

Открываем новый документ 128х128 pix. Выбираем инструмент Rounded Rectangle Tool [U] в режиме Shape. Устанавливаем фиксированный размер и соответствующий цвет смотри скин ниже и делаем фигуру.

Рисуем иконки в стиле Nokia 3

Рисуем иконки в стиле Nokia 4

Дублируем слой, уменьшаем его размеры с помощью свободной трансформации Ctrl+T до 90х90 пикселей и изменяем цвет смотри скрин ниже.

Рисуем иконки в стиле Nokia 5

Рисуем иконки в стиле Nokia 6

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

Рисуем иконки в стиле Nokia 7

Рисуем иконки в стиле Nokia 8

Выберем инструмент Path Selection Too [A], выделяем контур слоя (который уменьшили до размера 60х60 пикселей) копируем его Ctrl+C, выбираем верхний слой (который уменьшили до размера 90х90 пикселей), а именно его маску (смотри скрин) и вставляем скопированный контур Ctrl+V. После чего нажмите на иконку Subtract from Shape Area, а затем нажмите Combine.

Рисуем иконки в стиле Nokia 9

Рисуем иконки в стиле Nokia 10

Рисуем иконки в стиле Nokia 11

Рисуем иконки в стиле Nokia 12

Выбираем инструмент Rectangle Tool [U] в режиме Shape и делаем 2-е полоски шириной по 5 пикселе (высота не имеет значение). Центрируем их относительно слоя, уменьшенного до размера 60х60 пикселе. Затем, произведя те же манипуляции, что и в Шаге 4 удаляем часть контура.

Рисуем иконки в стиле Nokia 13

Рисуем иконки в стиле Nokia 14

Дублируем слой с полученным результатом 2-а раза. На первой копии инструментом Direct Selection Too [A] выделяем все узлы маленького сегмента и жмём Del. Затем выбираем вторую копию слоя и тем же инструментом выделяем все узлы большого сегмента и опять жмём клавишу Del.

Рисуем иконки в стиле Nokia 15

Рисуем иконки в стиле Nokia 16

Рисуем иконки в стиле Nokia 17

Рисуем иконки в стиле Nokia 18

В результате у Вас получится 2-а слоя с разными сегментами. Выбираем слой с маленьким сегментом и изменяем его цвет на #d1ff77.

Рисуем иконки в стиле Nokia 19

Рисуем иконки в стиле Nokia 20

Дублируем оба слоя с сегментами. Перемещаем их в палитре слоёв ниже слоя, с которого делали копию, и инструментом Move Tool [V] перемещаем вправо и вверх на 1-2 пикселя (на усмотрение) и задаём копиям следующий цвет (смотри скрин ниже).

Рисуем иконки в стиле Nokia 21

Как Вы можете видеть в результате копирования появляется эффект одного слоя под другим (смотри первый скрин). А нам нужно чтоб это смотрелось, как единое целое.
Для этого инструментом Pen Tool [P] добавим узлы (уберём направляющие из этого узла Convert Point Tool чтоб линия была прямая) и переместим их в узел верхнего слоя (смотри второй скрин).Проделайте это со всеми подобными местами в данном шаге.

Рисуем иконки в стиле Nokia 22

Рисуем иконки в стиле Nokia 23

Рисуем иконки в стиле Nokia 24

Копируем слой, размер которого 100х100 пикселей (цвет я изменил для наглядности) и перемещаем его вправо на 15 пикселей (можете больше если хотите сделать иконку толще). И поднимем немного верх (смотри скрин).

Рисуем иконки в стиле Nokia 25

Удалим ненужную часть контура. Для этого выбираем инструмент Direct Selection Too [A] выбираем контур слоя размером 100х100 пикселей и аналогично Шагу 4 производим следующие действия.

Рисуем иконки в стиле Nokia 26

Рисуем иконки в стиле Nokia 27

Рисуем иконки в стиле Nokia 28

Применим к слою следующие стили слоя.

Рисуем иконки в стиле Nokia 29

Рисуем иконки в стиле Nokia 30

Рисуем иконки в стиле Nokia 31

В результате у вас получится следующее

Рисуем иконки в стиле Nokia 32

Выбираем все слои и с помощью трансформации Ctrl+T задаём иконке перспективу.

Рисуем иконки в стиле Nokia 33

Собственно иконка готова, осталось её немного приукрасить.

Выбираем слой с маленьким (светло-зелёным) сегментом и применяем к ниму следующий стиль слоя.

Рисуем иконки в стиле Nokia 34

Рисуем иконки в стиле Nokia 35

Рисуем иконки в стиле Nokia 36

Выбираем инструмент Ellipse Tool [U] в режиме Shape, белого цвета и делаем окружность. Дублируем её перемещаем копии в палитре слоёв так чтобы каждый слой с окружностью был следующим после слоя с сегментами (светло-зелёного и тёмно-синего цвета) уменьшаете Opacity слоям с окружностями до 30% и применяем обтравочную маску Clipping Mask Ctrl+Alt+G.

Рисуем иконки в стиле Nokia 37

Рисуем иконки в стиле Nokia 38

Рисуем иконки в стиле Nokia 39

Вот собственно и все. А скачать бесплатные темы для Nokia вы сможете на сайте nokia-only.ru

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите свой комментарий!
Пожалуйста, введите ваше имя