Tin Tức/Blog

Chọn bài viết

Hướng dẫn phân giải DPI trong thiết kế digital (p.1)

17 Tháng 12 2014
 

Bản hướng dẫn này được xem như là bước "khởi động" cho nhà thiết kế bậc trung, những người đang tìm hiểu về cross-DPI (độ phân giải DPI trên nhiều thiết bị) và cross-platform (nền tảng trên nhiều thiết bị), đây là những kiến thức đầu tiên cần biết. Không phải là kiến thức toán học phức tạp, hay đồ thị khó hiểu, mà là những lý giải ngay từng vấn đề được phân thành từng phần nhỏ, để bạn có thể hiểu và áp dụng ngay lập tức vào quá trình thiết kế của mình.

DPI và PPI là gì?

Độ phân giải DPI hay Dots Per Inch là đơn vị đo lường mật độ các chấm được sử dụng trong in ấn. Độ phân giải DPI của một tấm hình càng nhỏ càng ít nét. Nguyên tắc này được áp dụng vào màn hình máy tính với cái tên PPI (Pixels Per Inch): Số lượng pixel (điểm ảnh) trên màn hình trong một inch vuông. Độ phân giải DPI cũng có thể được sử dụng cho màn hình. 

Máy tính Windows sử dụng độ phân giải PPI mặc định là 96. Mac sử dụng 72, mặc dù giá trị này không còn chính xác từ những năm 80. Thông thường, màn hình không phải retina (kể cả Mac) có độ phân giải PPI tối thiểu từ 72 đến 120 là tối đa. Thiết kế trong khoảng độ phân giải này sẽ đảm bảo thiết kế của bạn có tỷ lệ tương thích mọi nơi. 

Ví dụ thực tế: Một màn hình Mac 27" có độ phân giải PPI 109, tức là có 109 điểm ảnh với mỗi inch màn hình. Chiều rộng theo mép là 25.7 inch (65cm), chiều rộng thực tế là 23.5 inch tức là 23.5x109~2560, vậy là ta có độ phân giải màn hình là 2560x1440px.

 

 

Sự ảnh hưởng đến thiết kế

Giả tỉ bạn thiết kế 1 ô vuông có kích thước 109x109px trên màn hình theo như ví dụ trên, ô vuông này có kích thước vật lý là 1x1 inch. Nhưng nếu người dùng có màn hình có độ phân giải 72 PPI, ô vuông của bạn sẽ có kích thước vật lý lớn hơn. Với độ phân giải 72 PPI, màn hình cần khoảng 1 inch rưỡi để hiển thị ô xanh của bạn (có tới 109px), hãy xem hình bên dưới.

 

Ghi chú:

Dẹp màu sắc và sự khác biệt về độ phân giải sang một bên, hãy luôn nhớ trong đầu là mỗi người sẽ thấy thiết kế của bạn khác nhau. Bạn cần trang bị tốt nhất để hướng đến % người dùng lớn nhất, và cũng đừng bao giờ suy nghĩ người dùng có màn hình tốt giống bạn.

 

Độ phân giải màn hình

 Độ phân giải màn hình có sự ảnh hưởng lớn đến sự nhìn nhận của người dùng đối với thiết kế của bạn. Rất may là kể từ khi màn hình LCD thay thế CRT, người dùng giờ đây đã có sự đảm bảo tỷ lệ kích thước màn hình với độ phân giải PPI tốt hơn.

 Độ phân giải xác định số điểm ảnh hiển thị trên màn hình (ví dụ: 2560*1440px cho màn hình 27in.) 2560 là chiều rộng, 1440 là chiều cao. Đương nhiên là bạn biết PPI là gì rồi, nó không thể là 1 đơn vị đo lường kích thước vật lý được. Bạn có thể có một màn hình kích thước 2560x1440 treo trên tường và một cái kích thước khác ngay trong đầu.

Màn hình LCD ngày nay có chế độ tự xác định độ phân giải hoặc độ phân giải chuẩn có thể xử lý chính xác số lượng điểm ảnh mà màn hình có thể hiển thị. Khác hoàn toàn với màn hình CRT (được coi như đã bế mạc) không thể hiển thị vào chi tiết. 

Nói tiếp cái màn hinh 27" có độ phân giải 109 PPI, tức là 2560x1440px. Nếu bạn giảm độ phân giải của nó xuống, các hình ảnh sẽ trở nên lớn hơn. Tức là bạn sẽ có 23.5 inch bề ngang có số điểm ảnh hầu như ít hơn.  

 

Tôi nói hầu như vì trường hợp này nó đúng, độ phân giải có giảm xuống nhưng số điểm ảnh vẫn vậy, hiển thị 109 PPI. Tất cả những gì hệ điều hành xử lý là lấp đầy khoảng trống bằng cách kéo giãn mọi thứ. GPU/CPU sẽ tính toán tất cả các điểm ảnh theo tỉ lệ mới.

Nếu bạn muốn độ phân giải 1280*720 (bằng 1/2 ví dụ trên) trên mành hình 27", GPU của bạn sẽ giả lập một điểm ảnh gấp 2 lần trên màn hình. Kết quả ra sao? Mờ hơn. Tỷ lệ 1/2 trông cũng khá ổn bởi vì việc phân chia cũng đơn giản, nếu bạn đòi hỏi tỷ lệ 1/3 hay 3/4, sau đó kết thúc bằng số thập phân, bạn không thể chia một pixel ra. Xem ví dụ bên dưới.

 

Xem tiếp ví dụ bên dưới đây. Tạo 1 đường thẳng 1px trên màn hình theo độ phân giải chuẩn. Sau đó cho độ phân giải màn hình thấp hơn 50%. Để che lấp khoảng trống, CPU sẽ tự tạo ra hình ảnh ở mức 150%,  nhân tất cả theo 1.5. 1*1.5=1.5, nhưng bạn vẫn không thể có nửa điểm ảnh. Tất cả những gì diễn ra là nó sẽ lấp đầy điểm ảnh bằng một phần màu, tạo ra vệt mờ.  

 

Đó là lý do tại sao bạn có máy Retina Macbook Pro mà muốn chỉnh lại độ phân giải, cho bạn biết độ phân giải này “looks like” 1280x800px (xem hình bên dưới). Tức là nó sử dụng trải nghiệm độ phân giải của người dùng để diễn đạt một tỷ lệ kích thước nào đó. 

Đây là một đại diện rất chủ quan khi sử dụng độ phân giải của một điểm ảnh như một đơn vị kích thước vật lý, nhưng không có nghĩa là đánh lừa, chí ít là theo quan điểm của họ. 

Ghi chú:

Nếu bạn muốn một thấy thiết kế có điểm ảnh hoàn hảo thì không nên chỉnh độ phân giải màn hình khác với chuẩn của nó. Đúng là bạn có thể thấy thoải mái hơn với một tỉ lệ nhỏ nhưng đối với điểm ảnh thì bạn cần độ chính xác nhất. Không may là nhiều người thay đổi độ phân giải để nhìn cho rõ hơn là quan tâm đến việc thiết lập đúng cấu hình, điều này có thể làm cho thiết kế của bạn trông tệ hơn, nhưng ở khía cạnh người dùng thì họ chả cần màu mè làm gì, cứ rõ là được. 

 

4k là gì?

Gần đây bạn nghe rất nhiều về cụm từ độ phân giải 4K, vâng, 4K là một đề tài xu hướng. Để hiểu rõ nó là gì, bạn cần biết ý nghĩa của "HD".

Tôi sẽ bàn về các độ phân giải thông thường, các loại HD khác nhau. Cụm từ HD được chỉ cho tất cả các độ phân giải từ 1280x720 hoặc 720p cho 720 theo dòng ngang. Có một số gọi là độ phân giải SD (standard definition)

Cụm từ full HD áp dụng cho màn hình có độ phân giải 1920x1080px. Hầu hết TV và các loại điện thoại cao cấp sử dụng độ phân giải này (Galaxy SIV, HTC one, Sony Xperia Z, Nexus5...)

4K bắt đầu từ độ phân giải 3840x2160 pixels. Nó còn gọi là Quad HD hay UHD (Ultra HD). Xét về số điểm ảnh, bạn có thể nhét 4 lần 1080p vào màn hình 4K. Độ phân giải 4K khác nữa là 4096x2160. Nó to hơn một chút và chủ yếu là sử dụng trong máy chiếu hay camera chuyên nghiệp.  

Điều gì xảy ra nếu tôi cắm màn hình 4K vào máy tính?

Hiện tại thì hệ điều hành không kéo giãn lên 4K, có nghĩa là nếu bạn gắn một màn hinh 4K vào Chromebook hay Macbook, nó vẫn sẽ sử dụng tài nguyên phân giải DPI cao nhất và hiển thị nó ở tỷ lệ bình thường, thì mọi thứ nhìn ngon nhưng nhỏ xíu. Ví dụ: nếu bạn cắm một màn hình 12" độ phân giải 4K vào máy tính có màn hình 12" độ phân giải cao (x2), mọi thứ sẽ hiển thị 2 lần và nhỏ. 

Ghi chú: 
- 4k tức là 4 lần Full HD.
- Nếu hệ điều hành hiện tại xử lý được 4K nhưng không kéo giãn, tức là chưa có tài nguyên 4K.
- No phone or tablet uses 4K as of today.

 

(Còn tiếp...)

Theo Sebastien Gabriel

 

Tin Tức/Blog

Ngân hàng Shinhan - giới thiệu chức năng đăng ký vay online Tiêu chuẩn vẻ đẹp của mỗi quốc gia thông qua Photoshop Tăng cường trải nghiệm thanh toán với các hiệu ứng động Điều sẽ xảy ra với dữ liệu của chúng ta khi chúng ta qua đời? Giới thiệu website Suboi Entertainment 13 ebook miễn phí dành cho quản trị Social Marketing Vì sao bạn cần chiến lược Digital marketing? P3 Những thiết kế sử dụng Typography sáng tạo Vì sao bạn cần chiến lược Digital marketing? P2 Vì sao bạn cần chiến lược Digital marketing? P1 Sự quan trọng của cảm xúc trong thiết kế Số liệu người dùng trực tuyến đầu năm 2014 Tổng quan về thiết kế trải nghiệm người dùng (P2) Tổng quan về thiết kế trải nghiệm người dùng (P1) Làm gì với mỗi visit ở Website bán hàng? Thiết kế Web có cần hiểu lập trình? Bạn và khách hàng: Ai quan tâm đến thiết kế nhiều hơn? Website NƯỚC 2030 chính thức ra mắt 10 xu hướng thiết kế web mà tôi không muốn thấy ở năm 2014 Tại sao trong in ấn lại dùng hệ màu CMYK? 9 yếu tố của một website thành công Một số cách để nén File PDF và PSD hiệu quả Sơ lược về chiếc phong bì. Những Poster "Âm Dương" độc đáo Túi giấy: tấm Billboard di động 10 xu hướng thiết kế Web 2013 Thiếu chuẩn bị, website là sự phí phạm Marketing mobile 2013 Top 10 thuật ngữ hay dùng trong thiết kế Web Ý tưởng độc đáo của Moto Corsa WebP: Định dạng ảnh mới của Google. Sáng tạo từ ảo giác không gian thực Creative Brief: Định hướng ban đầu cho phát triển dự án. Cách làm một logo phong cách hipster Các loại hình công ty quảng cáo Việt Nam Google Web Designer Final Artwork - những điều cần biết Quá trình in offset Google ra mắt Chim ruồi. Bing.com tiết lộ nhận diện và website mới Thông báo: Doda giới thiệu website mới 5 cách để tạo hình ảnh tuỳ chỉnh (resposive web) Facebook Hashtags: hoạt động và sử dụng đúng cách Những điều cần biết khi thiết kế danh thiếp Ngôn ngữ của màu sắc