Home Kiến thức Cách áp dụng và tính tỉ lệ trong layout

Cách áp dụng và tính tỉ lệ trong layout

by Thùy Uyên

Thực ra những con số tỉ lệ như 1.2, 1.414, 1.618, 1.84… ko cho chúng ta cách sắp xếp 1 layout, không quy định phải đặt các yếu tố của layout ở đâu mà chúng chỉ dùng để hỗ trợ việc xác định vị trí, kích thước của các yếu tố đó sao cho hợp lý và “thuận mắt” người xem nhất.

Ví dụ bạn muốn làm một layout với image bên trái, text bên phải. Vậy chúng có kích thước bao nhiêu là phù hợp, vị trí thế nào, nếu muốn dịch qua lại, lên xuống thì nên dịch chuyển một khoảng bao nhiêu là hợp lý? Nếu có 3-4 hình tròn trang trí thì nên lấy kích thước của các hình tròn đó là bao nhiêu? Khi đó bạn có thể dùng các con số tỉ lệ để tính toán.

Việc tính toán theo tỉ lệ sẽ giúp bạn làm quen, và dần dần, khi sắp xếp một layout, bạn không cần phải lấy máy tính ra tính toán (như khi làm BT) nữa, mà chỉ cần nhắm bằng mắt cũng tương đối chính xác và hợp lý.

Bây giờ mình lấy BT tỉ lệ trong môn Basic Design để làm vd nhé. Bài này thầy yêu cầu dùng 2 tỉ lệ là 1.618 và 1.84 để tính toán. Như đã biết 1.84 là tỉ lệ lặp lại, nên được dùng cho việc tính toán các khoảng cách liên tiếp nhau. 1.618 là tỉ lệ vàng, có thể dùng để tính kích thước, hoặc cũng có thể dùng để tính cho các khoảng cách.

Tỉ lệ 1.84 cho ra các con số 20 : 37 : 68 (20×1.84=37, 37×1.84=68). Ng ta thường dùng 3 con số này để thuận tiện cho việc tính tỉ lệ. Vậy thì các con số 20, 37, 68 đó tương ứng với bao nhiêu cm (hay inch) trên layout?

Nhìn vào vd sau đây:

Heineken

phần được chia theo tỷ lệ 1.618:

1618grid-2

phần được chia theo tỷ lệ 1.84:

184grid-2

Đầu tiên bạn sắp xếp các yếu tố (image, text) lên layout ở những vị trí mà bạn muốn, với bố cục theo ý đồ của bạn. Sau đó tiếp tục tính toán và điều chỉnh kích thước, vị trí của các yếu tố đó theo tỉ lệ.
Bạn có thể chọn con số tỉ lệ nào mà bạn muốn, theo mình thì bạn cứ chọn con số nào mà nó đem lại kết quả tương đối theo bố cục ban đầu bạn đã chọn (còn bố cục thế nào thì dĩ nhiên là tuỳ thuộc vào thẩm mĩ của bạn rồi ). Ở đây mình sắp xếp các yếu tố trong layout như trên, Giờ thì tính toán tỉ lệ nào:

1> Kích thước trang giấy: 
Những trang giấy tiêu chuẩn (A3, A4,…) có kích thước theo tỉ lệ là 1.414, ở đây mình dùng tỉ lệ 1.618 (để poster này dài hơn). Như vậy chọn kích thước 1 chiều là 18cm – ứng với 1 – thì chiều kia là 18 x 1.618 = 29cm.

2> Chia khoảng cách theo chiều ngang cho phần hình cô gái, khoảng trống ở giữa, và phần hình chai bia+cái ly+text: 
Ở đây mình muốn thành phần chính, đập vào mắt ng xem trước hết là hình cô gái, nên cho phần đó lớn nhất, tiếp theo là phần của sản phẩm, và nhỏ nhất là khoảng trống ở giữa. Như đã nói tỉ lệ 1.84 được dùng để tính khoảng cách:

C1: 20 + 37 + 68 = 125
Chiều ngang trang giấy là 29 => 1 phần ứng với 29/125 = 0.232
=> 20 ứng với 20 x 0.232 = 4.64cm ~ 4.6cm ((làm tròn cho dễ tính)
37 ứng với 37 x 0.232 = 8.584cm ~ 8.6cm
68 ứng với 68 x 0.232 = 15.776cm ~ 15.8cm (hoặc phần còn lại chính là 68, khỏi tính!!)

C2: Hoặc bạn có thể dùng trực tiếp 1.84 để tính:
29/1.84 = 15.76cm ~ 15.8cm
15.8/1.84 = 8.59cm ~ 8.6cm
8.6/1.84 = 4.67cm ~ 4.6cm

Cách dùng 1.84 thuận tiện khi chia khoảng cách 20 : 37 : 68, nhưng nếu chia theo kiểu “biến thể” như 20 : 37 : 37 (hoặc tương tự) thì dùng cách 1 (lấy chiều dài chia cho tổng tỉ số) tiện hơn

3> Tiếp tục chia nhỏ các khoảng cách theo chiều ngang như trong hình trên 

4> Làm tương tự cho chiều dọc 

5> Đôi khi việc dùng tỉ lệ 1.84 để tính khoảng cách lại không thuận tiện, vd như tính vị trí của chai bia và cái ly. Nếu chọn các con số 20 : 37 : 68 để chia thì không hợp lý, do đó mình dùng tỉ lệ 1.618:

Tổng chiều ngang cho chai bia+khoảng trống ở giữa+cái ly sau khi tính toán là = 5.6cm
=> Chiều ngang cho cái ly là 5.6/(1+1.618) = 2.14cm
Chiều ngang cho chai bia+khoảng trống là 2.14 x 1.618 = 3.46cm (phần còn lại)

Sau đó bạn tiếp tục chia tỉ lệ cho chai bia và khoảng trống. Ở đây khoảng trống rất nhỏ so với chai bia nên mình chọn tỉ lệ 68:20

Cứ như thế bạn chia tỉ lệ cho tất cả mọi yếu tố trong layout.

* Như vậy việc sử dụng tỉ lệ không cho bạn biết nên đặt một tấm hình, một đoạn text ở đâu mà nó hỗ trợ bạn tính toán xem nếu mình đặt tấm hình ở vị trí khoảng chỗ đó thì con số tọa độ của nó nên là bao nhiêu cho hợp lý nhất…

* Ngoài ra có thể dùng tỉ lệ để tính góc quay cho một tấm hình chẳng hạn (vd lấy 90o/1.618/1.618 ~ 35o, cho bạn một góc quay lạ nhưng vẫn hợp lý)

* Hoặc dùng để tính tỉ lệ giữa các vòng tròn trang trí: nếu đường kính của hình tròn lớn nhất sau khi tính toán là 5cm thì các hình tròn tiếp theo có thể có đường kính là (tùy theo bạn chọn tỉ lệ nào để chia nhé):
5/1.414 = 3.5cm, 3.5/1.414 = 2.5cm, 2.5/1.414 = 1.8cm …

* Cũng có thể dùng tỉ lệ để tính diện tích các yếu tố nếu như chúng ko phải là hình tròn hoặc hình chữ nhật (tức các hình “vuông vức”)

Tóm lại việc dùng tỉ lệ giúp bạn xác định kích thước, đặt để, xê dịch các yếu tố trong layout với những thông số hợp lý, có chủ đích chứ không tùy tiện. Và khi đã quen rồi thì bạn không cần tính toán cụ thể mà chỉ nhắm bằng mắt cũng cho một layout hợp lý (đẹp hay không thì còn tùy hehe)

(Bài viết được trích từ hocviendpi – Tác giả: hoangngoc374 – K21 )

You may also like

26
Để lại câu hỏi và nhận trả lời nhanh qua email.

avatar
mới nhất cũ nhất
small sized cars

Hello there, I found your blog via Google at the same time as looking for a related topic, your website came up, it appears great. I’ve bookmarked it in my google bookmarks.

Rodney P. Eady

Impressive publish! STICK WITH IT!

Financial advisor

This Blog was most helpful, your ideas are straight to the point, and the colors are cool too.

Latanya

Lots of helpful information. I have bookmarked your site.

Tâm Nguyễn
Tâm Nguyễn

so 20 minh tu cho ha Uyen . Minh hoc Dpi k28.Thanks truoc

Tâm Nguyễn
Tâm Nguyễn

Tỉ lệ vàng mình đã nắm được, còn tỉ lệ lặp lại,cho mình test lại bài của thầy YOO nhé. Mình thấy có nhiều số 20.Vậy khoảng cách số 20(từ mép trái trang giấy>khủy tay trái)ấy,sẽ = 20 x tổng chiều dài từ mép trái trang đến khủy tay phải Hoặc = 20 x khoảng cách của số 68( số 68 của trang giấy ấy ) .Có đúng ko Uyên ? Thanks trước nhé ! Mình đang làm bài 2 tỉ lệ này nộp cho thầy.Hic hic!Thầy YOO tính khí ra sao chắc Uyên biết rồi

Tâm Nguyễn
Tâm Nguyễn

à hiểu rồi, học thầy 70%, 30% còn lại mình thường xuyên vào blog Uyên học lắm, không chỉ riêng cái này đâu? Xuýt bị tẩu hỏa với bài này. Thanks Uyên nhiều lắm

Tâm Nguyễn
Tâm Nguyễn

mình rất hiểu số 20 đó ko = nhau, ý mình nói cách tính ấy, nhưng giờ mình hiểu rồi, mình cũng có thể tự cho số 68 lun, miễn sao mình quan sát nó lón nhất(mình nhìn trực giác) layout theo ý mình ,rồi số 20, 37 sẽ tính ra được. OK phải ko Uyên ? Mò mẫm trong blog Uyên 2 ngày nay rồi ấy. Thanks nhiều lắm,đây đến ngày portpolio còn 9 tháng, rất mong Uyên giúp đỡ khi mình còn hơi chưa hiểu bài sâu sắc.Thôi giờ mình làm bài lun. Bye Uyên nha

Hazombiie
Hazombiie

bai nay hay lam, thanks nhe

MINH HÀ
MINH HÀ

Mình có một số vấn đề chưa hiểu rõ lắm về tỷ lệ, Uyên giúp mình nhe.
Cớ là mình có bài tập làm về thiết kế poster cho 1 Typeface, Thầy nói thiết kế theo tỷ lệ. mình có thể thiết kế theo hệ thống lưới (GIRD) hoặc theo tỷ lệ nào đó mà mình thấy hợp lý. Nhưng cho đến giờ học cũng được một time zùi mà mình vẫn còn mơ màng quá à. Uyên biết thì giải thích giúp mình được hok?
Thanks!

kakashi

Bạn có thể lấy thêm ví vụ về 1.84 được không bạn :D? mình chưa hiểu về cách áp dụng con số này như thế nào:(

Ân Võ
Ân Võ

"Tổng chiều ngang cho chai bia+khoảng trống ở giữa+cái ly sau khi tính toán là = 5.6cm
=> Chiều ngang cho cái ly là 5.6/(1+1.618) = 2.14cm"
Mình không hiểu đoạn này, làm sao tính đc số 5,6

Ân Võ
Ân Võ

"Tổng chiều ngang cho chai bia+khoảng trống ở giữa+cái ly sau khi tính toán là = 5.6cm
=> Chiều ngang cho cái ly là 5.6/(1+1.618) = 2.14cm"
Mình không hiểu đoạn này, làm sao tính đc số 5,6

Ân Võ
Ân Võ

“Tổng chiều ngang cho chai bia+khoảng trống ở giữa+cái ly sau khi tính toán là = 5.6cm
=> Chiều ngang cho cái ly là 5.6/(1+1.618) = 2.14cm”
Mình không hiểu đoạn này, làm sao tính đc số 5,6

ThuyUyen.info

Anh đọc lại mục số 2- C1, chiều ngang trang giấy là 29cm, ta tính theo C1 thì ra được khoảng cách từ cái chai ra tới mép ngoài bên phải là 8.6cm (đoạn 37), sau đó ở trong đoạn 37 này mình lại chia ra cái chai + khoảng cách + cái ly là 37, phía ngoài cái ly ra tới mép phải là 20, từ đây mình lấy 8.6 cm*37/(37+20) = 5.6 cm

ThuyUyen.info

Anh đọc lại mục số 2- C1, chiều ngang trang giấy là 29cm, ta tính theo C1 thì ra được khoảng cách từ cái chai ra tới mép ngoài bên phải là 8.6cm (đoạn 37), sau đó ở trong đoạn 37 này mình lại chia ra cái chai + khoảng cách + cái ly là 37, phía ngoài cái ly ra tới mép phải là 20, từ đây mình lấy 8.6 cm*37/(37+20) = 5.6 cm

Sam Sam

Nếu thiết kế mà tính tỉ lệ nhiều như này thì mệt thật 🙁 Hồi giờ toàn làm lụi

Sam Sam

Nếu thiết kế mà tính tỉ lệ nhiều như này thì mệt thật 🙁 Hồi giờ toàn làm lụi

Ngọc Thúy
Ngọc Thúy

Băn khoăn bao năm đã nhờ bài viết chia sẻ này của bạn Thùy Uyên mà đc giải đáp. Cảm ơn Uyên nhiều website rất hay và nhiều kiến thức bổ ích.

Vân
Vân

Hi bạn, cho mình hỏi, thầy Yoo nói không nên từ 20 lên 68 mà phải đi từ 20-37-68, nhưng trong hình chia của bạn có 20 sau đó lên 68 ví dụ phần phía dưới cô gái, bạn có thể giải thích giúp mình khôn ạ? Cám ơn bạn