Уроки фотошопа, графика, дизайн
arrow

Рисуем иконку телефонной книги

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

Это финальный вид иконки телефонной книги:

Рисуем иконку телефоннной книги

Рисуем иконку телефонной книги

1. Создайте новый документ того размера, с которым вам удобнее работать. Я выбрал 1280×1024 px. Теперь думаем, какого цвета хотим сделать иконку, пусть это будет тёмно-синий (#1b4062). Выбираем инструмент под названием Rounded Rectangle Tool (Прямоугольник со скруглёнными краями), устанавливаем диаметр скругления краёв 20px

Рисуем иконку телефоннной книги

И рисуем с его помощью прямоугольник по центру документа, это будет обложкой книги:

Рисуем иконку телефоннной книги

2. Теперь нужно создать перспективу. Нажимаем сочетание клавиш Ctrl+T (Свободная трансформация), кликаем по прямоугольнику правой кнопкой мыши, выбираем Perspective (Перспектива) и сужаем немного верхнюю грань:

Рисуем иконку телефоннной книги

Теперь нужно слегка повернуть фигуру влево:

Рисуем иконку телефоннной книги

Ну и наконец, берем инструмент Direct Selection Tool, кликаем по контуру фигуры и перетаскиваем 2 нижние левые точки ещё чуть левее:

Рисуем иконку телефоннной книги

3. Дважды кликните по прямоугольнику в панели слоёв, откроется окно настройки стилей слоя. Установите похожие или близкие настройки:

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

Отлично! Теперь обложка для иконки телефонной книги выглядит так:

Рисуем иконку телефоннной книги

4. Создайте дубликат (копию) слоя с обложкой, кликнув по ней в панели слоёв правой кнопкой мыши и выбрав Duplicate Layer, после этого возьмите Pen Tool (Перо), установите его в режим вычитания из формы и с помощью четырёх точек «отрежьте» лишнее:

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

Тем самым мы сделали левую часть книги, своеобразную подкладку. Теперь отключите лишние стили слоя у подкладки — Drop Shadow, Inner Glow, а также Gradient Overlay — они нам не нужны. Получается такой результат:

Рисуем иконку телефоннной книги

5. Для подкладки немного подкорректируем стили слоя:

Рисуем иконку телефоннной книги

6. Создайте новый слой поверх обложки, зажмите Сtrl и кликните по миниатюре слоя с обложкой, появится выделение:

Рисуем иконку телефоннной книги

Залейте выделение чёрным цветом, затем пройдите в Filter -> Noise (Шум) -> Add noise (Добавить). Значение Amount установите на 70%, а также отметьте Gaussian и Monochromatic. Режим смешивания этого слоя Overlay (Перекрытие), непрозрачность (Opacity) 8%:

Рисуем иконку телефоннной книги

Создайте ещё один слой, и не снимая выделения снова залейте его чёрным цветом. Теперь примените Filter -> Sketch (Набросок) -> Note Paper (Бумага) с такими параметрами:

Рисуем иконку телефоннной книги

Режим смешивания Overlay, непрозрачность 6%. Теперь можно снять выделение (Ctrl+D) и посмотреть на иконку телефонной книги, она выглядит так:

Рисуем иконку телефоннной книги

7. Теперь затекстурируем подкладку. Создаём новый слой поверх слоя с подкладкой, нажимаем ctrl + клик по миниатюре подкладки, заливаем чёрный цветом и применяем Filter -> Sketch -> Graphic Pen (Графический карандаш) с такими настройками:

Рисуем иконку телефоннной книги

8. Режим смешивания меняем на Overlay (Перекрытие), непрозрачность 10%. Затем создаём маску слоя и мягкой кистью с непрозрачностью 50% произвольно проходимся  по только что наложенной текстуре:

Рисуем иконку телефоннной книги

9. Добавляем уже знакомую Note Paper с непрозрачностью 6% (шаг 6). Сейчас иконка телефонной книги выглядит так:

Рисуем иконку телефоннной книги

10. Хорошо, пришло время придать иконке объём. Выделите все слои, за исключением фона и нажмите Ctrl+J (создать дубликат слоя), затем объедините эти слои в группу (Ctrl+G). Эту группу для удобства можно назвать Back_side. Поместите эту группу нижу всех слоёв, но выше фона, а затем опустите примерно на 50px вниз:

Рисуем иконку телефоннной книги

Внутри этой группы отключите у подложки стиль слоя Bevel & Emboss (Обводка и тиснение), а у основной формы Drop Shadow:

Рисуем иконку телефоннной книги

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

Рисуем иконку телефоннной книги

А это те стили слоя, которые всё же надо оставить:

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

12. Сделайте 5 копий этого слоя и разместите их таким образом:

Рисуем иконку телефоннной книги

Теперь объедините из в группу и разместите под слоями верхней обложки:

Рисуем иконку телефоннной книги

Ну что, уже достаточно неплохо, верно? Однако это ещё не всё.

Дьявол в деталях

13. Нам осталось добавить металлические крепления и закладки, давайте приступим. Возьмите инструмент Ellise Tool (Эллипс) и нарисуйте им такую форму:

Рисуем иконку телефоннной книги

Переключите инструмент в режим вычитания и нарисуйте внутри этого эллипса ещё один:

Рисуем иконку телефоннной книги

А теперь возьмите Pen Tool, установите его всё в тот же режим вычитания и скройте с его помощью ту часть кольца, которую не должно быть видно:

Рисуем иконку телефоннной книги

14. Теперь дело за стилями слоя:

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

После этого кольцо для иконки телефонной книги выглядит так:

Рисуем иконку телефоннной книги

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

15. С помощью Ellipse Tool создайте чёрный круг под слоём с кольцом:

Рисуем иконку телефоннной книги

Назначьте ему такой стиль слоя:

Рисуем иконку телефоннной книги

16. Возьмите чёрную мягкую кисть и нарисуйте тень от кольца:

Рисуем иконку телефоннной книги

Непрозрачность тени 36%. Тем же способом добавьте ещё теней:

Рисуем иконку телефоннной книги

17. Объедините все слои, которые вы использовали для создания кольца в одну группу (Сtrl+G), скопируйте её (Ctrl+J) и переместите чуть выше. Повторите несколько раз. В результате ваша иконка должна выглядеть так:

Рисуем иконку телефоннной книги

18. С помощью Pen Tool нарисуйте закладку:

Рисуем иконку телефоннной книги

Присвойте ей следующие стили слоя:

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

Рисуем иконку телефоннной книги

Скопируйте закладки столько раз, сколько вам понадобится:

Рисуем иконку телефоннной книги

19. Займёмся созданием тени от книги. Скопируйте группу back_side и разместите её под оригиналом, внутри группы слейте все слои в один (Ctrl+E), затем Ctrl+клик по миниатюре слоя и выполните заливку чёрным цветом. С помощью Ctrl+T (свободная трансформация) немного увеличьте тень и расположите её таким образом:

Рисуем иконку телефоннной книги

20. Применяем Filter -> Blur (Размытие) -> Gaussian Blur с радиусом 6px. Непрозрачность слоя 35%:

Рисуем иконку телефоннной книги

На новом слое с непрозрачностью 20% мягкой чёрной кистью сделайте тени от колец:

Рисуем иконку телефоннной книги

Вот и всё, на этом иконка телефонной книги закончена. По желанию можете добавить сверху какой-нибудь текст или знак.

Финальный результат:

Рисуем иконку телефоннной книги

Как видите, процесс создания иконок очень кропотлив. но результат того стоит. Надеюсь вам понравился этот урок, до новых встреч!

M@X
Веб-дизайнер, основатель проекта psforce.ru и студии веб-дизайна Disarto.

Оставить комментарий

Имя: *

Сообщение: