icon logo techsains.com TechSains

🚀 Informasi Teknologi dan Astronautika

  • Astronautika
  • Teknologi
  • Tutorial
  • Komputer
  • Pertanian
  • Retail
  • Travel
  • Otomotif
  1. Home
  2. Tutorial
  3. Desain
Cara Membuat Logo SVG dengan Adobe Illustrator Lengkap
  • 10 Agustus 2021
  • 3.04 K
  • Andy. H. Nst
  • Gambar Oleh : www.techsains.com

Cara Membuat Logo SVG dengan Adobe Illustrator Lengkap

Menggunakan logo berformat SVG akan membuat tampilan website semakin menarik dan lebih ringan dibandingkan dengan gambar biasa.

Sebagai perbandingan, jika sobat menggunakan gambar berformat JPG atau PNG yang ukurannya sekitar 50 sampai 100 kilobyte, maka dengan menggunakan format SVG, logo dapat berukuran hanya sekitar 10 sampai 20 kilobyte saja.

Hal ini dikarenakan, format SVG merupakan kumpulan dari puluhan atau ratusan titik-titik dan garis yang dibentuk menjadi vektor-vektor dan menjadi gambar yang dapat diskala hingga tak terbatas.

Daftar isi
  • Format SVG (Scalable Vector Graphics)
  • Cara Membuat Logo SVG di Adobe Illustrator
  • Cara Konversi JPG ke SVG
  • Cara Menampilkan Gambar SVG di HTML

Format SVG (Scalable Vector Graphics)

Sesuai dengan namanya scalable vector graphics, SVG merupakan grafik vektor yang dapat diskala, artinya ketika gambar di zoom sampai beberapa kali maka hasilnya tidak akan pecah atau buram.

Keuntungan menggunakan format SVG

  • Gambar dapat diskala sampai tak terbatas, baik itu diskala naik dan turun, dan resolusi gambar tetap tajam. Tidak buram / pecah seperti gambar format JPG dan PNG ketika diskala naik.
  • Ukurannya sangat kecil, karena didalam berkasnya tidak memuat data per pixel, melainkan vektor (garis), sehingga tidak ada informasi yang direkam pada kanvas kosong / putih.

Namun, ada juga kekurangan format SVG, diantaranya

  • Format SVG hanya cocok diaplikasikan pada gambar yang berbentuk solid, seperti logo, huruf, dan bentuk (shape). Tidak direkomendasikan untuk gambar yang memiliki gradient, seperti gambar pemandangan.
  • Sebagian browser tidak mendukung SVG, seperti Internet Explorer. Namun saat ini pengguna internet sudah hampir tidak ada lagi yang menggunakan browser ini.

Cara Membuat Logo SVG di Adobe Illustrator

Saat ini ada beberapa software yang bisa membuat gambar SVG, pada tutorial ini kita akan membuat logo SVG dengan menggunakan Adobe Illustrator.

  1. Buka program Adobe Illustrator, disini kita menggunakan software Adobe Illustrator CC 2019. Kamu dapat menggunakan versi berapa saja, caranya kurang lebih sama.
  2. Tentukan kanvas, kali ini saya akan membuat kanvas berukuran 250 piksel x 48 piksel.

buat file adobe illstrator

  1. Setelah kanvas terbentuk, kita akan membuat logo berbentuk gambar dan teks, kita buat terlebih dahulu logonya. Tekan huruf "T" untuk berubah ke mode Teks, lalu pilih jenis huruf dan ukurannya. Kamu bisa mengubah juga warna dengan memilih "Fill" pada sebelah kanan.

langkah 1

  1. Selanjutnya kita coba tambahkan efek background simple berbentuk lingkaran di belakang huruf S, caranya dengan memilih Ellipse Tool (S), lalu buat lingkaran sambil menekan tombol shift.
  2. Setelah lingkaran terbentuk, pilih warna background dari Fill » Pilih Warna Abu-abu. Kamu dapat memilih rupa dan bentuk sesuai selera
  3. Pindahkan gambar latar belakang tersebut ke belakang huruf S dengan cara klik kanan pilih Arrange » Send to Back.

send to back adobe illustrator

  1. Tambahkan teks tambahan disamping logo, boleh dikreasikan sesuai selera. Caranya sama seperti langkah nomor 3, tekan Text (T) ketik teks yang diinginkan lalu pilih Fill » Pilih Warna Oranye. Untuk memposisikan / geser letaknya dengan menekan tombol Selection Tool (V).

font adobe illustrator

  1. Dengan cara yang sama seperti langkah diatas, kita membuat logo S dan B beserta latar belakang berbentuk bundaran. Sampai disini kamu harusnya sudah bisa membuat sendiri dengan mengikuti langkah 3-6.

logo adobe illustrator

  1. Buat Outline dari semua teks, tujuannya agar format huruf tadi menjadi vektor. Caranya dengan menekan Selection Tool (V) lalu klik kanan dan pilih Create Outlines. Lakukan ke semua tulisan (teks) yang ada pada kanvas.

outline-adobe-illustrator

  1. Simpan dokumen dengan format SVG, caranya pilih pada menu bar File kemudian pilih Save As. Selanjutnya masukkan nama file logo.svg lalu pilih Save as Type (SVG). Jika ada pilihan lanjutan pilih SVG Profile ke SVG Tiny 1.1 atau 1.2.

save as svg illustrator

Cara Konversi JPG ke SVG

Jika kamu sudah memiliki gambar JPG atau PNG, kamu juga dapat mengubah ke format SVG dengan mudah, caranya.

  1. Buka gambar JPG di adobe illustrator, tekan Open (Ctrl+O) lalu pilih file JPG yang disukai
  2. Pada menu bar (di sebelah atas) pilih Image Trace lalu tekan drop down dan pilih 6 colors.

convert jpg to svg illustrator

  1. Tunggu prosesnya beberapa saat, nanti akan tercipta gambar baru yang sudah di tracing otomatis. Lalu pilih Expand untuk mengubah gambar ke bentuk vektor (ditandai dengan adanya garis-garis berwarna biru)

convert jpg to svg illustrator

  1. Kemudian sesuaikan dimensi logo ke ukuran yang diinginkan, pilih Transform lalu pilih resolusi dasar gambar tersebut. Dalam hal ini kita memasukkan ukuran 48 piksel x 48 piksel. Kamu juga dapat mengubah dimensi sesuai selera, pastikan gambar tidak keluar dari kanvas yang ada.

transform adobe illustrator

  1. Selanjutnya kamu sudah bisa langsung menyimpan gambar ke format SVG, dengan cara File » Save As » SVG » SVG Tiny 1.2
Kamu dapat memilih kualitas warna yang disukai, namun semakin banyak warna tentunya akan membuat ukuran file semakin besar. Disarankan menggunakan warna dominan, agar ukuran file tetap kecil. Jika ada gambar yang memiliki gradien sebaiknya edit terlebih dahulu menjadi solid color.

Cara Menampilkan Gambar SVG di HTML

Tergantung peletakannya, gambar SVG dapat disemat ke HTML dengan beberapa cara diantaranya

  • Menggunakan inline kode dengan tag SVG langsung di html
  • Menggunakan tag IMG
  • Menggunakan CSS background image
  • Menggunakan XML
  • Menggunakan Javascript Image
  • dan lain-lain

base64guru konversi svg ke kode html

konversi gambar SVG ke kode HTML

Kamu dapat menggunakan tools dari Base64 Guru untuk mempermudah konversi gambar SVG menjadi kode yang diinginkan, selamat mencoba 🙂

Rekomendasi artikel menarik untuk dibaca
💻 3 Cara membuat Garis di Photoshop, Dijamin Bisa!
💻 Cara Mudah Membuat Efek Miniatur di Photoshop
💻 3 Cara Membuat Stroke di Adobe Illustrator dengan Mudah


Yuk share artikel ini

  • # Bagikan ke Twitter
  • # Bagikan ke Facebook
  • # Bagikan ke WhatsApp
  • # Bagikan ke Pinterest

Komentar

Tinggalkan Komentar Disini

Artikel Terkait

Cara Meningkatkan Resolusi Gambar di Photoshop
Cara Meningkatkan Resolusi Gambar di Photoshop
12 Agustus 2022
Cara Upgrade RAM dan SSD di Laptop Asus Vivobook A412D
Cara Upgrade RAM dan SSD di Laptop Asus Vivobook A412D
25 Juli 2022
Cara Upgrade Laptop Kentang, Performa Jadi Kencang
Cara Upgrade Laptop Kentang, Performa Jadi Kencang
24 Juni 2022
Cara Mencari dan Menghapus Email Lama di Gmail
Cara Mencari dan Menghapus Email Lama di Gmail
21 Juni 2022
Cara Mengetahui Komputer Sedang Menggunakan Server Proxy
Cara Mengetahui Komputer Sedang Menggunakan Server Proxy
30 Mei 2022
Cara Menyambung Kabel Serat Optik yang Terputus
Cara Menyambung Kabel Serat Optik yang Terputus
28 Mei 2022
Cara Memasang Processor Komputer (PC)
Cara Memasang Processor Komputer (PC)
14 Desember 2021
3 Cara Share Internet Dari HP Ke PC atau Laptop
3 Cara Share Internet Dari HP Ke PC atau Laptop
09 September 2021
Cara Mengganti Baterai UPS Komputer Tidak Bisa Ngecas
Cara Mengganti Baterai UPS Komputer Tidak Bisa Ngecas
25 Agustus 2021
Cara Membuat Efek Lukisan di Photoshop, Gampang Banget
Cara Membuat Efek Lukisan di Photoshop, Gampang Banget
16 Agustus 2021

Tentang Kami

TechSains adalah Website blog yang membahas berita Astronautika dan Teknologi, dan ulasan menarik seputar, luar angkasa, SpaceX, komputer, tutorial, retail, pertanian, kelapa sawit

Lebih Lanjut ...

Informasi Situs

Kontak
Disclaimer
Sitemap
Privacy
DMCA.com Protection Status
Protected by Copyscape

© 2021 TechSains. All Rights Reserved