Hình ảnh cho thiết bị di động không phải lúc nào cũng có vẻ
Ngày càng trở nên phổ biến đối với các chuyên gia đồ họa không chỉ có tác phẩm của họ xuất hiện trong in mà còn trên web và các thiết bị như iPhone, iPad, thiết bị Android và máy tính bảng Android. Trên bề mặt, điều này có thể được xem như là một "điều tốt" như các phương tiện truyền thông công việc của chúng tôi xuất hiện trên mở rộng đến màn hình kỹ thuật số. Nhược điểm là số lượng màn hình tuyệt đối và độ phân giải màn hình khó hiểu. Nó không phải là không phổ biến để nghe chuyên nghiệp dày dạn tự hỏi bất cứ điều gì đã xảy ra với những ngày khi một hình ảnh TIFF độ phân giải 300 dpi ở định dạng CMYK là tiêu chuẩn. Oh cho những ngày tốt đẹp cũ!
Những ngày đó kết thúc. Bây giờ chúng ta phải tranh luận với thực tế rằng một hình ảnh 200 x 200 có thể xuất hiện tốt trên một thiết bị và chưa xuất hiện kích thước phần tư trên một thiết bị khác và kích thước ba phần tư trên một thiết bị khác. Tất cả thực sự đi xuống đến "Giải pháp Arms Race" đang được tiến hành bởi các nhà sản xuất thiết bị khi họ cố gắng để thêm nhiều điểm ảnh vào màn hình hơn so với đối thủ cạnh tranh của họ.
Điều này đưa chúng ta đến những gì chúng ta sẽ gọi là "Sự nổi lên của hậu tố". Hậu tố là những thứ đó - @ 2x, @ 3x - được gắn vào tên của một hình ảnh. Về bản chất, về cơ bản, đưa hình ảnh phù hợp vào đúng vị trí trên thiết bị phù hợp. Sau đó, nó trở nên tốt hơn.
Rất nhiều công việc của chúng tôi liên quan đến làm việc với các biểu tượng và, với sự nổi lên của phong trào thiết kế phẳng, những thứ này được tạo ra trong các ứng dụng vẽ vector như Illustrator và Sketch. Vấn đề là các thiết bị đơn giản không thể hiển thị các tệp .ai hoặc .eps. Họ cần phải được chuyển đổi sang Scalable Vector Graphics và, tùy thuộc vào ứng dụng được sử dụng để tạo ra các biểu tượng, có thể thậm chí không có một tùy chọn SVG.
Sau đó, nó trở nên tốt hơn.
Có một lớp mới của các ứng dụng tạo mẫu phần mềm - đang trở thành điểm lắp ráp trước khi hình ảnh và biểu tượng của bạn được đẩy ra các thiết bị và chúng cũng có đặc thù riêng.
Hướng dẫn này di chuyển giữa Photoshop và Sketch cho đồ họa và sử dụng Adobe Experience Design để minh họa một số điểm đau giữa ý tưởng của bạn và triển khai cuối cùng. Băt đâu nao.
01/05
Cách chuẩn bị hình ảnh cho thiết bị di động trong Adobe Photoshop
Bước đầu tiên trong quá trình này là biết thiết bị hoặc thiết bị mục tiêu của bạn. Trong trường hợp này, bạn sẽ nhắm mục tiêu iPhone 6 có diện tích màn hình rộng 375 pixel, cao 667 pixel. Thiết kế yêu cầu hình ảnh là chiều rộng của màn hình.
Hình ảnh được sử dụng được quay bên trong Nhà thờ Bern Minster ở Bern, Thụy Sĩ. Khi hình ảnh được mở trong Photoshop, chọn Image> Image Size để kiểm tra kích thước của hình ảnh và độ phân giải của hình ảnh. Rõ ràng, một hình ảnh có kích thước 3156 x 2592 với độ phân giải 300 ppi và kích thước tệp là 23,4 Mb sẽ không hoạt động.
Bên trong hộp thoại Image Size, giảm độ phân giải xuống 100 ppi . Làm điều này trước tiên vì kích thước hình ảnh cũng sẽ thay đổi. Với tập Độ phân giải, thay đổi chiều rộng thành 375 pixel. Nếu bạn kiểm tra dữ liệu Kích thước hình ảnh, bạn sẽ thấy hình ảnh đã bị thu hẹp từ 23,4 Mb đến 338k thân thiện với thiết bị di động hơn. Bấm OK để chấp nhận thay đổi và đóng hộp thoại Kích cỡ hình ảnh.
02 trên 05
Làm thế nào để sử dụng hộp thoại "Xuất dưới dạng ..." trong Adobe Photoshop
Khi hình ảnh đã sẵn sàng để xuất, hãy chọn "Xuất> Xuất dưới dạng ..." để mở hộp thoại Xuất dưới dạng.
Hộp thoại đối thoại này là một bổ sung gần đây cho Photoshop và thay thế hộp thoại "Save For Web" mà họ đã sử dụng trong nhiều năm. Nếu bạn vẫn cần nó, bạn có thể tìm thấy nó trong cửa sổ xuất hiện. Đó là, vì lý do rõ ràng, bây giờ được gọi là "Xuất khẩu cho Web (Legacy)". Nếu đây là lần đầu tiên bạn truy cập hộp thoại này, đây là một chuyến tham quan ngắn:
- Kích thước: Cột này đặt kích thước đầu ra của hình ảnh. Khía cạnh thú vị của khu vực này là nó sẽ phóng to hình ảnh nhưng hình ảnh sẽ không xuất hiện dưới dạng "mờ" trên thiết bị vì số lượng pixel lớn trên màn hình thiết bị.
- 1X: Bấm vào giữ này và bạn sẽ được trình bày với một số kích cỡ. Các loại 1x, 2x và 3x thường được kết hợp với các thiết bị Hi Dpi của Apple và chúng cùng với một vài loại khác sẽ chuẩn bị hình ảnh cho các thiết bị Android.
- Hậu tố: Lựa chọn này sẽ hiển thị kích thước của bạn nhưng nó sẽ được hiển thị là @ 2x hoặc kích thước được chọn. Hậu tố này sẽ được thêm vào tên hình ảnh.
- Dấu +: Nhấp vào đây để thêm các kích thước khác nhau cho đầu ra. Trong trường hợp này, nhấp vào nó hai lần và chọn 2x và 3x từ cửa sổ bật xuống. Điều này sẽ bao gồm thực tế bất kỳ thiết bị iOS.
- Thùng rác: Nhấp vào đây và lựa chọn được xóa khỏi dòng giới thiệu.
- Cài đặt tệp: Chọn định dạng - jpg, png, gif hoặc svg - phù hợp nhất với hình ảnh. Nếu kích thước tệp là mối quan tâm, bạn cũng có thể giảm cài đặt Chất lượng.
- Kích thước hình ảnh: bạn có thể thay đổi kích thước vật lý của hình ảnh.
- Kích thước Canvas: Bạn có thể thay đổi kích thước vật lý của canvas hình ảnh.
- Siêu dữ liệu: Bạn có thể thêm bản quyền và thông tin liên hệ của mình vào siêu dữ liệu của hình ảnh.
Khi hoàn tất, hãy nhấp vào nút Xuất tất cả. Bạn sẽ được hỏi nơi bạn muốn đặt hình ảnh. Một thói quen tốt để phát triển là nhấp vào nút Thư mục mới và tạo một thư mục để lưu hình ảnh đã xuất. Khi bạn nhấp vào Xuất, bạn sẽ được hiển thị hình ảnh trong thư mục.
03 trên 05
Cách chuẩn bị hình ảnh cho thiết bị di động trong Sketch 3 Từ mã hóa Bohemian
Phác thảo 3, một ứng dụng chỉ dành cho Macintosh từ mã hóa Bohemian, đang nhanh chóng giành được sự nổi bật giữa các nhà thiết kế UX và UI do tập trung mạnh mẽ vào thiết kế web và ứng dụng. Trong thực tế, Photoshop, theo nhiều cách, là ở vị trí kỳ quặc của việc phải chơi "bắt kịp" với Sketch.
Để chuẩn bị một hình ảnh cho di động trong Sketch, chọn hình ảnh trên bản vẽ và nhấp vào nút Make Exportable ở dưới cùng của bảng Properties . Thao tác này sẽ mở hộp thoại Xuất. Nhấp vào dấu + để thêm các phiên bản 2x và 3x và cũng thêm hậu tố. Các định dạng có sẵn là PNG, JPG, TIF, PDF, EPS và SVG. Trong trường hợp này, chọn JPG. Nhấp vào nút Xuất và nhắm mục tiêu hoặc tạo thư mục để giữ các hình ảnh khác nhau được xuất.
04/05
Tại sao bạn cần tạo ba (hoặc nhiều) phiên bản của hình ảnh
Trong nhiều khía cạnh, thị trường di động là "Tây hoang dã" của các nghị quyết và một kích thước chắc chắn không phù hợp với tất cả. Trong ví dụ trên từ Adobe Experience Design, hình ảnh được đặt trên 2 bản vẽ iPhone 6 và bảng vẽ thiết bị Android. Lưu ý cách phiên bản 1x ở bên trái có kích thước bằng một nửa. Đây chính là cách hình ảnh sẽ xuất hiện trên iPhone 6 với màn hình võng mạc của nó. Phiên bản 2x phù hợp hoàn hảo và phiên bản Android chạy ra khỏi màn hình. Lựa chọn của bạn là chia tỷ lệ hình ảnh hoặc xuất hình ảnh ra khỏi Photoshop ở kích thước khác.
05/05
Kiểm tra sớm, kiểm tra thường xuyên, tin tưởng không có gì, tin tưởng không ai và đặc biệt là chính mình
Điều bạn cần hiểu là đây chỉ là khởi đầu của quá trình. Xem công việc của bạn trên nhiều thiết bị như bạn có thể được coi là một phần quan trọng của quy trình làm việc. Bạn cũng cần lưu ý đây chỉ là bước đầu tiên trong quá trình tạo nội dung đồ họa cho một ứng dụng hoặc dự án web di động.
Sử dụng các ứng dụng tạo mẫu là một cách tuyệt vời để phát hiện ra các điểm đau nhưng các tài sản này sẽ cần phải được đầu ra để sử dụng bởi nhà phát triển. Trong nhiều trường hợp, kích thước vật lý của nội dung, bao gồm các biểu tượng, sẽ rất lớn về thể chất chứ không phải ở định dạng svg nhưng png. Thoạt nhìn, điều này có vẻ hơi hơn một chút nhưng hãy nhớ quy tắc vàng của việc chia tỷ lệ hình ảnh: tốt hơn là giảm quy mô so với quy mô.
Điểm mấu chốt là làm việc chặt chẽ với nhà phát triển của bạn và sử dụng phần mềm tạo mẫu như một cách thể hiện ý định thiết kế của bạn. Cuối cùng, mặc dù, những tài sản tương tự sẽ cần phải sẵn sàng cho sản phẩm cuối cùng và nhà phát triển của bạn có một xử lý tốt hơn về những gì anh ta hoặc cô ấy cần hơn bạn.