Đồ họa SVG từ Adobe Illustrator CC hiếm khi được giao cho các nhà thiết kế kỹ thuật số có nền. Thông thường, đồ họa nổi trên bất kỳ nền nào tồn tại trong trang web, ứng dụng, hoạt ảnh hoặc ngữ cảnh tương tác.
Trước khi thảo luận về những gì liên quan đến việc loại bỏ nền đằng sau tác phẩm nghệ thuật SVG, hãy tập trung vào việc áp dụng tính minh bạch cho đồ họa SVG. Bạn cần xác định độ mờ của tác phẩm nghệ thuật bằng bảng điều khiển Độ trong suốt. Ví dụ: độ trong suốt 50 phần trăm đã được áp dụng cho hình màu vàng trong hình và bạn có thể thấy độ trong suốt có hiệu lực. Và vâng, hình ảnh đó là tệp SVG, với tất cả các tính năng nhẹ, tải nhanh và có thể mở rộng vô hạn được tích hợp trong SVG.
Hình SVG nửa mờ trên nền màu.
Các nhà thiết kế đã quen với việc suy nghĩ về hình nền được làm trong suốt hoặc vẫn có thể nhìn thấy được. Chúng tôi nghĩ về việc loại bỏ một nền. Hình ảnh PNG và hình ảnh GIF hoạt động như vậy — bạn có thể tạo bằng nền hoặc bạn chọn nền trong suốt trong một chương trình như Illustrator hoặc Photoshop để loại bỏ nền đó.
Với GIF và PNG, bạn có thể có một màu trong suốt cho phép màu nền hoặc hình ảnh hiển thị trong các trang web. Nhưng logic loại bỏ nền trong tệp SVG khác với PNG và GIF. Về cơ bản, không có thứ gì gọi là đồ họa SVG có nền không trong suốt vì không có nền. Nói cách khác: theo mặc định đồ họa SVG lưu và xuất mà không có nền.
Vậy, vấn đề là gì? Chà, thật dễ dàng vô tình kết thúc với nền trong suốt khi lưu hoặc xuất tệp SVG! Hình sau có thể có nền trắng hoặc có thể có nền trong suốt. Bạn không thể biết chỉ bằng cách nhìn vào màn hình Illustrator; bạn phải chọn Chế độ xem → Hiển thị Lưới trong suốt.
Hình ảnh này có thể có nền trắng hoặc có thể không có nền.
Khi bật Transparency Grid, như hình minh họa, bạn có thể thấy con chim có một hình chữ nhật màu trắng phía sau và nền trắng đó sẽ "đi cùng" với hình ảnh nếu bạn lưu tệp dưới dạng SVG hoặc xuất tệp dưới dạng SVG.
Xem lưới trong suốt sẽ thấy một hình chữ nhật màu trắng phía sau đồ họa.
Hãy để tôi nhấn mạnh và chiếu sáng điều này từ một góc độ khác. Khi tôi xuất hình ảnh này dưới dạng SVG, hộp thoại Xuất cho màn hình, được hiển thị, không có tùy chọn để chọn màu trong suốt.
Bạn không thể chọn màu trong suốt trong SVG vì không có màu nền.
Tôi thường gặp các nhà thiết kế nhấn mạnh vào việc đặt một hình chữ nhật nền phía sau tác phẩm nghệ thuật SVG của họ để họ có thể xem đồ họa sẽ trông như thế nào khi được làm nền bằng màu trong phương tiện đích (chẳng hạn như trang web hoặc ứng dụng). Điều đó không sao, tôi cảnh báo họ, miễn là bạn nhớ xóa hình chữ nhật nền đó khi bạn lưu hoặc xuất SVG. Và trong thế giới đầy áp lực, năng suất cao, quay vòng nhanh chóng ngày nay, ai cần ghi nhớ thêm một điều nữa?
Một giải pháp tốt hơn là xác định một "lưới" trong suốt với một màu duy nhất phù hợp với môi trường mà đồ họa sẽ được đặt vào. Tại sao tôi đặt lưới trong dấu ngoặc kép? Bởi vì kỹ thuật này gian lận: Với nó, bạn xác định cả hai màu lưới là cùng một màu, mô phỏng một cách hiệu quả màu nền của trang web hoặc ứng dụng.
Để sử dụng kỹ thuật đó để tạo nền tùy chỉnh trong khi bạn phát triển tác phẩm nghệ thuật SVG, hãy làm theo các bước sau:
Chọn Tệp → Thiết lập Tài liệu.
Trong tab Chung, hãy tìm phần Tùy chọn độ trong suốt và in đè.
Những thay đổi bạn muốn được kiểm soát trong phần này của hộp thoại.
Đừng lo lắng về việc xác định kích thước lưới vì bạn đang phân phối hiệu quả với lưới.
Trong phần Lưới trong suốt của hộp thoại, bấm vào ô đầu tiên trong hai bảng màu lưới và chọn màu nền bằng cách sử dụng một trong các bảng màu khác nhau trong cửa sổ bật lên Màu hiển thị trong hình sau.
Nhân tiện, không có bảng màu nào trong số này đặc biệt thân thiện với kỹ thuật số. Không có bảng màu cho RGBA, hệ thập lục phân hoặc các định dạng màu web tiêu chuẩn khác, nhưng hộp nhỏ mắt chọn màu có thể giúp bạn có được màu nền mà bạn muốn phù hợp.
Xác định màu nền xem trước bằng Lưới độ trong suốt.
Chọn bảng thứ hai trong số hai bảng màu lưới và gán cùng màu cho bảng đó.
Hãy nhớ rằng, bạn có thể sử dụng bút kẻ mắt chọn màu để lấy màu đó.
Bấm OK trong hộp thoại Thiết lập Tài liệu.
Tất cả những gì tôi đã làm trong tập hợp các bước trước đó là xác định cách hiển thị của Lưới minh bạch khi nó được kích hoạt . Vì vậy, nếu Lưới minh bạch của bạn chưa được bật, hãy chọn Chế độ xem → Lưới minh bạch.
Trong hình này, tôi đã chọn bảng vẽ với đồ họa và tôi đang xem trước dự án với màu nền mô phỏng.
Xem trước màu nền đầu ra với Lưới minh bạch tùy chỉnh.
Khi độ trong suốt (chẳng hạn như độ mờ 50 phần trăm) hoặc các hiệu ứng trong suốt như ghi màu, làm tối hoặc nhân lên được áp dụng cho đồ họa SVG, những hiệu ứng đó vẫn giữ được khả năng mở rộng của SVG.
Hình này cho thấy cùng một đồ họa — ba hình chữ nhật màu cam bán trong suốt — được xuất dưới dạng tệp PNG (trên cùng) và SVG. Bạn có thể thấy tệp PNG giảm chất lượng như thế nào khi tôi phóng to nó trong trình duyệt. Những gì bạn không thể thấy là tệp PNG lớn gần gấp đôi SVG.
So sánh đầu ra PNG (trên cùng) với SVG khi áp dụng độ trong suốt
Dưới đây là tóm tắt về những lợi ích khi sử dụng SVG để có hiệu ứng minh bạch:
Nhân tiện, nếu bạn tò mò về mã SVG được tạo cho tập hợp các hình chữ nhật này trông như thế nào và nhà phát triển ứng dụng hoặc web dễ dàng làm việc với nó như thế nào, thì đây là mã cho hộp đầu tiên trong số ba hộp SVG , với độ mờ 60 phần trăm được áp dụng:
<= "" mã = "">
Cuối cùng, nếu bạn muốn nền SVG của mình được tô màu, điều này cũng có thể được thực hiện thông qua Thuộc tính tài liệu thực đơn. Chỉ cần nhấp vào sọc trắng ở cạnh vị trí có ghi Màu nền. Bộ chọn màu sẽ bật lên trên màn hình của bạn.
Điều quan trọng cần lưu ý là nền SVG của bạn sẽ tiếp tục trong suốt mặc dù được tô màu miễn là Cột (biểu thị độ trong suốt của màu) vẫn ở mức 0. Nếu bạn muốn tài liệu thực sự có màu nền đó (ngay cả khi xuất) thì bạn có thể đưa cột đó lên từ 0 đến 100.
Và điều đó sẽ làm được điều đó khi làm việc với hình nền trong Inkscape. Nếu bạn có bất kỳ câu hỏi nào chưa được giải quyết trong bài đăng này, chỉ cần để lại nhận xét bên dưới và tôi sẽ viết lại nếu có thể trợ giúp.
Bạn có thể sử dụng công cụ Snapshot trong Adobe Acrobat CS5 để chọn cả văn bản và hình ảnh và tạo hình ảnh của một khu vực nhất định trong tệp PDF. Kết quả thường được gọi là lấy màn hình của một phần trong tệp PDF. Kết quả là một hình ảnh và văn bản của bạn không có […]
Được thiết kế cho các nhà nghiên cứu và nhà khoa học, khả năng đo lường trong Photoshop CC khá mạnh mẽ. Bạn có thể đo bất cứ thứ gì và đếm số lượng lần trượt trong một hình ảnh kỹ thuật, có thể từ kính hiển vi hoặc kính thiên văn. Nếu bạn biết kích thước chính xác của bất kỳ phần tử nào trong hình ảnh, thì bạn có thể khám phá bất cứ điều gì […]
Khi bạn sử dụng các công cụ Liquify trong Adobe Creative Suite 5 (Adobe CS5) Illustrator, bạn có thể uốn cong các đối tượng - làm cho chúng có hình dạng gợn sóng, hình khối hoặc có gai - bằng cách tạo ra các biến dạng từ đơn giản đến phức tạp. Các công cụ Liquify có thể thực hiện tất cả các loại biến dạng sáng tạo hoặc lập dị (tùy thuộc vào cách bạn nhìn vào nó) đối với các đối tượng của bạn. Bạn […]
Khi bạn có văn bản trong dự án Adobe XD của mình, bạn có thể bắt đầu thay đổi các thuộc tính văn bản. Các thuộc tính này bao gồm Font Family, Font Size, Font Weight, Alignment, Character Spacing (kerning và theo dõi), Line Spacing (hàng đầu), Fill, Border (nét), Shadow (đổ bóng) và Background Blur. Vì vậy, chúng ta hãy xem lại cách các thuộc tính đó được áp dụng. Về khả năng đọc và phông chữ […]
Bạn có thể sử dụng InDesign để tạo và sửa đổi đồ họa mã QR. Mã QR là một dạng mã vạch có thể lưu trữ thông tin như từ, số, URL hoặc các dạng dữ liệu khác. Người dùng quét mã QR bằng máy ảnh và phần mềm của cô ấy trên một thiết bị, chẳng hạn như điện thoại thông minh và phần mềm sử dụng […]
Cũng giống như trong Adobe Illustrator, các bảng vẽ trong Photoshop cung cấp khả năng tạo các trang hoặc màn hình riêng biệt trong một tài liệu. Điều này có thể đặc biệt hữu ích nếu bạn đang xây dựng màn hình cho một ứng dụng di động hoặc tài liệu quảng cáo nhỏ. Bạn có thể coi artboard là một loại nhóm lớp đặc biệt được tạo bằng bảng điều khiển Lớp. Nó là […]
Gói văn bản trong Adobe Illustrator CC không hoàn toàn giống như gói một món quà - nó dễ dàng hơn! Bao văn bản buộc văn bản phải bao quanh một đồ họa, như thể hiện trong hình này. Tính năng này có thể thêm một chút sáng tạo cho bất kỳ tác phẩm nào. Hình ảnh buộc văn bản bao quanh nó. Đầu tiên, hãy tạo […]
Khi thiết kế trong Adobe Illustrator CC, bạn thường cần một hình dạng có kích thước chính xác (ví dụ: 2 x 3 inch). Sau khi bạn tạo một hình dạng, cách tốt nhất để thay đổi kích thước nó thành các phép đo chính xác là sử dụng bảng điều khiển Biến đổi, được hiển thị trong hình này. Chọn đối tượng rồi chọn Window → Transform thành […]
Tìm hiểu cách áp dụng độ trong suốt cho đồ họa SVG trong Illustrator. Khám phá cách xuất SVG với nền trong suốt và áp dụng hiệu ứng trong suốt.
Sau khi bạn đã nhập hình ảnh của mình vào Adobe XD, bạn không có nhiều quyền kiểm soát chỉnh sửa, nhưng bạn có thể thay đổi kích thước và xoay hình ảnh giống như với bất kỳ hình dạng nào khác. Bạn cũng có thể dễ dàng làm tròn các góc của hình ảnh đã nhập bằng các tiện ích góc. Tạo mặt nạ cho hình ảnh của bạn Bằng cách xác định một hình dạng khép kín […]
