Рисуем иконку компаса в Photoshop

Из этого урока мы узнаем, как в Adobe Photoshop нарисовать с нуля иконку компаса, используя такие инструменты, как "Перо" (Pen Tool), "Прямоугольник со скруглёнными углами" (Rounded Rectangle Tool) и "Прямоугольник" (Rectangle Tool).

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

Для лучшего понимания, Вы можете скачать готовый файл PSD, выполненный по результатам урока, по ссылкам внизу страницы.

Вот что у меня получилось в итоге:

объёмная иконка компаса

Давайте начнём. Открываем Photoshop и создаём документ размером 500 на 500 пикселей. Заливаем документ розовым цветом #db687b. Результат:

фон для иконки компаса

Чтобы фон не был таким скучным, предлагаю украсить его стилем слоя "Карбон", бесплатно скачать его Вы можете на этой странице, там же есть ссылка на руководство по установке стиля слоя в Photoshop.

Дублируем фоновый слой и добавляем к нему стиль слоя, непрозрачность нового слоя уменьшаем примерно до 45%. Вот как теперь выглядит документ:

фон для иконки компаса

Рекомендую фоновый слой преобразовать в обычный и сгруппировать оба слоя, а группу переименовать в "Фон", чтобы не захламлять панель слоёв.

Создание основы иконки

Установите цвет переднего плана на #3ab2cb. Возьмите инструмент "Прямоугольник со скруглёнными углами" (Rounded Rectangle Tool), установите длину и ширину 190 и радиус скругления 30 пикселей и создайте фигуру:

основа иконки компаса

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

обводка иконки компаса

Выберите один из инструментов выделения, например, "Прямоугольная область" (Rectangular Marquee Tool), кликните правой клавишей мыши внутри выделения, откроется контекстное меню, где кликните по строке "Выполнить обводку" (Stroke). Откроется диалоговое окно, где задайте толщину обводки 2 пикселя, цвет #1d6b80 и положение "Внутри" (Inside):

обводка иконки компаса

Т.к новый пустой слой был активным в момент создания обводки выделения, то обводка появилась именно на нём. Я хочу плавно скрыть верхнюю часть обводки. Для этого будем использовать обычную слой-маску. Добавляем слой-маску к слою с обводкой, берём чёрную кисть с нулевой жёсткостью и диаметром около 200 пикселей и плавно проводим кистью наискосок, как показано на рисунке:

risuem-ikonku-kompasa

Думаю, надо сделать прямоугольник со скруглёнными углами поинтереснее. Добавим на него градиент.
Перейдите на слой с прямоугольником и добавьте к нему стиль слоя "Наложение градиента" со следующими параметрами, режим наложения - Перекрытие (Overlay):

risuem-ikonku-kompasa

Сгруппируйте эти два слоя и назовите группу "основа".

Результат:

фон для иконки компаса

На этом создание основы иконки закончено, переходим к рисованию самого компаса.

Создание формы изображения компаса на иконке

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

установка направляющих

Установите основной цвет в цветовой палитре на белый (#FFFFFF). Возьмите инструмент "Эллипс" (Ellipse Tool), установите режим "Фигура" (Shape). Наведите курсор мыши точно в перекрестье направляющих, зажмите клавиши Alt+Shift, нажмите на левую клавишу мыши и протащите курсор от центра в любом направлении. А результате, у Вас должен получиться примерно такой геометрически правильный круг:

круг для иконки компаса

Затем, таким же образом, создайте второй круг, поменьше. Затем, в панели параметров, нажмите на кнопку опции "Операции с контуром" (Path Operations) и выберите "Вычесть переднюю фигуру" (Subtract Front Shape). У Вас должна получиться такая окружность:

вычитание контуров

Создайте новый слой, возьмите инструмент "Перо" (Pen Tool) и нарисуйте вот такой треугольник:

треугольник на шкале компаса

Клонируйте слой, нажав Ctrl+J. Нажмите Ctrl+T для активации инструмента "Свободная трансформация". Зажмите Alt и перетащите центр трансформации точно на перекрестье направляющих:

иконка компаса в Photoshop

Поверните треугольник на 90°:

иконка компаса в Photoshop

Нажмите Enter для применения трансформирования.
Повторите процедуру ещё два раза. Можно просто два раза нажать комбинацию Ctrl+Shift+Alt+T. Результат:

иконка компаса в Photoshop

В панели слоёв выделите все слои с фигурами, нажмите на любой из выделенных слоёв правой клавишей мыши и кликните по строке "Объединить фигуры":

иконка компаса в Photoshop

Создайте новый слой и нарисуйте треугольник поменьше:

иконка компаса в Photoshop

С помощью "Свободного трансформирования" поверните треугольник на 45°, перед поворотом не забудьте переместить центр трансформирования на перекрестье направляющих. Затем клонируйте и поверните треугольник на 90°, повторите это ещё два раза. Объедините контура в один. Вот что должно получиться, я нажал Ctrl+H, чтобы скрыть отображение направляющих и контуров:

компас photosahop иконка

Итак, мы создали стилизованный циферблат компаса. В следующем уроке мы придадим циферблату объём и нарисуем стрелку компаса с севером и югом.

Продолжение урока

Скачать материалы к уроку:

Теги:

Помощь сайту

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

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

Если приложение наберёт популярность, это даст стимул автору на создание новых приложений с учётом пожеланий посетителей сайта.

Установить с Google Play.

Заранее благодарен, Дмитрий.

QR-код для установки:

Если Вам понравился материал, скажите свое "спасибо", поделитесь ссылками с друзьями в социальных сетях! Спасибо!

Похожие материалы:

В этом уроке я расскажу об автоматизированном методе склейки фотографий в одно изображение в программе Photoshop на основе практического примера. Как...
металлическая кнопка в Photoshop, добавление значка ON/OFF
Данная кнопка будет использоваться в андроид-приложении для включения/выключения светодиода,поэтому она должна иметь два состояния - ON и OFF. В...
эффект звёздного неба
В этом уроке по созданию фотоэффектов мы узнаем, как заполнить пустое ночное небо звездами с помощью Photoshop версии CS6 или CC (Creative Cloud). К...
красивый эффект глубины фотографии с помощью размытия
В этом уроке я расскажу, как с помощью встроенных в Photoshop фильтров галереи размытия сделать мистический, или, наоборот, кукольный, игрушечный...