Berbaur sesuai keinginanku! Font pada objek silinder di Blender—Martian Chronicles, blog tim Evil Martians

Jika Anda ingin menyelam langsung ke masalah utama, klik di sini. Jika tidak, teruslah membaca cerita lengkapnya, dimulai dengan asal-usulnya, berlanjut ke pemecahan masalah, dan diakhiri dengan suara seni.

Cerita di balik cerita

Saya baru saja menyelesaikan sebuah artikel tentang hal-hal penting dan cara kerja bagian dalam UI input telepon. Menyelesaikan artikel, saya, bersama dengan bantuan dari rekan saya yang brilian Anton Lovchikovmulai memikirkan ilustrasi yang akan menyertai teks.

Proses ini melibatkan, pada dasarnya, empat langkah:

1. Konseptualisasi ilustrasi
2. Render awal dan pemecahan masalah utama apa pun
3. Menambahkan detail
4. Animasi (opsional)

Konseptualisasi ilustrasi

Pertama, saya mulai dengan brainstorming bentuk bebas. Ini adalah cara yang bagus untuk mengumpulkan ide-ide kasar. Karena artikel saya tentang input telepon, konsep awal berpusat pada topik ini (walaupun beberapa ide esoteris juga disertakan).

Gagasan dan metafora terkait: nomor telepon, tip desain, prosesor, angka dalam matriks.

Saya mengumpulkan semua ini bersama-sama di papan suasana hati. Papan suasana hati adalah cara yang bagus untuk menentukan konsep ilustrasi pada tahap embrionik ini.

Memilih jalan

Dari sana, saya mendapat ide untuk menampilkan komponen utama dalam ilustrasi: prosesor yang mewakili input telepon. Terinspirasi oleh desain motherboard, dari prosesor pusat akan ada modul yang mewakili nilai penentu input: bendera, kode negara, format, pencarian, dan sebagainya.

Atau, setidaknya saya pikir saya melakukannya. Ide ini baik-baik saja, tetapi anton menyarankan arah lain: ilustrasi yang terinspirasi oleh input pemilih, artefak UI yang mungkin sudah tidak asing lagi bagi Anda di masa-masa awal iOS! (Akhirnya, kami memilih opsi ini—nilai rekan setim yang baik tidak bisa diremehkan!)

Visualisasi pertama

Saya memulai visualisasi di Blender untuk memeriksa bagaimana komposisi dan “getaran” terasa dalam 3D. Terus terang, hal-hal tampak aneh.

Anton menyarankan untuk memajangnya sebagai satu bagian, dan ini berhasil. Terlepas dari kemenangan awal ini, saya belum selesai. Saya harus berurusan dengan bahan dan pencahayaan, tetapi usaha saya dengan warna emas dan gelap terlihat sangat cerah dan terlalu “gemuk”. Kami membutuhkan sesuatu yang lebih ramping, dengan lebih fokus. Setelah beberapa diskusi, kami memilih warna-warna cerah, bahan logam, dan lapisan kaca tipis yang memantulkan angka-angka yang dipilih. Setiap angka dan ikon memiliki ruangnya sendiri untuk dikendalikan.

Dengan hanya satu baris, ini terlihat cukup bagus! Tapi apa jadinya setelah kami mengemasnya sepenuhnya dengan angka, ikon, dan bendera? Kami membutuhkan semua detail ini karena, bagaimanapun, desain ini seharusnya menghidupkan nomor telepon secara besar-besaran!

Memecahkan masalah font dengan Blender

Saya bermaksud menggunakan font variabel font Martian Mono open source yang indah. Omong-omong, kami memilih font monospace di sini karena semua disk silinder memiliki lebar yang sama.

Berikut sedikit tip kapan saja Anda perlu berurusan dengan teks di Blender: Saya bisa dengan patuh menyiapkan setiap nomor di nomor telepon di atas sebagai file SVG, tetapi bekerja dengan file-file ini akan menjadi sedikit masalah. Butuh banyak waktu untuk menyiapkan semua SVG, menempatkannya di permukaan bundar, menghubungkannya, dan seterusnya.

Bayangkan kegilaannya jika, setelah melakukan ini dengan 20 atau lebih file, saya harus kembali dan mengedit desainnya. Jangan lewat jalan ini!

Sebaliknya, solusi untuk menangani font ternyata cukup sederhana. Di Blender, kami cukup mengunggah file font—Anda tidak perlu memvektornya—dan mereka memberi kami banyak pilihan bagus untuk bekerja dengannya. Kita dapat bekerja dengan tipe dan membuatnya menjadi 3D, mengubahnya, memposisikannya, menerapkan pengubah untuk menghubungkannya dengan permukaan, dan banyak lagi.

Dan saat Anda bertukar file Blender dengan kolega, Anda dapat melampirkan file ini untuk membantu menjaga semua orang di halaman yang sama—kolaborasi yang mudah.

Menempatkan angka pada objek silinder

Jadi sekarang, di Blender, kita memiliki objek silinder 3D ini. Ini memodelkan komponen utama di pemilih lama.

Saat mengerjakan pelapisan dan menggambar angka pada silinder, halangan lain (walaupun, halangan yang menarik) muncul di sini. Seperti yang sering terjadi dengan alat desain yang rumit, tampaknya ada dua cara untuk menyelesaikan tugas: cara yang jelas namun rumit, dan cara yang rumit (dengan sedikit keajaiban diperlukan).

Metode yang rumit akan melibatkan penandaan dan penempatan angka secara manual. Metode yang rumit akan diselesaikan dengan bantuan objek Null. Tentu saja, Anda mungkin bisa menebak mana yang saya pilih.

Kita bisa menggunakan objek Null sebagai basis dan memutar objek relatif terhadapnya. Di tengah silinder, kita akan memiliki objek kita, dan kita dapat menduplikasi dan memutar elemen angka dengan sempurna. Di Blender, Null bisa menjadi sahabat Anda.

Menambahkan rincian lebih lanjut

Jadi, saya menutupi silindernya dengan angka, tapi dengan warna hitam, elemen 3D ini terlihat cukup berat. Oleh karena itu, pada iterasi berikutnya, saya memutuskan untuk mengubahnya; Saya memberi mereka penampilan putih, “ringan”. Tapi tetap saja ilustrasi itu terasa berat. Bagaimana kita bisa menambahkan detail untuk membuatnya terlihat lebih dinamis dan hidup?

Untuk benar-benar membuat gambar menonjol, untuk membuatnya menjadi hidup (jika itu yang Anda cari—dan saya), perlu ada rasa aksi dalam adegan itu.

Seperti yang Anda lihat pada gambar di bawah, kami telah menambahkan elemen pegangan ke sisi silinder untuk mengontrol berbagai konfigurasi nomor telepon. Ini sedikit mengingatkan pada mesin slot, dan secara otomatis memberikan kesan interaksi pada gambar. Rasa dinamisme yang tidak hadir sebaliknya; hampir seolah-olah Anda benar-benar dapat menjangkau dan menariknya.

Ketika dirender dalam warna, dan dengan penambahan komponen bendera negara, ilustrasinya sudah terlihat jauh lebih hidup, bukan? Namun, setelah menambahkan detail, kami menyadari bahwa kami perlu mengurangi volume angka dan memberinya warna gelap agar sesuai dengan skema warna. Kontras warna bendera yang bagus dengan latar belakang juga terlihat bagus.

Pertunjukan besar: menambahkan animasi

Kalau pegangannya minta ditarik, kenapa tidak ditarik saja? Inilah tanda yang dapat diandalkan bahwa gambar Anda memiliki rasa dinamisme yang tinggi: gambar tersebut perlu dianimasikan. Itulah tempat yang sering kita temukan, dan ilustrasi ini tidak terkecuali. Semua elemen secara praktis berteriak, “animasi kami, animasikan kami, tolong!” Siapa yang bisa mengatakan tidak?

Dalam hal ini, konsep akhir animasi mungkin mudah ditebak—pegangan akan ditarik, keajaiban terjadi, dan kita akan melihat nomor yang dipilih. Sekali lagi, kita bisa memikirkan mesin slot di sini.

Dari segi detail teknis, untungnya menangani animasi di Blender cukup mudah. Kita dapat mengontrol jenis animasi, interpolasi, easing, simulasi fisika, dan sebagainya.

Kami pertama kali mencoba animasi yang angkanya berputar secara bersamaan. Tentunya akan terlihat lebih dinamis dan keren jika setiap baris angka diputar satu per satu. Ini membutuhkan beberapa iterasi untuk dicapai, tetapi pada akhirnya, semuanya berhasil:

https://evilmartians.com/static/91c1def9178f4c6d3cd297a51614011b/phone-inputs-and-you.av1.mp4

Kesimpulan

Pada malam hari, saat saya mencoba membuat animasi terakhir, komputer menghasilkan suara yang sangat buruk. Tapi setiap kali itu terjadi, saya berkata pada diri sendiri bahwa ini adalah suara seni yang diciptakan. Ada sesuatu yang ajaib tentang perlunya menunggu beberapa menit sebelum Anda dapat memeriksa pratinjau render Anda, melakukan penyesuaian seperlunya, dan coba lagi. Sebenarnya, meski sakit, aku tidak ingin kehilangan perasaan itu. Dan, kepuasan hasil akhirnya membuat semuanya semakin manis.

Orang-orang Mars yang jahat dapat membawa tingkat semangat dan perhatian yang sama ke proyek Anda. Punya aplikasi web atau seluler yang memerlukan pemecahan masalah ahli dengan desain produk? Perlu solusi keandalan frontend, backend, atau perangkat lunak? Ingin memulai proyek Anda? Hubungi kami!