Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe XD
Webdesign

Tip Cepat: Desain SVG Arrow Graphic di Adobe XD

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Afrahcute (you can also view the original English article)

Dalam tutorial singkat ini saya akan menunjukkan kepada Anda cara membuat grafik panah siap-SVG menggunakan Adobe XD.

Tonton Screencast

Saya akan menggunakan desain situs web yang merupakan bagian dari program baru yang disebut "Desain Ramah Kode Dengan Adobe XD". Ini memiliki area konten utama di bagian atas halaman, dan sekarang saya ingin menambahkan sebuah tombol dengan panah yang akan mendorong pengguna untuk menggulir ke bawah untuk melihat lebih banyak konten.

Adobe XD bukan program pengeditan vektor yang lengkap tetapi masih ada sedikit yang dapat Anda lakukan dengannya. Dengan menggunakan alat vektor XD di mana pun Anda bisa, daripada bitmap datar (seperti JPG, PNG, dll.) Saat Anda menyerahkan desain ke pengembang, mereka akan dapat mengambil grafik vektor tersebut dan mengubahnya langsung menjadi kode SVG.

Merancang Ikon Panah

Kami akan mulai dengan alat Ellipse dan menggunakannya untuk menggambar lingkaran dengan lebar sekitar 85 piksel. Kami akan menghapus batas dengan mengubah pengaturan di panel Properti sebelah kanan, lalu ubah isinya menjadi sesuatu yang sesuai.

Kami kemudian akan menggunakan alat Rectangle untuk membuat bentuk yang tumpang tindih dengan bagian atas lingkaran. Saat mengubah ukuran, Anda akan melihatnya terkunci dengan rapi ke titik setengah lingkaran. Kemudian kami dapat memilih kedua bentuk dan, dengan menggunakan Operator Boolean di panel Properti, kita dapat mengurangi setengah bagian atas lingkaran.

Untuk membuat tanda panah, kami akan mengurangi bentuk lain dari semi lingkaran ini. Ini akan menjadi sedikit lebih fiddlier dari apa yang telah kami lakukan sejauh ini, karena Adobe XD dirancang untuk menjadi aplikasi prototyping, bukan program desain vektor khusus. Namun, kita pasti bisa bekerja dengan apa yang kita miliki. Saya memilih alat Pen yang dikombinasikan dengan alat Rectangle

Tip:

Dapatkan lebih banyak kontrol atas jalur dalam bentuk Anda dengan mengklik kanan bentuk yang ingin Anda edit, lalu pergi ke Path> Convert to Path. Ini akan mengubah objek dari bentuk yang telah ditentukan menjadi rangkaian jalur yang bisa diterapkan. Untuk mengedit simpul di jalur itu, klik dua kali objek tersebut.

Terserah Anda bagaimana Anda membuat ikon panah, tetapi setelah selesai, letakkan di atas objek setengah lingkaran, pilih keduanya, dan kurangi panah dengan alat Boolean seperti yang kami lakukan sebelumnya. Anda harus berakhir dengan sesuatu yang sedikit seperti ini:

Anda kini telah menyelesaikan ikon panah siap-SVG menggunakan alat sederhana di Adobe XD! Untuk rincian tentang apa yang dapat Anda lakukan selanjutnya, awasi terus untuk kursus yang akan datang.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.