1 poin oleh GN⁺ 2025-03-14 | 1 komentar | Bagikan ke WhatsApp
  • Ikon PuTTY mempertahankan gaya kuno yang dibuat pada akhir 1990-an hingga awal 2000-an, lalu dirender ulang berkali-kali agar sesuai dengan perubahan ukuran layar dan kebutuhan platform
  • Versi awal berupa gambar 32×32 yang digambar piksel demi piksel di MSVC icon editor, mencerminkan keterbatasan saat itu seperti palet 16 warna yang direkomendasikan Windows dan ikon hitam-putih
  • Elemen seperti dua komputer, petir, dokumen, topi, kunci, dan kunci pas dipakai untuk membedakan peran tiap alat sambil tetap terlihat sebagai satu keluarga produk PuTTY
  • Sekitar 2007, ketika tampilan ikon 48×48 di Windows membuat hasil pembesaran dari 32×32 terlihat buruk, ikon 48×48, 32×32, 16×16, dan versi hitam-putih mulai dibuat otomatis lewat skrip
  • Setelah itu, untuk mengatasi keterbatasan skrip bitmap pada ukuran besar, dibuat skrip pembangkit SVG, tetapi untuk ikon kecil skrip lama tetap memberi hasil yang lebih baik

Titik awal ikon PuTTY

  • Pada Maret 2025, sebuah email yang menanyakan asal-usul dan perubahan “logo” berupa ikon file executable Windows PuTTY menjadi pemicu untuk merangkum ceritanya
  • Kerangka dasar desain ikon saat ini dibuat pada akhir 1990-an dan awal 2000-an, dan sejak itu dipertahankan tanpa perubahan gaya besar
  • Seiring waktu, ikon-ikon itu harus dirender ulang di bawah berbagai batasan, sehingga ini bukan hanya masalah desain grafis tetapi juga masalah teknis

Masa menggambar piksel dengan tangan

  • Pada awalnya tidak diperkirakan bahwa ikon dalam banyak ukuran akan dibutuhkan, jadi gambar dibuat langsung di MSVC icon editor tanpa otomatisasi
  • Program GUI Windows tanpa ikon sulit dikenali, jadi sejak awal PuTTY memerlukan ikon tersendiri
  • PuTTY utama

    • Ikon PuTTY tertua yang masih tersisa adalah versi yang dipakai pada awal 1999, dan tidak ada riwayat pengelolaan sumber yang tersisa hingga masa awal proyek pada musim panas 1996
    • Ikon itu berukuran 32×32 piksel dan memakai palet terbatas yang terdiri dari warna primer dan nuansa abu-abu
    • Pada pertengahan 1990-an, layar non-truecolour masih umum, dan untuk ikon Windows disarankan memakai palet 16 warna tetap
    • Pendekatannya adalah seluruh ikon GUI memakai kembali 16 entri palet yang sama agar lebih sedikit memakai sumber daya warna layar
    • Versi hitam-putih juga disediakan sesuai rekomendasi saat itu
    • Meski tidak ada ingatan pernah benar-benar melihatnya pada layar hitam-putih setelah Win95, hal ini mungkin berkaitan dengan Win32s yang memungkinkan program 32-bit dijalankan di Windows 3.1
    • Desainnya menampilkan dua komputer berbentuk monitor CRT dan unit sistem yang umum pada 1990-an, dihubungkan oleh petir
    • Petir itu menyiratkan komunikasi elektrik
    • Alasan pemakaian petir kuning dan layar biru tidak tercatat jelas
    • Layar biru itu bukan berarti Windows Blue Screen of Death, karena dalam penggunaan PuTTY biasa hanya satu sisi yang menjalankan Windows dan tidak ada yang sedang crash
  • PSCP dan PSFTP

    • Pada 1999, seorang kontributor mengirim implementasi SCP, lalu lahirlah PSCP dan ikon terpisah juga digambar
    • Karena PSCP tidak bisa dipakai tanpa argumen command line, kebutuhan praktis untuk menjalankannya dari GUI atau mengenalinya di Start Menu tidak terlalu besar
    • Ikon PSCP mengambil ikon PuTTY lalu mengganti salah satu komputer dengan dokumen, dan menghubungkan komputer yang tersisa dengan dokumen itu lewat petir
    • Setelah itu, alat transfer berkas PSFTP juga memakai ulang ikon yang sama
    • Berbeda dengan PSCP, PSFTP masih bisa dijalankan tanpa argumen command line karena target koneksi bisa dimasukkan dari prompt interaktif, sehingga ikon yang sama lebih berguna untuk PSFTP
    • Memakai ikon yang sama untuk dua alat berarti perlu lebih cermat membedakannya di Explorer, tetapi tidak ditemukan cara visual yang mudah untuk menandai perbedaannya
  • Pageant

    • Pageant adalah SSH agent, dan awalnya ada niat membuat ikon berupa wajah agen rahasia
    • Ekspresi wajah itu gagal, tetapi topi bertepi lebar yang tergambar memuaskan tetap dipakai dengan menaruhnya di atas komputer PuTTY
    • Dengan mendaur ulang desain komputer yang sama, tampilannya tetap cocok secara visual dengan keluarga produknya, dan juga sesuai dengan kenyataan bahwa agent milik Pageant adalah agent terkomputerisasi, bukan manusia
    • Ikon awal Pageant tidak punya versi hitam-putih, tetapi membutuhkan ikon kecil 16×16 untuk masuk ke System Tray
    • Karena hasil pengecilan ikon 32×32 oleh Windows tidak bagus, anti-aliasing pada pita topi dan kontur monitor dibuat manual untuk ukuran kecil
    • Garis luarnya tetap hitam agar kontras dengan latar belakang
  • PuTTYgen

    • Ikon PuTTYgen menggabungkan komputer, petir, dan kunci
    • Kunci itu merupakan permainan visual ringan untuk menunjukkan bahwa alat ini membuat dan menangani kunci kriptografi
    • Karena PuTTYgen tidak melakukan komunikasi jaringan, petir sebenarnya tidak akurat secara fungsional, tetapi tetap dipakai demi konsistensi visual sebagai alat dalam keluarga PuTTY
    • Berbeda dengan PSCP, arah penempatan komputer dan objeknya dibalik sehingga kedua ikon lebih mudah dibedakan
  • Dialog pengaturan

    • Entri taskbar untuk dialog pengaturan PuTTY memakai ikon jendela Windows bawaan, dan tampilannya terasa kurang enak dilihat
    • Alih-alih memakai ulang ikon utama apa adanya, dibuat ikon dengan kunci pas besar sebagai lapisan tambahan untuk menandakan konfigurasi atau modifikasi
    • Ikon ini kembali memiliki versi hitam-putih, mungkin karena dibuat dengan memodifikasi ikon yang memang sudah punya versi hitam-putih

Ikon yang digambar ulang dengan skrip

  • Sekitar 2007 mulai muncul keluhan bahwa ikon 32×32 terlihat buruk
  • Layar makin besar dan Windows mulai menampilkan ikon 48×48 sebagai default, sehingga ikon aplikasi yang hanya punya versi 32×32 akan terlihat sebagai hasil pembesaran
  • Karena 48 bukan kelipatan 32, Windows membesarkan ikon secara tidak merata dan hasilnya jadi lebih jelek
  • Alih-alih menggambar ulang seluruh set ikon dengan tangan, dibuat skrip pembangkit yang menggambar tiap komponen ikon secara terprogram
  • Dengan skrip ini, ikon 48×48, 32×32, dan 16×16 untuk semua alat dibuat otomatis
    • Ketidakkonsistenan seperti hanya sebagian ikon yang punya versi kecil atau hitam-putih pun hilang
    • Semua ikon akhirnya memiliki semua versi
  • Bagian tersulit adalah ikon 16×16
    • Penilaian anti-aliasing yang dulu diterapkan manual pada Pageant harus direproduksi dalam kode
    • Pendekatan yang sama juga harus diterapkan ke semua komponen grafis
  • Hasil skrip tidak persis sama dengan gambar tangan asli
    • Ikon PuTTY menghasilkan versi yang sangat mirip, hanya berbeda beberapa piksel
    • Ikon Pageant berubah bukan hanya pada anti-aliasing pita topi, tetapi juga pada ukuran komputernya
  • Skrip itu juga dibuat agar bisa menghasilkan ikon hitam-putih
    • Pada 2007 mungkin sudah jauh lebih jarang ada orang memakai Windows di layar hitam-putih
    • Namun berkat otomatisasi, bahkan ikon hitam-putih 48 piksel pun bisa dibuat

pterm dan ikon X11

  • Pada 2002, sebagian besar kode PuTTY di-port ke Linux, lalu lahirlah GUI PuTTY untuk Linux dan emulator terminal X11 pterm
  • Program X11 dapat mengatur bitmap ikon pada properti jendela
    • Window manager bisa memakainya sebagai ikon saat diminimalkan, entri taskbar, ikon di bingkai jendela, dan sebagainya
  • Pada 2002 diyakini bahwa GTK 1 tidak mendukung pengaturan ikon jendela, dan menyediakan beberapa format berkas bitmap juga terasa merepotkan, jadi ikon tidak dibuat saat itu
  • Setelah skrip pembangkit hadir, keluaran ke berbagai format berkas menjadi mudah, dan diketahui pula bahwa GTK 1 sebenarnya bisa mengatur properti ikon
  • Karena pterm tidak melakukan komunikasi jaringan, ikonnya digambar sebagai satu komputer besar tanpa petir
  • Dialog pengaturan pterm memakai ulang lapisan kunci pas seperti pada ikon pengaturan PuTTY
  • Pada 2021, menjadi mungkin membuat pterm yang berjalan di Windows, dan ikon ini pun dipakai untuk pterm versi Windows

Ikon installer dan pengolahan warna

  • Skrip pembangkit dapat menghasilkan ikon true colour juga, sehingga tidak lagi terikat pada palet 16 warna lama
  • Ikon installer PuTTY menampilkan kotak kardus terbuka dan petir yang keluar menuju komputer
    • Gambar yang dimaksud adalah “PuTTY melompat keluar dari kotak ke mesin pengguna”
  • Kotak kardus itu membutuhkan warna cokelat, tetapi cokelat tidak ada dalam palet ikon Windows 16 warna lama
  • Pada ikon true-colour, warna cokelat sungguhan bisa dipakai
  • Meski begitu, ikon 16 warna tetap dipertahankan demi kompatibilitas ke belakang
    • Merah tua #800000 dicampur masing-masing 50:50 dengan hitam #000000, kuning tua #808000, dan kuning #ffff00 untuk menghasilkan tiga warna yang mendekati cokelat
    • Pada true-colour dipakai warna rata-ratanya, sedangkan pada versi 16 warna ditampilkan sebagai halftone dengan menyusun piksel dua warna palet secara bergantian

Set ikon yang dibuat ulang dalam SVG

  • Skrip ikon lama bekerja baik pada 32×32 dan 48×48, dan hasil pengecilan ke 16×16 juga lumayan, tetapi kualitasnya buruk jika diperbesar lebih jauh
  • Dalam upaya porting Mac yang gagal, diperlukan ikon 128×128 untuk dock MacOS, dan keluaran ukuran itu dari skrip lama dianggap tidak memuaskan
  • Porting Mac itu sendiri pada dasarnya ditinggalkan, tetapi ikon yang benar-benar dapat diskalakan penuh tetap bisa berguna untuk keperluan lain
    • Bisa dipakai di konteks selain ikon GUI
    • Misalnya untuk kaus atau stiker laptop
  • Skrip pembangkit ikon kedua dibuat dengan meniru cara berpikir skrip lama, tetapi mengeluarkan berkas SVG alih-alih bitmap
  • Versi SVG saat ini terdiri dari delapan ikon: PuTTY, pengaturan PuTTY, pterm, pengaturan pterm, PSCP, Pageant, PuTTYgen, dan installer
  • Untuk ikon kecil, SVG tidak bisa mengetahui penilaian anti-aliasing, sehingga skrip lama memberi hasil render yang lebih baik
  • Untuk ikon besar, terutama ketika dibutuhkan bitmap besar true colour, pendekatan yang disarankan adalah merendernya dari basis SVG

Alasan mempertahankan gaya lama

  • Keadaan set ikon PuTTY saat ini pada dasarnya adalah mempertahankan gaya 1990-an sambil menambahkan beberapa cara rendering
  • Ada juga orang yang menentang keseluruhan gaya 1990-an dan mengusulkan set desain baru, tetapi belum ada usulan yang cukup disukai untuk diadopsi
  • Gaya 1990-an dipandang sebagai sesuatu yang membuat PuTTY terlihat cukup kuno untuk terasa meyakinkan
  • Tampaknya kecil kemungkinan akan ada desain ulang besar yang benar-benar diterima, dan kemungkinan selama umur proyek ikon yang sekarang, atau yang sangat mirip dengannya, akan tetap dipakai

1 komentar

 
GN⁺ 2025-03-14
Opini Hacker News
  • Saya sempat terhenti di bagian yang mengatakan aneh bahwa petir berwarna kuning, karena bagi saya kuning terasa sebagai warna yang “jelas” benar
    Bahkan jika mencari gambar, petir kuning adalah simbol paling umum untuk listrik, dan rambu bahaya standar hitam-kuning juga langsung terbayang
    Saya tidak tahu seberapa lama ungkapan ini secara historis atau dari mana asalnya, tetapi di komik dan kartun sepertinya sudah lama dipakai luas

    • Simon Tathum orang Inggris, dan di sini saya tidak ingat pernah melihat petir berwarna sian
      Rambu bahaya kematian akibat sengatan listrik di Inggris juga bukan berlatar hitam, melainkan berlatar kuning dengan warna hitam: https://www.hse.gov.uk/electricity/nearelectric.htm#signs
      Namun kalau mencari gambar petir, memang terlihat cukup banyak pilihan seperti sian di atas biru royal, ungu, merah, dan sebagainya
    • Terutama saat itu ikon WinAmp juga berupa petir kuning, dan terpasang di hampir semua PC Windows pada era 90-an
    • Bagian ini juga menarik perhatian saya. Penulis juga mempertanyakan mengapa layarnya berwarna biru
      Mungkin pada akhir 90-an pilihan warna seperti ini terasa sepenuhnya alami dan mengikuti konvensi desain Windows, jadi tampaknya ia lupa bahwa saat itu hal tersebut tidak terlalu dipikirkan secara mendalam
    • Ini murni tebakan, tetapi petir kuning pada ikon PuTTY mungkin tetap berwarna kuning karena simbol itu dipinjam dari rambu peringatan keselamatan
      Kuning sejak lama disukai sebagai warna dengan visibilitas tinggi, dan pada bodi peralatan industri pun piktogram seperti itu akan terlihat jelas untuk menunjukkan bahaya sengatan listrik tanpa bergantung pada bahasa
      Pada akhirnya, petir kuning tampaknya dipertahankan karena semacam inersia “memang selalu begitu”
    • Belakangan ini saya juga memikirkan hal yang sama. Mobil listrik atau plug-in hybrid banyak memakai aksen sian untuk menunjukkan bahwa mereka kendaraan listrik, tetapi tetap saja kuning terasa lebih alami sebagai warna yang melambangkan listrik
  • Salah satu alasan PuTTY terasa menarik justru ada di titik itu. Aplikasi yang terlihat seperti PuTTY punya semacam rasa menenangkan
    Entah tampilan lama itu memberi rasa stabil karena tidak berubah, atau karena memakai elemen bawaan sistem operasi sehingga terlihat lebih konsisten
    Sebaliknya, pada aplikasi dengan estetika “modern”, semakin banyak Material Design, sudut membulat, efek transisi, kontras rendah, dan ruang kosong besar, semakin besar pula rasa tidak percaya dan skeptis
    Saya tidak punya kualifikasi untuk melakukan analisis psikologis, tetapi melihat ada kelompok yang menyukai desain ala PuTTY, tafsir seperti ini mungkin tidak terlalu langka

    • Perangkat lunak yang memakai elemen grafis dasar Win32 benar-benar luar biasa cepat
      Tampilan seperti itu tidak menjamin pasti cepat, dan bisa saja membuang waktu di tempat lain atau hanya meniru tampilan itu dengan rumit, tetapi ada juga kemungkinan itu benar-benar benda asli yang merespons seketika seperti Notepad lama
      Saya merindukan Notepad yang “cukup memasukkan file ke kontrol teks, dan tidak peduli pada \r atau \n semacam itu”. Itu program yang tidak berpura-pura menjadi sesuatu yang bukan dirinya dan hanya menjalankan perannya dengan tepat
      Dulu rasanya saya pernah melihat implementasi ulang Notepad dalam assembly; kode lem yang menghubungkan akses file ke kontrol teks kira-kira setengah layar, dan mungkin bahkan ada menu ctrl+h serta dialognya
      Mirip dengan glue code yang dibanggakan Python, tetapi ini assembly murni dan tidak punya dependensi selain DLL akses file serta set kontrol standar minimum
    • Saya rindu masa ketika memakai perangkat lunak Win32. Sederhana, cepat digambar, rapi, dan padat informasi
      Sekarang semuanya memakai widget “Windows modern” yang besar, atau lebih buruk lagi, Electron
    • PuTTY dan Winamp adalah perangkat lunak yang sudah saya pakai di Windows selama lebih dari 20 tahun, tetapi tetap terasa sama. Tidak terasa tua atau ketinggalan zaman
    • Salah satu prinsip Material Design tampaknya adalah bahwa sebuah persegi tidak boleh mengungkapkan identitasnya sampai diklik
      Bisa jadi itu tombol, bisa jadi kotak teks, atau bisa jadi hanya persegi
  • Kalimat “Saya sadar bahwa jika menunggu sampai bisa menggambar ikon yang diinginkan, Pageant tidak akan pernah dirilis sama sekali” terasa mengena
    Banyak proyek yang ingin saya utak-atik berhenti di hambatan yang ditimbulkan sendiri seperti ini
    Secara pribadi, contoh paling khas adalah buntu saat menentukan nama repositori atau nama folder tingkat atas

    • Perlu tenggat waktu
      Dalam budaya hacker, manajemen proyek selalu diremehkan seolah-olah pemborosan, tetapi menemukan cara agar proyek terus bergerak maju adalah peran yang bernilai
    • Secara pribadi, salah satu area tempat LLM paling membantu adalah melewati hambatan penamaan
      Entah kenapa saya cukup buruk dalam menentukan hal seperti nama repositori, variabel, dan struct
    • Saya mencoba menggambar ikon untuk aplikasi yang sedang saya kerjakan, tetapi kurva SVG benar-benar sulit
      Pada akhirnya saya mendapat logo yang jauh lebih sederhana daripada rencana awal, tetapi lebih masuk akal
    • Ini yang biasa disebut bikeshedding
  • Ia mengatakan tidak ingat mengapa memilih warna biru untuk layar, tetapi pada ikon Win 3.x dan Win95, biru adalah warna standar saat menggambarkan layar, jadi sepertinya ia hanya mengikuti konvensi itu

    • EDIT.COM dan program instalasi MS-DOS juga memakai latar biru
      Faktanya, biru, yaitu warna CGA nomor 1, sangat populer sebagai warna latar di banyak alat
      Pada hal-hal seperti Turbo Pascal dan Turbo C, latar biru dengan teks putih adalah tema warna yang umum, dan Borland dBase mencampur latar biru dan sian di beberapa layar
      Karena warna yang tersedia saat itu terbatas, biru adalah salah satu dari sedikit warna latar yang nyaman di mata
      Saya juga ingat Windows 3.1, 95, 98, dan sebagainya memakai biru sebagai warna layar pada ikon yang melambangkan komputer
      Pada ikon dengan dua komputer seperti “Network Neighborhood”, salah satu layarnya biru dan yang lain sian
    • Di halaman ini, Anda bisa melihat beberapa contoh ikon komputer yang hampir sama dengan yang dipakai PuTTY: http://toastytech.com/guis/win31.html
      Saya sampai harus memperbesarnya untuk memastikan apakah itu bukan ikon yang sama
    • Saya rasa versi hitam-putihnya juga masuk akal. Saat itu pasti masih cukup banyak komputer portabel hitam-putih yang digunakan
  • Ini membangkitkan nostalgia. Sekitar tahun 2000, saya mem-fork PuTTY dan membuat versi bernama “RedBrick PuTTy”, lalu menambahkan tombol untuk terhubung SSH ke redbrick.dcu.ie dalam sekali klik
    redbrick.dcu.ie adalah server terminal milik Dublin City University Networking Society, dan saya tidak ingat apakah saat itu saya administrator sistem atau webmaster
    Tapi saya ingat mengedit logonya secara manual untuk memasukkan bata merah
    Bisa terlihat samar di gambar ini: https://wiki.redbrick.dcu.ie/images/b/b8/Putty_configuration...
    Berkat fork kecil dan konyol ini, penggunaan SSH naik dari sekitar 5% menjadi praktis 100%, menggantikan Telnet
    Terima kasih kepada Simon karena memakai lisensi yang memungkinkan hal semacam ini terjadi

  • Bagian “menulis kode yang menggambar semua komponen dari tiap gambar ikon secara programatis” adalah contoh yang sangat baik tentang cara Simon mendekati masalah
    Pada tahun 2000-an saya menghabiskan cukup banyak waktu bersama Simon dan bisa belajar banyak hal tentang berbagai topik; pendekatan seperti ini benar-benar terasa sangat khas dirinya

  • Saya jadi teringat bahwa pada masa itu tampilan ikon default di Windows menjadi 48×48, bukan 32×32, sementara MacOS menginginkan ikon 128×128 di Dock
    Salah satu alasan paling dangkal, tetapi sekaligus paling kuat, saya pindah dari Windows ke Mac OS X pada masa itu adalah ikon 128×128
    Ikon yang menjadi titik masuk aplikasi di Finder atau Dock terlihat jauh lebih menarik dan secara naluriah terasa lebih indah
    Terutama ikon aplikasi Windows sering kali memakai warna lebih sedikit dibanding ikon aplikasi Mac
    Tentu ada beberapa alasan untuk beralih, tetapi saat pertama melihat desktop Mac, ikonnya memberi kesan yang cukup kuat hingga membuat saya ingin melihat lebih dalam

    • Saya tidak tahu seperti apa OS X saat itu, tetapi salah satu hal yang benar-benar menyebalkan di aplikasi Windows adalah kebanyakan ikonnya terlihat sangat buruk
      Hampir tidak ada orang yang tampak peduli membuat ikon yang layak
      Ada yang tidak memperbarui ikon meski ukuran default berubah menjadi 48×48 sehingga menjadi buram karena diperbesar, dan ada juga yang memang menyertakan semua ukuran tetapi hanya mengecilkan gambar yang terlihat bagus pada ukuran besar
      Akibatnya, pada ukuran ikon yang umum, semua detailnya melebur dan menjadi berantakan
      Karena tidak ingin melihat ikon jelek di desktop atau taskbar, saya sering membuat ikon kustom sendiri dan mengganti ikon di dalam executable dengan resource editor
  • Ada sesuatu yang hilang ketika beralih dari bitmap ke SVG
    Tekstur kasar bitmap punya pesona tersendiri

    • Pixel art memang lebih bagus, tetapi rasanya bukan itu saja
      Kita tidak bisa begitu saja memindahkannya 1:1 lalu mengharapkan hasil yang bagus. Lagi pula pada praktiknya juga bukan 1:1, dan di SVG garis luarnya menjadi jauh lebih tipis
      Pada gambar beresolusi rendah, imajinasi mengisi celah-celahnya
      Semakin tinggi resolusinya, semakin tinggi pula kualitas yang dibutuhkan. Vector art, menurut definisinya, punya resolusi tak terbatas
  • Saya menduga ikon topi “Agent” terinspirasi dari Forté Agent, yang menurut saya adalah perangkat lunak Usenet paling populer untuk Windows
    Motifnya sangat mirip: https://archive.org/details/forte-agent-1.6
    Menyenangkan bisa membaca sejarah seperti ini langsung dari orang yang membuatnya

    • Entah kenapa saya jadi teringat Carmen Sandiego
      Bahkan dalam versi modern tahun 2014, ada detektif film noir di posisi yang sama, dan ikon aplikasinya masih berupa perempuan bertopi: https://youtu.be/h-_UNm_gycU?t=94
    • Itu berasal dari komik Spy vs. Spy
    • Seperti sudah disebutkan di balasan lain, ungkapan dalam tulisannya hampir secara langsung mengatakan bahwa itu berbasis Spy vs. Spy
      Saya tidak tahu tautan resmi yang mendokumentasikan ini, tetapi kalau mencari gambar di https://www.google.com/search?q=spy+vs+spy&udm=2, Anda bisa melihat banyak gambar yang menjadi inspirasi topi ini