Дизайн SVG-графіки у вашому браузері

Sep 12, 2025

Як

Точний Vecteezy редактор це безкоштовний векторний редагування, який працює прямо у вашому браузері. Цей підручник охоплює основні інструменти та інструменти для редагування, ви можете використовувати для редагування будь-яких векторів на сайті. Таким чином, ви можете побудувати значки, кнопки, логотипи або щось інше з відносною легкістю.

ГРУ для цього редактора відчуває себе схожим на програмне забезпечення Adobe, тому, якщо ви вже використовуєте Photoshop або Illustrator, у вас буде легше вивчати канали. Але навіть повне початківці можуть зануритися в це і забрати основи з нуля.

Отримати Adobe Creative Cloud

Ми збираємося використовувати ці торгові значки з Vecteezy.

Просто відвідайте сторінку значків та натисніть кнопку "Редагувати & amp; Завантажити кнопку. Це відкриває право редактора у вашому браузері, щоб ви могли налаштувати та побудувати на ці графіку. Для цього навчального посібника ми покажемо вам, як викрасти деякі з цих значків та конвертувати їх у більшу графіку прогресу, - ідеальний вибір для будь-якої домашньої сторінки електронної комерції.

Отже, з цими торговими іконками відкриваються у Vectezy Editor, ми можемо почати роботу!

01. Виберіть іконки

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

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

Виберіть сумку для покупок та натисніть кнопку Duplicate на самому верхній частині сторінки. Це має дати вам дублікат всього значка. Перемістіть це до вершини і дублювати інші два.

ПРИМІТКА. Подарункова коробка не повністю згрупована, тому, коли ви натискаєте, щоб дублювати ви виберете лише шматок значка. Щоб виправити це, просто перетягніть вікно вибору по всьому значку подарунка, а потім у верхній клацiйні кнопки «Редагувати» та GT; Тепер ви можете дублювати весь подарунок значок одним клацанням миші.

Як тільки у вас є дублікати всіх трьох значків, двічі клацніть будь-де на порожньому полотні. Це приносить вам за межами групи значків, щоб ви могли вибрати інші об'єкти на сторінці. Якщо ви натиснете будь-яку з старших значків, ви виберете всю групу. Це ідеально, тому що ви захочете перетягнути їх від полотна, щоб вони не видно.

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 на клавіатурі.

Це автоматичне вибирає текст, щоб ви могли перемістити його і знайти хороше положення. Але якщо ви виберете текстовий інструмент знову, ви можете змінити сімейство шрифту, колір, розмір, інтервал букв та інші функції.

Я використовую відкриті Sans напівжирного розміру 30 з ліцеми літери -1,50. Колір тексту # 525252.

Дублюйте цей текст двічі і помістіть дублікати під інші значки. Використовуйте текст "Оплатити" під час кредитної картки та "Отримати" під коробкою подарунків.

Ви повинні використовувати інструмент вибору для переміщення значків над текстом. Також, простір кожен значок близький до рівномірного, якщо це можливо.

04. Регулювання графіки

Shift+click to select the ribbon shapes and change the background colour — Shift + Натисніть, щоб вибрати стрічкові форми та змінити колір фону

Перш ніж створити панель прогресу, ви можете змінити будь-які кольори, які вам подобаються в іконках.

Щоб зробити це, двічі клацніть, щоб увімкнути будь-яку групу значків, а потім виберіть будь-яку форму, яку ви хочете змінити. У цьому випадку я редагую стрічку подарункової коробки, щоб змінити колір від синього до зеленого кольору.

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

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

Введіть # 518531 і натисніть Enter. Це має зберегти результат та оновити всі три форми відразу. Не соромтеся грати з будь-якими іншими налаштуваннями кольорів, які ви хотіли б змінити!

05. Початок бари прогресу

Click the top-left circle in the Elements panel to add a new circle to the canvas — Натисніть верхню ліву коло на панелі "Елементи", щоб додати нове коло до полотна

Щоб створити панель прогресу, вам потрібні лише дві форми: круги та прямокутники. На щастя, обидва вони доступні на панелі "Елементи", розташованих у самому нижній частині меню "Інструменти".

Натисніть на панель «Елементи» та виберіть форму кола, що є першим елементом у списку. Це автоматично покласти темно-сірий круг у центрі робочого простору.

Ви можете змінити розмір коло, перетягнувши маленькі білі квадратні скриньки в кутку або вибрану межу. Це добре працює, але це не так точно, як функція прямої зміни розміру.

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

Введіть 100 в обох полях, і перетягніть перше коло під першим значком.

06. Дублікаційні кола

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

За допомогою вибраної форми обходу клацніть дублікат у верхньому меню. Тепер перемістіть цей дублікат, тому він тісно вирівнюється з вашим оригінальним колом. Спробуйте отримати його прямо на вершині першого кола, щоб вони виглядали як одна форма.

Тепер, якщо ви тримаєте зсув і клацніть, ви можете перетягнути це дубльоване коло по прямій лінії горизонтально. Це дозволяє вам ідеально вирівняти всі ваші кола разом по прямій лінії (або досить близько до одного).

Зробіть це, поки у вас немає трьох різних фігур кола при 100 х 100, кожен розташований під три іконки.

07. Додайте деякі з'єднувальні лінії

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

Перейдіть до панелі "Елементи" та знайдіть квадратну форму. Натисніть, щоб додати один квадрат на полотно.

За допомогою цієї форми вибирається переміщення назад до інструмента «Вибір» та знайдіть панель розміру ширини / висоти. Оскільки цей прямокутник повинен охоплювати всю ширину панелі прогресу, нам просто потрібно одна дійсно довга форма. Отже, змініть висоту до 10 і ширину до будь-якого числа, який потрібно з'єднати всі свої кола разом. Шахта - 750 широко.

Тепер, з цим прямокутником у положенні, подивіться на нижню частину панелі "Вибір", де він говорить, що влаштовує & amp; Фліп. Натисніть на другий значок у верхньому рядку, який дозволяє перемістити будь-яку вибрану форму за іншими формами.

Примітка. Можливо, вам доведеться клацнути нижню кнопку кілька разів, щоб отримати прямокутник за всіма трьома кругами. Але тепер, що з'єднувальний прямокутник видно лише між фігурами кола, тому ми можемо додати текст у кола пізніше.

08. Приготування

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

Поточний рядок прогресу виглядає трохи темним, тому давайте трохи змінити колір.

Натисніть, щоб вибрати довгий прямокутник і знайдіть налаштування заповнення на панелі інструментів. Змініть колір на # C5C5C5 і натисніть Enter.

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

Тримайте зсув і натисніть кожну з трьох кола. Відрегулюйте колір заповнення на # F5F5F5, натисніть кнопку Enter, а потім натисніть значок X, щоб закрити панель вибору кольору заповнення. Нижче ви знайдете налаштування інсульту. Змініть інсульт заповнення # C5C5C5 і натисніть Enter.

Натисніть піктограму X, щоб закрити цю панель вибору кольорів, а потім змініть розмір інсульту до 6. На цьому етапі я також рекомендую групувати всі кола та прямокутник разом, перетягнувши вікно вибору та збирається редагувати & GT; Group. Тепер ви можете відразу налаштувати позицію всіх форм.

09. Додавання кроків прогресу

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

Давайте додати деякі цифри в кожне коло, щоб завершити дизайн конструкції прогресу.

Натисніть текстовий інструмент та введіть номер 1 у перше коло. Я використовую відкриті 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; зберегти пізніше. Вам доведеться створити безкоштовний Vectezy обліковий запис, але це чудовий спосіб зберегти вашу важку роботу, збережену для подальшого використання.

Ця стаття спочатку з'явилася чистий журнал випуск 295. Купуйте його тут .

Читати далі:

10 золотих правил для чуйних SVGS
Дослідіть цікаві нові функції в SVG 2
Навантажувач SVG анімації з GSAP

Дизайн SVG-графіки у вашому браузері

01. Виберіть іконки

02. Очистити сміття

03. Додавання тексту

04. Регулювання графіки

05. Початок бари прогресу

06. Дублікаційні кола

07. Додайте деякі з'єднувальні лінії

08. Приготування

09. Додавання кроків прогресу

10. Виділіть перший крок

Як - Найпопулярніші статті

Як зробити скріншот на Mac

10 способів поліпшення 3D-анатомії

Створити перспективу в Adobe Illustrator

4 Поради щодо покращення ефективності вашої сторінки

Як намалювати металеві відбитки

Як малювати традиційну британську сцену

Як почати роботу з типором

Як прототип мобільного додатку з Adobe XD

Категорії