FLASH SALE! Up to 40% off on unlimited courses, tutorials and creative asset downloads SAVE NOW
Advertisement
  1. Web Design
  2. Affinity Designer
Webdesign

Cara Membuat Pohon Natal Isometrik SVG di Designer Affinity

by
Difficulty:BeginnerLength:LongLanguages:

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

Final product image
What You'll Be Creating

Dalam tutorial ini kita akan memasuki kegembiraan musim dengan membuat ilustrasi pohon Natal SVG yang dapat Anda gunakan di situs web apa pun. Kami akan membuat ilustrasi di Affinity Designer kemudian mengambil keuntungan dari fungsi ekspor SVG spesifik web program.

Note: langkah-langkah di bawah ini mengasumsikan Anda memiliki tingkat keakraban dasar dengan Desainer Afinitas. Jika tidak, Anda bisa mendapatkan bola bergulir dengan kursus kami Affinity Designer Quick Start.

Membuat grafik SVG di Affinity Designer adalah masalah yang cukup luas, dengan hanya beberapa "gotchas" untuk menghindarinya. Salah satu khususnya adalah untuk memastikan Anda tidak menggunakan mode pencampuran selain "Normal" di mana saja dalam dokumen Anda. Jika Anda melakukannya, gambar Anda akan di rasterisasi sebagian, mengalahkan seluruh tujuan grafis SVG, ("S" berarti "Scalable"). Meskipun demikian, walau Anda tidak dapat mengunakan mode pencampuran yang berbeda, Anda dapat menggunakan pengaturan opasitas yang berbeda.

Hal lain yang harus diperhatikan adalah mencoba untuk menjaga bentuk Anda sesederhana mungkinsehingga ukuran file diminimalkan. Misalnya, menggunakan jenis goresan yang mewah atau texturing akan menghasilkan ukuran file yang sangat besar. Kami akan menjaga teknik ilustrasi kami di seluruh tutorial ini agar menjadi sebagai SVG ramah yang kami bisa.

Mari kita mulai! 

1. Siapkan Dokumen dan Kisi Isometrik 

Buat dokumen baru dan pilih Web dari tarik-turun Type di kotak dialog pembuatan dokumen. Setel Page Width dan Page Height menjadi 1024px. 

Selanjutnya mari kita mulai dan mengatur grid isometrik kita.Dalam menu di sepanjang bagian atas Affinity Designer, masuk ke View > Grid dan Axis Manager dan Anda akan melihat kotak pengaturan grid muncul. Ubah pengaturan ini: 

  • Check show grid 
  • Uncheck Use automatic grid 
  • Switch the grid Mode dari Basic ke Advanced 
  • From the Grid type dropdown select Isometric 
  • Leave the Spacing setting at 64px 
  • Rubah the Divisions menjadi 8 
Isometric grid in Affinity Designer
Isometric grid in Affinity Designer 

Bagaimana Kami Akan Menjelaskan Grid Isometrik 

Sepanjang tutorial ini kita akan menempatkan simpul jalan pada grid isometrik untuk membuat dan menyesuaikan bentuk yang akan membentuk pohon Natal kita. Dengan demikian, kami akan menargetkan beberapa terminologi untuk mendeskripsikan grid kami Memisahkan saya menentukan ukuran-ukuran, atau jarak jauh harus bergerak di grid, Anda akan tahu apa yang saya bicarakan. 

Ketika Anda melihat grid, Anda akan memiliki garis tebal yang berbeda, dan di dalam berlian yang ada garis yang membentuk berlian yang lebih kecil.  Kami akan mengacu pada berlian yang dibentuk oleh garis tebal di grid sebagai berlian grid besar , dan rekan-rekan mereka yang lebih kecil sebagai berlian grid kecil .  Ketika mengacu pada satu sisi dari salah satu berlian besar ini, kita akan menggunakan unit kotak besar atau garis grid besar. Kami akan menggunakan unit grid kecil atau garis grid kecil untuk pengukuran grid terkecil. 

Perhatikan bahwa ketika Anda sedang bekerja dengan grid isometrik, untuk secara akurat menempatkan node di atasnya Anda harus memastikan gertakan aktif dengan menekan ikon magnet yang ditemukan di toolbar atas Affinity Designer. 

2. Buat Bagian Pohon Pertama 

Seperti yang Anda lihat pada gambar pratinjau dari pohon kami yang sudah selesai pada awal tutorial ini, area daun akan terdiri dari empat bagian hijau yang berbeda. Kami akan mulai dengan menggambar bagian paling atas dari tree, yang juga paling kecil. 

Gunakan alat Rectangle tool , (tombol pintas M ), untuk menggambar persegi panjang tentang ukuran yang Anda lihat pada gambar di bawah. Ini bisa dilakukan dengan kasar karena kita akan memodifikasi bentuk node demi node  Untuk memungkinkan Anda memodifikasi node persegi panjang, pilih persegi panjang dan klik tombol Convert to Curve yang akan Anda lihat pada toolbar konteks di atas kanvas Anda. 

Pastikan persegi panjang tidak memiliki batas dan atur warna isian ke #2F5628 . 

Agar dapat menempelkan kode warna hex, Anda harus memilikipemilih warna RGB Hex yang aktif di panel Color studio. Panel ini harus terbuka dan di sisi kanan antarmuka secara default, tetapi jika tidak Anda dapat membukanya dengan masuk ke View > Studio > Color .  Klik dropdown kecil di kanan atas panel Color , pilih slider , kemudian di daftar dropdown di dalam panel pilih RGB Hex . 

Perhatikan bahwa saat Anda memanipulasi bentuk, Anda mungkin merasa lebih mudah untuk bekerja dalam tampilan kerangka sehingga Anda dapat lebih jelas melihat simpul dan jalur Anda. Untuk mengaktifkan ini, masuk ke View> View Mode> Outline . Untuk kembali ke tampilan reguler, pilih Vector dibawah menu yang sama. 

Dengan alat simpul, (tombol pintas A), pilih salah satu dari dua simpul atas persegi panjang. Simpul ini akan menjadi simpul teratas dari bagian pohon pertama kami.   Tarik ke titik persimpangan antara berlian grid besar sekitar setengah di kanvas, dan tiga setengah kotak berlian besar dari bagian atas kanvas. 

Selanjutnya, pilih simpul yang berlawanan dengan yang baru saja Anda pindahkan - ini akan menjadi simpul bawah bagian pohon.Seret simpul yang dipilih sehingga langsung di bawah node  

Sekarang lihat pada titik bawah tersebut dan ikuti garis grid besar yang ada di atas dan ke kiri oleh satu unit jaringan besar.Pindahkan simpul kiri ke titik itu.  Lakukan hal yang sama di sisi kanan untuk simpul yang tepat. Anda harus berakhir dengan bentuk yang digambarkan di bawah ini. Perhatikan di mana titik-titik jatuh pada grid dan pastikan bentuk Anda terlihat sama. 

Dan periksa bahwa posisinya relatif terhadap sudut kiri atas dokumen seperti yang terlihat di sini: 

Sekarang kita akan menambahkan warna highlight di sisi kanan bagian pohon ini agar terlihat seperti cahaya yang menerpanya. Pilih bentuk Anda yang ada dan aktifkan sisipkan di dalam tombol selection di sebelah kanan toolbar bagian atas.  Kemudian gambar persegi panjang tanpa batas pada ukuran yang menutupi bagian kanan dari bagian pohon dan atur warna isian ke #386925 . Persegi panjang harus bersarang di dalam bentuk bagian pohon, seperti yang Anda lihat di panel Layer gambar di bawah ini: 

Untuk menyelesaikan bagian pohon ini kita akan menambahkan sedikit trim salju ke bawah. Gunakan alat pena untuk menggambar bentuk yang merupakan unit kotak kecil tunggal yang tinggi, dan berjalan di sepanjang sisi kiri bawah bagian.  Itu harus bersarang di dalam bagian pohon sehingga setiap overflow terpotong. Isi dengan warna #A8BCA7 . 

Perhatikan bahwa kami membuat salju ini memangkas hijau muda, bukan putih penuh, sehingga tidak menyatu dengan latar belakang putih apa pun yang dapat ditempatkan. 

Tambahkan beberapa simpul ekstra ke garis atas bentuk trim salju dan tarik mereka ke atas atau ke bawah sedikit untuk menambahkan beberapa kurva seperti itu. Anda mungkin perlu menonaktifkan gertakan sementara saat melakukan ini, dengan mengklik ikon magnet di toolbar bagian atas Affinity Designer. 

Sekarang gandakan bentuk salju ini dan balikkan secara horizontal, yang dapat Anda lakukan dengan mengklik tombol Flip Horizontal di toolbar bagian atas.  Posisikan dalam posisi cermin di sisi kanan ketiganya.Kemudian pilih kedua bentuk dan tekan tombol Add pada toolbar bagian atas untuk menggabungkannya menjadi satu bentuk. 

3. Buat Bagian Pohon Lainnya 

Bagian atas pohon sekarang selesai sehingga kita dapat menduplikasi dan membuat beberapa perubahan kecil untuk membuat tiga bagian lainnya.  Gandakan bagian tersebut dan gerakkan ke bawah dengan satu setengah kotak berlian besar. Pastikan itu di belakang bagian atas di panel lapisan. 

Sekarang kita akan memanipulasi simpul bagian pohon kedua ini untuk membuatnya lebih besar dari bagian pertama. Pertama, seret simpul teratasnya sehingga menjadi setengah unit kotak besar di bawah simpul paling atas di bagian atas pohon pertama.  Lalu seret simpul kiri ke atas dan ke kiri, di sepanjang garis kotak yang sudah ada, sampai Anda menekan garis grid besar yang bersilangan terdekat. Lakukan hal yang sama untuk node yang tepat juga. 

Showing the second tree section in "Outline" view mode 

Tepi bagian pohon kedua harus berjalan pada sudut yang sama dengan bagian pertama. Anda dapat memeriksa untuk memastikan ini adalah kasus dengan mengonfirmasi bahwa garis melewati titik perpotongan grid setiap dua berlian grid kecil. 

Grid intersection points
Grid intersection points 

Periksa dan pastikan persegi panjang bersarang berwarna lebih terang Anda masih sepenuhnya menutupi sisi kanan - jika tidak Anda mungkin perlu memperbesarnya sedikit. Sesuaikan lis salju untuk menutupi bagian bawah dari bagian pohon kedua dengan menyeret sebagian besar simpul luar ke tepi bentuk, lalu tambahkan beberapa simpul lagi ke bentuk untuk menyisipkan. 

Ulangi proses itu dua kali lagi untuk membuat bagian pohon ketiga dan keempat. Setiap kali Anda harus: 

  • Pindahkan bagian ke bawah dengan satu setengah kotak berlian besar
  • Seret node teratas hingga menjadi setengah kotak besar berlian lebih rendah dari node teratas bagian sebelumnya 
  • Seret nodes kiri dan kanan di sepanjang garis kisi sampai Anda menekan garis grid besar yang bersilangan terdekat 
  • Pastikan persegi panjang ringan menutupi seluruh sisi kanan bagian pohon 
  • Sesuaikan lis salju untuk menutupi bagian bawah pohon di kedua sisi 

4. Buat Trunk 

Bagian utama dari bagian daun pohon kita sekarang sudah selesai sehingga kita bisa bergerak ke dalam menciptakan batang pohon. Dengan menggunakan alat pena, gambar persegi panjang yang setengah kotak besar berlian lebar, sekitar satu setengah kotak besar berlian tinggi, berpusat horizontal relatif terhadap pohon, dan diposisikan di belakang semua bentuk lain yang ada. 

Tambahkan simpul tambahan di tepi terendah yang dapat Anda gunakan untuk membuat bagian bawah yang runcing. Node bawah ini harus ditempatkan satu kotak besar berlian di bawah titik terendah dari pohon, dan dua ujung bawah batang tubuh harus berjalan di sepanjang garis jaringan.  Atur warna isi trunk ke #322B1E. Akhirnya, bersarang di dalam bentuk batang, buat persegi panjang untuk menutupi bagian kanannya dengan warna isi #41351E.

Hasil akhir Anda akan terlihat seperti ini: 

5. Tambahkan Bayangan 

Selanjutnya kita akan membuat bayangan yang dilemparkan pada setiap bagian pohon, serta pada batang, oleh bagian pohon di atasnya. 

Di sisi kiri pohon, gunakan alat pena untuk menggambar tiga persegi panjang miring, satu di bawah masing-masing dari tiga bagian pohon teratas. Persegi panjang ini harus berupa dua berlian kotak kecil yang tinggi sepanjang panjangnya dan diisi dengan warna #203F1A. Gandakan bentuk, flip mereka secara horizontal dan posisi mereka dalam posisi cermin di sisi kanan. Ubah warna isi dari bentuk-bentuk ini ke #12510E .

Ini akan memberi Anda bayangan di bawah setiap bagian pohon seperti: 

Menggunakan pendekatan yang sama, buat dua bentuk persegi panjang miring di bagasi, masing-masing satu setengah unit kotak kecil tinggi. Bentuk paling kiri harus berwarna #231D13 dan bentuk paling kanan #302511.

Catatan Saya awalnya menentukan warna yang akan terlihat benar sebagai bayangan di sini dengan mengatur bentuk ke warna isian yang sama dengan sisi pohon tempat mereka berada, lalu menyetelnya ke mode pencampuran Multiply .  Namun, seperti yang disebutkan sebelumnya, kami tidak dapat menggunakan Multiply dalam gambar SVG. Untuk menyiasati ini, saya menggunakan pemilih warna untuk mengambil sampel warna bayangannya.  Saya kemudian mengubah warna bayangan bentuk bayangan ke warna sampel ini, dan mengatur mode pencampuran kembali ke Normal , mencapai tampilan yang sama pada akhirnya tetapi dengan cara yang ramah SVG. 

Sekarang untuk bayangan bayangan di tanah dekat pohon. Di bawah semua bentuk lainnya, buat berlian dengan lebar yang sama dengan bagian paling banyak pohon. Tepiannya harus mengikuti garis grid, dan harus dipusatkan secara horisontal dan vertikal relatif terhadap batang. Buat warnanya menjadi hitam dan atur ke opacity 20% .Sekali lagi, sementara kita tidak dapat menggunakan Multiply untuk menciptakan bayangan dalam ilustrasi SVG kita, kita dapat menggunakan opacity dengan aman. 

6. Globe Dekoratif 

Seluruh bentuk pohon kami sekarang telah selesai dan kami siap untuk menghiasinya. Untuk melakukan itu kita akan membuat bentuk globe yang bisa diubah ukurannya untuk bagian atas hiasan pohon, dan untuk dekorasi yang lebih kecil di sekitar pohon. Awalnya kami akan membuatnya dalam ukuran ganda sehingga akan lebih mudah menggunakan grid untuk menyelaraskan semua bentuk yang akan membentuk bola dunia. 

Perhatikan dengan saksama letak titik-titik di grid saat Anda membuat bentuk-bentuk berikut. 

Pertama, buat bentuk berlian seperempat ukuran berlian grid besar, dengan warna fill #FFEF00 . Ini akan membentuk puncak datar dunia. 

Tambahkan dua bentuk ini untuk membuat kurva di bawah bagian atas bola dunia - warna bentuk kiri #F1C906 dan warna bentuk kanan adalah #FFE300 . 

Buat sisi globe dengan bentuk-bentuk ini - sisi kiri berwarna #E9BE1F dan sisi kanan berwarna #FFDB1F . 

Tambahkan kurva bawah dengan dua bentuk ini, berwarna #DCAF2E di sebelah kiri dan #ECCA3C di sebelah kanan. 

Akhirnya, gunakan alat pena untuk menggambar bentuk tunggal yang sesuai dengan bentuk seluruh bola dunia. Berikan warna fill #FFDB1F lalu atur di belakang semua bentuk lainnya. Ini memastikan Anda tidak akan melihat warna latar apa pun yang ditampilkan di celah kecil antara bentuk yang membentuk bola dunia. 

7. Dekorasi Pohon Atas 

Sekarang globe Anda selesai, Anda dapat mengubah ukurannya siap untuk penempatan di atas pohon Anda. Pilih semua bentuk dan kelompokkan agar mudah diubah ukurannya. Anda dapat membuat duplikat grup ini sebelum mengubah ukuran jika Anda ingin menjadikannya sebagai cadangan. 

Kami ingin mengurangi globe menjadi setengah ukuran, jadi pilih grup yang baru saja Anda buat dan temukan panel Transform di sisi kanan antarmuka Affinity Designer.  Jika belum terbuka, buka View > Studio > Transform . Dalam bidang tipe W (lebar) Transform panel /2 di ujung nilai saat ini, tekan ENTER . Ini akan membagi dua lebar saat ini. 

Lakukan hal yang sama di bidang H (height) untuk membagi dua ketinggian. 

Bola Anda yang berukuran setengah siap digunakan, jadi pusatkan pada bagian atas pohon seperti itu. 

8. Dekorasi Globe yang Lebih Kecil 

Gandakan dekorasi Anda hanya ditempatkan di bagian atas pohon dan membagi dua ukuran lagi menggunakan metode yang sama menambahkan /2 untuk akhir Transform panel H dan W bidang.  Sekarang kita memiliki bola kuning yang lebih kecil yang bisa kita pasang di tubuh utama pohon kita, dan yang kita butuhkan adalah beberapa warna tambahan untuk membuat dekorasi kita lebih hidup. Buat tiga duplikat ekstra dari globe yang lebih kecil sehingga kita dapat mengubahnya menjadi versi biru, ungu dan merah. 

Ubah warna tiga gumpalan baru sehingga Anda mendapatkan yang berikut: 

Bola biru menggunakan warna-warna ini: 

  • Top: #23BEDA 
  • Kurva kiri atas: #0099B4 
  • Kurva kanan atas: #8B22D3 
  • Sisi kiri: #52189C 
  • Samping kanan: #1E98B0 
  • Kurva bawah kiri: #1A6883 
  • Kurva bawah kanan: #0D8197 
  • Backing: #18809C 

Bola dunia ungu menggunakan warna-warna ini: 

  • Top: #DA3623 
  • Kurva kiri atas: #7100B4 
  • Kurva kanan atas: #8B22D3 
  • Sisi kiri: #52189C 
  • Samping kanan: #721EB0 
  • Kurva bawah kiri: #401A83 
  • Kurva bawah kanan: #670D97 
  • Dukungan: #33189C 

Bola dunia merah menggunakan warna-warna ini: 

  • Atas: #DA3623 
  • Kurva kiri atas: #B4001B 
  • Kurva kanan atas: #D33522 
  • Sisi kiri: #9C1B18 
  • Samping kanan: #B01E1F 
  • Kurva bawah kiri: #831C1A 
  • Kurva bawah kanan: #97250D 
  • Dukungan: #9C1B18 

Dengan gumpalan yang lebih kecil ini sekarang Anda dapat menempatkannya di sekitar pohon Anda untuk menghias seperti ini: 

9. Dekorasi Kotak Kecil 

Sekarang kita akan menambahkan beberapa dekorasi akhir yang lebih kecil untuk membawa beberapa detail tambahan. Gunakan alat pena untuk menggambar bentuk ini dengan warna fill #FFDB1F : 

Perhatikan ujungnya mengikuti sudut yang sama dengan tepi luar dari bagian pohon. 

Seperti yang kami lakukan dengan globe kami, bentuk ini sebenarnya digambar dengan ukuran ganda, sekali lagi membuatnya lebih mudah untuk menempatkan node di grid.  Gunakan Transform panel untuk membagi dua ukuran seperti yang kita lakukan sebelumnya dengan menambahkan /2 ke ujung bidang H dan W. Bentuk tepi atas dan bawah seharusnya sekarang menjadi satu unit kotak kecil yang panjang.

Buat tiga duplikat bentuk dan warnai mereka #1E98B0 untuk warna biru, #721EB0 untuk warna ungu dan #831C1A untuk merah. Gandakan keempat bentuk dan balikkan secara horizontal.Anda sekarang harus memiliki total delapan bentuk. 

Ambil bentuk-bentuk ini dan tebarkan di sekitar pohon Anda.Gunakan bentuk yang sudutnya cocok dengan tepi luar sisi pohon tempat Anda menempatkannya. 

Dan itu dia! Gambar pohon Natal kami semua sudah selesai. 

10. Ekspor sebagai SVG 

Sekarang desain kami selesai, kami akan membuatnya siap untuk digunakan di web sebagai SVG. 

Pertama, kita perlu mengubah dokumen ke dimensi yang sama dengan pohon kita sehingga parameter viewbox SVG kita akan diatur ke ukuran yang benar. Jika kami mengekspor sekarang, viewbox akan disetel ke 1024x1024, yang berarti di mana pun Anda menggunakan SVG pohon Natal itu akan memiliki celah besar baik ukuran seperti yang dilakukan dokumen kami sekarang. 

Pastikan Anda tidak memiliki apa pun di kanvas yang dipilih, lalu lihat pada bilah alat konteks di sepanjang bagian atas antarmuka Affinity Designer dan Anda akan melihat tombol Pengaturan Dokumen.  Klik dan sebuah kotak akan muncul di mana Anda dapat mengubah dimensi dokumen Anda. Set 280px untuk lebar dan 568px untuk tinggi. Selama Anda meletakkan bentuk Anda dengan hati-hati, dimensi dokumen ini akan bekerja untuk Anda. Pastikan Anda memiliki Anchor to Page yang dipilih dan bukan Rescale , lalu tekan OK . 

Segera setelah men-resscaling pohon Anda mungkin tidak akan terpusat. Untuk memperbaiki ini, pilih semuanya dalam dokumen dengan CTRL + A , kelompokkan dengan CTRL + G , pilih grup itu, lalu seret ke posisi tengah. 

Sekarang buka File > Export dan di kotak yang muncul pilih tabSVG . Pastikan SVG preset (untuk web) dipilih. 

Juga pastikan Anda melihat pesan (Tidak akan ada rasterisasi) .Jika sebaliknya pesan memberitahu Anda sesuatu akan rasterized, pergi melalui pekerjaan Anda dan pastikan Anda belum secara tidak sengaja mengatur bentuk ke mode blending selain Normal . 

Saat Anda siap, klik Ekspor dan simpan SVG Anda. 

11. Menggunakan SVG Anda 

Sekarang Anda memiliki file SVG Anda siap mari kita lihat beberapa cara Anda dapat menggunakannya. 

Cara termudah adalah hanya untuk memuatnya ke HTML Anda seperti yang Anda lakukan dengan gambar lain, dengan kode seperti ini: 

Namun, keindahan SVG adalah Anda juga bisa mengambil isi file SVG dan menempelkannya langsung ke HTML Anda untuk menggunakan gambar sebaris. 

Untuk melakukan ini, buka file SVG Anda di editor teks dan salin semuanya mulai dari <svg... hingga akhir file. Tempel kode itu di mana saja di bagian tubuh dokumen HTML dan gambar akan muncul di sana. Catatan Anda mungkin juga ingin membungkus SVG dengan div yang dapat Anda gaya untuk mengontrol ukuran dan posisi gambar. 

Untuk melihat pendekatan ini dalam tindakan, lihat contoh ini di CodePen: 

Wrapping Up 

Jadi itulah bagaimana Anda dapat membuat ilustrasi SVG menggunakan Affinity Designer! Prosesnya tidak terlalu berbeda dari jenis desain lain yang dilakukan di Affinity Designer, dengan peringatan Anda hanya harus berhati-hati untuk mode blending non-default dan bentuk yang terlalu kompleks.  Kebutuhan warna datar dan preferensi untuk bentuk sederhana membuat ilustrasi isometrik sangat cocok untuk SVG. 

Untuk mempelajari lebih lanjut tentang menggunakan Affinity Designer, periksalah tutorial dan kursus kami , dan saat Anda memeriksanya, lihat juga tutorial dan kursus SVG kami . 

Tautan yang berhubungan: 

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.