Desain grafis SVG di browser Anda

Sep 15, 2025

Bagaimana caranya

Itu Editor Veceezy adalah suite pengeditan vektor gratis yang berjalan tepat di browser Anda. Tutorial ini mencakup alat dasar bentuk dan alat pengeditan yang dapat Anda gunakan untuk mengedit vektor apa pun di situs. Dengan cara ini Anda dapat membangun lencana, tombol, logo, atau apa pun dengan relatif mudah.

GUI untuk editor ini terasa mirip dengan perangkat lunak Adobe, jadi jika Anda sudah menggunakan Photoshop atau Illustrator, Anda akan memiliki waktu yang lebih mudah untuk mempelajari tali. Tetapi bahkan pemula yang lengkap dapat menyelam ke dalam ini dan mengambil dasar-dasar dari awal.

Dapatkan Adobe Creative Cloud

Kami akan menggunakan ikon belanja ini dari Vecteezy.

Cukup kunjungi halaman ikon dan klik 'Edit & Amp; Unduh tombol. Ini membuka editor tepat di browser Anda sehingga Anda dapat menyesuaikan dan membangun pada grafik ini. Untuk tutorial ini, kami akan menunjukkan kepada Anda cara menangkap beberapa ikon ini dan mengubahnya menjadi grafik bilah kemajuan yang lebih besar - pilihan yang sempurna untuk beranda e-commerce.

Jadi dengan ikon belanja itu terbuka di editor veceezy, kita bisa memulai!

01. Pilih ikon

Click into the icon group and select one icon, then click Duplicate at the top — Klik pada grup ikon dan pilih satu ikon, lalu klik Duplikat di bagian atas

Klik dua kali pada grup ikon untuk memilih semua ikon (Anda mungkin perlu mengklik dua kali). Saya akan menggunakan tiga ikon khusus untuk tutorial ini: tas belanja, kartu kredit dan kotak hadiah.

Pilih tas belanja dan klik Duplikat di bagian paling atas halaman. Ini harus memberi Anda duplikat dari seluruh ikon. Pindahkan ini ke atas ke atas dan duplikat dua lainnya.

Catatan: Kotak hadiah tidak sepenuhnya dikelompokkan, jadi ketika Anda mengklik untuk menduplikasi Anda hanya akan memilih sepotong ikon. Untuk memperbaikinya, cukup seret kotak pilihan di seluruh ikon hadiah, lalu pada top klik Edit- & gt; grup. Sekarang, Anda dapat menduplikasi seluruh ikon saat ini dengan satu klik.

Setelah Anda memiliki duplikat dari ketiga ikon, klik dua kali di mana saja di atas kanvas kosong. Ini membawa Anda ke luar grup ikon sehingga Anda dapat memilih objek lain pada halaman. Jika Anda mengklik salah satu ikon yang lebih lama, Anda akan memilih seluruh grup. Ini sempurna, karena Anda akan ingin menyeretnya dari kanvas sehingga mereka tidak terlihat.

02. Bersihkan Sampah

Change the background opacity if you want it to be white instead of transparent — Ubah opacity latar belakang jika Anda ingin menjadi putih daripada transparan

Klik dua kali pada setiap ikon duplikat untuk mengakses bentuk individu di dalamnya. Kami hanya perlu ikon utama, jadi Anda harus memilih dan menghapus latar belakang lingkaran warna-warni dan menjatuhkan bayangan.

Untuk melakukan ini, cukup perbesar dan pilih lingkaran latar belakang. Kemudian tekan delete, dan itu harus hilang.

Jika seluruh ikon menghilang - jangan panik. Cukup klik Undo di dekat bagian atas atau tekan Ctrl / Cmd + Z dan coba lagi. Anda mungkin perlu mengklik dua kali untuk masuk ke dalam grup ikon.

Pada akhirnya, Anda harus memiliki tiga ikon bersih yang siap digunakan. Jika Anda tidak menyukai latar belakang transparan Anda selalu dapat mengakses panel latar belakang di menu kiri (tombol ketiga ke bawah) dan meningkatkan opacity menjadi 100 persen untuk latar belakang putih murni.

03. Menambahkan Teks

Add text labels under each icon with the same font settings — Tambahkan label teks di bawah setiap ikon dengan pengaturan font yang sama

Progress bar ini akan sangat sederhana; Hanya mengiklankan tiga tahap toko e-commerce.

Untuk menekankan proses ini, mari tambahkan label di bawah setiap ikon. Di bilah alat kiri, temukan alat teks (tombol kedua) lalu klik di bawah ikon Tas untuk menambahkan blok teks. Tambahkan teks 'Toko' dan tekan enter pada keyboard Anda.

Ini secara otomatis memilih teks sehingga Anda dapat memindahkannya dan menemukan posisi yang baik. Tetapi jika Anda memilih alat teks lagi, Anda dapat mengubah font keluarga, warna, ukuran, spasi surat dan fitur lainnya.

Saya menggunakan buka SANS semi-bold ukuran 30 dengan jarak -1.50 huruf. Warna teks adalah # 525252.

Gandakan teks ini dua kali dan letakkan duplikat di bawah ikon lainnya. Gunakan teks 'bayar' di bawah ikon kartu kredit dan 'terima' di bawah kotak hadiah.

Anda harus menggunakan alat pilih untuk memposisikan ulang ikon di atas teks. Juga, ruang setiap ikon dekat dengan ekolistan terpisah jika memungkinkan.

04. Menyesuaikan grafik

Shift+click to select the ribbon shapes and change the background colour — Shift + Klik untuk memilih bentuk pita dan mengubah warna latar belakang

Sebelum membuat bilah progres, Anda dapat mengubah warna apa pun yang Anda suka di ikon.

Untuk melakukan ini, klik dua kali untuk memasukkan grup ikon apa pun, lalu pilih bentuk apa pun yang ingin Anda ubah. Dalam hal ini, saya akan mengedit pita kotak hadiah untuk mengubah warna dari biru menjadi hijau.

Setelah Anda berada di dalam ikon grup, tahan shift sambil mengklik untuk memilih lebih dari satu item sekaligus. Saya akan memilih persegi panjang horizontal dan vertikal, ditambah bentuk busur di bagian atas.

Di panel Pilih (ikon pertama di menu kiri) Temukan pengaturan Isi. Anda akan melihat warna default adalah # 2E3192. Klik mengisi menu untuk mengakses roda warna drop-down. Di sini, Anda dapat menyeret untuk menemukan warna yang Anda inginkan, atau masukkan kode hex secara langsung.

Masukkan # 518531 dan tekan enter. Ini harus menghemat hasil dan memperbarui ketiga bentuk sekaligus. Jangan ragu untuk bermain-main dengan pengaturan warna lain yang ingin Anda ubah!

05. Memulai bilah kemajuan

Click the top-left circle in the Elements panel to add a new circle to the canvas — Klik lingkaran kiri atas di panel elemen untuk menambahkan lingkaran baru ke kanvas

Untuk membuat bilah progres, Anda hanya perlu dua bentuk: lingkaran dan persegi panjang. Untungnya, keduanya tersedia di panel elemen yang terletak di bagian paling bawah menu alat.

Klik ke Elements Panel dan pilih bentuk lingkaran, yang merupakan item pertama dalam daftar. Ini akan secara otomatis menempatkan lingkaran abu-abu gelap di tengah ruang kerja Anda.

Anda dapat mengubah ukuran lingkaran dengan menyeret kotak kotak putih kecil di sudut atau bound tertentu. Ini berfungsi dengan baik, tetapi tidak sesuai dengan fitur pengubahan ukuran langsung.

Jadi alih-alih kembali ke alat pilih dan pastikan lingkaran baru Anda dipilih. Di bagian paling atas panel alat pilih, Anda akan melihat ukuran pilihan dengan nilai tinggi dan lebar.

Masukkan 100 di kedua bidang dan seret lingkaran pertama Anda di bawah ikon pertama.

06. Duplicating Circles.

Resize the circle and duplicate twice, then move them under each shopping icon — Ubah ukuran lingkaran dan duplikat dua kali, lalu pindahkan di bawah setiap ikon belanja

Dengan bentuk lingkaran Anda dipilih, klik Duplikat di menu atas. Sekarang, reposisi duplikat ini sehingga sejajar dengan lingkaran asli Anda. Cobalah untuk memperbaikinya di atas lingkaran pertama sehingga mereka terlihat seperti satu bentuk.

Sekarang, jika Anda memegang shift dan klik, Anda dapat menyeret lingkaran duplikat ini dalam garis lurus secara horizontal. Ini memungkinkan Anda menyelaraskan semua kalangan Anda bersama-sama dalam garis lurus (atau cukup dekat dengan satu).

Lakukan ini sampai Anda memiliki tiga bentuk lingkaran berbeda pada 100 x 100, masing-masing diletakkan di bawah tiga ikon.

07. Tambahkan beberapa baris penghubung

Select the rectangle shape and arrange it behind the three circles — Pilih bentuk persegi panjang dan atur di belakang tiga lingkaran

Pindah kembali ke panel elemen dan temukan bentuk persegi. Klik untuk menambahkan satu kotak ke kanvas.

Dengan bentuk ini dipilih kembali ke alat pilih dan temukan panel lebar / ukuran tinggi. Karena persegi panjang ini harus menjangkau seluruh lebar progress bar, kita hanya perlu satu bentuk yang sangat panjang. Jadi ubah ketinggian menjadi 10 dan lebar untuk nomor apa pun yang Anda butuhkan untuk menghubungkan semua lingkaran Anda bersama. Milik saya lebar 750.

Sekarang, dengan persegi panjang ini dalam posisi, lihat ke bagian bawah panel Pilih di mana tertulis diatur & amp; Balik. Klik ikon kedua di baris atas, yang memungkinkan Anda memindahkan bentuk yang dipilih di belakang bentuk lain.

Catatan: Anda mungkin harus mengklik tombol bawah beberapa kali untuk mendapatkan persegi panjang di belakang ketiga lingkaran. Tetapi sekarang persegi panjang penghubung hanya terlihat antara bentuk lingkaran, sehingga kita dapat menambahkan teks ke dalam lingkaran nanti.

08. Rekolesan

Recolour all the shapes and include a small stroke on the three circles — Rekolori semua bentuk dan termasuk stroke kecil pada tiga lingkaran

Bilah kemajuan saat ini terlihat sedikit gelap, jadi mari kita ubah warna sedikit.

Klik untuk memilih persegi panjang panjang dan menemukan pengaturan isi di panel alat. Ubah warna menjadi # c5c5c5 dan tekan enter.

Sekarang, klik di mana saja dari kanvas untuk membatalkan pilihan persegi panjang. Kami juga ingin mengubah warna lingkaran, dan mereka harus lebih ringan, menggunakan abu-abu gelap sebagai warna perbatasan.

Tahan shift, dan klik masing-masing dari tiga lingkaran. Sesuaikan warna isian ke # f5f5f5, tekan enter dan kemudian klik ikon X untuk menutup panel Pilih Warna Isi. Di bawah, Anda akan menemukan pengaturan stroke. Ubah stroke Isi ke # C5C5C5 dan tekan enter.

Klik ikon X untuk menutup panel pemilihan warna ini, lalu ubah ukuran stroke menjadi 6. Pada tahap ini saya juga merekomendasikan pengelompokan semua lingkaran dan persegi panjang bersama dengan menyeret kotak pilihan dan akan mengedit & gt; grup. Sekarang, Anda dapat menyesuaikan posisi semua bentuk sekaligus dengan mudah.

09. Menambahkan langkah kemajuan

Add a text label into the first circle and duplicate the text for all three shapes — Tambahkan label teks ke dalam lingkaran pertama dan duplikat teks untuk ketiga bentuk

Mari kita tambahkan beberapa nomor ke setiap lingkaran untuk menyelesaikan desain bilah kemajuan.

Klik alat teks dan masukkan nomor 1 ke dalam lingkaran pertama. Saya menggunakan Open Sans Extra-Bold, ukuran 45 dengan warna # C5C5C5 untuk mencocokkan batas. Seret teks ini sehingga diposisikan di tengah lingkaran.

Gandakan elemen teks dan pindahkan ke lingkaran kedua dengan teks '2'. Lakukan hal yang sama untuk lingkaran ketiga dengan teks '3'.

10. Sorot langkah pertama

Recolour the first circle blue so it appears like the active progress step — Recobour lingkaran biru pertama sehingga muncul seperti langkah kemajuan aktif

Sebagai sentuhan akhir, mari kita sorot langkah pertama menggunakan garis biru yang lebih ringan. Pertama pilih angka '1' Anda baru saja dibuat, dan ubah isi ke # 4976A3. Kemudian klik untuk memilih lingkaran di belakang teks. Temukan pengaturan stroke dan ubah warna stroke ke # 4976A3. Ini harus menambah batas biru tua di sekitar lingkaran. Dengan lingkaran masih dipilih, klik pengaturan Isi dan ubah warna menjadi # E2EBFA.

Dan hanya itu! Sekarang Anda dapat mengekspor ini sebagai PNG / JPG menggunakan fitur unduhan di sudut kanan atas. Anda juga dapat menyembunyikan latar belakang putih untuk mengekspor ini sebagai PNG transparan dan mengubah ukuran dokumen keseluruhan menggunakan panel latar (tombol ketiga di menu sebelah kiri).

Atau jika Anda ingin menyimpan ini untuk perubahan di masa depan, buka saja file & gt; simpan untuk nanti. Anda harus membuat akun Vecteezy gratis tetapi ini adalah cara yang bagus untuk menjaga kerja keras Anda disimpan untuk referensi di masa mendatang.

Artikel ini awalnya muncul di Net Magazine. masalah 295. Beli sini .

Baca lebih lajut:

10 Aturan Emas untuk SVG Responsif
Jelajahi fitur-fitur baru yang menarik di SVG 2
Animasi SVG SuperCharge dengan GSAP

Desain grafis SVG di browser Anda

01. Pilih ikon

02. Bersihkan Sampah

03. Menambahkan Teks

04. Menyesuaikan grafik

05. Memulai bilah kemajuan

06. Duplicating Circles.

07. Tambahkan beberapa baris penghubung

08. Rekolesan

09. Menambahkan langkah kemajuan

10. Sorot langkah pertama

Bagaimana caranya - Artikel Terpopuler

Cara menggunakan penyimpanan cloud sebagai kreatif

Cara menggambar seekor burung

Cara menggambar serigala

Buat finishing cetak khusus di Indesign

Buat komponen korsel yang fleksibel

Prototipe sempurna dan desain hand-off dengan Marvel

Cara merancang formulir responsif dan device-agnostik

Bangun UI berbasis kartu dengan Yayasan

Kategori