Tỷ lệ khung hình là gì? Mẹo cho tất cả màn hình
Mọi hình ảnh, canvas và artboard đều có thể được xác định bằng hình dạng độc đáo của nó và ratio screen được sử dụng để mô tả tỷ lệ cố định của những hình dạng này. Tỷ lệ cỡ ảnh thường là hình chữ nhật hoặc hình vuông và luôn được giới hạn bởi chiều cao và chiều rộng cố định. Nói một cách đơn giản, ratio screen là chiều rộng của hình ảnh lớn như thế nào so với chiều cao của nó (thường được biểu thị ở định dạng “X: Y”) mà không có bất kỳ pixel hoặc đơn vị nào được đính kèm.
Các bài viết liên quan:
Điều quan trọng cần lưu ý là ratio screen không chỉ đơn giản là phép đo chiều rộng và chiều cao mà nó là một con số được giảm xuống tỷ lệ nhỏ nhất có thể. Ví dụ: nếu kích thước của hình chữ nhật là chiều rộng 50 inch và chiều cao 100 inch, tỷ lệ là 1: 2, trái ngược với 50: 100. Điều này cho phép các nhà thiết kế giao tiếp bằng một ngôn ngữ chung bằng cách giảm ratio screen xuống tỷ lệ thấp nhất có thể. Do đó, tỷ lệ 1: 2 sẽ vẫn nhất quán và đúng cho dù kích thước là 100 × 200 inch hay 500 × 1000 inch.
Công thức tỷ lệ co
Tỷ lệ co được viết ra dưới dạng công thức của chiều rộng và chiều cao. Trên Instagram, bạn sẽ nhận thấy rằng ảnh nằm trên lưới vuông 1: 1 (một đối một). Mặt khác, khung của YouTube là hình chữ nhật với ratio screen là 16: 9. Nếu ratio screen của hình ảnh hoặc video khác với thiết bị được xem, hình ảnh sẽ bị cắt. Trong thiết kế web, các nhà thiết kế muốn tránh việc hình ảnh bị cắt xén và có khả năng làm mất ý nghĩa của chúng đối với người dùng. Do đó, điều quan trọng là phải lưu ý ratio screen của thiết bị khi chuẩn bị hình ảnh và video cho thiết kế của bạn.
Một đặc điểm chính của ratio screen là chúng không thay đổi. Ví dụ: tỷ lệ 1: 1 sẽ luôn là 1: 1, bất kể kích thước của hình ảnh. Một hình ảnh có thể là 200 × 200 pixel hoặc 500 × 500 pixel, nhưng ratio screen sẽ luôn duy trì là 1: 1. Mặt khác, ratio screen 16: 9 tính bằng pixel có thể là 1024 × 576 pixel hoặc 1152 × 648 pixel. Với cả hai kích thước, ratio screen sẽ luôn là 16: 9.
Ratio screen màn hình phổ biến nhất là gì?
Khi làm việc với các ratio screen, điều quan trọng là phải biết những tỷ lệ phổ biến nhất được sử dụng trong thiết kế. Các màn hình cụ thể yêu cầu các ratio screen khác nhau. Dưới đây là các ratio screen phổ biến nhất cho màn hình:
1: 1
Tỉ lệ 1: 1 là một hình vuông có chiều rộng và chiều cao bằng nhau. Nó thường được sử dụng trong đồng hồ thông minh và khi chuẩn bị bức ảnh hoàn hảo đó cho Instagram. Đó là ratio screen để chọn khi bạn muốn có một canvas hình vuông.
3: 2
ratio screen này phổ biến do phim. Trên thực tế, hầu hết các ratio screen bắt nguồn từ chụp ảnh phim và từ đó đã phát triển sang không gian kỹ thuật số. Phim 35mm lần đầu tiên làm cho ratio screen 3: 2 trở nên phổ biến và tỷ lệ này vẫn còn phổ biến trong nhiếp ảnh ngày nay.
4: 3
ratio screen 4: 3 phổ biến trên màn hình máy tính và màn hình tivi. Các mẫu TV cũ hơn thường được tạo ra với tỷ lệ này.
16: 9
Ti vi kể từ đó đã phát triển để bao gồm màn hình rộng phổ biến, có ratio screen 16: 9. Video màn hình rộng, màn hình máy tính và trang trình bày cũng thường có ratio screen là 16: 9. Trên thực tế, hầu hết các điện thoại và máy ảnh sẽ mặc định quay video ở tỷ lệ này.
Ratio screen điện thoại di động phổ biến nhất là gì?
Đối với màn hình điện thoại, có một số xu hướng ratio screen phổ biến giữa nhiều nhà sản xuất. Ví dụ: Apple sử dụng tỷ lệ 19,5: 9 cho iPhone 8, 11 và 12. Tuy nhiên, iPhone X có tỷ lệ 13: 6, trong khi các mẫu trước đó (iPhone 5, 6, 7) có tỷ lệ 16 : 9. Rõ ràng là Apple hiện đang ưa chuộng tỷ lệ 19,5: 9 và thời gian sẽ chỉ cho biết liệu họ có thay đổi hay không.
Các thiết bị Android có xu hướng có ratio screen là 16: 9, trong khi một số khác với tỷ lệ 16:10. Vào cuối ngày, hãy đảm bảo thực hiện nghiên cứu trực tuyến của bạn để xác định ratio screen của màn hình để hiểu đầy đủ các hạn chế của bạn trước khi bắt đầu thiết kế.
Xem thêm Dịch vụ thiết kế web responsive(đáp ứng)
Như bạn có thể nói, không có ratio screen cố định mà bạn nên sử dụng cho hình ảnh và video. Để đáp ứng cho các biến thể này, thiết kế đáp ứng sẽ được phát huy. Thiết kế đáp ứng giúp bạn duy trì hình dạng cụ thể cho hình ảnh và video trên nhiều thiết bị. Để đạt được điều này, hình ảnh và video sẽ có một ratio screen cụ thể trong CSS. Điều này đảm bảo rằng ý nghĩa của nội dung của bạn không thay đổi do hình ảnh bị cắt.
Ví dụ, nếu bạn thiết kế một trang chủ với hình ảnh anh hùng của hai người đang ôm và một người bị cắt bỏ, ý nghĩa của bức ảnh đó hoàn toàn thay đổi. Nếu bạn có nhiều hình ảnh bị cắt trong khi sử dụng lưới lặp lại đáp ứng, điều này có thể mở rộng quy mô và ảnh hưởng nặng nề đến trải nghiệm người dùng của bạn. Bằng cách duy trì ratio screen trong CSS, bạn có thể giúp đảm bảo hình ảnh không bị cắt và không hiệu quả.
Máy tính ratio screen
Để xác định ratio screen này của hình ảnh và video, bạn có thể sử dụng máy tính ratio screen khi tạo khung hình dây của mình. Một số công cụ tính ratio screen miễn phí phổ biến nhất hiện có trên mạng là:
- Wistia
- Toolstud.io
- Aspect Ratio Calculator
Kiểm soát ratio screen trong công việc thiết kế
Thiết kế với các ratio screen khác nhau giúp nhà thiết kế hiểu cách hình ảnh và video của họ sẽ được xem trên các tấm bạt cụ thể.
Nhận biết được điều này sẽ giúp bạn tiết kiệm thời gian và tránh phải làm thêm trong tương lai. Nó cũng sẽ giúp bạn tránh ảnh bị cắt và mất ý nghĩa do hạn chế về tỷ lệ. Biết thông tin chi tiết về ratio screen là một công cụ có giá trị khác trong vành đai công cụ của bất kỳ nhà thiết kế nào.
