Nếu có một khía cạnh của làm việc với Illustrator mà tôi thực sự không thích nó là chuyển đổi dòng nghệ thuật để hình ảnh svg cho điện thoại di động hoặc web. Sử dụng menu Xuất> Xuất dưới dạng và, thành thật một cách trung thực, tính năng Save For Web - Xuất> Save For Web - không thực sự dễ sử dụng.
Việc chuyển đổi bản vẽ sang định dạng .svg đã mở một hộp thoại khá đáng sợ, đối với những người mới làm việc này, cung cấp một loạt các tùy chọn không đề cập đến thực tế có một số định dạng .svg và chỉ một trong số đó là định dạng. Một khi bạn đã quen với công việc này, nó không có vấn đề gì lớn, nhưng đường cong học tập thì dốc.
Tất cả đã thay đổi với tính năng Xuất cho màn hình mới - Xuất> Xuất cho màn hình - và bảng điều khiển Xuất nội dung đã được giới thiệu cho Illustrator CC 2015 vào tháng 6 năm 2016. Trong mục “Cách thực hiện” này, tôi sẽ chỉ cho bạn cách sử dụng cả hai Tính năng, đặc điểm. Băt đâu nao.
01 trên 04
Làm thế nào để truy cập xuất khẩu cho màn hình trong Adobe Illustrator CC 2015
Là một người dùng Illustrator từ Illustrator 88 Tôi nghĩ bạn có thể hiểu được sự miễn cưỡng của tôi khi xem Illustrator là một công cụ thiết kế nghiêm túc cho các giao diện và dự án web và di động.
Khi artboards được giới thiệu trong phiên bản CS4 2008, tôi nghĩ đó là một bổ sung thú vị cho ứng dụng. Khi lần đầu tiên tôi nhìn thấy tính năng Save For Web không được chấp nhận trong Illustrator, một lần nữa, tôi thấy nó thú vị nhưng tôi thấy tính năng tương tự trong Adobe Fireworks phù hợp hơn với đồ họa web so với Illustrator.
Với sự ra đời của phương pháp thiết kế di động đầu tiên và sự phụ thuộc ngày càng tăng vào hình ảnh SVG cho các dự án di động, Illustrator là công cụ “đi tới” của tôi cho SVG và trở thành một điểm dừng quan trọng trong quy trình làm việc của UI Design.
Tuy nhiên, nếu tôi cần xuất tài sản cho thiết bị di động, Sketch 3 và Photoshop CC 2015 là công cụ tôi chọn. Illustrator đã nhập danh sách vào tháng 6 năm 2016 với trình đơn Xuất màn hình thực sự tiện lợi.
Trong ví dụ trên, tôi có hai màn hình dành cho iPhone và chúng nằm trên các Bảng điều khiển riêng biệt có tên “Nhà riêng” và “Địa điểm”. Để xuất chúng, tôi chọn File> Export> Export for Screens. Hộp thoại Xuất cho màn hình mở ra.
02 trên 04
Cách sử dụng Hộp thoại xuất cho màn hình
Khi hộp thoại xuất hiện, nhấp vào từng bản vẽ để chọn. Sau đó nó sẽ thể hiện dấu kiểm. Bạn cũng có thể nhấp đúp vào tên của bảng vẽ để chọn và thay đổi nó. Đây là một điều tốt để biết nếu artboards của bạn được đặt tên là "Artboard 1" và "Artboard 2" mà, thẳng thắn, nói với bạn không có gì.
Bạn có ba lựa chọn trong khu vực Chọn:
- Tất cả: Lựa chọn này xuất mỗi bản vẽ trong tài liệu dưới dạng tệp riêng biệt.
- Phạm vi: Nhập một loạt các bảng vẽ để xuất. Điều này đặc biệt hữu ích cho các dự án có vài chục bảng.
- Tài liệu đầy đủ: Chọn mục này và tất cả các bản vẽ sẽ được làm phẳng thành một tài liệu.
Vùng Export To cho phép bạn chọn thư mục đích cho đầu ra. Thư mục mặc định sẽ là vị trí hiện tại của tài liệu Illustrator.
Định dạng là nơi "ma thuật xảy ra. Bạn sẽ thấy có ba biểu tượng - iOS. Android và một Gear. Hai cái đầu tiên là tự giải thích. Biểu tượng Bánh răng sẽ mở Cài đặt định dạng cho phép bạn kiểm soát cách thức mỗi định dạng tệp trong danh sách sẽ được tối ưu hóa. Các cài đặt này là “định dạng cụ thể” và khi bạn đã thực hiện thay đổi, hãy nhấp vào nút Lưu cài đặt và những thay đổi đó sẽ được áp dụng cho các định dạng sẽ xuất.
Khi bạn chọn iOS hoặc Android, danh sách sẽ thay đổi để bao gồm tất cả các độ phân giải có sẵn trên nền tảng đó. Danh sách iOS sẽ hiển thị các yếu tố mở rộng cho màn hình Retina và lựa chọn Android sẽ có các tỷ lệ khác nhau, từ 0,75x đến 4x, điều này có thể chứa mọi thiết bị Android trên thực tế.
Nếu có một định dạng cho biết bạn muốn xóa, hãy nhấp vào “x”. Nếu có một bạn muốn thêm, hãy nhấp vào nút + Thêm quy mô.
Khi hoàn tất, nhấp vào nút Xuất Artboard và thanh tiến trình sẽ hiển thị cho bạn khi quá trình kết thúc.
03 trên 04
Sử dụng The Export For Screens Files từ Adobe Illustrator CC 2015.
Khi bạn kiểm tra kết quả xuất khẩu cho màn hình, bạn sẽ khám phá ra rằng Illustrator đã xuất ra một phiên bản phẳng của mỗi màn hình. Trên bề mặt, điều này có vẻ hơi yếu một chút, đặc biệt là nếu bạn mong đợi Illustrator đã xuất tất cả các bit và miếng thành hình ảnh.
Nếu bạn lùi lại và suy nghĩ về nó một lúc, đây thực sự chính xác là những gì bạn cần bởi vì bạn có thể sử dụng đầu ra này trong một ứng dụng tạo mẫu như Adobe Experience Design , Principleformac, Atomic.io , UXPin hoặc ứng dụng tạo mẫu khác
Trong ví dụ này, tôi đang sử dụng Adobe Experience Design (XD) để tạo một cú nhấp chuột đơn giản. Bước đầu tiên trong quá trình này là chọn kích thước iPhone 6 phù hợp với kích thước của Giao diện Illustrator
Khi giao diện mở ra, tôi đã chọn công cụ Artboard và nhấp một lần lên bảng để thêm một bản vẽ khác. Sau đó tôi đặt tên cho chúng là “Trang chủ” và “Địa điểm”, chọn từng bản vẽ và nhập hình ảnh png từ Illustrator vào bản vẽ.
Để tạo “điểm nóng” cho lần nhấp, tôi vẽ một hình chữ nhật trên nút Khám phá trên màn hình chính và đặt các giá trị điền vào và đường viền thành không bằng cách bỏ chọn các thuộc tính đó trong bảng Thuộc tính. Tôi đã làm điều tương tự với nút Quay lại trên trang Địa điểm.
Để thêm tính tương tác, tôi đã chọn chế độ Nguyên mẫu và sau đó nhấp vào “điểm phát sóng”. Sau đó tôi kéo mũi tên - được gọi là một dây - đến trang Địa điểm và đặt mục tiêu Chuyển tiếp tại Địa điểm, chuyển động để Đẩy Trái, giảm bớt để giảm bớt và thời lượng chuyển đổi thành .6 giây.
Tôi đã lặp lại bước này với điểm phát sóng trên trang Địa điểm. Sự khác biệt duy nhất là Transition được đặt thành Push Right. Khi tôi nhấp vào nút Play, tôi đã thử nghiệm mẫu thử nghiệm của mình.
04/04
Cách sử dụng Bảng điều khiển nội dung xuất trong Adobe Illustrator CC 2015
Cùng với menu Save for Screens, Adobe cũng đã thêm một bảng điều khiển mới - Asset Export - đã loại bỏ một điểm đau lớn trong luồng công việc UI Design.
Điểm đau là biểu tượng. Illustrator là một ứng dụng vẽ vector tuyệt vời nhưng để xuất, giả sử 10 biểu tượng, trên một trang có 40 hoặc 50 biểu tượng yêu cầu mỗi biểu tượng được lưu dưới dạng hình ảnh SVG. Điều này chắc chắn cần nhiều thời gian hơn bình thường nhờ các chuyến đi kế tiếp đến bảng điều khiển SVG. Điểm đau này bây giờ là một điều của quá khứ.
Bạn có thể tìm thấy bảng điều khiển mới này tại Cửa sổ> Xuất nội dung. Khi bảng điều khiển mở ra, hãy chọn nội dung bạn muốn chuyển đổi sang SVG hoặc định dạng khác và kéo vào bảng điều khiển. Khi bạn thả chuột, hình thu nhỏ của nội dung sẽ được thêm vào bảng điều khiển. Đặt tên cho nội dung. Tiếp tục kéo các đối tượng vào bảng cho đến khi bạn hoàn tất.
Chọn từng mục Trong khu vực Cài đặt xuất, hoặc chọn tất cả các mục bằng cách giữ phím Shift và nhấp vào từng mục. Chọn định dạng của bạn - trong ví dụ này, tôi đã chọn SVG- và nhấp vào nút Xuất. Các mục đã chọn sẽ được xuất dưới dạng tệp SVG đến cùng một vị trí với tệp Illustrator.
Trường hợp toàn bộ quá trình này thậm chí còn được lặp lại thì bạn không phải sử dụng bảng điều khiển Xuất nội dung. Nếu bạn nhấp vào nút Lưu cho Màn hình ở cuối bảng điều khiển, hộp thoại sẽ mở ra.
Ngược lại, bạn có thể nhấp vào tab Nội dung trong bảng điều khiển Lưu cho màn hình để truy cập bảng điều khiển Xuất nội dung. Ví dụ: nếu bạn có biểu tượng tùy chỉnh trên bảng vẽ, bạn có thể mở bảng điều khiển Xuất nội dung trong hộp thoại Lưu cho màn hình và kéo mục đó vào bảng điều khiển Xuất nội dung.