ГлавнаяПрограммное обеспечениеУчебное пособие по Boxy SVG: как создать собственный значок папки

Учебное пособие по Boxy SVG: как создать собственный значок папки

Вы долго искали идеальную тему для значков, но вам не понравилось то, что вы нашли, и вы решили создать свой собственный значок папки. Какое программное обеспечение следует использовать и с чего начать? В этом руководстве Boxy SVG представлены пошаговые инструкции по созданию простого значка папки.

Читайте также: Как просмотреть миниатюры SVG в проводнике Windows

Установка

Существует множество инструментов, которые можно использовать для создавать файлы SVG , но относительно новый Установкаoopener" title="Квадратный SVG">Квадратный SVG — один из самых простых и гибких. Boxy SVG доступен для Windows, macOS и Linux. Его можно бесплатно загрузить в Windows Store, Mac App Store и Snap store. Просто найдите «boxy svg» в соответствующем магазине приложений, чтобы установить его. Пользователи Linux могут установить его в любой дистрибутив на базе Ubuntu. Найдите его в Центре программного обеспечения или запустите терминал и используйте:

sudo snap install boxy-svg
Пользовательские значки папок с программным центром Boxy Svg

В Arch и Manjaro сначала нужно нажать добавить поддержку Snap-пакетов , а затем использовать ту же команду.

Boxy SVG также доступен в виде веб-приложения, однако для его использования потребуется подписка.

Начните с прямоугольника

В этом уроке Boxy SVG создаются значки для папок. Поскольку папки имеют прямоугольную форму, выберите инструмент «Прямоугольник», 12-й на левой панели инструментов, со значком сплошного прямоугольника.

Пользовательские значки папок с помощью инструмента Boxy Svg Rectangle Tool

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

Пользовательские значки папок с квадратным SVG. Нарисуйте первый прямоугольник

Клонировать и изменить размер

Выбрав инструмент «Трансформирование» (первый на левой панели инст>Начните с прямоугольника щелкните прямоугольник. Используйте контрольные точки на ограничивающей рамке, чтобы немного изменить ее размер по горизонтали, чтобы справа осталось пустое пространство.

Пользовательские значки папок с изменением размера Boxy Svg Transform

Вы можете дублировать элемент, скопировав и вставив его (Ctrl+ C, затем Ctrl+ Vна клавиатуре), но попробуйте вместо этого сделать следующее: удерживая клавишу Alt, щелкните левой кнопкой мыши по прямоугольнику и перетащите его вправо. Перетаскивая его, также удерживайте клавишу Shift, чтобы ограничить движение прямоугольника только одной осью, в данном случае горизонтально. Переместите его вправо от существующего прямоугольника.

Клонировать и изменить размер="Пользовательские значки папок с объектом-клоном Boxy Svg">

Основные преобразования

Если вы второй раз щелкните объект с выбранным инструментом «Трансформирование», контрольные точки изменят цвет, показывая вам, что вместо изменения размера теперь вы можете вращать его (если вы используете точки на его углах) или наклонять его. (с точками по бокам).

Но давайте рассмотрим еще более универсальный способ преобразования объектов с помощью отдельных точек. Измените размер нового прямоугольника так, чтобы он находился справа от предыдущего. Затем выберите «Форма ->Форма в путь» в меню вверху, чтобы преобразовать выбранный объект в редактируемый путь.

Пользовательские значки папок с квадратным Svg, изменение размера второго прямоугольника

Теперь вы можете настроить отдельные точки, чтобы изменить форму. Хотя для простого наклона прямоугольника не было необходимости, здесь показано, как настраивать отдельные точки, создавать более интересные формы или лучше контролировать перспективу.

Используйте инструмент «Редактирование» (второй на левой панели инструментов, непосредственно под инструментом «Трансформирование», с треугольной стрелкой), чтобы выбрать две контрольные точки на правой стороне нового прямоугольника.

Пользовательские значки папок с квадратными точками выбора Svg

Выбрав обе точки, щелкните левой кнопкой мыши и удерживайте одну из этих точек, чтобы выбрать ее, затем перетащите ее вверх, удерживая клавишу Shift(чтобы ограничить перемещение по вертикальной оси).

Пользовательские значки папок с квадратным перекосом точек SVG

Цвета и перспектива

Используйте инструмент «Трансформирование>Основные преобразованияямоугольник, теперь меньшего размера и скошенный, так, чтобы он касался большего. Используйте инструмент «Заливка» (сначала на правой панели инструментов со значком кисти), чтобы придать ему цвет. На данный момент используйте любой цвет в качестве заполнителя.

Пользовательские значки папок с квадратным цветом заливки Svg

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

Пользовательские значки папок с перекошенным квадратным клоном SVG

При активном инструменте «Трансформирование» выберите инструмент «Расстановка» (со значком креста на правой панели инструментов или нажмите Aна клавиатуре). Щелкните левой кнопкой мыши по первому наклоненному прямоугольнику, удерживайте клавишу Shiftи щелкните второй наклоненный прямоугольник, чтобы выбрать их оба.

Используйте «Назад» из группы параметров Z-порядка на панели «Расстановка», чтобы поместить эти прямоугольники позади более крупного. «Фронт» делает противоположное и ставит объект выше всего остального. Сопутствующие параметры «Поднять» и «Опустить» перемещают объект «вперед» или «назад» отдельными шагами.

Пользовательские значки папок с панелью Boxy Svg Arrange

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

Пользовательские значки папок с квадратной формой папки Svg

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

Пользовательские значки папок с квадратным Svg-назначением цветов

Сделайте лоскут

Когда основная форма нашей папки готова, пришло время сделать ее более похожей на папку. В этом поможет раздел категорий. Форму папки ниже пришлось немного подправить, так как она выглядела слишком толстой.

Пользовательские значки папок с квадратными размерами><span class=Цвета и перспективаширокий и короткий прямоугольник на пустом месте холста. У вас будет общее представление о ее размере, если вы будете иметь в виду, что вскоре она превратится в откидную створку для уже разработанной базовой формы папки.

Пользовательские значки папок с квадратным прямоугольником Svg Flap

Выберите инструмент «Редактирование» (второй на левой панели инструментов), нажмите клавишу Ctrl, щелкните и перетащите контрольную точку верхнего левого края прямоугольника к середине его верхней стороны. Это превратит верхний левый край в кривую. Повторите противоположное движение для контрольной точки верхнего правого края, снова перетащив ее влево, к центру верхней стороны прямоугольника. В результате, как вы можете видеть ниже, должен получиться бывший прямоугольник с угловой нижней стороной и изогнутой верхней стороной.

Пользовательские значки папок с квадратными кривыми SVG-клапанами

Переместите клапан так, чтобы он соприкасался с верхней левой стороной большого прямоугольника спереди папки.

Пользовательские значки папок с квадратной крышкой Svg Attach

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

Пользовательские значки папок с квадратным клапаном изменения размера Svg

Градиенты и оттенки

Самый простой способ создать иллюзию объема и сделать цвета значков более интересными — использовать градиенты. Выберите большой передний прямоугольник и инструмент «Заливка» (сначала на правой панели инструментов или Fна клавиатуре). В разделе «Тип» выберите второй значок «Линейный градиент».

Пользовательские значки папок с квадратным SVG и добавлением градиента

Остальные параметры оставьте без изменений и обратите внимание на его цвет. Чтобы отредактировать это, выберите инструмент «Редактирование» (второй на левой панели инструментов) и щелкните каждую контрольную точку «линии градиента» в прямоугольнике. На панели справа вы увидите селекторы цветов. Используйте их, чтобы изменить цвета градиента с темно-серого на светло-желтый.

Пользовательские значки папок с квадратными градиентными цветами Svg

Обратите внимание на значение непосредственно под селекторами цветов — по умолчанию оно будет сопровождаться настройкой «Hex». Скопируйте это значение в буфер обмена.

Выделите остальные прямоугольники и присвойте им тот же градиент. Поскольку способа «копировать градиенты» в Boxy SVG, похоже, нет, вам придется вводить значения цвета вручную. Вот почему вам следует скопировать значение цвета из предыдущего градиента. Вам придется вернуться к нему, чтобы также скопировать второе значение цвета и вставить его в градиент второго прямоугольника. Повторяйте действия для двух других, пока все стороны папки не будут иметь одинаковый градиент.

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

Пользовательские значки папок с квадратным градиентом копирования SVG

Читайте также: Сделайте лоскутrov/" title="5 лучших инструментов графического дизайна для недизайнеров">5 лучших инструментов графического дизайна для недизайнеров

Последние штрихи

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

Начнем с создания светло-серого прямоугольника перед папкой, немного меньшего размера.

Пользовательские значки папок с квадратным прямоугольником страницы Svg

Добавьте обводку вокруг этого прямоугольника, чтобы создать иллюзию глубины без каких-либо эффектов псевдоперспективы, которые использовались для папки. Для этого, выделив прямоугольник, выберите инструмент «Обводка» (второй на правой панели инструментов или S на клавиатуре). Назначьте ему черный цвет, но поверните ползунок прозрачности примерно на 80 процентов, ближе к правой стороне. Граница, появившаяся вокруг прямоугольника, должна выглядеть прозрачной и иметь серый цвет, который несколько темнее основного цвета прямоугольника.

Пользовательские значки папок с квадратным контуром страницы Svg

Скопируйте и вставьте прямоугольник. Придайте новому клону немного более темную серую заливку. Оставьте обводку как есть.

Пользовательские значки папок со страницей клонирования Boxy Svg

Используйте панель «Расстановка», чтобы переместить новый прямоугольник позади, но со смещением вверх и вправо по сравнению с прямоугольником основной страницы. Используйте инструмент «Трансформирование», чтобы повернуть его на два-пять градусов вправо.

Пользовательские значки папок с поворотом страницы Boxy Svg

Повторите последние шаги, чтобы создать третью страницу после первых двух.

Пользовательские значки папок с третьим клоном Boxy Svg

Вернитесь на панель «Упорядочить», выберите все три страницы и отправьте их обратно. Используйте опцию «Поднять», чтобы шаг за шагом перемещать их вперед, чтобы они находились перед задней стороной папки, но позади ее передней стороны.

Пользовательские значки папок с квадратными страницами SVG в папке

В этом примере под папкой добавляется еще один прямоугольник. Он был сдвинут в одну сторону, был добавлен градиент от серого к прозрачному, а панель «Композитинг» (третья на правой панели инструментов, Cна клавиатуре) использовалась для добавления фильтра «Размытие по Гауссу». В результате получилась красивая, гладкая тень под папкой. Если хотите, можете пропустить эту маленькую деталь.

Пользо><span class=Градиенты и оттенки иконкой Boxy Svg Final">

На последнем этапе этого руководства по Boxy SVG используйте «Файл ->Сохранить как…» (Ctrl+ Shift+ S) чтобы сохранить файл. Вы также можете экспортировать его в более удобный растровый формат, который можно использовать в других программах, например PNG или JPEG, выбрав «Файл ->Экспорт…» (Ctrl+ E). Установите параметры формата — разрешение, сжатие — вы хотите, используя панель справа, и нажмите «Экспорт», чтобы сохранить файл в выбранном типе файла.

После сохранения файла вы можете замените значки Gnome использовать только что созданный.

Теперь, когда вы создали значки, переходите к следующему уроку создать логотип в Inkscape .

>Последние штрихи
ПОХОЖИЕ СТАТЬИ

Популярные записи