PSD sang SVG không mất lớp: những gì được giữ lại
PSD có thể chứa lớp hình, văn bản còn chỉnh sửa được, mặt nạ và pixel, nhưng SVG không giữ tất cả. Tìm hiểu phần nào nên xuất, gộp phẳng hoặc đồ trước.
Trên trang này
Bạn không thể chuyển mọi lớp Photoshop thành lớp SVG tương đương. PSD có thể kết hợp lớp hình, văn bản còn chỉnh sửa được, mặt nạ, hiệu ứng, Smart Object và pixel thông thường. SVG biểu diễn được đường dẫn, chữ, nhóm và ảnh, nhưng các đối tượng đó không ánh xạ gọn sang mô hình tài liệu Photoshop. Quy trình an toàn nhất là giữ nội dung vector bằng cách xuất trực tiếp nội dung vector, rồi chỉ đồ tác phẩm raster không có nguồn vector tái sử dụng được.
Quyết định nhanh
- Nếu PSD đã chứa đường dẫn hình sạch, giữ hoặc chuyển chúng sang trình biên tập vector.
- Chỉ giữ chữ có thể chỉnh sửa ở dạng chữ khi nơi nhận có phông và xử lý chữ SVG đáng tin cậy. Nếu không, chuyển bản bàn giao thành đường dẫn.
- Xem mặt nạ, hiệu ứng, Smart Object và lớp pixel là diện mạo nhìn thấy, không phải cấu trúc lớp dễ trao đổi.
- Nếu chỉ cần tác phẩm gộp phẳng thành hình có thể chỉnh sửa, xem lại ảnh tổng hợp đã lưu rồi đồ.
- Mở SVG cuối và kiểm tra đối tượng. Phần mở rộng
.svgkhông chứng minh lớp được giữ hoặc pixel đã thành đường dẫn.
Lớp PSD không phải lớp SVG
Bảng Layers của Photoshop mô tả cách chỉnh tài liệu. SVG mô tả trình kết xuất vẽ gì. Đó là những công việc khác nhau.
| Nội dung PSD | Quy trình tốt nhất | Điều có thể mong đợi trong SVG |
|---|---|---|
| Lớp hình hoặc đường dẫn Photoshop | Giữ hoặc chuyển trực tiếp ở dạng vector | Đường dẫn chỉnh sửa được nếu xuất giữ hình học vector |
| Văn bản còn chỉnh sửa được | Giữ ở dạng văn bản hoặc chuyển bản sao thành đường dẫn | Chữ chỉnh sửa được cần phông; đường dẫn giữ diện mạo nhưng mất chỉnh chữ |
| Lớp pixel | Chỉ đồ nếu hình vector hữu ích | Đường dẫn mới xấp xỉ pixel nhìn thấy |
| Mặt nạ lớp hoặc mặt nạ cắt | Chủ động dựng lại hoặc gộp phẳng | Vùng cắt nhìn thấy có thể giữ, nhưng thiết lập chỉnh Photoshop không giữ |
| Smart Object | Mở nguồn gốc trước | Chỉ kết quả đã đặt có thể chỉ cho thấy pixel kết xuất |
| Hiệu ứng lớp, kết cấu hoặc bóng mềm | Giữ raster hoặc đơn giản hóa | Hiệu ứng mượt thường thành pixel hoặc bộ hình lớn |
Quy trình Image Assets hiện hành của Adobe có thể tạo tài nguyên SVG từ lớp hoặc nhóm lớp có tên. Cùng tài liệu nói tài nguyên nhóm lớp được gộp phẳng, ngay cả khi nhóm chứa hình và văn bản còn chỉnh sửa được. Nói cách khác, chọn SVG làm đầu ra không biến cây cấu trúc Photoshop thành cây SVG tương đương.
Kiểm kê tệp trước khi chuyển
Nhân đôi PSD trước khi thay đổi gì. Sau đó kiểm tra bảng Layers, Paths, Properties và Smart Objects.
- Ẩn lớp pixel. Nếu tác phẩm hữu ích vẫn còn, bạn có thể đã có hình vector đáng giữ.
- Chọn từng lớp chữ. Ghi họ phông và độ đậm trước khi chuyển đường dẫn hoặc di chuyển chữ.
- Mở Smart Object. Tệp Illustrator liên kết hoặc nguồn vector khác tốt hơn đồ bản xem trước kết xuất của nó.
- Bật/tắt mặt nạ và hiệu ứng. Quyết định cấu trúc chỉnh sửa có quan trọng hay chỉ diện mạo cuối.
- Kiểm tra ảnh tổng hợp đã lưu. Nếu tệp mở khác trên máy khác, lưu lại bản đã xác minh trước khi dùng quy trình gộp phẳng.
Adobe cũng ghi nhận xuất lớp đã chọn thành tệp riêng. Xuất riêng có thể giữ ranh giới hữu ích giữa các tài nguyên, nhưng vẫn không tạo một SVG hoạt động như chồng lớp PSD gốc.
Quy trình 1: giữ nội dung vector
Dùng cách này cho lớp hình, đường dẫn bút, văn bản còn chỉnh sửa được đơn giản và Smart Object có nguồn vector gốc vẫn còn.
Di chuyển hoặc xuất từng tài nguyên có ý nghĩa rồi mở trong Illustrator, Inkscape hoặc trình biên tập SVG khác. Kiểm tra kết quả có đường dẫn, nhóm thay vì một ảnh chữ nhật. Nếu chữ phải còn chỉnh sửa được, mở SVG trên máy khác không có tài liệu Photoshop của bạn và xác nhận phông dự định được tải. Với logo và tệp sản xuất, giữ bản gốc văn bản còn chỉnh sửa được và tạo bản bàn giao có đường dẫn.
Đừng gộp phẳng nguồn vector tốt chỉ để chạy qua công cụ đồ. Đồ ảnh vẽ lại diện mạo đã kết xuất, nên có thể thêm nút, đổi đường cong và chuyển chữ thành đường dẫn xấp xỉ. Hình học gốc là điểm bắt đầu sạch hơn.
Quy trình 2: gộp tác phẩm nhìn thấy rồi đồ
Dùng đồ khi thiết kế hữu ích chỉ tồn tại dưới dạng pixel hoặc diện mạo nhìn thấy đã lưu của PSD là nguồn tốt nhất còn lại. Logo phẳng, huy hiệu, biểu tượng, chữ và minh họa có ranh giới màu rõ thường phù hợp. Ảnh chụp, chuyển sắc tinh tế, kết cấu cọ và bóng mềm thường không phù hợp.
Trước khi đồ:
- Ẩn mọi thứ không nên xuất hiện trong vector.
- Đặt tác phẩm trên nền hoặc độ trong suốt cần cho bàn giao.
- Kiểm tra lỗ chữ, lỗ và chữ nhỏ ở kích thước đầu ra dự định.
- Lưu bản tương thích hoặc xuất PNG chất lượng cao khi PSD không có ảnh tổng hợp đáng tin cậy.
- Giữ PSD gốc. Kết quả đồ lại là tài nguyên bàn giao mới, không thay thế tài liệu.
SVG được phép chứa ảnh raster nhúng theo mô hình nội dung nhúng SVG 2. Vì vậy công cụ chỉ chuyển định dạng có thể đặt pixel PSD gộp phẳng vào SVG mà không đồ. Phóng lớn và kiểm tra loại đối tượng là cách phát hiện kết quả vector giả đó.
Quy trình này trong PerfectVector
PerfectVector mở PSD hoặc PSB được hỗ trợ thông qua ảnh tương thích tổng hợp đã lưu. Trình duyệt chuẩn bị ảnh nhìn thấy đó cục bộ và yêu cầu bạn xem lại trước khi vector hóa. Nó không tải tài liệu Photoshop gốc lên hoặc tuyên bố dựng lại lớp, mặt nạ, văn bản còn chỉnh sửa được, hiệu ứng, đường dẫn, bảng vẽ hay Smart Object. Quy trình Photoshop sang SVG dựng lại pixel đã chuẩn bị thành đường dẫn SVG.
Điều đó khiến đây là quy trình đồ, không phải giữ lớp. Dùng khi ảnh tổng hợp đã lưu có diện mạo đúng và hình học đường dẫn chỉnh sửa được hữu ích hơn cấu trúc Photoshop gốc. Sau chuyển đổi, kiểm tra hình bóng, vùng màu, hình chữ, khoảng âm và cấu trúc nút. Nếu PSD đã chứa nguồn vector sạch, hãy chuyển trực tiếp nguồn đó.
Kiểm tra những gì được giữ trong SVG
Mở lại SVG tải xuống trong trình biên tập vector thay vì tin bản xem trước đầu tiên.
- Chọn một vùng màu. Nó nên hoạt động như đường dẫn hoặc hình, không phải phần của một ảnh chữ nhật.
- Mở bảng Layers hoặc Objects. Tìm cấu trúc nhóm dễ quản lý thay vì mong có tên lớp PSD.
- Phóng vào đường cong và lỗ chữ. Kiểm tra đoạn phẳng, chỗ đóng ngoài ý muốn và mép nhiễu.
- Đổi một màu tô. Đường dẫn thực sự nên đổi màu mà không làm đổi vùng gần đó.
- Tìm phần tử
<image>trong nguồn khi vùng nào vẫn vỡ hạt. - Nhập SVG vào nơi nhận thực tế và kiểm tra kích thước, phông, mặt nạ, hiệu ứng ở đó.
Nếu mọi phần nhìn thấy hoạt động như một đối tượng, dùng chẩn đoán bỏ nhóm SVG trước khi áp dụng thao tác đường dẫn gây thay đổi mạnh. Tệp có thể là một đường dẫn phức hợp hoặc ảnh nhúng thay vì nhóm.
Khi nào PSD nên giữ là PSD
Giữ Photoshop làm bản gốc khi vẫn cần chữ chỉnh sửa được, lớp điều chỉnh, mặt nạ, Smart Object, bảng vẽ, kết cấu ảnh chụp hoặc hiệu ứng. SVG là định dạng bàn giao mạnh cho hình đồ họa có thể co giãn, nhưng không thay thế tài liệu Photoshop.
Bạn có thể kết thúc với hai tệp: PSD là nguồn có thể chỉnh sửa và SVG là tài nguyên sản xuất. Đó là bàn giao hợp lý. Hai tệp giữ những dạng khả năng chỉnh sửa khác nhau.
Câu hỏi thường gặp
PSD có thể chuyển thành SVG với mọi lớp nguyên vẹn không? Không đáng tin cậy. Một số nội dung hình và chữ chuyển được vào SVG, nhưng mặt nạ, hiệu ứng, Smart Object, lớp điều chỉnh, tên lớp và lớp pixel Photoshop không có tương đương SVG một-một. Giữ đối tượng vector gốc trước và xem phần còn lại là diện mạo kết xuất.
Vì sao kết quả PSD sang SVG chỉ có một lớp? Công cụ có lẽ dùng ảnh tổng hợp gộp phẳng hoặc nhúng một ảnh raster. Một đối tượng SVG cũng có thể là đường dẫn phức hợp hoặc nhóm, nên kiểm tra loại đối tượng trước khi cho rằng tệp vẫn là raster.
Lưu tệp Photoshop thành SVG có vector hóa pixel không? Không. SVG có thể chứa ảnh raster. Xuất định dạng có thể đặt pixel trong vỏ SVG mà không đồ. Kiểm tra tác phẩm chọn được như đường dẫn và vẫn chỉnh sửa được ở cấp đối tượng.
Tôi có nên chuyển chữ thành đường dẫn trước khi xuất SVG từ Photoshop không? Chuyển bản bàn giao thành đường dẫn khi diện mạo phải cố định và không cần chỉnh chữ nữa. Giữ bản gốc văn bản còn chỉnh sửa được nếu nội dung hoặc bản địa hóa có thể thay đổi. Chuyển đường dẫn không giữ chỉnh phông; nó biến chữ thành đường dẫn.
PerfectVector có thể khôi phục lớp Photoshop từ PSD không? Không. PerfectVector dùng ảnh tương thích tổng hợp đã lưu của tệp được hỗ trợ và đồ ảnh nhìn thấy thành đường dẫn. Nó không dựng lại chồng lớp Photoshop gốc hoặc các tính năng chỉnh sửa trực tiếp của tài liệu.
Nguồn tham khảo
- Adobe — Tạo tài nguyên ảnh từ lớp — Ghi nhận tạo tài nguyên SVG và gộp phẳng tài nguyên nhóm lớp.
- Adobe — Xuất lớp thành tệp — Ghi nhận hành vi xuất theo lớp hiện hành.
- Adobe — Vẽ hình và đường dẫn trong Photoshop — Định nghĩa công cụ hình, bút và đường dẫn của Photoshop.
- W3C — Nội dung nhúng SVG — Giải thích vì sao SVG vẫn có thể chứa dữ liệu ảnh raster.
- PerfectVector — Photoshop sang SVG — Mô tả quy trình ảnh tổng hợp đã lưu được hỗ trợ và giới hạn khôi phục lớp.
Nếu ảnh tổng hợp đã lưu là nguồn bạn cần, hãy xem lại trong trình chuyển Photoshop sang SVG, vector hóa rồi mở lại SVG và xác nhận các vùng quan trọng là đường dẫn.
Thêm từ blog
Bitmap sang vector trong Moho: đồ lại hay giữ ảnh raster?
Chọn đồ lại bằng công cụ tích hợp, ảnh raster có lớp hoặc nhập SVG trong Moho. Kiểm tra vùng màu, lỗ và các phần chuyển động trước khi dựng rig hoạt hình.
PNG sang Android VectorDrawable: danh sách kiểm tra nhập
Chuyển PNG thành đường dẫn SVG thực, nhập thành XML Android VectorDrawable và kiểm tra vùng tô, chuyển sắc, mặt nạ, viewport cùng độ phức tạp đường dẫn.