Đồ họa biểu tượng của các công cụ PuTTY
(chiark.greenend.org.uk)- Biểu tượng PuTTY vẫn giữ phong cách cũ được tạo vào cuối thập niên 1990 đến đầu thập niên 2000, và đã được render lại nhiều lần để phù hợp với thay đổi về kích thước màn hình và yêu cầu nền tảng
- Phiên bản ban đầu là ảnh 32×32 được vẽ từng pixel trong trình chỉnh sửa biểu tượng MSVC, phản ánh các hạn chế thời đó như bảng màu 16 màu do Windows khuyến nghị và biểu tượng đen trắng
- Các yếu tố như hai máy tính và tia sét, tài liệu, mũ, chìa khóa, cờ lê vừa phân biệt vai trò của từng công cụ, vừa là cách để chúng trông giống một bộ sản phẩm PuTTY
- Khoảng năm 2007, do Windows hiển thị biểu tượng 48×48 khiến chất lượng phóng to từ 32×32 kém đi, các phiên bản 48×48, 32×32, 16×16 và đen trắng bắt đầu được tự động tạo bằng script
- Sau đó, để bù cho giới hạn của script bitmap ở kích thước lớn, một script tạo SVG được viết, nhưng với biểu tượng nhỏ thì script cũ cho kết quả tốt hơn
Điểm khởi đầu của biểu tượng PuTTY
- Tháng 3/2025, một email hỏi về nguồn gốc và quá trình thay đổi của “logo”, tức biểu tượng file thực thi PuTTY trên Windows, đã trở thành lý do để tổng hợp lại câu chuyện này
- Khung thiết kế của biểu tượng hiện tại được tạo vào cuối thập niên 1990 và đầu thập niên 2000, và từ đó đến nay vẫn được giữ lại mà không có thay đổi lớn về phong cách
- Theo thời gian, biểu tượng phải được render lại dưới nhiều ràng buộc, nên đây vừa là vấn đề thiết kế đồ họa vừa là vấn đề kỹ thuật
Thời kỳ vẽ pixel thủ công
- Ban đầu, do không dự đoán rằng sẽ cần biểu tượng ở nhiều kích thước, các biểu tượng được vẽ trực tiếp trong trình chỉnh sửa biểu tượng MSVC mà không có tự động hóa
- Chương trình GUI trên Windows nếu không có biểu tượng sẽ khó nhận diện, nên PuTTY cần biểu tượng riêng ngay từ giai đoạn đầu
-
Bản thân PuTTY
- Biểu tượng PuTTY sớm nhất còn lại là phiên bản được dùng vào đầu năm 1999; lịch sử quản lý mã nguồn từ thời điểm dự án bắt đầu vào mùa hè 1996 không còn nữa
- Biểu tượng có kích thước 32×32 pixel và dùng bảng màu hạn chế gồm các màu cơ bản cùng các sắc xám
- Vào giữa thập niên 1990, màn hình không phải truecolour vẫn phổ biến, và Windows khuyến nghị dùng bảng màu 16 màu cố định cho biểu tượng
- Cách làm này nhằm để toàn bộ biểu tượng trong GUI tái sử dụng cùng 16 mục bảng màu, giúp dùng ít tài nguyên màu màn hình hơn
- Phiên bản đen trắng cũng được cung cấp theo khuyến nghị thời đó
- Dù sau Win95 tôi không nhớ từng thực sự thấy nó trên màn hình đen trắng, điều này có thể liên quan đến Win32s, vốn cho phép thử chạy chương trình 32-bit trên Windows 3.1
- Thiết kế thể hiện hai máy tính dạng màn hình CRT và thùng máy hệ thống thường thấy trong thập niên 1990, được nối với nhau bằng tia sét
- Tia sét gợi ý truyền thông điện
- Lý do dùng tia sét màu vàng và màn hình màu xanh không còn được ghi lại rõ ràng
- Màn hình xanh không có ý chỉ Windows Blue Screen of Death, vì trong cách dùng PuTTY thông thường chỉ một phía là Windows và không bên nào đang ở trạng thái crash
-
PSCP và PSFTP
- Năm 1999, một người đóng góp gửi phần triển khai SCP, nhờ đó PSCP ra đời, và một biểu tượng riêng cũng được vẽ
- PSCP không dùng được nếu không có tham số dòng lệnh, nên nhu cầu thực tế để chạy từ GUI hoặc nhận diện trong Start Menu không lớn
- Biểu tượng PSCP thay một máy tính trong biểu tượng PuTTY bằng tài liệu, rồi nối máy tính còn lại và tài liệu bằng tia sét
- Về sau, công cụ truyền file PSFTP cũng dùng lại cùng biểu tượng này
- PSFTP khi chạy không có tham số dòng lệnh vẫn có thể nhập đích kết nối ở prompt tương tác, nên dùng cùng biểu tượng này thực tế hơn PSCP
- Khi hai công cụ dùng cùng biểu tượng, cần chú ý để phân biệt trong Explorer, nhưng không tìm được cách dễ dàng để thể hiện khác biệt đó bằng hình ảnh
-
Pageant
- Pageant là SSH agent; ban đầu định vẽ khuôn mặt của một mật vụ làm biểu tượng
- Việc thể hiện khuôn mặt thất bại, nhưng chiếc mũ rộng vành vẽ khá ưng ý được đặt lên trên máy tính PuTTY và giữ nguyên như vậy
- Việc tái sử dụng cùng thiết kế máy tính khiến nó đồng bộ về thị giác với bộ sản phẩm, đồng thời cũng phù hợp với việc agent của Pageant không phải con người mà là một agent được máy tính hóa
- Biểu tượng ban đầu của Pageant không có phiên bản đen trắng; thay vào đó cần một biểu tượng nhỏ 16×16 để đưa vào System Tray
- Khi Windows thu nhỏ biểu tượng 32×32 thì chất lượng không tốt, nên phần dải mũ và đường viền màn hình ở kích thước nhỏ được khử răng cưa thủ công
- Đường viền được giữ màu đen để phân biệt với nền
-
PuTTYgen
- Biểu tượng PuTTYgen kết hợp máy tính, tia sét và chìa khóa
- Chìa khóa là một lối chơi hình ảnh nhẹ, thể hiện đây là công cụ tạo và xử lý khóa mật mã
- PuTTYgen không thực hiện giao tiếp mạng, nên tia sét không chính xác về mặt chức năng, nhưng được đưa vào để tạo tính nhất quán thị giác như một công cụ thuộc bộ PuTTY
- Khác với PSCP, hướng sắp xếp máy tính và đối tượng bị đảo lại nên hai biểu tượng dễ phân biệt hơn
-
Hộp thoại cấu hình
- Mục taskbar của hộp thoại cấu hình PuTTY dùng biểu tượng cửa sổ Windows mặc định, và trông không đẹp
- Thay vì dùng lại nguyên biểu tượng chính, một biểu tượng được vẽ bằng cách phủ thêm một cờ lê lớn tượng trưng cho cấu hình/sửa đổi
- Biểu tượng này lại có phiên bản đen trắng, có thể vì nó được sửa từ một biểu tượng vốn đã có phiên bản đen trắng
Biểu tượng được vẽ lại bằng script
- Khoảng năm 2007 bắt đầu có phàn nàn rằng biểu tượng 32×32 trông xấu
- Khi màn hình lớn hơn và Windows mặc định hiển thị biểu tượng 48×48, biểu tượng ứng dụng chỉ có 32×32 bị phóng to lên
- Vì 48 không phải bội số của 32, Windows kéo giãn biểu tượng không đều, khiến kết quả càng tệ hơn
- Thay vì vẽ lại toàn bộ bộ biểu tượng mới bằng tay, một script tạo sinh được viết để vẽ từng thành phần của biểu tượng bằng chương trình
- Script này tự động tạo biểu tượng 48×48, 32×32, 16×16 cho tất cả công cụ
- Sự thiếu nhất quán kiểu chỉ một vài biểu tượng có bản nhỏ hoặc bản đen trắng biến mất
- Tất cả biểu tượng đều có đủ mọi phiên bản
- Phần khó nhất là biểu tượng 16×16
- Cần tái hiện bằng code các quyết định khử răng cưa từng được làm thủ công trong Pageant
- Cũng phải áp dụng cùng cách đó cho mọi thành phần đồ họa
- Kết quả từ script không hoàn toàn giống bản vẽ tay gốc
- Biểu tượng PuTTY là kết quả gần đúng, chỉ khác vài pixel
- Biểu tượng Pageant không chỉ khác ở phần khử răng cưa của dải mũ mà cả kích thước máy tính cũng thay đổi
- Script cũng được làm để có thể tạo biểu tượng đen trắng
- Đến năm 2007, có lẽ việc dùng Windows trên màn hình đen trắng còn hiếm hơn nữa
- Nhờ tự động hóa, thậm chí có thể tạo cả biểu tượng đen trắng 48 pixel
pterm và biểu tượng X11
- Năm 2002, phần lớn mã PuTTY được port sang Linux, tạo ra PuTTY GUI cho Linux và trình giả lập terminal X11 pterm
- Chương trình X11 có thể đặt bitmap biểu tượng trong thuộc tính cửa sổ
- Trình quản lý cửa sổ có thể dùng nó làm biểu tượng khi thu nhỏ, mục taskbar, biểu tượng trên khung cửa sổ, v.v.
- Năm 2002, người ta hiểu rằng GTK 1 không hỗ trợ đặt biểu tượng cửa sổ, và việc cung cấp nhiều định dạng file bitmap cũng phiền phức, nên không tạo biểu tượng
- Sau khi có script tạo sinh, việc xuất nhiều định dạng file trở nên dễ dàng, và cũng biết rằng GTK 1 thực ra có thể đặt thuộc tính biểu tượng
- Vì pterm không thực hiện giao tiếp mạng, biểu tượng pterm chỉ là một máy tính được vẽ lớn, không có tia sét
- Hộp thoại cấu hình pterm dùng lại lớp phủ cờ lê giống biểu tượng cấu hình PuTTY
- Năm 2021, có thể tạo pterm chạy trên Windows, và biểu tượng này cũng được dùng cho pterm trên Windows
Biểu tượng trình cài đặt và xử lý màu sắc
- Script tạo sinh cũng có thể xuất biểu tượng true colour, nên không còn bị ràng buộc vào bảng màu 16 màu cũ
- Biểu tượng trình cài đặt PuTTY có một hộp bìa carton mở và tia sét lao về phía máy tính
- Ý đồ là hình ảnh “PuTTY bật ra khỏi hộp và vào máy của người dùng”
- Hộp bìa carton cần màu nâu, nhưng màu nâu không có trong bảng màu biểu tượng 16 màu cũ của Windows
- Trong biểu tượng true-colour có thể dùng màu nâu thật
- Dù vậy, biểu tượng 16 màu vẫn được giữ để tương thích ngược
- Trộn đỏ sẫm
#800000với đen#000000, vàng sẫm#808000, vàng#ffff00theo tỷ lệ 50:50 để tạo ba màu gần với nâu - Ở true-colour dùng màu trung bình, còn trong phiên bản 16 màu thì thể hiện bằng halftone, tức đặt xen kẽ pixel của hai màu trong bảng màu
- Trộn đỏ sẫm
Bộ biểu tượng được làm lại bằng SVG
- Script biểu tượng cũ hoạt động tốt ở 32×32 và 48×48, thu nhỏ xuống 16×16 cũng ổn, nhưng khi phóng lớn hơn thì chất lượng không tốt
- Trong một nỗ lực port sang Mac không thành, cần biểu tượng 128×128 cho dock MacOS, và đầu ra ở kích thước đó của script cũ không đạt yêu cầu
- Việc port sang Mac về cơ bản đã bị bỏ, nhưng biểu tượng có khả năng mở rộng hoàn toàn vẫn có thể hữu ích cho mục đích khác
- Có thể dùng trong các ngữ cảnh ngoài biểu tượng GUI
- Cũng có thể dùng cho áo phông hoặc sticker laptop
- Script tạo biểu tượng thứ hai mô phỏng cách nghĩ của script cũ, nhưng xuất file SVG thay vì bitmap
- Phiên bản SVG hiện tại gồm 8 biểu tượng: PuTTY, cấu hình PuTTY, pterm, cấu hình pterm, PSCP, Pageant, PuTTYgen và trình cài đặt
- Ở biểu tượng nhỏ, SVG không biết các quyết định khử răng cưa, nên script cũ render tốt hơn
- Khi cần biểu tượng lớn, đặc biệt là bitmap lớn true colour, cách được khuyến nghị là render dựa trên SVG
Vì sao vẫn giữ phong cách cũ
- Tình trạng hiện tại của bộ biểu tượng PuTTY là giữ phong cách thập niên 1990 và bổ sung nhiều cách render khác nhau
- Cũng từng có người phản đối phong cách thập niên 1990 nói chung và đề xuất các bộ thiết kế mới, nhưng không có đề xuất nào đủ ưng ý để được chấp nhận
- Phong cách thập niên 1990 được xem là yếu tố khiến PuTTY trông cũ kỹ một cách đáng tin cậy
- Khả năng một lần tái thiết kế lớn thực sự được chấp nhận có vẻ thấp, và dự kiến trong suốt vòng đời dự án, các biểu tượng hiện tại hoặc hình thức gần như vậy sẽ tiếp tục được duy trì
1 bình luận
Các ý kiến trên Hacker News
Tôi hơi khựng lại ở đoạn nói việc tia sét có màu vàng là lạ, vì với tôi màu vàng “đương nhiên” là màu đúng
Tìm kiếm hình ảnh cũng cho thấy tia sét màu vàng là biểu tượng phổ biến nhất để chỉ điện, và nó cũng gợi đến biển cảnh báo nguy hiểm chuẩn màu đen-vàng
Tôi không biết cách biểu đạt này đã có lịch sử lâu đến đâu và bắt nguồn từ đâu, nhưng có vẻ nó đã được dùng rộng rãi từ lâu trong truyện tranh và hoạt hình
Biển cảnh báo nguy cơ tử vong do điện giật ở Anh cũng là màu đen trên nền vàng, chứ không phải nền đen: https://www.hse.gov.uk/electricity/nearelectric.htm#signs
Tuy vậy, nếu tìm kiếm hình ảnh tia sét thì cũng thấy khá nhiều lựa chọn như xanh lam ngả lục trên nền xanh hoàng gia, tím, đỏ, v.v.
Có lẽ vào cuối thập niên 90, những lựa chọn màu sắc như vậy hoàn toàn tự nhiên và đi theo quy ước thiết kế của Windows, nên tác giả có vẻ đã quên rằng lúc đó người ta không suy nghĩ quá sâu về chuyện này
Màu vàng từ lâu đã được ưa dùng như một màu có độ nhận diện cao, và trên vỏ thiết bị công nghiệp, nó hẳn cũng nổi bật như một ký hiệu hình ảnh cho biết rõ nguy cơ điện giật bất kể ngôn ngữ
Rốt cuộc có vẻ tia sét vàng được duy trì theo quán tính kiểu “trước giờ vẫn làm thế”
Một trong những lý do PuTTY hấp dẫn chính là điểm đó. Những ứng dụng trông như PuTTY đem lại cảm giác yên tâm ở đâu đó
Tôi không biết vẻ ngoài cũ kỹ đem lại cảm giác ổn định vì không thay đổi, hay vì nó dùng các thành phần mặc định của hệ điều hành nên trông nhất quán hơn
Ngược lại, với các ứng dụng theo thẩm mỹ “hiện đại”, càng có nhiều Material Design, góc bo tròn, hiệu ứng chuyển cảnh, độ tương phản thấp và khoảng trắng lớn thì cảm giác bất tín và hoài nghi càng tăng
Tôi không đủ tư cách để phân tích tâm lý, nhưng việc có một nhóm người thích thiết kế kiểu PuTTY cho thấy cách diễn giải này có lẽ không phải hiếm
Tất nhiên, chỉ vì có vẻ ngoài đó không đảm bảo nó nhất định nhanh; nó có thể lãng phí thời gian ở nơi khác, hoặc chỉ đang mô phỏng vẻ ngoài đó một cách tinh vi, nhưng cũng có khả năng đó là hàng thật, phản hồi tức thì như Notepad ngày xưa
Tôi nhớ cái Notepad “chỉ nhét tệp vào control văn bản và không bận tâm đến mấy thứ như
\rthiếu\n” ấy. Nó là một chương trình không giả vờ là thứ khác, chỉ làm đúng vai trò của mìnhTôi nhớ từng thấy ai đó tái triển khai Notepad bằng assembly; phần mã keo nối truy cập tệp với control văn bản chiếm khoảng nửa màn hình, và có lẽ còn có cả menu
ctrl+hcùng hộp thoạiNó giống thứ mã keo mà Python hay tự hào, nhưng là assembly thuần, không có phụ thuộc nào ngoài DLL truy cập tệp và bộ control chuẩn tối thiểu
Giờ thì mọi thứ hoặc dùng widget “Windows hiện đại” cỡ lớn, hoặc tệ hơn là dùng Electron
Nó có thể là nút, có thể là ô văn bản, hoặc cũng có thể chỉ là một hình chữ nhật
Câu “tôi nhận ra rằng nếu cứ chờ cho đến khi vẽ được biểu tượng mình muốn thì Pageant sẽ chẳng bao giờ được phát hành” rất thấm
Rất nhiều dự án tôi muốn đụng tay vào đã dừng lại trước những rào cản tự tạo kiểu này
Cá nhân tôi thường bị kẹt ở khâu đặt tên kho lưu trữ hoặc tên thư mục cấp cao nhất
Trong văn hóa hacker, quản lý dự án luôn bị xem nhẹ như một sự lãng phí, nhưng tìm ra cách để dự án tiến lên là một vai trò có giá trị
Không hiểu sao tôi rất kém trong việc đặt những thứ như tên kho lưu trữ, biến, struct
Cuối cùng tôi có được một logo đơn giản hơn nhiều so với dự định ban đầu, nhưng hợp lý hơn
Tác giả nói không nhớ vì sao chọn màu xanh lam cho màn hình, nhưng trong các biểu tượng Win 3.x và Win95, màu xanh lam là màu chuẩn khi biểu diễn màn hình, nên có vẻ chỉ là làm theo quy ước đó
EDIT.COMvà trình cài đặt MS-DOS cũng dùng nền xanh lamThực tế, xanh lam, tức màu CGA số 1, là màu nền rất phổ biến trong nhiều công cụ
Trong những thứ như Turbo Pascal, Turbo C, chủ đề màu chữ trắng trên nền xanh lam rất thường gặp, còn Borland dBase thì pha trộn nền xanh lam và xanh lam ngả lục ở nhiều màn hình
Vì số màu có thể dùng khi đó còn hạn chế, xanh lam là một trong số ít màu nền dễ chịu cho mắt
Tôi nhớ Windows 3.1, 95, 98, v.v. cũng dùng màu xanh lam làm màu màn hình trong biểu tượng đại diện cho máy tính
Trong biểu tượng có hai máy tính như “Network Neighborhood”, một màn hình có màu xanh lam còn màn hình kia có màu xanh lam ngả lục
Tôi đã phải phóng to để kiểm tra xem có phải cùng một biểu tượng không
Gợi lại nhiều kỷ niệm. Khoảng năm 2000, tôi đã fork PuTTY và tạo một phiên bản tên là “RedBrick PuTTy”, rồi thêm một nút để SSH vào redbrick.dcu.ie chỉ bằng một lần bấm
redbrick.dcu.ie là terminal server của Dublin City University Networking Society, còn hồi đó tôi là quản trị hệ thống hay webmaster thì không nhớ nữa
Nhưng tôi nhớ là đã tự tay chỉnh logo để nhét vào một viên gạch đỏ
Có thể nhìn thấy lờ mờ trong hình này: https://wiki.redbrick.dcu.ie/images/b/b8/Putty_configuration...
Nhờ cái fork nhỏ bé ngớ ngẩn này mà tỷ lệ dùng SSH thay vì Telnet đã tăng từ khoảng 5% lên gần như 100%
Cảm ơn Simon vì đã dùng một giấy phép cho phép những việc như vậy
Đoạn “tôi đã viết code để vẽ mọi thành phần của từng ảnh icon theo cách lập trình” là một ví dụ thể hiện rất rõ cách Simon tiếp cận vấn đề
Trong những năm 2000, tôi đã dành khá nhiều thời gian với Simon và học được rất nhiều thứ về đủ loại chủ đề; cách làm này thật sự rất đúng chất ông ấy
Tôi nhớ chuyện khi đó trên Windows, kích thước hiển thị icon mặc định chuyển từ 32×32 sang 48×48, còn MacOS thì muốn icon 128×128 trong Dock
Một trong những lý do hời hợt nhất nhưng đồng thời cũng mạnh mẽ nhất khiến tôi chuyển từ Windows sang Mac OS X thời đó chính là icon 128×128
Các icon đóng vai trò điểm vào của ứng dụng trong Finder hay Dock trông hấp dẫn hơn nhiều và theo bản năng thì đẹp hơn hẳn
Đặc biệt, icon của ứng dụng Windows thường dùng ít màu hơn so với ứng dụng Mac
Tất nhiên có nhiều lý do để chuyển đổi, nhưng khi lần đầu nhìn thấy desktop của Mac, các icon đã gây ấn tượng đủ mạnh để khiến tôi muốn tìm hiểu sâu hơn
Có vẻ gần như chẳng ai bận tâm tạo icon cho tử tế
Có trường hợp kích thước mặc định đã đổi sang 48×48 nhưng icon không được cập nhật nên bị phóng to đến mờ nhòe; cũng có trường hợp có đủ mọi kích thước, nhưng chỉ đơn giản thu nhỏ một ảnh chỉ đẹp ở kích thước lớn
Kết quả là ở kích thước icon thông thường, mọi chi tiết bị bết lại thành một mớ hỗn độn
Vì không muốn nhìn những icon xấu xí trên desktop hay taskbar, tôi thường tự tạo icon tùy chỉnh rồi dùng trình chỉnh sửa tài nguyên để thay icon bên trong file thực thi
Có thứ gì đó bị mất đi khi chuyển từ bitmap sang SVG
Cảm giác hạt thô của bitmap có một sức hấp dẫn rất riêng
Không thể cứ chuyển 1:1 rồi kỳ vọng kết quả tốt được. Hơn nữa thực tế cũng không phải 1:1, và trong SVG các đường viền đã mảnh hơn nhiều
Ở hình độ phân giải thấp, trí tưởng tượng sẽ lấp đầy các khoảng trống
Độ phân giải càng cao thì chất lượng cần thiết cũng càng cao. Vector art theo định nghĩa là có độ phân giải vô hạn mà
Tôi tự hỏi liệu icon chiếc mũ “Agent” có được lấy cảm hứng từ Forté Agent, phần mềm Usenet mà tôi nghĩ là phổ biến nhất cho Windows thời đó, hay không
Nó dùng một mô-típ rất giống: https://archive.org/details/forte-agent-1.6
Thật hay khi được đọc trực tiếp từ người đã tạo nên lịch sử này
Ngay cả trong phiên bản hiện đại năm 2014 cũng có một thám tử kiểu phim noir ở cùng vị trí, và icon ứng dụng vẫn là một phụ nữ đội mũ: https://youtu.be/h-_UNm_gycU?t=94
Tôi không biết liên kết chính thức nào ghi lại điều này, nhưng nếu tìm hình ảnh ở https://www.google.com/search?q=spy+vs+spy&udm=2 thì sẽ thấy nhiều hình có thể là nguồn cảm hứng cho chiếc mũ này