Adobe Illustrator CC cho LuckyTemplates Cheat Sheet

Nhiều thay đổi mạnh mẽ nhất về cách Illustrator đang được sử dụng đang diễn ra trong lĩnh vực dịch hình ảnh vectơ sang web và định dạng SVG được đánh giá thấp là liên kết quan trọng trong quá trình đó. Các tệp SVG duy trì các tính năng khả năng mở rộng đáng quý của tác phẩm nghệ thuật vectơ và được hỗ trợ gần như phổ biến trong các trang web và môi trường phát triển web. Khi bạn chuẩn bị tác phẩm nghệ thuật vector cho web, điều quan trọng là tránh các hiệu ứng tiêu chuẩn của Illustrator và thay vào đó, sử dụng bộ lọc SVG.

Illustrator đi kèm với một bộ bộ lọc SVG phong phú nhưng tối giản, nhưng đây là một số mẹo về cách tìm và thêm bộ lọc SVG cũng như tài nguyên để tạo bộ lọc SVG của riêng bạn. Đối với những người làm việc với các nhà phát triển web và ứng dụng, hãy làm cho cuộc sống của họ dễ dàng hơn và hiệu quả hơn bằng cách xem bảng lừa đảo để cung cấp mã SVG.

Cách áp dụng bộ lọc SVG trong Illustrator

Khi bạn tạo tệp SVG cho màn hình trong Illustrator và bạn muốn áp dụng các hiệu ứng (như bóng đổ), bạn nên áp dụng các hiệu ứng đó làm bộ lọc SVG. Bằng cách đó, các tệp SVG của bạn giữ được khả năng mở rộng vô hạn mà không bị biến dạng.

Các bước sau sẽ hướng dẫn bạn cách áp dụng bộ lọc SVG cho đồ họa trong Illustrator:

Chọn (các) đối tượng mà bạn đang áp dụng bộ lọc.

Chọn Hiệu ứng → Bộ lọc SVG.

Chọn một bộ lọc từ danh sách xuất hiện.
Hầu hết các bộ lọc đều có tên mô tả. Ví dụ, những cái có bóng trong tên là bóng đổ, những cái có gaussian trong tên là làm mờ gaussian. Quy trình làm việc hơi kỳ quặc và vòng vo, nhưng trước tiên bạn cần chọn một bộ lọc để truy cập vào tất cả các tùy chọn có sẵn để áp dụng một bộ lọc.

Để thay đổi bộ lọc đã chọn:

• Giữ đối tượng mà bộ lọc được áp dụng đã chọn và mở bảng Hình thức bằng cách chọn Cửa sổ → Hình thức.
• Trong bảng Appearance, nhấp vào bộ lọc SVG xuất hiện trong phần Fill của bảng. Bảng Áp dụng Bộ lọc SVG sẽ mở ra.
• Trong bảng Áp dụng Bộ lọc SVG, hãy thay đổi bộ lọc được áp dụng.
• Để xem bộ lọc sẽ trông như thế nào, hãy chọn hộp kiểm Xem trước, như thể hiện trong hình.
  

Sau khi bạn xử lý bộ lọc, hãy nhấp vào OK trong bảng Áp dụng Bộ lọc SVG.

Cách thêm bộ lọc SVG vào Illustrator

Bộ lọc SVG của Illustrator rất tối giản, nhưng bạn có thể nâng cao nó bằng cách thiết kế bộ lọc của riêng mình hoặc tải xuống bộ lọc SVG được đóng gói sẵn từ các nguồn trực tuyến. Thiết kế các bộ lọc liên quan đến việc viết mã, nhưng nó có thể làm được nếu bạn cảm thấy thoải mái với HTML. Tôi đề xuất hướng dẫn tại w3Schools để tạo bộ lọc SVG. Hoặc bạn có thể mua bộ lọc trực tuyến và thậm chí tìm thấy một số bộ lọc SVG miễn phí đẹp mắt tại Createo .

Sau khi bạn mua hoặc tạo bộ lọc SVG của riêng mình, đây là cách bạn cài đặt chúng trong Illustrator:

Chọn Hiệu ứng → Bộ lọc SVG → Nhập Bộ lọc SVG.

Trong hộp thoại mở ra, điều hướng đến và nhấp đúp vào tệp bộ lọc SVG bạn đã tạo hoặc tải xuống miễn phí.
Tệp bạn đang tìm phải là tệp SVG (nhiều bộ lọc được gói trong một tệp SVG duy nhất).
Các bộ lọc mới của bạn hiện đã có trong menu con Bộ lọc SVG.

Chọn Hiệu ứng → Bộ lọc SVG để áp dụng các bộ lọc mới của bạn cho các đối tượng đã chọn.

Cách chuyển mã SVG từ Illustrator cho nhà phát triển

Thường thì đồ họa SVG bạn tạo trong Illustrator được giao cho nhà thiết kế trò chơi, họa sĩ hoạt hình, đồ họa thông tin hoặc các đầu ra khác, nơi các nhà phát triển sẽ làm việc với mã đằng sau đồ họa SVG. Là một người vẽ tranh minh họa, bạn không cần biết cách tạo mã đó, nhưng bạn có thể cần biết cách lấy nó và chuyển nó cho một nhà phát triển. Đây là cách thực hiện.

Đường dẫn để xuất đồ họa SVG của bạn dưới dạng mã chạy qua các chức năng Lưu của Illustrator. Menu Lưu có các tùy chọn (không dễ tìm) xuất tệp của bạn dưới dạng mã SVG. Bạn có thể sẽ muốn liên lạc trong thời gian thực với nhà phát triển màn hình của mình khi bạn tạo mã đó vì một số tùy chọn được xác định bởi cách mã đó sẽ được sử dụng:

Chọn Tệp → Lưu (hoặc Lưu dưới dạng nếu bạn đang lưu một tệp).

Trong hộp thoại mở ra, chọn SVG từ menu Định dạng.
Bỏ qua tùy chọn tệp SVGZ dành cho tệp nén không hiển thị trong trình duyệt.

Nhấp vào Lưu để mở hộp thoại Tùy chọn SVG.

Luôn chọn SVG 1.1 trong menu thả xuống Hồ sơ SVG. Các phiên bản khác đã lỗi thời.

Nếu bạn đã nhúng hoặc liên kết hình ảnh trong tệp SVG của mình, hãy chọn Nhúng từ menu thả xuống Vị trí hình ảnh. Tuy nhiên, hãy hỏi ý kiến ​​nhà phát triển web của bạn về lựa chọn này trước.

Chọn Bảo tồn khả năng chỉnh sửa Illustrator để làm cho tệp có thể chỉnh sửa trong Illustrator.
Lựa chọn này làm tăng kích thước tệp nhưng cho phép bạn làm việc với một tệp SVG duy nhất mà bạn có thể chỉnh sửa, cập nhật và chia sẻ với các nhà phát triển web.

Nếu nút Tùy chọn khác được hiển thị, hãy nhấp vào nút đó để truy cập các tùy chọn nâng cao. và đưa ra lựa chọn của bạn.
Về cơ bản, các tùy chọn khác nhau tạo CSS với tệp của bạn để xác định thuộc tính theo những cách sau. Tham khảo ý kiến ​​của đồng nghiệp nhà phát triển web của bạn về cách xác định các thuộc tính CSS này:

• Bản trình bày Thuộc tính nhúng kiểu dáng trong mã SVG. Tùy chọn này là đơn giản nhất và là mặc định. Sử dụng điều này nếu bạn không cộng tác với nhà phát triển web hoặc ứng dụng.
• Hai tùy chọn Thuộc tính kiểu dựa vào CSS để quản lý kiểu nếu có thể.
• Style Elements tạo các bộ chọn kiểu lớp để tạo kiểu.
• Các Include chưa sử dụng Styles tùy chọn tạo ra mã mà có thể tăng kích thước tập tin SVG mà không cần thêm giá trị chức năng.

Bỏ chọn năm hộp kiểm ở cuối hộp thoại Tùy chọn SVG, trừ khi đối tác nhà phát triển của bạn yêu cầu bạn chọn chúng.
Các tùy chọn này dành cho các ứng dụng chuyên biệt cao.

Để tạo Mã SVG dựa trên các lựa chọn bạn thực hiện trong hộp thoại SVG Option, hãy nhấp vào nút Mã SVG .
Mã SVG đã tạo được hiển thị trong trình soạn thảo văn bản của hệ điều hành của bạn. Bạn có thể lưu mã đó dưới dạng tệp văn bản bằng trình soạn thảo văn bản của hệ điều hành và giao tệp cho nhà phát triển.

Sau khi bạn đã tạo mã, hãy nhấp vào OK để lưu tệp của bạn.
Bạn có thể mở lại và chỉnh sửa tệp này trong Illustrator.