Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Điều chỉnh thị giác để tăng hiệu quả khi làm thiết kế

Chủ đề thuộc danh mục 'Kinh nghiệm / Kiến thức dành cho designer' được đăng bởi Akai, 18/5/17.

Lượt xem: 14,622

  1. Akai Thành viên cấp 2

    [​IMG]
    [​IMG]

    Khi mới bước chân vào ngành thiết kế, tôi phụ thuộc vào Photoshop và CSS để chỉ cho mình biết làm như vậy là đúng hay sai. Nếu Photoshop sắp xếp 2 hình thẳng hàng thì nghĩa là chúng phải thẳng hàng. Nếu Photoshop bảo 2 hình có cùng một kích cỡ thì nó là như vậy.

    Cách tiếp cận này có vẻ logic nhưng đó không phải cách tốt nhất khi làm thiết kế.

    Những tính toán của phần mềm có vẻ hợp lý nhưng không thể so sánh được với cách chúng ta nhận biết hình khối, màu sắc và kích cỡ. Phần mềm không hiểu được tương quan giữa các đối tượng (object) với nhau, sự tương quan tổng thể của ngôn ngữ thị giác cũng như là cách chúng ta nhận thức về các vật thể.

    Bộ não “bất hợp lý” của con người cần quyết định một vật có đúng về mặt thị giác hay không, bởi chúng ta có thể nhìn và hiểu được sự tương quan trong khi máy tính thì không thể. Chính việc hiểu được những “tiểu tiết” này và biết cách điều chỉnh chúng sẽ làm cho một nhà thiết kế tốt trở nên giỏi hơn. Sẽ không nhiều người biết và để ý đến sự thay đổi nhỏ này, nhưng nếu không có nó mọi người sẽ thấy khó chịu.

    Căn gióng và trọng lượng thị giác

    Máy tính không thể nhận biết chính xác được Trọng Lượng của đối tượng nằm ở đâu, nó phải dựa vào một vài thông tin nhất định như độ rộng, chiều cao hay vị trí. Là nhà thiết kế, chúng ta cần bù lại những thiếu sót của máy móc bằng một thứ gọi là Optical Adjustment (điều chỉnh thị giác).

    Bạn thấy hình tam giác của nút Play này đang căn giữa với hình tròn đúng không?
    Sai rồi.

    Khi vẽ một hình chữ nhật bao quanh hình tam giác, ta có thể thấy nó không nằm chính giữa hình tròn.


    [​IMG]

    Thoạt nhìn, hình tam giác có vẻ nằm ở chính giữa hình tròn, nhưng thật ra không phải vậy. Tại sao lại thế? Đó là nhờ Visual Weight (trọng lượng thị giác. Trọng lượng và khối lượng của hình tam giác nằm ở bên trái. Nó tạo một ảo ảnh thị giác làm hình tam giác có vẻ nằm lệch khỏi tâm hình tròn sang bên trái trong khi nó đang được căn chính giữa hình tròn.

    Để giải quyết vấn đề này, chúng ta phải điều chỉnh hình tam giác sao cho nó “xuất hiện” ở chính giữa.

    Màu sắc

    Optical Adjustment trong màu sắc thì “tiểu tiết” hơn. Ở ví dụ này, một lần nữa, mọi thứ nằm ở trọng lượng của đối tượng và có bao nhiêu màu sắc được hiển thị.

    Ở hình bên trái, cùng một màu xanh lá cây nhưng màu trong logo đậm hơn màu của dòng chữ.
    [​IMG]

    Ở hình bên trái, cả icon và text đều dùng một mã màu có giá trị hex như nhau, hình bên phải sử dụng hai giá trị màu khác nhau. Để được như vậy, tôi đã giảm độ sáng của màu xanh trong bảng giá trị “HSB”

    Tỉ lệ

    Tỉ lệ là cách bộ não của bạn tiếp nhận kích cỡ của đối tượng, bao gồm cả Text. Một hình vuông cỡ 120 x 120 pixel có bề mặt diện tích lớn hơn một hình tròn cỡ 120 x 120 pixel. Vì vậy, hình tròn sẽ cần nhiều phần để bù lại so với hình vuông.
    [​IMG]

    Ở cặp hình bên trái, cả hình tròn và hình vuôn đều có kích cỡ là 120 x 120 pixel, điều này khiến hình tròn có vẻ quá nhỏ. Ở bên phải, hình tròn có cỡ 126 x 126 pixel, nên có thể bù lại cho bề mặt của hình vuông.
    Những điều chỉnh này có thể mang tính tiểu tiết, nhưnxg sẽ làm cho tổng thể của bản thiết kế nhìn hợp lý hơn. Dưới đây là ví dụ cho việc tinh chỉnh một yếu tố, tăng hoặc giảm 1 đơn vị pixel để thiết kế “có vẻ đúng”.
    [​IMG]
    Để ý phần dưới/trên của một vài chữ cái thì nhô ra hơn so với đường X-height ( Đường gióng biểu thị chiều cao của chữ cái thường).
    Điều này còn có thể áp dụng trong Typography. Khi bạn vẽ một nét qua baseline (đường cơ sở mà các chữ nằm trên) và x-height của text (text dùng font Garamond), bạn sẽ thấy những đoạn cong của chữ cái nhô ra ngoài một chút so với những đường này. Nếu không có những overshoot này, ta sẽ có cảm giác một vài chữ cái hơi bé so với các chữ cùng thuộc kiểu chữ còn lại.
    Chữ hoa

    Khi đặt ra tiêu chuẩn của các chữ hoa khi đứng cạnh standard case text, chữ hoa thì nổi bật hơn chữ thường và cần được điều chỉnh để có thể bù lại cho nhau.
    [​IMG]
    Chữ hoa ở dòng trên có vẻ to hơn dòng text còn lại. Chữ hoa ở dòng dưới đã được điều chỉnh nhỏ lại 2 pixel để có được cảm giác chúng cùng kích cỡ.
    Trừ khi mục đích của bản design là làm cho chữ cái in hoa nổi bật hơn, luôn nên giảm pixel của chữ xuống.​
    Khi làm việt trên một giao diện, những điều chỉnh nhỏ này bổ sung và tác động đến tổng thể của website. Chú ý đến từng tiểu tiết là điều làm cho một bản thiết kế trở nên tuyệt vời.
    [​IMG]
    Máy tính hay các công nghệ AI không thể hiểu được sự tương quan trong các thiết kế. Vì thế chúng không đưa ra được những điều chỉnh chính xác như những nhà thiết kế. Cho đến khi máy móc có thể đưa ra được những đánh giá hợp lý về từng thành phần riêng biệt trong ngữ cảnh của thiết kế, chúng ta vẫn chưa thể để công cụ đưa ra những quyết định phức tạp của bản thiết kế.
    Chúng ta không nên phụ thuộc vào máy tính để làm hết các bước tư duy, cần phải dựa vào con mắt và bản năng của mình. Các nhà thiết kế trau dồi bản năng bằng những thiết kế họ phải làm hằng ngày. Vì vậy, ta nên tin họ, kể cả khi máy móc bảo ta làm khác.

    Nguồn: Medium
    Dịch: Akai Studio







  2. Thanhanm

    Thanhanm Mới đăng kí

    ôi bài viết của bạn thật là dài, nhưng thật là hay

Ủng hộ diễn đàn