Hình ảnh & hình ảnh · Trình chỉnh sửa hình ảnh & bản vẽ của trình duyệt
Đồ họa raster và vector: tại sao hình vẽ trên ảnh lại trở thành pixel
· Lý lịch
image-editing vải vẽ browser-processing
Hình ảnh raster là các lưới pixel; đồ họa vector là hướng dẫn để vẽ hình dạng. Bài đăng này giải thích sự khác biệt, tại sao một bức ảnh chỉ có thể là raster và tại sao bất cứ thứ gì bạn vẽ trên đó đều có cùng số phận khi xuất.
Logo bị mờ và bức ảnh không bao giờ có thể được 'vectơ hóa' - hai sự nhầm lẫn hàng ngày với một lời giải thích
Một biểu tượng mờ và một bức ảnh có chú thích thường bị đổ lỗi cho cùng một vấn đề, nhưng chúng bắt đầu từ những loại chất liệu khác nhau. Logo vector là một tập hợp các hướng dẫn về đường dẫn, nét và tô; một bức ảnh là một trường hữu hạn của màu được lấy mẫu. Trình chỉnh sửa mở ảnh dưới dạng bitmap raster có kích thước canvas, vì vậy thế giới làm việc của nó đã là một lưới các pixel trước khi vẽ một đường thẳng hoặc hình chữ nhật.
Vẽ một hộp trên ảnh, xuất nó và phóng to các cạnh. Kết quả là một hình ảnh raster có chú thích chiếm các pixel dọc theo bức ảnh. So sánh tệp đó với SVG ban đầu ở kích thước hiển thị lớn hơn và bạn sẽ thấy rõ sự khác biệt: việc phóng to bản xuất sẽ lấy mẫu lại lưới của nó, trong khi việc phóng to SVG sẽ tính toán lại đường dẫn của nó. Trình soạn thảo này không biến đối tượng đầu tiên thành đối tượng thứ hai.
Raster: một lưới các ô màu — cách PNG, JPEG và WebP lưu trữ ảnh và lý do tăng tỷ lệ lại phát minh ra pixel
Hình ảnh raster ghi lại màu sắc tại các vị trí trong lưới. PNG, JPEG và WebP khác nhau về mã hóa và nén nhưng ảnh được xuất vẫn phân giải thành pixel khi hiển thị. Ranh giới một pixel, đường cong khử răng cưa và chú thích nhỏ đều là các mẫu hữu hạn trong hình ảnh cuối cùng. Việc mở rộng tệp lên trên yêu cầu quy trình nội suy để ước tính các mẫu bổ sung; nó không phục hồi hướng dẫn vẽ ban đầu.
Hạn chế đó rất quan trọng khi chú thích phải giữ được độ sắc nét ở nhiều kích cỡ. Chú thích ảnh chụp màn hình dành cho một màn hình cố định có thể chính xác như xuất raster, trong khi nhãn hiệu dành cho biển hiệu, bản in và nhiều giao diện thường vẫn có sẵn dưới dạng nội dung vectơ. Sử dụng trình chỉnh sửa cho hình ảnh tổng hợp chứ không phải để thay thế cho tác phẩm nghệ thuật nguồn phải chia tỷ lệ độc lập.
Vectơ: các hình dạng được mô tả bằng toán học — đường dẫn, nét và phần tô ở các định dạng như SVG và lý do chúng chia tỷ lệ mà không bị mất
Các vectơ mô tả hình học thay vì lưu trữ từng pixel được hiển thị. Đường dẫn SVG có thể chỉ định đường cong, chiều rộng nét, phần tô và biến đổi; sau đó trình kết xuất sẽ tính toán các pixel phù hợp với kích thước hiện tại. Đó là lý do tại sao cùng một dấu hiệu đơn giản có thể vẫn rõ ràng khi được đặt ở nhiều chiều khác nhau. Lời giải thích là nền tảng ở cấp độ định dạng, không phải là khẳng định rằng trình soạn thảo này phát ra hoặc lưu giữ các hướng dẫn đó.
Trình chỉnh sửa trình duyệt tạm thời sử dụng thông tin hình học cho các cử chỉ đường và hình dạng, cho phép bản xem trước đi theo con trỏ trước khi thả ra. Sau khi cử chỉ kết thúc, kết quả sẽ được vẽ thành một lớp raster. Xuất các lớp tổng hợp hiển thị và gọi canvas.toBlob cho PNG, JPEG hoặc WebP. Không có tài liệu dự án vectơ hoặc xuất SVG trong đường dẫn này, do đó hình học không tồn tại dưới dạng đối tượng độc lập.
Tại sao bản chất các bức ảnh là raster — cảm biến chụp các mẫu chứ không phải hình dạng và không có thay đổi chuyển đổi nào
Ảnh là vật liệu raster vì máy ảnh ghi lại các mẫu ánh sáng qua cảm biến và lưu trữ các mẫu đó dưới dạng dữ liệu hình ảnh. Việc mô tả một bức ảnh dưới dạng vectơ sẽ yêu cầu một cách giải thích thay thế kết cấu, độ nhiễu, bóng và chi tiết không đều bằng các hình dạng được phát minh. Việc nâng cấp hoặc xuất nó theo cách khác có thể thay đổi lưới, nhưng không thao tác nào thay đổi loại thông tin mà bản chụp ban đầu chứa.
Sự khác biệt này cũng giải thích tại sao một bức ảnh và một logo có thể cùng tồn tại trong một lần chỉnh sửa mà không trở thành một thứ giống nhau. Logo có thể bắt đầu dưới dạng vectơ ở nơi khác, nhưng sau khi được vẽ lên ảnh raster trong trình chỉnh sửa này, kết quả tổng hợp là lưới pixel. Bảo quản riêng logo gốc khi có vấn đề cần sử dụng lại trong tương lai và coi việc xuất trình duyệt là hình ảnh hoàn chỉnh cho mục đích hiện tại của nó.
Vẽ trên raster: công việc của trình chỉnh sửa - chú thích có thể là hình dạng trong khi bạn chỉnh sửa, nhưng hình ảnh được xuất là một lưới duy nhất
Trong khi thực hiện cử chỉ, các công cụ đường và hình dạng có thể hoạt động giống như các hướng dẫn hình học nhỏ gọn: người chỉnh sửa biết điểm bắt đầu, điểm kết thúc, đường viền và bản xem trước hiện tại. Khi phát hành, những hướng dẫn đó được hiển thị thành một lớp raster. Các dấu cọ được vẽ raster khi chúng được tạo ra và văn bản được raster ở vị trí thay vì được giữ lại như một đối tượng văn bản có thể di chuyển. Do đó, phiên này mang lại sự thuận tiện mà không hứa hẹn khả năng chỉnh sửa ở cấp đối tượng sau này.
Xuất làm cho ranh giới rõ ràng. Các lớp raster hiển thị được tổng hợp thành một khung vẽ, sau đó được mã hóa thành PNG, JPEG hoặc WebP thông qua trình duyệt. Việc mở lại tệp đó sẽ cung cấp cho bạn bức ảnh và các dấu hiệu như các pixel thông thường; nó không cung cấp cho người nhận một hình chữ nhật có thể chọn, đường dẫn có thể sử dụng lại hoặc chú thích có thể chỉnh sửa. Giữ lại phiên hoặc nội dung nguồn được xếp lớp nếu bạn có thể cần thay đổi chú thích thay vì chỉ chia sẻ ảnh.
Chọn loại phù hợp cho công việc - khi nào cần yêu cầu logo vector và khi nào xuất raster chính xác là điều bạn muốn
Chọn nội dung vectơ khi bản thân nhãn hiệu phải di chuyển: logo cần có nhiều kích thước, sơ đồ có thể được sửa đổi hoặc biểu tượng phải được đặt trên nhiều nền. Chọn xuất raster khi mục tiêu là ảnh chụp màn hình sẵn sàng chia sẻ, bằng chứng có chú thích hoặc ảnh có ghi chú hiển thị. Quyết định đúng đắn đến từ lần sử dụng tiếp theo chứ không phải từ niềm tin rằng một định dạng luôn ưu việt hơn.
Trình chỉnh sửa hình ảnh và bản vẽ của trình duyệt phù hợp với danh mục thứ hai. Nó có thể đặt các dấu văn bản cọ, đường thẳng, hình chữ nhật, hình elip và raster trên ảnh, sau đó xuất tổng hợp dưới dạng tệp raster. Nó không thể xuất SVG hoặc bảo toàn mô hình đối tượng vectơ. Nếu khách hàng yêu cầu biểu trưng làm nội dung độc lập, hãy quay lại nguồn vectơ ban đầu thay vì trích xuất phiên bản lớn hơn từ các pixel đã chỉnh sửa.
Bài học rút ra: biết bạn đang cầm cái nào - cách Trình chỉnh sửa hình ảnh & bản vẽ của trình duyệt chỉnh sửa hình ảnh raster và xuất hình ảnh raster theo thiết kế
Mô hình tinh thần đáng tin cậy rất đơn giản: người soạn thảo có thể sử dụng hình học để mô tả một cử chỉ, nhưng tài liệu và việc xuất nó là hình ảnh raster. Mỗi lớp ảnh và trình chỉnh sửa được mở đều có lưới pixel hữu hạn. Việc mở rộng lưới đó sẽ lấy mẫu lại thông tin hiện có và xuất các lớp tổng hợp hiển thị sang một raster khác. Không có bước nào trong quy trình làm việc này tạo đường dẫn vectơ có thể sử dụng lại từ một dòng đã trở thành pixel.
Kiểm tra loại tệp và người nhận dự định trước khi bạn vẽ. Nếu người nhận cần xem một bức ảnh đã hoàn thiện, hãy xuất raster và kiểm tra các cạnh của nó ở kích thước hiển thị thực tế. Nếu người nhận cần chỉnh sửa nhãn hiệu, đổi màu logo hoặc chia tỷ lệ tác phẩm nghệ thuật nhiều lần, hãy cung cấp vectơ hoặc nguồn phân lớp thích hợp. Sự khác biệt đó ngăn cản việc xuất khẩu hợp lệ về mặt kỹ thuật khỏi bị nhầm lẫn với một loại sản phẩm có thể giao được khác.