Вы долго искали идеальную тему для значков, но вам не понравилось то, что вы нашли, и вы решили создать свой собственный значок папки. Какое программное обеспечение следует использовать и с чего начать? В этом руководстве Boxy SVG представлены пошаговые инструкции по созданию простого значка папки.
Читайте также: Как просмотреть миниатюры SVG в проводнике Windows
Установка
Существует множество инструментов, которые можно использовать для создавать файлы SVG , но относительно новый Contents
Установка
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
В Arch и Manjaro сначала нужно нажать добавить поддержку Snap-пакетов , а затем использовать ту же команду.
Boxy SVG также доступен в виде веб-приложения, однако для его использования потребуется подписка.
Начните с прямоугольника
В этом уроке Boxy SVG создаются значки для папок. Поскольку папки имеют прямоугольную форму, выберите инструмент «Прямоугольник», 12-й на левой панели инструментов, со значком сплошного прямоугольника.
Используйте его, чтобы определить прямоугольник, закрывающий нижнюю половину холста по умолчанию, как показано на снимке экрана ниже.
Клонировать и изменить размер
Выбрав инструмент «Трансформирование» (первый на левой панели инструментов со стрелкой курсора), щелкните прямоугольник. Используйте контрольные точки на ограничивающей рамке, чтобы немного изменить ее раз
Начните с прямоугольника
осталось пустое пространство.
Вы можете дублировать элемент, скопировав и вставив его (Ctrl+ C, затем Ctrl+ Vна клавиатуре), но попробуйте вместо этого сделать следующее: удерживая клавишу Alt, щелкните левой кнопкой мыши по прямоугольнику и перетащите его вправо. Перетаскивая его, также удерживайте клавишу Shift, чтобы ограничить движение прямоугольника только одной осью, в данном случае горизонтально. Переместите его вправо от существующего прямоугольника.
Основные преобразования
Если вы второй раз щелкните объект с выбранным инструментом «Трансформирование», контрольные точки изменят цвет, показывая вам, что вместо изменения размера теперь вы можете вращать его (если вы
Клонировать и изменить размер
клонять его. (с точками по бокам).Но давайте рассмотрим еще более универсальный способ преобразования объектов с помощью отдельных точек. Измените размер нового прямоугольника так, чтобы он находился справа от предыдущего. Затем выберите «Форма ->Форма в путь» в меню вверху, чтобы преобразовать выбранный объект в редактируемый путь.
Теперь вы можете настроить отдельные точки, чтобы изменить форму. Хотя для простого наклона прямоугольника не было необходимости, здесь показано, как настраивать отдельные точки, создавать более интересные формы или лучше контролировать перспективу.
Используйте инструмент «Редактирование» (второй на левой панели инструментов, непосредственно под инструментом «Трансформирование», с треугольной стрелкой), чтобы выбрать две контрольные точки на правой стороне нового прямоугольника.
Выбрав обе точки, щелкните левой кнопкой мыши и удерживайте одну из этих точек, чтобы выбрать ее, затем перетащите ее вверх, удерживая клавишу Shift(чтобы ограничить перемещение по вертикальной оси).
Цвета и перспектива
Используйте инструмент «Трансформирование», чтобы переместить новый прямоугольник, теперь меньшего размера и скошенный, так, чтобы
Основные преобразования
е инструмент «Заливка» (сначала на правой панели инструментов со значком кисти), чтобы придать ему цвет. На данный момент используйте любой цвет в качестве заполнителя.
Создайте клон меньшего перекошенного прямоугольника и переместите его в левую часть большего прямоугольника, используя методы, продемонстрированные ранее.
При активном инструменте «Трансформирование» выберите инструмент «Расстановка» (со значком креста на правой панели инструментов или нажмите Aна клавиатуре). Щелкните левой кнопкой мыши по первому наклоненному прямоугольнику, удерживайте клавишу Shiftи щелкните второй наклоненный прямоугольник, чтобы выбрать их оба.
Используйте «Назад» из группы параметров Z-порядка на панели «Расстановка», чтобы поместить эти прямоугольники позади более крупного. «Фронт» делает противоположное и ставит объект выше всего остального. Сопутствующие параметры «Поднять» и «Опустить» перемещают объект «вперед» или «назад» отдельными шагами.
Создайте клон большего прямоугольника и переместите его вправо и вверх так, чтобы он соприкасался с другой стороной перекошенных прямоугольников. У вас должен получиться один большой прямоугольник, соприкасающийся с его левой стороной, и еще один, соприкасающийся с его правой стороной, как показано на снимке экрана ниже
Отправьте этот прямоугольник назад и задайте ему другой цвет, чтобы можно было легко отличить каждый из них.
Сделайте лоскут
Когда основная форма нашей папки готова, пришло время сделать ее более похожей на папку. В этом поможет раздел категорий. Форму папки ниже пришлось немного подправить, так как она выглядела слишком толстой.
Создайте широкий и короткий прямоугольник на пустом месте холста. У вас будет общее представление о ее размере, если вы будете иметь в виду, что вскоре она превратится в откидную створку для уже разработанной базовой формы папки.
Выберите инструмент «Редактирование» (второй на левой панели инструментов), нажмите клавишу Ctrl, щелкните и перетащите контрольную точку верхнего левого края прямоугольника к середине его верхней стороны. Это превратит верхний левый край в кривую. Повторите противоположное движение для контрольной точки верхнего правого края, снова перетащив ее влево, к центру верхней стороны прямоугольника. В результате, как вы можете видеть ниже, должен получиться бывший прямоугольник с угловой нижней стороной и изогнутой верхней стороной.
Переместите клапан так, чтобы он соприкасался с верхней левой стороной большого прямоугольника спереди папки.
Настраивайте его размер и расположение, пока не убедитесь, что результат похож на папку.
Градиенты и оттенки
Самый простой способ создать иллюзию объема и сделать цвета значков более интересными — использовать градиенты. Выберите большой передний прямоугольник и инструмент «Заливка» (сначала на правой панели инструментов или Fна клавиатуре). В разделе «Тип» выберите второй значок «Линейный градиент».
Остальные параметры оставьте без изменений и обратите внимание на его цвет. Чтобы отредактировать это, выберите инструмент «Редактирование» (второй на левой панели инструментов) и щелкните каждую контрольную точку «линии градиента» в прямоугольнике. На панели справа вы увидите селекторы цветов. Используйте их, чтобы изменить цвета градиента с темно-серого на светло-желтый.
Обратите внимание на значение непосредственно под селекторами цветов — по умолчанию оно будет сопровождаться настройкой «Hex». Скопируйте это значение в буфер обмена.
Выделите остальные прямоугольники и присвойте им тот же градиент. Поскольку способа «копировать градиенты» в Boxy SVG, похоже, нет, вам придется вводить значения цвета вручную. Вот почему вам следует скопировать значение цвета из предыдущего градиента. Вам придется вернуться к нему, чтобы также скопировать второе значение цвета и вставить его в градиент второго прямоугольника. Повторяйте действия для двух других, пока все стороны папки не будут иметь одинаковый градиент.
При активном инструменте редактирования поиграйте с градиентом каждой стороны папки. Сделайте левую и правую стороны немного темнее, перетащив светлую точку градиента за пределы прямоугольника. Сделайте то же самое со стороны сзади, но сделайте ее еще темнее.
Читайте также: 5 лучших инструментов графического дизайна для недизайнеров
Последние штрихи
Чтобы значок папки больше походил на папку, чем на желтый прямоугольник, с
Сделайте лоскут
цы имитацией в качестве дополнительной детали. К этому моменту вы должны быть знакомы с задействованными процессами.Начнем с создания светло-серого прямоугольника перед папкой, немного меньшего размера.
Добавьте обводку вокруг этого прямоугольника, чтобы создать иллюзию глубины без каких-либо эффектов псевдоперспективы, которые использовались для папки. Для этого, выделив прямоугольник, выберите инструмент «Обводка» (второй на правой панели инструментов или S на клавиатуре). Назначьте ему черный цвет, но поверните ползунок прозрачности примерно на 80 процентов, ближе к правой стороне. Граница, появившаяся вокруг прямоугольника, должна выглядеть прозрачной и иметь серый цвет, который несколько темнее основного цвета прямоугольника.
Скопируйте и вставьте прямоугольник. Придайте новому клону немного более темную серую заливку. Оставьте обводку как есть.
Используйте панель «Расстановка», чтобы переместить новый прямоугольник позади, но со смещением вверх и вправо по сравнению с прямоугольником основной страницы. Используйте инструмент «Трансформирование», чтобы повернуть его на два-пять градусов вправо.
Повторите последние шаги, чтобы создать третью страницу после первых двух.
Вернитесь на панель «Упорядочить», выберите все три страницы и отправьте их обратно. Используйте опцию «Поднять», чтобы шаг за шагом перемещать их вперед, чтобы они находились перед задней стороной папки, но позади ее передней стороны.
В этом примере под папкой добавляется еще один прямоугольник. Он был сдвинут в одну сторону, был добавлен градиент от серого к прозрачному, а панель «Композитинг» (третья на правой панели инструментов, Cна клавиатуре) использовалась для добавления фильтра «Размытие по Гауссу». В результате получилась красивая, гладкая тень под папкой. Если хотите, можете пропустить эту маленькую деталь.
На последнем этапе этого руководства по Boxy SVG используйте «Файл ->Сохранить как…» (Ctrl+ Shift+ S) чтобы сохранить файл. Вы также можете экспортировать его в бо
Градиенты и оттенки
, который можно использовать в других программах, например PNG или JPEG, выбрав «Файл ->Экспорт…» (Ctrl+ E). Установите параметры формата — разрешение, сжатие — вы хотите, используя панель справа, и нажмите «Экспорт», чтобы сохранить файл в выбранном типе файла.После сохранения файла вы можете замените значки Gnome использовать только что созданный.
Теперь, когда вы создали значки, переходите к следующему уроку создать логотип в Inkscape .
