Trích xuất Photoshop: Sản xuất đồ họa trên thiết bị di động đi vào Afterburner

01/08

Tài sản trích xuất là gì

Tạo một comp trong Photoshop.

Tính năng trích xuất nội dung mới của Photoshop CC 2014 sẽ buộc dây sau khi tạo luồng công việc tạo hình ảnh khác cho Thiết kế web đáp ứng (RWD). Chúng ta hãy xem cách lệnh Extract Assets có thể nhanh chóng làm giảm một trang web comp thành các tài sản sẵn sàng lắp ráp trong một vài phút.

Hãy bắt đầu với một câu hỏi rõ ràng: Tài sản trích xuất là gì?

Nói một cách đơn giản, Extract Assets là một tính năng mới trong Photoshop cung cấp tính năng Generator của Photoshop với giao diện giúp tự động hóa việc tạo các tài sản hình ảnh cho thiết kế web và màn hình từ các tập tin Photoshop của bạn. Lệnh Extract Assets cho phép bạn xác định lớp hoặc lớp nào bạn muốn tạo nội dung, kích thước vật lý, định dạng tệp và vị trí đã lưu trên đĩa. Tính năng này không có nghĩa là cho văn bản trừ khi ý định là biến văn bản thành một bitmap, mà thực sự không phải là một ý tưởng hay.

Băt đâu nao.

02/08

Mở tệp Photoshop .psd

Chúng tôi bắt đầu với một trang web comp chuẩn bị trong Photoshop.

Ví dụ tôi đang sử dụng có chứa một đối tượng thông minh từ Illustrator, một số văn bản, một đơn vị anh hùng có chứa văn bản, một hình ảnh và một nút và một loạt các hình ảnh ngoài trời củng cố chủ đề của trang web. Chìa khóa ở đây là tổ chức các Lớp thành các nhóm. Điều này là cần thiết bởi vì nhiệm vụ là kéo tất cả các mục này ra khỏi comp để chúng có thể được thêm nhanh vào các bố cục web thích ứng với các độ phân giải và kích thước màn hình khác nhau.

03/08

Hai cách để trích xuất nội dung

Trích xuất nội dung có thể được tìm thấy trong menu Tệp hoặc bằng cách nhấp chuột phải vào một lớp.

Không giống như Generate, cũng trích xuất các đối tượng thông qua việc thêm phần mở rộng đồ họa vào tên lớp, Extract Assets sử dụng một giao diện có thể đạt được bằng cách nhấp chuột phải vào một lớp hoặc chọn một lớp và chọn File> Extract Assets .

04/08

Giao diện tài sản trích xuất

Hộp thoại Extract Assets.

Hộp thoại Extract Assets khá trực quan. Bạn được hiển thị lớp hoặc lựa chọn được trích xuất. Ở trên nó, bạn được hiển thị kích thước tập tin và bên dưới nó là điều khiển cho phép bạn phóng to và thu nhỏ đối tượng. Phía bên phải của hộp thoại là nơi ma thuật xảy ra. Bốn nút ở trên cùng cho phép bạn chọn độ phân giải / kích thước của đối tượng. Dải tiếp theo hiển thị cho bạn lớp đã chọn và nhấp vào dấu + cho phép bạn xuất lớp đã chọn ở định dạng khác. Thùng rác Ca n loại bỏ lớp khỏi hàng đợi. Trong dải tiếp theo, bạn có thể chọn loại tệp và bạn có thể điều chỉnh chiều rộng và chiều cao của hình ảnh đầu ra.

05/08

Trích xuất hình ảnh SVG

Trích xuất một hình ảnh svg.

Photoshop không xử lý tất cả hình ảnh svg tốt và các trình duyệt và thiết bị không thể hiển thị hình ảnh của Illustrator. Điều này đã dẫn đến sự gia tăng của các tập tin svg được sử dụng cho tác phẩm nghệ thuật vector như logo Illustrator được hiển thị ở đây. Là vectơ độ phân giải của chúng là thiết bị độc lập có nghĩa là chúng có thể được thu nhỏ mà không làm mất chi tiết hoặc hình ảnh. Để chuyển đổi Illustrator Smart Object sang svg, chọn svg từ cửa sổ pop xuống và nhấp Extract .

06/08

Quy trình trích xuất nội dung

Hình ảnh được đặt trong một thư mục ở cùng một chỗ với hình ảnh .psd.

Một vài điều sẽ xảy ra khi bạn nhấp vào nút Trích xuất. Trước tiên, bạn sẽ được cảnh báo rằng tên tệp có thể thay đổi. Đây không phải là vấn đề lớn. Sau đó, bạn sẽ được thông báo rằng một thư mục mới đang được tạo để giữ nội dung. Khi quá trình kết thúc, thư mục được đặt ở cùng vị trí với tệp .psd gốc, mở và hiển thị cho bạn nội dung mới.

07/08

Nút Cài đặt là người bạn thân nhất của bạn

Chứa độ phân giải thiết bị.

Nhấp vào nút Cài đặt sẽ mở ra hộp thoại Cài đặt hữu ích nghiêm trọng. Các cài đặt ở bên trái là các yếu tố tỷ lệ. Những gì họ làm là tạo ra các bản sao khác nhau của hình ảnh mà nhà phát triển sẽ sử dụng trong các truy vấn phương tiện để nhắm mục tiêu đến độ phân giải màn hình của thiết bị cụ thể. Ví dụ: phiên bản 3x sẽ được nhắm mục tiêu đến màn hình Retina của iPhone hoặc iPad trong khi yếu tố 1.25 sẽ được trỏ vào thiết bị Android. Hậu tố được thêm vào cuối tên tệp để cho phép nhà phát triển của bạn dễ dàng xác định hình ảnh được sử dụng trong truy vấn phương tiện. Khi bạn hoàn tất, nhấp vào nút OK và các lựa chọn của bạn sẽ sáng lên trong vùng Trích xuất nội dung trong hộp thoại. Bạn cũng có thể truy cập cài đặt bằng cách nhấp vào biểu tượng bánh răng trong khu vực Trích xuất nội dung ở phía bên phải của giao diện

08/08

Kết thúc

Nhiều hình ảnh với các định dạng và độ phân giải khác nhau được trích xuất.

Khi bạn nhấp vào nút Extract tất cả các tài sản sẽ được tạo và thêm vào thư mục. Tại thời điểm này, tất cả những gì bạn cần làm là gửi cho nhà phát triển của bạn một bản sao của thư mục và chuyển sang dự án tiếp theo của bạn.