Дизайн SVG Graphics в вашем браузере

Sep 16, 2025

Инструкции

То Редактор Vecteezy Бесплатный векторный редактор, который работает прямо в вашем браузере. Это руководство охватывает основные инструменты формы и редактирование инструментов, вы можете использовать для редактирования любых векторов на сайте. Таким образом, вы можете создавать значки, кнопки, логотипы или что-либо еще с относительной легкостью.

GUI для этого редактора чувствует себя похожи на программное обеспечение Adobe, поэтому, если вы уже используете Photoshop или Illustrator, у вас будет легче обучение веревки. Но даже полные новички могут погрузиться в это и поднять основы с нуля.

Получить Adobe Creative Cloud

Мы собираемся использовать эти магазины иконы из Vecteeezy.

Просто посетите страницу значков и нажмите «Изменить и AMP; Скачать кнопку. Это открывает редактор прямо в вашем браузере, чтобы вы могли настроить и создать эту графику. Для этого учебника мы покажем вам, как набрать некоторые из этих значков и преобразовывать их в более широкую графику прогресса - идеальный выбор для любой домашней страницы электронной коммерции.

Так что с этими магазинами иконы открыты в редакторе Vecteezy, мы можем начать!

01. Выберите иконы

Click into the icon group and select one icon, then click Duplicate at the top — Нажмите в группу значков и выберите один значок, затем нажмите дубликат в верхней части

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

Выберите сумку и нажмите «Дублировать» в самом вершине страницы. Это должно дать вам дубликат всего значка. Переместите это вверх к вершине и дублируют два других.

Примечание. Подарочная коробка не полностью сгруппирована, поэтому при нажатии на дубликат вы выбираете только часть значка. Чтобы исправить это, просто перетащите поле выбора по всей значке подарка, затем в верхнем щелчке Edit- & GT; Group. Теперь вы можете дублировать весь настоящий значок одним щелчком мыши.

После того, как у вас будут дубликаты всех трех значков, дважды щелкните в любом месте на пустом холсте. Это приводит вас за пределами группы иконок, чтобы вы могли выбрать другие объекты на странице. Если вы нажмете любую из старых значков, вы выберете всю группу. Это идеально, потому что вы захотите перетащить их от холста, так что они не видны.

02. Очистить мусор

Change the background opacity if you want it to be white instead of transparent — Измените непрозрачность фона, если вы хотите, чтобы это было белым, а не прозрачным

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

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

Если вся икона исчезает - не паникуйте. Просто нажмите Отменить рядом с верхней частью или нажмите Ctrl / CMD + Z и попробуйте снова. Возможно, вам понадобится дважды щелкнуть, чтобы войти в группу значков.

К концу у вас должно быть три чистые значки, готовые к использованию. Если вам не нравится прозрачный фон, вы всегда можете получить доступ к фоновой панели в левом меню (третья кнопка вниз) и увеличьте непрозрачность до 100 процентов для чистого белого фона.

03. Добавление текста

Add text labels under each icon with the same font settings — Добавить текстовые метки под каждым значком с одинаковыми настройками шрифта

Этот прогресс будет невероятно простым; Просто рекламируйте три этапа магазина электронной коммерции.

Подчеркнуть этот процесс, давайте добавим этикетки под каждым значком. На панели инструментов левой руки найдите текстовый инструмент (вторая кнопка), затем нажмите под значок мешка, чтобы добавить текстовый блок. Добавьте текст «магазин» и нажмите Enter на клавиатуре.

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

Я использую Open Sans полужирным размером 30 с интервалом -1.50 буквенным интервалом. Цвет текста - это # 525252.

Дублируйте этот текст дважды и поместите дубликаты под другие значки. Используйте текст «Pay» под значок кредитной карты и «получить» под подарочной коробкой.

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

04. Регулировка графики

Shift+click to select the ribbon shapes and change the background colour — Shift + Нажмите, чтобы выбрать формы ленты и изменить цвет фона

Перед созданием бара выполнения вы можете изменить какие-либо цвета, которые вам нравятся в значках.

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

После того, как вы находитесь внутри группы Icon, удерживайте Shift, нажав, чтобы выбрать более одного элемента за раз. Я выберу горизонтальные и вертикальные прямоугольники, а также формы лука в верхней части.

На панели выбора (первый значок в левом меню) Найдите настройки заполнения. Вы увидите, что цвет по умолчанию # 2E3192. Нажмите на меню «Заполнить», чтобы получить доступ к раскрывающемуся цветовому колесу. Здесь вы можете либо перетащить, чтобы найти нужный цвет, или введите шестнадцатеричный код напрямую.

Введите # 518531 и нажмите Enter. Это должно сохранить результат и обновлять все три фигуры одновременно. Не стесняйтесь играть с любыми другими настройками цвета, которые вы хотели бы изменить!

05. Начало прогресса

Click the top-left circle in the Elements panel to add a new circle to the canvas — Нажмите на верхний левый круг на панели «Элементы», чтобы добавить новый круг в холст

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

Нажмите на панель элементов и выберите форму круга, которая является самым первым элементом в списке. Он автоматически размещает темно-серый круг в центре вашего рабочего пространства.

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

Поэтому вместо этого вернитесь к инструменту Select и убедитесь, что ваш новый круг выбран. В самом верхней части панели «Выбор» вы должны увидеть размер выбора с высотой и значением ширины.

Введите 100 в обоих полях и перетащите свой первый круг под первым значком.

06. Дублирование кругов

Resize the circle and duplicate twice, then move them under each shopping icon — Измените размер круга и дублируйте дважды, затем переместите их в каждый значок покупок

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

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

Сделайте это, пока у вас не будет трех разных форм круга при 100 х 100, каждый расположен под тремя иконками.

07. Добавьте некоторые соединительные линии

Select the rectangle shape and arrange it behind the three circles — Выберите форму прямоугольника и организовать его за тремя кругами

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

С этой формой выбрана перейти назад к инструменту SELECT и найдите панель размера ширины / высоты. Поскольку этот прямоугольник должен охватывать всю ширину панели прогресса, нам просто нужна одна действительно длительная форма. Итак, измените высоту до 10 и ширину к любому количеству, которые вам нужно соединить все ваши круги вместе. Мой шириной 750.

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

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

08. Восстановление

Recolour all the shapes and include a small stroke on the three circles — Перекосните все формы и включают небольшой ход на три круга

Текущий прогресс бар выглядит немного темно, поэтому давайте немного изменим цвет.

Нажмите, чтобы выбрать длинный прямоугольник и найдите настройки заполнения на панели «Инструменты». Измените цвет на # C5C5C5 и нажмите Enter.

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

Удерживайте Shift и нажмите каждый из трех кругов. Отрегулируйте цвет Fill в # F5F5F5, нажмите Enter, а затем нажмите значок x, чтобы закрыть панель выбора цвета заполнения. Ниже вы найдете настройки хода. Измените инсульт Заполните на # C5C5C5 и нажмите Enter.

Нажмите значок x, чтобы закрыть эту панель выбора цвета, затем измените размер хода до 6. На этом этапе я также рекомендую группировать все кружки и прямоугольник вместе, перетаскивая поле выбора и собираюсь редактировать и GT; группа. Теперь вы можете сразу отрегулировать положение всех форм сразу.

09. Добавление шагов прогресса

Add a text label into the first circle and duplicate the text for all three shapes — Добавьте текстовую метку в первый круг и дублируйте текст для всех трех форм

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

Нажмите на текстовый инструмент и введите номер 1 в первый круг. Я использую Open Sans Extra-Bold, размер 45 с цветом # C5C5C5, чтобы соответствовать границам. Перетащите этот текст, чтобы он расположен в центре круга.

Дублируйте текстовый элемент и переместите его во второй круг с помощью текста «2». Сделайте то же самое для третьего круга с текстом «3».

10. Выделите первый шаг

Recolour the first circle blue so it appears like the active progress step — Перекрасить первый круг синий, поэтому он выглядит как активный шаг прогресса

В качестве окончательного прикосновения давайте выделим самый первый шаг, используя более легкий синий план. Сначала выберите номер «1», который вы только что создали, и измените заполнение на # 4976A3. Затем нажмите, чтобы выбрать круг за текстом. Найдите настройки хода и измените цвет инсуляции на # 4976A3. Это должно добавить синюю границу по кругу. С помощью круга все еще выбрано, щелкните настройки заполнения и измените цвет на # E2EBFA.

И это все! Теперь вы можете экспортировать это как PNG / JPG, используя функцию загрузки в правом верхнем углу. Вы также можете скрыть белый фон, чтобы экспортировать это как прозрачный PNG и изменить общий размер документа с использованием фоновой панели (третья кнопка в левом меню).

Или если вы хотите сохранить это для будущих изменений, просто перейдите в файл и GT; Сохранить напустя. Вам придется создать бесплатную учетную запись Vecteeezy, но это отличный способ сохранить вашу тяжелую работу, сохраненную для дальнейшего использования.

Эта статья изначально появилась в Чистый журнал Выпуск 295. Купить это здесь Отказ

Прочитайте больше:

10 золотых правил для отзывчивых SVGS
Исследуйте захватывающие новые функции в SVG 2
Superchark SVG анимации с GSAP

Дизайн SVG Graphics в вашем браузере

01. Выберите иконы

02. Очистить мусор

03. Добавление текста

04. Регулировка графики

05. Начало прогресса

06. Дублирование кругов

07. Добавьте некоторые соединительные линии

08. Восстановление

09. Добавление шагов прогресса

10. Выделите первый шаг

Инструкции - Самые популярные статьи

Как остановить очки запотевать при ношении маски для лица

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

Как создать комическую страницу

Как создать ретро логотип с аффинным дизайнером

Как кодировать маркер дополненной реальности

Создание живописных эффектов в Photoshop CC

Основная стратегия опыта пользователей

5 способов эффективно управлять денежным потоком

Категории