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

Черно-белая SVG иконка жесткого диска

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

Начнем. Нарисуйте прямоугольник с заливкой черным цветом и без обводки. Задайте скругление углов с помощью маркера в виде круга (указан красным). Это рисунок корпуса диска. Готово.

Единственный слой удалите (нажмите минус на панели слоев)

Теперь продублируйте прямоугольник (Ctrl+D), уменьшите его размер и задайте обводку белым цветом. Толщину обводки подберите на свой вкус. Слишком тонкую не делайте, ее не будет видно при малых размерах иконки. Заливку отмените. Этот контур будет играть роль декоративного элемента в иконке.

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

Выделяем первую окружность и белый контур (удерживайте shift), затем применяем разность контуров Ctrl —. Проделайте эти действия для оставшихся трех окружностей.

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

Продолжаем рисовать круги. Нарисуйте еще три круга.

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

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

В левом нижнем углу нарисуйте очередной круг. Здесь мы нарисуем коромысло блока головок жесткого диска. Заливку задайте белым, обводки нет.

Создайте копию этого круга (Ctrl+D), примените обводку и отмените заливку. Увеличьте окружность. После этого оконтурите объект Контур- оконтурить объект.

В режиме Редактировать узлы и рычаги F2 сдвиньте верхний узел вверх до пластины. При этом удерживайте ctrl— узел будет двигаться строго вертикально.

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

Этот верхний узел сделайте острым.

Часть коромысла над пластиной должна быть черного цвета, а нижняя белого цвета.

Перенесите блок головок на место их крепления и поверните.

Работа закончена, мы нарисовали SVG иконку жесткого диска.

В завершении можно сгруппировать все элементы svg иконки и задать нужный размер. Если необходимо экспортируйте в png.