Gambar skenario untuk posting blog dan artikel teknis

Blog teknik, posting Medium/Substack, README GitHub, dan newsletter teknis tentang mengemudi otonom, self-driving, dan ADAS secara teratur membutuhkan gambar skenario yang bersih: persimpangan yang Anda jelaskan, corner case yang Anda bahas, konfigurasi jalur yang kode Anda pikirkan. drawtonomy cukup baik untuk gambar-gambar tersebut, dengan format output yang disesuaikan untuk web.

Halaman ini adalah analogi blog/artikel dari Gambar untuk paper mengemudi otonom — kanvas yang sama, batasan output yang berbeda.

Yang dibutuhkan gambar blog dan artikel

Batasannya berbeda dari gambar paper:

Dapat disematkan. Gambar harus dapat dimasukkan ke editor Markdown/MDX/Notion/Ghost/Substack tanpa konversi.
Aman untuk mode terang/gelap. Banyak blog teknik merender keduanya. Gambar harus terbaca di keduanya, atau memiliki varian mode gelap.
Ukuran file kecil. Gambar raster 4 MB merusak waktu muat halaman dan SEO. SVG atau PNG terkompresi adalah default yang tepat.
Ramah social-card. Ketika posting dibagikan di Twitter/LinkedIn/Hacker News, gambar OG biasanya adalah gambarnya. Rasio aspek dan keterbacaan dalam ukuran kecil penting.
Dapat diedit kembali. Blogger memperbarui posting. Gambar harus dapat diedit nanti tanpa menggambar ulang.

Default drawtonomy memetakan dengan bersih ke hal-hal ini:

.drawtonomy.svg (format SVG native drawtonomy) adalah SVG yang valid, sehingga dapat disematkan dalam konteks HTML/Markdown/MDX apa pun — dan dapat diedit kembali di drawtonomy saat posting membutuhkan pembaruan.
Ekspor PNG tersedia dengan DPI tinggi ketika SVG tidak didukung (pratinjau LinkedIn, misalnya).
Kanvas tak terbatas memungkinkan Anda menggambar gambar lebar yang terpotong dengan baik ke dimensi OG.

Alur kerja yang direkomendasikan

Alur kerja berulang untuk gambar blog khas:

Pilih skenario. Satu adegan, satu poin. Jangan mencoba mengilustrasikan seluruh pipeline dalam satu gambar.
Buat sketsa di drawtonomy.com. Jalan, jalur, persimpangan, kendaraan, pejalan kaki, jalur, label teks.
Beri gaya untuk mode terang dan gelap. Tetap dengan warna yang bertahan di latar belakang #fff dan #1a1a1a. Hindari stroke putih murni (tidak terlihat di mode terang) dan stroke hitam murni (tidak terlihat di mode gelap). Stroke abu-abu tengah bekerja baik di keduanya.
Atur pemotongan kanvas. Posisikan gambar sehingga bagian yang paling relevan berada di tengah. Jika Anda akan menggunakan gambar yang sama sebagai kartu OG, bingkai sekitar 1200 × 630.
Simpan sebagai .drawtonomy.svg. Ini adalah sumber yang dapat diedit. Sebagian besar posting blog diperbarui setidaknya sekali setelah diterbitkan — dan .drawtonomy.svg membuat setiap pembaruan menjadi pengeditan bukan penggambaran ulang.
Ekspor aset yang sebenarnya Anda kirim. Dari adegan yang sama:
- .png pada 1200 × 630 untuk kartu OG (pratinjau LinkedIn/X/Hacker News).
- SVG datar untuk isi posting jika platform blog Anda lebih menyukai SVG biasa daripada .drawtonomy.svg (sebagian besar platform modern menerima keduanya, karena keduanya adalah SVG yang valid).
Sematkan. Masukkan ke editor blog Anda. Tambahkan caption — mesin pencari dan pembaca layar keduanya mengandalkannya.

Ukuran dan resolusi

Untuk SVG, resolusi tidak penting; gambar diskalakan ke apa pun yang diputuskan tata letak. Untuk PNG, ukuran yang berguna:

Penggunaan	Ukuran
Gambar blog inline (lebar penuh)	1600 × 900
Gambar blog inline (setengah lebar)	800 × 450
Kartu OG/sosial	1200 × 630
Kartu Twitter	1200 × 600
Gambar berbagi LinkedIn	1200 × 627
Hero README GitHub	1200 × 600 (atau apa pun yang digunakan tata letak README Anda)

Contoh penyematan

Dalam Markdown/MDX (Astro, Next.js, blog berbasis MDX):

![Skenario cut-in: ego pada 90 km/jam, kendaraan yang memotong pada +20 km/jam](./cut-in.svg)

Dalam HTML dengan varian mode gelap:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./cut-in-dark.svg">
  <img src="./cut-in.svg" alt="Skenario cut-in: ego pada 90 km/jam, kendaraan yang memotong pada +20 km/jam">
</picture>

Dalam README GitHub dengan metadata social-card:

![Gambar skenario cut-in](./docs/img/cut-in.png)

Saran gaya untuk posting teknis

Satu skenario per gambar. Jika Anda memandu pembaca melalui tiga kasus, buat tiga gambar.
Anotasi pada gambar. Label pendek (“TTC = 2,5 d”) yang disematkan dalam gambar menghemat mata pembaca; penjelasan panjang masuk dalam teks sekitar.
Gaya ego yang konsisten di seluruh seri. Jika posting adalah bagian dari seri, pilih satu warna ego dan pertahankan di semua gambar.
Tidak ada tangkapan layar proprietary. Gambar generik berbasis skenario dari drawtonomy menghindari pertanyaan “apakah ini dari simulator?” dan memberi Anda kepercayaan diri tentang hak penggunaan kembali.

Yang bukan untuk ini

Ilustrasi fotorealistis. drawtonomy bersifat top-down 2D ketat. Untuk render dari sudut pandang pertama sensor, gunakan tangkapan layar simulator.
Animasi. drawtonomy mengekspor gambar statis. Untuk penjelas skenario animasi (misalnya cut-in dari waktu ke waktu), ekspor gambar statis dan animasikan secara terpisah, atau gunakan ekspor OpenSCENARIO dengan esmini untuk playback yang direkam.

Bacaan terkait

Gambar untuk paper mengemudi otonom — analogi makalah akademik.
Slide untuk tinjauan desain — analogi slide deck.
Memvisualisasikan skenario cut-in dan pergantian jalur — skenario berulang yang akan Anda gambar.
Ekspor adegan Anda — detail SVG/PNG/PDF/EPS.