SVG иконка жесткого диска

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

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

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

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

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

прямоугольник inkscape

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

прямоугольник inkscape

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

контур с заливкой

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

контур с заливкой

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

прямоугольник вектор

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

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

иконка hdd, вектор

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

иконка hdd, вектор

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

иконка hdd, вектор

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

рисуем иконку hdd

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

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

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

иконка жесткого диска, вектор

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

SVG иконка жесткого диска

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

SVG иконка жесткого диска

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

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