Quick tip: Xuất biểu tượng bằng cách sử dụng slice trong Adobe Illustrator

Hôm nay, chúng ta sẽ xem xét các cách xuất các biểu tượng khác nhau bằng cách sử dụng một công cụ mà chúng ta thường e dè, nhưng sẽ đưa năng suất của bạn lên một cấp độ khác khi bạn nắm vững nó. Công cụ đó không có gì khác ngoài Slice Tool, và tin tôi đi, nếu bạn chưa bao giờ sử dụng nó trước đây, bạn sẽ muốn đọc bài viết này, vì tôi sẽ giải thích tất cả những gì cần biết về nó khi nói đến việc xuất các biểu tượng.

Cho dù bạn chọn sử dụng gói biểu tượng được tạo sẵn hay bắt đầu từ đầu, hôm nay chúng tôi sẽ hướng dẫn cho bạn một số cân nhắc chính để suy nghĩ về khi xuất tác phẩm quý giá của bạn.

Trước khi chúng ta học được tất cả các kỹ thuật, tôi muốn sử dụng một vài giây và giải thích lý do để viết bài đặc biệt này.

Vậy là, trong một hướng dẫn trước, tôi đã nói về việc sử dụng Artboards và Layers làm phương thức để xuất các biểu tượng quý giá của mình, nhưng thành thật mà nói những phương pháp này có thể làm bạn mất nhiều thời gian khi bạn có một bộ biểu tượng lớn hơn. Ý tưởng mà tôi muốn/cần giới thiệu là một quy trình phù hợp cho người mới bắt đầu mà nó dễ hiểu, giả sử rằng đó là những người đã biết cách sử dụng các công cụ cơ bản nhất của Illustrator.

Bây giờ, trong khi những phương pháp đó có thể không phải là tốt nhất về năng suất tốt nhất, nhưng chúng khá đơn giản để theo dõi và áp dụng, mang lại cho bạn kết quả chính xác như nhau.

Vì một số bạn nghĩ rằng quá trình đó quá chậm và gây khó chịu, nên tôi quyết định viết bài viết này và hướng dẫn cho bạn cách xuất gói biểu tượng nhanh nhất, sử dụng phương pháp nâng cao hơn một chút.

Vâng, tôi nói là nâng cao, nhưng thật sự nó không quá khó khi bạn thử nó một vài lần.

Điều đó có nghĩa là, hãy quay trở lại chủ đề chính của chúng ta và nói một chút về slice và cách Illustrator sử dụng chúng ra sao.

1. "Slice" là gì?

Bạn có thể nghĩ về một "Slice" như là một phần cắt ra được xác định của một phần của bản vẽ mà bạn có thể tạo ra để xuất riêng lẻ thay vì xuất toàn bộ bản vẽ đó.

Các slice ban đầu được tạo ra cho các nhà thiết kế web, nhưng cũng giống như hầu hết các công cụ của Illustrator, một trong những công cụ này nhanh chóng tìm thấy một cách sử dụng mới: xuất các biểu tượng.

2. "Slice" hoạt động như thế nào?

Nó thực sự khá đơn giản. Trước tiên, hãy nghĩ về Artboard như một mảnh giấy mà bạn đặt xuống bản vẽ của mình. Bây giờ, khi bạn tạo một "Slice", bạn đang thực sự phân định một đoạn của mảnh giấy đó, bằng cách tạo ra một bản cắt đi mà sau đó bạn có thể tự do xóa nó khỏi bố cục lớn hơn.

Tôi thích tưởng tượng rằng quá trình này tương tự như quá trình lấy dao cắt và cắt các lề của phần đó, tách nó ra khỏi mảnh giấy.

Với mỗi slice được tạo ra, Illustrator gán một con số, bắt đầu từ góc trên cùng bên trái đến ngoài cùng bên phải. Lúc đầu, bạn có thể sẽ không quan tâm quá nhiều đến hành động này, nhưng sẽ có lúc bạn sẽ đánh giá cao về nó, vì bạn sẽ hiểu rõ hơn về những gì sẽ xảy ra với bản vẽ của bạn.

3. Bạn tạo ra “slice” như thế nào?

Nếu trước đây bạn chưa từng tạo một slice, đừng lo lắng vì nó khá dễ làm. Có ba cách tạo slice mà bạn cần biết:

• sử dụng (các) đối tượng đã chọn
• sử dụng đường Guides
• sử dụng Slice Tool

3.1. Tạo slice bằng cách sử dụng (các) đối tượng đã chọn

Tùy chọn đầu tiên này thực sự dễ hiểu, vì nó cho phép bạn tạo các slice xung quanh ranh giới của một hoặc nhiều đối tượng.

Vì vậy, giả sử chúng ta có một vài biểu tượng và chúng ta muốn cắt ra biểu tượng đầu tiên.

Để làm điều đó, chúng ta sẽ chọn biểu tượng muốn cắt, và sau đó đi đến Object > Slice > Make.

Điều này sẽ ngay lập tức tách biểu tượng đó khỏi phần còn lại bằng cách tạo một đường phân cách xung quanh nó.

Mặc dù chúng ta đã tạo một slice chỉ cho một biểu tượng, nhưng Illustrator đã chia các phần còn lại của Artboard thành các slice lớn hơn, một slice cho mỗi cạnh của slice của biểu tượng. Chúng ta có một Slide lớn ở phía trên cùng, một cái hẹp hơn ở phía bên trái, một cái khá rộng ở phía bên phải và một cái còn hẹp hơn nữa ở phía dưới cùng.

Bây giờ, nếu bạn nhìn kỹ hơn vào Artboard của bạn, bạn có thể thấy rằng những slice này đã được đánh số, theo một cách khá đơn giản, từ góc trên bên trái qua góc dưới cùng bên phải. Illustrator gán các con số cho các slice của nó để cho phép bạn chọn các slice nào bạn muốn xuất, và cái nào thì không xuất. Tôi sẽ nói thêm về điều này trong quá trình xuất.

Quick tip: Như bạn có thể thấy, ranh giới slice đã tạo có dạng hình chữ nhật, vì Illustrator tạo ra sự phân định bằng cách nhìn vào tổng chiều rộng và chiều cao của biểu tượng chứ không phải hình dạng của nó. Điều này là khá dễ hiểu vì nếu bạn đang thiết kế một trang web, nó sẽ là khá khó khăn để chia nhỏ bản vẽ của bạn bằng cách sử dụng nhiều đường thẳng tự nhiên hơn , và sau đó đặt nó lại với nhau một cách hoàn hảo.

Có một vài điều mà bạn nên biết khi sử dụng phương pháp này. Nếu bạn mở trình đơn Object > Slice, bạn sẽ thấy rằng bạn có tùy chọn Make mà trước đây chúng ta đã sử dụng và tùy chọn Create from Selection một vài hàng thấp hơn. Trong khi cả hai tùy chọn này đều làm điều tương tự khi bạn chỉ có một đối tượng được chọn, nhưng chúng hoạt động hoàn toàn khác nhau khi bạn có nhiều đối tượng được chọn.

Sự khác biệt chính giữa hai tùy chọn đó là với Make bạn có thể tạo các slice xung quanh mỗi đối tượng được chọn, trong khi với tùy chọn Create from Selection bạn sẽ hướng dẫn Illustrator tạo ra các slice xung quanh bề mặt tổng của tất cả các đối tượng được chọn.

Bây giờ, giả sử bạn đã tạo một dự án web (trang web), tùy chọn Create from Selection sẽ hoàn toàn tốt để sử dụng, nhưng nếu bạn đang tạo một gói biểu tượng, bạn sẽ luôn muốn sử dụng Make vì bạn sẽ muốn xuất riêng từng biểu tượng của bạn.

3.2. Tạo slice bằng cách sử dụng Guides

So với phương pháp trước đó, Guides một là sự lựa chọn tỉ mỉ hơn, vì quá trình này đòi hỏi bạn phải tự thêm các đường hướng dẫn dọc và ngang cho mỗi cạnh của phần chia của bản vẽ mà bạn muốn giới hạn lại.

Trước tiên, bạn phải kích hoạt các thước đo bằng cách nhấn Control-R (nhấn chuột phải > Show Rulers) và sau đó kéo các đường guide của bạn và định vị chúng ở nơi bạn muốn các đường slice rơi xuống. Khi bạn đã giới hạn phần chia của mình bằng cách sử dụng các đường hướng dẫn, bạn có thể chuyển đến Object > Slice > Create from Guides để tạo các slice thực tế.

Nếu bạn xem xét kỹ cách Illustrator thêm các con số vào các slice đó, bạn sẽ thấy rằng khi một phần được phân cách và gán vào, nó sẽ buộc những phần chia khác lấy giá trị số theo sau bất kể kích thước của chúng là bao nhiêu. Ngoài ra, nó khá thú vị khi thấy rằng các slice được tạo ra xung quanh bề mặt được phân cách của các đối tượng và không phải là giao điểm của các hướng dẫn.

3.3. Tạo slice bằng cách sử dụng Slice Tool

Phương pháp thứ ba này có lẽ là “tùy chọn hàng đầu” khi nói đến độ chính xác, vì nó cho phép bạn nhấp và kéo để tạo ra một vùng chọn slice cắt thủ công 100%. Thành thật mà nói, sẽ có những tình huống khi bạn muốncó sự kiểm soát nhiều hơn các slice của mình, nhưng tôi không thấy nó hữu ích khi cắt một gói biểu tượng lớn vì sẽ mất nhiều thời gian để thực hiện nó .

Nhưng, chỉ trong trường hợp bạn cần sử dụng nó, bạn nên biết cách thực hiện. Trước tiên, bạn cần phải lấy Slice Tool, mà theo mặc định nằm ở thanh bên trái hướng về phần dưới cùng của nó, ngay phía trên Hand Tool. Khi bạn đã chọn công cụ này, bạn có thể định vị chính mình trên phần chỉa của bản vẽ mà bạn muốn giới hạn, sau đó chỉ cần nhấp chuột và kéo để tạo vùng chọn sẽ tự động biến thành slice khi bạn thả nút chuột.

So với lựa chọn thông thường, Slice Tool cho phép bạn nhấn giữ phím Space để di chuyển / định vị lại lựa chọn của bạn, điều này khá hữu ích vì đôi khi bạn có thể sẽ thấy rằng bạn đã bắt đầu chưa đúng.

Bây giờ, điều thú vị về phương pháp này là các slice được tạo ngay lập tức, mà không cần phải chuyển sang menu con Object > Slice để Make hoặc Create from a Selection cho một slice.

Nhược điểm duy nhất mà tôi có thể nghĩ tới là bạn có thể không có độ chính xác 100% cho đến khi bạn bật chế độ Pixel Preview (View > Pixel Preview hoặc Alt-Control-Y), cho phép bạn tạo các vùng chọn điểm ảnh hoàn hảo, là cần phải có đối với các nhà thiết kế ngày nay.

4. Quy trình xuất

Vậy là, đến thời điểm này, tôi đã nói về ba phương pháp khác nhau mà bạn có thể sử dụng để tạo các slice. Bây giờ là lúc để xem phương pháp nào sẽ tốt nhất khi xuất ra các biểu tượng nhỏ quý giá của chúng ta.

4.1. Xuất bằng cách sử dụng phương pháp Selected Object(s)

Hãy bắt đầu với phương pháp đầu tiên. Để bạn nhớ lại, phương pháp này dựa vào việc sử dụng một hoặc nhiều đối tượng để tạo ra các slice.

Bây giờ, giả sử chúng ta có cùng một gói biểu tượng nhỏ như trước đây, chỉ lần này chúng ta muốn cắt và xuất tất cả các biểu tượng thành phần, không phải chỉ một biểu tượng.

Vâng, thông thường bạn sẽ chỉ cần chọn tất cả các biểu tượng bằng cách nhấn Control-A và sau đó đi đến Object > Slice > Make.

Sau đó, bạn sẽ vào File > Save for Web, chọn PNG là định dạng mong muốn của bạn, thiết lập tùy chọn Export của bạn thành Selected Slices và cuối cùng nhấn Save.

Vấn đề là lúc đầu bạn có thể nghĩ rằng tất cả sẽ diễn ra tốt đẹp, nhưng ngay khi bạn nhìn vào các biểu tượng của bạn (chính xác hơn là kích thước của chúng), bạn có thể thấy rằng có điều gì đó không ổn.

Đó là bởi vì ngay cả khi bạn đã sử dụng Grid tùy chỉnh để đặt kích thước các biểu tượng, thì bản thân các công cụ đó có thể sẽ không đi theo chiều rộng và chiều cao và vì bạn đã sử dụng các biểu tượng làm đối tượng được chọn chứ không phải lưới thực, đó là một điều hết sức bình thường.

Bí quyết là sử dụng các lưới thực tế thay vì các biểu tượng và tạo các slice xung quanh chúng. Bằng cách này, các biểu tượng đã xuất của bạn sẽ chính xác như bạn muốn.

Ví dụ, trong trường hợp của tôi, tôi đang sử dụng lưới 48 x 48 px, nhưng tôi có thêm khoảng đệm 2 px. Chưa kể rằng các biểu tượng của tôi hơi ngắn hơn, có chiều cao chỉ 40 px. Điều đó có nghĩa là nếu tôi tạo các slice bằng cách sử dụng các biểu tượng và sau đó xuất chúng, các biểu tượng của tôi sẽ hơi nhỏ hơn (44 x 40 px), vì Illustrator đã sử dụng Chiều rộng và Chiều cao của biểu tượng thay vì lưới của tôi (48 x 48 px).

Như vậy có nghĩa là, bạn nên luôn luôn có một layer thứ hai chỉ với các lưới của bạn và sử dụng chúng để tạo ra các slice để xuất chính xác các biểu tượng của bạn.

Bây giờ, điều thú vị là khi bạn tạo các slice và đi đến File > Save for Web, Illustrator cung cấp cho bạn tùy chọn để chọn hoặc loại bỏ các biểu tượng bạn xuất theo cách thủ công. Vì vậy, ví dụ: nếu tôi quyết định rằng tôi không muốn chọn biểu tượng cuối cùng, tôi có thể chỉ cần đi qua biểu tượng đó và nhấp chuột trái một lần trong khi giữ phím Shift và xóa nó khỏi bản xuất cuối cùng của tôi.

Theo mặc định, nếu bạn chọn tất cả các biểu tượng của bạn, và sau đó lưu chúng, Illustrator sẽ giữ tất cả các slice được chọn. Bạn có thể xem liệu một slice có được chọn hay không bằng cách nhìn vào đường phân định của nó. Nếu các đường nét bao quanh biểu tượng của bạn có màu đỏ (tất cả trừ biểu tượng đầu tiên), thì đối tượng của bạn sẽ được thêm vào vùng chọn cuối cùng; nếu màu xanh và hơi nhạt thì không được chọn (biểu tượng đầu tiên).

Bạn có thể bỏ chọn các phần của gói biểu tượng bằng cách giữ phím Shift và nhấp chuột trái vào chúng. Bạn có thể tự hỏi tại sao chúng ta sử dụng phím Shift. Đó là bởi vì khi Illustrator đã chọn tất cả các biểu tượng, bạn cần phải giữ phím bấm này để giữ phần còn lại của các biểu tượng được lựa chọn, nếu không bạn sẽ kết thúc với chỉ một biểu tượng được chọn.

Bây giờ thành thật mà nói tôi không tìm được lý do khiến bạn nên dùng nó, vì một khi bạn đã hoàn thành gói biểu tượng của bạn, tôi chắc chắn bạn sẽ muốn xuất tất cả các biểu tượng, không phải chỉ một số, nhưng tôi nghĩ nó vẫn tốt hơn để trình bày cho bạn.

Ngay sau khi bạn nhấn nút Save, Illustrator sẽ hỏi bạn một vị trí để lưu trữ các tập tin của bạn, cung cấp cho bạn tùy chọn đặt tên cho nội dung của bạn. Phần này hơi phức tạp vì tên bạn chỉ định sẽ được chuyển sang tất cả các biểu tượng, đó là những gì chúng ta muốn, nhưng bản thân các biểu tượng sẽ mang con số slice của chúng.

Bạn chỉ có thể xuất các tập tin và sau đó đổi tên chúng, hoặc bạn có thể làm điều đó trực tiếp bên trong cửa sổ Save for Web bằng cách nhấp đúp vào mỗi lựa chọn biểu tượng và đặt tên cho nó.

Cho dù bạn chọn phương pháp nào đi chăng nữa, thì bạn vẫn sẽ phải dùng thời gian của bạn và trải qua tất cả các điều này để đặt tên cho chúng phù hợp.

Bây giờ, thành thật mà nói, tôi thấy tùy chọn này là tốt nhất trong số ba tùy chọn đã nói vì nó siêu nhanh và chỉ xuất các biểu tượng của bạn, vì vậy không có các slice Artboard trống cần phải xóa sau đó.

4.2. Xuất bằng cách sử dụng phương pháp Guides

Như với phương pháp trước, mọi thứ khá đơn giản. Trước tiên, bạn tạo các slice bằng cách sử dụng các đường hướng dẫn (Object > Slice > Create from Guides), và sau đó bạn vào File > Save for Web.

Ở đây có một vài điều mà bạn nên biết. Nếu bạn để tùy chọn Export được đặt thành Selected Slices như chúng ta đã làm cho phương thức đầu tiên, Illustrator sẽ xuất các biểu tượng của bạn, nhưng nó cũng sẽ xuất các slice trống giữa chúng. Bây giờ, nếu bạn không có một bộ biểu tượng lớn, thì bạn có thể bỏ chọn những slice đó, nhưng nếu bạn có một bộ lớn hơn, thì nó có thể chứng minh được đấy sẽ là một quá trình thực sự bực mình.

Mặt khác, bạn chỉ có thể xuất các biểu tượng và sau đó xóa các slice không mong muốn, nhưng một lần nữa nó có thể khiến bạn mất nhiều thời gian.

Bây giờ, nếu bạn cân nhắc rằng bạn phải thêm các đường hướng dẫn theo cách thủ công vào mỗi bên của các biểu tượng, thì rõ ràng là phương pháp đầu tiên phù hợp hơn vì phương pháp đó không phức tạp và nhanh hơn rất nhiều.

4.3. Xuất biểu tượng bằng cách sử dụng phương pháp Slice Tool

Nếu bạn nghĩ rằng phương pháp Guides thật chậm chạp và khiến bạn bực mình, vậy thì phương pháp này sẽ là phương pháp cuối cùng dẫn đến sự thất bại vì nó sẽ khiến bạn mất rất nhiều thời gian để hoàn thành.

Bởi bây giờ bạn có thể đã biết rằng bạn phải tự tạo các slice cho mỗi và mọi biểu tượng của bạn, và sau đó đi thẳng đến File > Save for Web.

Ở đây bạn sẽ bị cám dỗ để sử dụng tùy chọn Selected Slices Export, nhưng so với hai phương thức khác, nó sẽ chỉ xuất slice cuối cùng từ Artboard của bạn. Điều đó có nghĩa là bạn phải sử dụng tùy chọn All Slices, tất nhiên sẽ xuất tất cả các slice cho dù chúng được lấp đầy bằng các biểu tượng hay chỉ là không gian trống.

Cuối cùng, bạn phải đi qua toàn bộ thư mục và xóa tất cả các biểu tượng không cần thiết và đổi tên chúng như bạn cần.

Vì vậy, tôi có nên khuyên bạn sử dụng phương pháp này không? Không. Vậy tại sao tôi lại nhắc đến nó? Tôi chỉ muốn càng rõ ràng càng tốt khi nói về các loại công cụ và phương pháp này.

Tổng kết

Vậy là, vào thời điểm này, tôi thực sự hy vọng bạn đã biết Slice là gì, và quan trọng hơn là chúng được tạo ra như thế nào, để bạn có thể tận dụng công cụ này và làm cho quá trình xuất các biểu tượng của bạn nhanh chóng và dễ dàng.

Bây giờ, tôi thường sẽ để lại quyết định sau cùng cho bạn, nhưng lần này, tôi sẽ trực tiếp và hướng bạn sử dụng với phương pháp đầu tiên, phương pháp Object(s), vì nó khá rõ ràng rằng đó là con đường duy nhất để đi.

Tôi muốn cảm ơn bạn đã dành thời gian và sự chú ý của bạn, và như mọi khi tôi sẽ nói chuyện với bạn trong thời gian tới.