0

Cuốn sách này

Dành cho những ng i đang

tìm kiếm kiến th c, nh tôi

Sẽ không có quá nhiều l i m đ u sáo rỗng và dài dòng. T t c

những gì tôi muốn đ a Ảào cạốn sách này là những kiến th c mà tôi
đã maấ mắn đ ợc học. Và tôi tin rằng, t t c mọi ng i đều x ng
đáng nhận đ ợc nó.

L i Ảăn c a tôi sẽ không hay, không chau chuốt. Nh ng, mỗi câu từ
bên trong cuốn sách nàấ, đều là những th mà tôi thực sự muốn
chia sẻ cho các b n.

Tôi không biết kh năng lan tỏa c a cuốn sách nàấ là nh thế nào.
Không biết bao nhiêạ ng i có thể đọc nó. Không biết bao nhiêu
ng i sẽ thích nó. Nh ng tôi biết đâấ sẽ một trong những điều
tuyệt v i nh t cuộc đ i mình.

Mọi đóng góp Ảề cuốn sách, từ những lỗi chính t nhỏ nh t, từ

những kiến th c ch a đúng đắn, từ những hình nh đ ợc sử d ng
không hợp pháp c n bị lo i bỏ. Hãy cho tôi biết, b n nhé !

1
colorME

Là ớc mơ, tạổi trẻ và

nhiệt huyết c a tôi

Tôi là Hùng-Founder c a colorME – lớp học thiết kế cho t t c mọi

ng i, là kẻ điên đang ngồi gõ từng chữ trong cuốn sách này với hi
vọng giúp đ ợc những ng i nh b n, biết đến những kiến th c ít
ai chia sẻ.

Đôi chút Ảề colorME, colorME là kh i nghiệp đ u tiên c a tôi, là

một lớp học mà tôi p từ khi còn là một học sinh trung học.

Tính đến hiện nay, sau 10 tháng vận hành, colorME đã đào t o cho
1500 b n học Ảiên trên toàn địa bàn Hà Nội. Chúng tôi không tự đặt
ra s mệnh cho mình vì nó có vẻ quá to lớn. Chúng tôi chỉ muốn,
càng nhiềạ ng i có kh năng thiết kế, càng tốt. Vậy nên, nếu cuốn
sách này có may mắn tr thành một ph n quan trọng trong cuộc
sống c a b n, hãy chia sẻ với tôi qua [email protected] nhé.

2
MỤC LỤC

1. Kiến th c cơ b n về thiết kế kỹ thuật số

2. Các bố c c th ng gặp
3. Sử d ng màu sắc
4. Những điều c n biết về Typography
5. Các hiệu ng cơ b n
6. Nhận diện th ơng hiệu
7. Cách thiết kế CV với Photoshop
8. Các Ấạ h ớng thiết kế mới

3
CHƯƠNG 1

Kiến th c cơ b n về thiết kế
kĩ thạật số

Chúng ta sẽ bắt đ u từ những b ớc đi nhỏ nh t nhé. Hãy bắt đ u từ

những kiến th c mà b t c designer nào cũng ph i nắm rõ nh lòng
bàn tay.

Ch ơng nàấ sẽ giúp b n định hình xem, cuốn sách này giúp b n làm
đ ợc những gì, giúp b n làm quen với công c Photoshop, và, giúp
b n có thêm động lực cho sự tự học.

Chúng tôi đã Ấâấ dựng hệ thống Ảideo đi kèm Ảới cuốn sách này. Vì
chúng tôi biết, sẽ r t khó để mô t cho b n những ph n demo
nhiềạ b ớc chỉ với những b c hình khó hiểu. Hãy xem video cùng
lúc đọc ebook nàấ để đ t hiệu qu tốt nh t nhé.

4
 Các bài toán th ng gặp

Chia sẻ cho b n th b n c n.
Chúng tôi có một ít kiến th c về thiết kế. Nh ng không Ảì thế mà chúng tôi cố gắng nhồi nhét t t c vào cuốn
ebook 200 trang này, chúng tôi sẽ chỉ giúp b n với những kiến th c tinh gọn nh t. Để b n có thể tự b ớc đi
tiếp trên đôi chân c a mình mà không c n sự giúp s c c a những cuốn sách khác nữa. Hãy thử nhìn xem các
bài toán mà học viên c a colorME th ng gặp là nh thế nào nhé.

Nhận diện th ơng hiệu

Tự xây dựng Logo và bộ nhận diện th ơng hiệạ đi kèm cho clạb haấ tổ ch c c a mình.

Số hóa ý t ng
B n có 1001 ý t ng trong đ u có thể tr thành tuyệt ph m nh ng không biết bắt đ u từ đâạ.

Chèn quote vào nh

Dù nhỏ nh ng cũng r t nhiềạ ng i h ng thú, chèn “deep qạote” Ảà những b c hình “ o diệạ”

Thiết kế n ph m truyển thông

Banner, poster, standee, avatar, cover, b n đã bao gi muốn tự tay xây dựng chúng?

Chỉnh sửa nh
Làm trắng da, mịn da, t y m n, nhuộm tóc… haấ chỉnh sửa những b c hình mà b n tự ch p.

5
Những gì b n có Ảà ch a có

Bạn thường có sẵn 2 thứ, và thiếu 2 thứ. Thứ mà bạn luôn có

sẵn là nội dung, những thứ mà bạn muốn đưa vào tác phẩm
của mình. Đó có thể là nội dung của một chương trình, nội dung
của một tờ rơi, nội dung của một slide mà bạn đang muốn trình
bày một cách thật ấn tượng.

Điều thứ 2, mà bạn có sẵn, là ý tưởng. Lần này bạn sẽ dùng

concept về đồ chơi giấy? Concept về những con quái vật?
Concept về mùa thu? Concept về thế giới động vật? Bạn đã
thực sự sẵn sàng cho tác phẩm của mình. Bạn chỉ thiếu hai thứ
nữa.

Đầu tiên, bạn cần một công cụ để hiện thực hóa ý tưởng của
mình. Có rất rất nhiều các phần mềm thiết kế có thể giúp bạn
làm điều này, nếu bạn chịu khó tìm kiếm, bạn sẽ thấy một danh
sách dài dằng dặc những phần mềm đồ họa đang “hot” trên thị
trường. Cuốn sách này sẽ chỉ nói về Photoshop, bạn nhé.

Thứ hai, là những kiến thức nền tảng về thiết kế. Có bao giờ
bạn thắc mắc rằng những màu sắc nào sẽ đi được với nhau,
những font chữ nào có thể kết hợp được và những bố cục căn
bản nào đang được sử dụng nhiều trên các ấn phẩm thiết kế?
Cuốn sách này sẽ giúp bạn biết hết những bí mật đó.

6
Các ph n mềm thiết kế th ng gặp

Adobe Photoshop
Đ ợc mệnh danh là phù th ấ kĩ thạật số, Photoshop (PTS) là một ph n
mềm kì diệu mà b t c ai cũng nên học để sử d ng. Photoshop cho
phép b n dùng thử trong vòng 30 ngày. Hoặc, b n có thể sử d ng các
phiên b n cũ c a Photoshop đang đ ợc cung c p hoàn toàn miễn phí
để học tập,

Adobe Illustraotor
Là ng i anh em song sinh với Photoshop, llạstrator (AI) cũng là một
ph n mềm thiết kế “kh ng”. Tạấ nhiên, nếu Photoshop thiên nặng về
thiết kế raster, chỉnh sửa nh thì Illustrator l i thiên về thiết kế vector.
Các s n ph m đ ợc dùng để in n hay các s n ph m nhận diện
th ơng hiệạ đ ợc t o ra b i AI nhiềạ hơn là PTS

Adobe Indesign
Những n ph m chạấên dùng trong tr ng hợp in n, những n
ph m có nhiềạ trang nh những cuốn sách, những brochure, leaveleft
th ng đ ợc t o ra b i Indesign. Ph n mềm này khá m nh t với r t
nhiềạ ng i. Tuy nhiên, nếu dành th i gian học thử, b n sẽ th y r t
h ng thú với nó.

Adobe Lightroom
Là ph n mềm đ ợc giới Photographer cực kì a chạộng, Lighrtoom
thiên nặng về retouch và blend. Một kĩ năng mà b n c n có nếu muốn
tự t o ra những b c hình có màu sắc “ o diệạ”. Với những preset cung
c p sẵn cực kì nhiều trên m ng. B n sẽ có thể tự học r t nhanh ph n
mềm này.

7
 Vì sao nên học Photoshop

Có hàng tá lý do lý giải vì sao bạn nên học Photoshop. Dù bạn đang là ai,
Photoshop cũng có thể giúp đỡ bạn rất nhiều trong công việc hay sự học của
mình. Cùng nhìn xem những lý do thú vị được giới chuyên môn đưa ra và thuyết
phục nhé.

Thể hiện cá tính

Cho mọi ng i th y b n là ai, c m nhận về nghệ thuật c a b n nh thế nào qua tác ph m c a mình

Tham gia dự án
B n hoàn toàn có thể tr thành designer quan trọng c a b t c dự án nào

Typography
B n thích “chơi” Ảới các con chữ? Photoshop là dành cho b n

Khôi ph c nh
Những b c hình từ thu lọt lòng đã úa Ảàng, liệu có thể đem chúng tr l i?

Vẽ tranh
Tr thành 1 digital painter chính hiệu với Photoshop b n nhé

Thaấ đổi màu nh

Tha hồ blend màu nh theo thích với các công c cực m nh trong Photoshop

Thiết kế áo thun
Không còn cằn nhằn với các desinger Ấ ng in nữa khi b n đã có phù th y trong tay

Chỉnh sửa lỗi nh

Mắt đỏ? Thiếu sáng? Nhòe nh? Hãy xem Photoshop có thể giúp b n làm gì nhé

Chỉnh style nh
Háng tá các hiệu ng đang ch b n áp d ng vào những b c hình

Hiện thực ý t ng
Và quan trọng hơn hết, biến ý t ng c a b n thành hiện thực.

8
 Khái niệm về điểm nh (pixel)

Điểm nh là gì?
Đã bao gi b n nghe đến từ “điểm nh” haấ “piẤel” ch a?

Pixel là ph n tử nhỏ nh t c a mỗi b c hình. Mỗi pixel là một ô vuông

chỉ ch a đúng 1 màạ dạấ nh t.

Hãy phóng to b c hình c a b n

Với b t c b c hình nào, chỉ c n phóng to ra hết cỡ, b n sẽ th y
chúng bị vỡ nát thành r t nhiềạ điểm nh. Ví d nh hình bên, Captain
American là một t m hình đ ợc t o thành từ 1 l ới pixel bao gồm 21
dòng và 19 cột. Nh Ảậy b c hình bên có 19x21 pixel.

nh h ng từ piẤel đến thiết kế

Có thể hiểạ đơn gi n cho ng i mới bắt đ u, nh có càng nhiềạ piẤel thì càng… rõ.

Vậy vì sao càng nhiềạ piẤel càng rõ, chúng ta cùng đi đến 2 khái niệm quan trọng khác nữa, đó là kích th ớc
nh Ảà độ phân gi i nh.

9
 Kích th ớc nh (dimensions)

Kích th ớc nh
Kích th ớc nh chính là số l ợng pixel chiều ngang nhân với số l ợng pixel chiều dọc c a mỗi b c nh.

Hình trên cho chúng ta mộ ví d từ nh c a một chú Fappấ Bird trên google image. Trong tr ng hợp này,
b c hình có kích th ớc là 236x149.

Tiếp đến, chúng ta cùng nghiên c u một từ vựng khác cũng không kém ph n quan trọng. Tôi chắc là b n đã
nghe từ này không ít l n tr ớc đâấ, đó là “độ phân gi i”.

10
 Độ phân gi i nh (resolution)

50 pixels per inch 100 pixels per inch 150 pixels per inch

200 pixels per inch 250 pixels per inch 300 pixels per inch

Độ phân gi i
Độ phân gi i nh là số l ợng pixel trên một đơn Ảị độ dài. Độ dài b n nhé, tuyệt đối không đ ợc nh m sang
diện tích vì nó sẽ thaấ đổi r t nhiều th .

B n có thể t ng t ợng đ ợc rằng, nếu b n dàn một b c hình có 50x100 pixel lên một t gi ấ A4, độ rõ nét
c a nó sẽ r t khác khi b n in một b c hình có 500Ấ1000 piẤel lên cùng kích th ớc gi y.

B n có thể hiểạ nôm na, độ phân gi i càng cao cho phép độ hiển thị c a hình lên gi y hoặc màn hình máy
tính/ điện tho i càng rõ.

Hãy tham kh o thêm 1 số ví d về sự nh h ng c a độ phân gi i b n nhé.

11
 Độ phân gi i nh trong in n

Trong in n
2 hình trên mô t cùng 1 quang c nh, tuy nhiên b c hình d ới có số pixel th p hơn r t nhiều so với b c hình
trên. Đ y là lý do vì sao khi dàn c 2 hình trên cùng 1 kích th ớc gi y, ta có thể th y một hình thì r t rõ, trong
khi hình còn l i thì cực kì m nh t và vỡ nát.

12
 Độ phân gi i nh trong hiển thị

Trong hiển thị

Thêm một ví d khác về độ phân gi i, b n có thể th y rằng, những chiếc iPhone nhỏ bé này có thể có số
l ợng pixel ngang bằng màn hình chiếc máy tính c a b n.

Tạấ nhiên, kích th ớc c a chúng thì l i nhỏ hơn màn hình máấ tính c a b n r t nhiều l n. Đó là lý do Ảì sao,
cùng 1 video, khi xem trên iPhone, ta c m giác sự rõ nét tăng lên r t nhiều so với màn hình máy tính.

13
 Hệ màu CMYK

C M Y K

Hệ màu CMYK
Sau những khái niệm về piẤel, kích th ớc nh Ảà độ phân gi i. Th tiếp theo mà chúng ta c n nghiên c u là hệ
màu.

Có 2 hệ màu mà b n c n đặc biệt l ạ tâm. Hệ màu CMYK và hệ màu RGB.

Hệ màạ CMYK haấ còn đ ợc gọi là hệ màu trừ, th ng đ ợc dùng để thiết kế ra các s n ph m chuyên dùng
trong in n.

Hệ màạ nàấ đ ợc gọi là hệ màu trừ vì nó không thể t o ra đ ợc màu trắng, mà chỉ có thể trừ d n màu trắng
về màạ đen.

Hãy thử xem qua clip nàấ để hiểạ hơn các ho t động c a hệ màu CMYK b n nhé.

https://www.youtube.com/watch?v=IN9XFXfNSgQ

https://www.youtube.com/watch?v=MHoFPivJI2I

Nh Ảậy b n đã hình dạng ra, hệ màu CYMK là viết tắt c a 4 màu:

C (Cyan) M (Magneta) Y (Yellow) và K (Key-Black)

T i sao l i là K ch không ph i B? Vì đâấ, màạ đen có Ảai trò r t quan trọng trong việc n định độ sáng tối
c a điểm nh saạ khi đã đ ợc phối màu từ 3 màu còn l i.

14
 Hệ màu RGB

Hệ màu RGB
Nếạ nh hệ màạ CMYK chạấên đ ợc dùng trong in n, thì hệ màu RGB l i chuyên dùng trong hiển thị.

Đã bao gi b n thắc mắc t i sao màn hình máy tính có thể hiện thị đ ợc nhiềạ màạ nh thế?

Lý gi i cho điều này, mỗi piẤel trên màn hình máấ tính đ ợc t o thành từ 3 đèn led, có màạ Đỏ (RED) – Xanh
Lá (GREEN) – Xanh Lam (BLUE)

15
 Hệ màu RGB

Hệ màu RGB ho t động ra sao

Vậấ để hiển thị màạ Ấanh lá, piẤel đó chỉ c n tắt đi đèn led màạ đỏ Ảà đèn led Ấanh d ơng.

Để hiện thị đ ợc màạ Ấanh d ơng, piẤel đó chỉ c n tắt đi 2 đèn led đỏ và xanh lá.

Để hiển thị màạ tím, đèn led xanh lá sẽ bị tắt đi.

Và để hiển thị màu trắng, c 3 đèn led sẽ đ ợc bật cùng 1 lúc. Chắc hẳn b n còn nhớ kiến th c về ánh sáng
khi học vật lý, đúng không?

16
 Không gian làm việc c a Photoshop

Cùng xem demo về không gian làm việc c a Photoshop nhé.

https://www.youtube.com/watch?v=_c-D8iRdNo0&list=PL9_gOzpFilwpSPzpPu6Z8gWXID3woj7Wn&index=4

17
 Kh i t o file mới

Cách t o file mới

Không đơn gi n nh ảord, một fiel mới c a Photoshop đòi hỏi b n đ a Ảào r t nhiều thông số ban đ u.

Và thật may mắn, t t c những thông số quan trọng nh hệ màạ, độ phân gi i, kích th ớc nh b n đềạ đã
nắm đ ợc rồi.

Để t o file mới trong Photoshop, b n chỉ c n b m ctrl+N, một b ng nh trên sẽ hiện lên cho phép b n đ a
thông số vào.

18
 Khái niệm về lớp (layer)

Layer là gì
Đâấ có thể coi là một trong những khái niệm quan trọng nh t trong Photoshop.

B n có thể hình dung, layer là một t m ban đ u hoàn toàn trong suốt không có gì c , b n đ a b t c hình
nào Ảào laấer đó, thì chỉ những vùng có hình thì ph n đó sẽ đ ợc hiển thị.

Ng ợc l i, t t c những vùng trên layer không có hình sẽ tr nên trong suốt.

Và, trong Photoshop, b n sẽ làm việc với r t nhiều layer chống lên nhau trong mỗi một file.

Nh Ảí d trên b n có thể th y, chúng ta có 3 layer chồng lên nhaạ. Laấer đ u tiên chỉ gồm những m ng màu
vàng và chữ trắng. Layer th 2 chỉ có hình các b n đội hộp nắm tay nhau. Và layer cuối cùng là một
background gổm r t nhiều chuối.

B n đã nắm đ ợc khái niệm về layer rồi đúng không? Gi hãy nắm một số thao tác với layer nhé.

19
 Các thao tác cơ b n với lớp

Danh sách phím tắt thao tác với layer

T o Layer (Ctrl + Shift + N)

Xóa Layer (Chọn layer - Delete)

Thaấ đổi th tự các layer (Kéo th trong layers panel)

Gộp 2 hoặc nhiều layer l i (chọn Layer, Ctrl + E)

Đặt tên Layer (Double click vào tên layer)

Chọn nhanh Layer ( n ctrl hoặc chọn auto-select)

T o nhóm các layer (Ctrl + G)

Xem qạa clip saạ để hiểạ hơn Ảề demo layer b n nhé

https://www.youtube.com/watch?v=1fpfSEF0aJk&index=2&list=PL9_
gOzpFilwpSPzpPu6Z8gWXID3woj7Wn

Chú ý
1, Layer Menu ch a hết t t c các tùy chỉnh cho layer

2, Nhớ chọn đúng laấer tr ớc khi xử lý

20
 Công c di chuyển (move tool)

Công c di chuyển
Cùng đến với công c đ u tiên trong Photoshop b n nhé.

Công c di chuyển (move tool) là công c cho phép b n di chuyển các layer khác nhau trong cùng 1 file
Photoshop.

Phím tắt c a công c này là V. Việc sử d ng phím tắt có vai trò r t quan trọng trong quá trình sử d ng ph n
mềm Photoshop, vậy nên b n nhớ cố gắng tập làm quen với việc nhớ phím tắt nhé.

21
 Biến d ng lớp (transform tool)

Transform Tool – Scale

Transform tool, có phím tắt là Ctrl+T, là công c cho phép b n làm một số phép biến đổi hình cơ b n nh
phóng to, thu nhỏ, quay, lật g ơng…

Cùng xem qua một l ợt các công c này trong clip sau b n nhé

https://www.youtube.com/watch?v=Bejv7yHg4Io&list=PL9_gOzpFilwpSPzpPu6Z8gWXID3woj7Wn&index=3

22
 Biến d ng lớp (transform tool)

Transform Tool – Rotate

Transform tool, có phím tắt là Ctrl+T, là công c cho phép b n làm một số phép biến đổi hình cơ b n nh
phóng to, thu nhỏ, quay, lật g ơng…

Cùng xem qua một l ợt các công c này trong clip sau b n nhé

https://www.youtube.com/watch?v=Bejv7yHg4Io&list=PL9_gOzpFilwpSPzpPu6Z8gWXID3woj7Wn&index=3

23
 Biến d ng lớp (transform tool)

Transform Tool – Skew

Transform tool, có phím tắt là Ctrl+T, là công c cho phép b n làm một số phép biến đổi hình cơ b n nh
phóng to, thu nhỏ, quay, lật g ơng…

Cùng xem qua một l ợt các công c này trong clip sau b n nhé

https://www.youtube.com/watch?v=Bejv7yHg4Io&list=PL9_gOzpFilwpSPzpPu6Z8gWXID3woj7Wn&index=3

24
 Biến d ng lớp (transform tool)

Transform Tool – Distort

Transform tool, có phím tắt là Ctrl+T, là công c cho phép b n làm một số phép biến đổi hình cơ b n nh
phóng to, thu nhỏ, quay, lật g ơng…

Cùng xem qua một l ợt các công c này trong clip sau b n nhé

https://www.youtube.com/watch?v=Bejv7yHg4Io&list=PL9_gOzpFilwpSPzpPu6Z8gWXID3woj7Wn&index=3

25
 Biến d ng lớp (transform tool)

Transform Tool – Perspective

Transform tool, có phím tắt là Ctrl+T, là công c cho phép b n làm một số phép biến đổi hình cơ b n nh
phóng to, thu nhỏ, quay, lật g ơng…

Cùng xem qua một l ợt các công c này trong clip sau b n nhé

https://www.youtube.com/watch?v=Bejv7yHg4Io&list=PL9_gOzpFilwpSPzpPu6Z8gWXID3woj7Wn&index=3

26
 Biến d ng lớp (transform tool)

Transform Tool – Warp

Transform tool, có phím tắt là Ctrl+T, là công c cho phép b n làm một số phép biến đổi hình cơ b n nh
phóng to, thu nhỏ, quay, lật g ơng…

Cùng xem qua một l ợt các công c này trong clip sau b n nhé

https://www.youtube.com/watch?v=Bejv7yHg4Io&list=PL9_gOzpFilwpSPzpPu6Z8gWXID3woj7Wn&index=3

27
 Công c chọn vùng (selection tool)

Công c chọn vùng – Chọn vùng tròn

Công c chọn vùng cho phép b n chọn một ph n c a b c hình để cắt ghép nh.

Xem qạa clip nàấ để hiểạ hơn các công c chọn vùng b n nhé

https://www.youtube.com/watch?v=LG-ksFqz1UE&index=1&list=PL9_gOzpFilwpSPzpPu6Z8gWXID3woj7Wn

28
 Công c chọn vùng (selection tool)

Công c chọn vùng – Chọn vùng chữ nhật

Công c chọn vùng cho phép b n chọn một ph n c a b c hình để cắt ghép nh.

Xem qạa clip nàấ để hiểạ hơn các công c chọn vùng b n nhé

https://www.youtube.com/watch?v=LG-ksFqz1UE&index=1&list=PL9_gOzpFilwpSPzpPu6Z8gWXID3woj7Wn

29
 Công c chọn vùng (selection tool)

Công c chọn vùng – Chọn vùng tự do

Công c chọn vùng cho phép b n chọn một ph n c a b c hình để cắt ghép nh.

Xem qạa clip nàấ để hiểạ hơn các công c chọn vùng b n nhé

https://www.youtube.com/watch?v=LG-ksFqz1UE&index=1&list=PL9_gOzpFilwpSPzpPu6Z8gWXID3woj7Wn

30
 Công c chọn vùng (selection tool)

Công c chọn vùng – Chọn Ảùng đa giác

Công c chọn vùng cho phép b n chọn một ph n c a b c hình để cắt ghép nh.

Xem qua clip nàấ để hiểạ hơn các công c chọn vùng b n nhé

https://www.youtube.com/watch?v=LG-ksFqz1UE&index=1&list=PL9_gOzpFilwpSPzpPu6Z8gWXID3woj7Wn

31
 Công c chọn vùng (selection tool)

Công c chọn vùng – Chọn vùng dựa trên độ t ơng ph n

Công c chọn vùng cho phép b n chọn một ph n c a b c hình để cắt ghép nh.

Xem qạa clip nàấ để hiểạ hơn các công c chọn vùng b n nhé

https://www.youtube.com/watch?v=LG-ksFqz1UE&index=1&list=PL9_gOzpFilwpSPzpPu6Z8gWXID3woj7Wn

32
 Công c chọn vùng (selection tool)

Công c chọn vùng – Chọn vùng dựa trên vùng màu

Công c chọn vùng cho phép b n chọn một ph n c a b c hình để cắt ghép nh.

Xem qạa clip nàấ để hiểạ hơn các công c chọn vùng b n nhé

https://www.youtube.com/watch?v=LG-ksFqz1UE&index=1&list=PL9_gOzpFilwpSPzpPu6Z8gWXID3woj7Wn

33
 Công c chọn vùng (selection tool)

Công c chọn vùng – Chọn vùng nhanh

Công c chọn vùng cho phép b n chọn một ph n c a b c hình để cắt ghép nh.

Xem qua clip nàấ để hiểạ hơn các công c chọn vùng b n nhé

https://www.youtube.com/watch?v=LG-ksFqz1UE&index=1&list=PL9_gOzpFilwpSPzpPu6Z8gWXID3woj7Wn

34
 Tổng kết ch ơng 1

Chúc mừng b n, b n đã có những b ớc đi đ u tiên r t tốt

Nh Ảậy b n đã nắm rõ những khái niệm r t nền t ng trong thiết kế kĩ thạật số.

T i th i điểm hiện t i,. B n đã có thể tự do cắt ghép chỉnh sửa và tuy biến các khung hình có sẵn.

Hãy giữ nguyên tinh th n Ảà đi đến ch ơng 2 b n nhé.

35
CHƯƠNG 2

Các bố c c th ng gặp
và ng d ng

Nếu nội dung là da thịt c a b n thiết kế thì bố c c nh là khạng

Ấ ơng c a chúng vậy.

Nếạ nh một b c thiết kế có khạng Ấ ơng không rõ ràng Ảà rành

m ch, đó khó có thể đ ợc coi là một b c thiết kế tốt.

Vậy có những điều gì c n l ạ ý khi Ấâấ dựng bố c c cho tác ph m

thiết kế? Cùng xem qua những kiến th c quan trọng sau b n nhé.

36
 Phân c p thông tin

Phân c p thông tin

Là một ph n cực kì quan trọng trong bố c c.

Hãấ nhìn đo n text phía bên trái trong nh trên, r t khó đọc đúng không?

Hãy thử một số thaấ đổi xem nhé.

37
 Phân c p thông tin

V n đề chính là kích th ớc
Thaấ đổi kích th ớc to nhỏ khác nhau có thể giúp cho ng i dùng dễ dàng hơn trong Ảiệc đọc các n ph m
c a b n.

Vâấ kích th ớc ph thuộc Ảào điều gì c a nội dung?

Câu tr l i chính là độ phân c p thông tin.

38
 Phân c p thông tin

Ví d
Trên đâấ mình có một t rơi, khoan hãấ đọc tiếp, b n hãy thử tự mình đọc Ấem, điều gì sẽ dập vào mắt c a
b n tr ớc, điều gì sau,

Nếu th tự là, Giới thiệu->Về ch ơng trình...->3 Icons->...

Thì có nghĩa là Ảiệc phân c p thông tin c a tác gi đã hoàn toàn thành công.

Việc bắt ng i Ấem đọc cái gì tr ớc, cái gì sau, là cực kì quan trọng trong thiết kế.

Hãy luyện tập thật nhiều b n nhé.

39
Ví d

40
Ví d

41
 L ới trong thiết kế

L ới là gì?
Sự căn chỉnh vàc chu n mực đem l i sự tho i mái Ảà t dạấ nhìn-đọc rõ ràng cho ng i dùng.

Ng i dùng sẽ r t khó chịu nếu khi nhìn vào b n thiết kế c a b n, họ không biết ph i nhìn từ đâạ đến đâạ.

L ới, là những đ ng căn dọc-ngang mà ng i dùng không nhìn th y. Chúng chỉ tồn t i trong quá trình
designer xây dựng tác ph m.

Trong b c hình trên, b n có thể th y hệ thống các đ ng căn dọc ngang chia b c hình thành r t nhiều ph n
rõ ràng.

42
 L ới trong thiết kế

Tác d ng c a l ới
L y một ví d đơn gi n, CV tuyệt đẹp phía trên có hệ thống l ới khá đơn gi n.

Hệ thống l ới giúp designer chia CV thành 3 ph n riêng biệt Ảà căn chỉnh các ph n tử thật thẳng hàng.

Thật khó chịu biết bao nếu những icon Ấinh đẹp c bị thò ra-th t Ảào, đúng không?

43
 L ới trong thiết kế

L ới có mặt mọi nơi

Từ những tác ph m ph c t p đến những tác ph m đơn gi n, chúng ta đều có thể tự hình dung hệ thống l ới
c a chúng.

Trên đâấ là bìa t p chí Time, ph n lớn các bìa t p chí Time đềạ có 4 đ ng căn cơ b n là trên-d ới-trái-ph i
r t đơn gi n.

Vậấ làm sao để t o l ới trong Photoshop? Cùng học công c Ruler ( R ) qua video sau b n nhé.

https://www.youtube.com/watch?v=PRjDflHw088&index=2&list=PL9_gOzpFilwolnNCBSABVLqRxMD1vgqvb

44
 L ới trong thiết kế

Một ví d khác
Trên đâấ là một bộ phim bom t n nổi tiếng mà ắt hẳn t t c chúng ta đều biết. Cùng xem bố c c c a t m
poster nàấ đ ợc xây dựng nh thế nào b n nhé.

Ph n tên phim, chiếm trọn một ph n r t to trong b c thiết kế, dĩ nhiên rồi, Ảì đó là ph n quan trọng nh t c a
t m poster này mà.

Phía trên c a t m poster là một lo t tên ngôi sao h ng A từ Hollywood, những cái tên nàấ đ ợc dàn đều và
sắp xếp gọn gàng trong 2 căn lề ngang mà b n có thể th y.

Tiếp đó, thông tin Ảề đoàn làm phim đ ợc đặt gọn gàng phía d ới tên phim. Đâấ là những thông tin có mật
độ dàấ Ảà độ quan trọng th p, dẫn đến việc ph n chữ c a đo n nàấ đ ợc thu l i r t nhỏ.

45
 Ph n c ng và ph n mềm

Sao l i có ph n mềm đâấ?

Tôi không ám chỉ ph n mềm máy tính. Ph n mềm trong thiết kế là những ph n có thể đ ợc chỉnh sửa, bổ
sung và cập nhật.

Nh b n có thể cover phía trên, ph n logo c a tổ ch c đ ợc nằm gọn trong một khung riêng biệt.

Hãấ t ng t ợng những tr ng hợp mà b n c n thaấ đổi hoặc bổ sung logo, b n hoàn toàn có thể ch động
đ a chúng Ảào mà không thaấ đổi b t c th gì c a bố c c thiết kế.

Nhận diện đâạ là ph n c ng, đâạ là ph n mềm là một kĩ năng qạan trọng trong thiết kế. B n c n phòng tr ớc
các tr ng hợp có thể x y ra trong quá trình thiết kế để không ph i m t th i gian làm l i từ đ u – Một việc
mà chắc hẳn b n sẽ r t ghét sau khi tr thành designer.

46
 Luật 1/3

Luật 1/3
Đã bao gi b n nghe th y c m từ nàấ ch a?

Đâấ là một bố c c đ ợc ng d ng r t nhiều trong nhiếp nh và quay phim.

Tr ớc khi tìm hiểu về bố c c 1/3, hãy cùng xem 1 video về một th gọi là tỉ lệ vàng b n nhé.

https://www.youtube.com/watch?v=Zs7xLKCceWg

Saạ khi đã hiểu rõ về tỉ lệ vàng. Cùng xem sự kết nối giữa tỉ lệ vàng và tỉ lệ 1/3.

https://www.youtube.com/watch?v=9CiS3SU4lk0

47
 Luật 1/3

Một cách ngắn gọn

Một tác ph m đ ợc coi là có bố c c 1/3 khi chia b c hình đó thành 3 hàng và 3 cột, sẽ có một điểm quan
trọng rơi Ảào 1 trong 4 điểm giao c a các đ ng phân chia.

Trong poster trên, g ơng mặt c a Brad Pitt rơi Ảào 1 trong 4 điểm giao. Và b n có thể tự c m nhận, rằng
g ơng mặt c a nam tài tử này tr nên cực kì nổi bật trong tác ph m.

Vậy chuyện gì sẽ x y ra nếu b c hình c a b n không nằm trong tỉ lệ 1/3?

Cùng thao kh o công c Crop Tool ( C ) để biến điều này thành sự thật b n nhé.

https://www.youtube.com/watch?v=LSPN4YiHdRc&index=1&list=PL9_gOzpFilwolnNCBSABVLqRxMD1vgqvb

48
 Luật 1/3

Một ví d khác
Với b c hình này, g ơng mặt c a Santa l i là điểm nh n đ ợc đ a Ảào 1 trong 4 điểm giao c a khung 1/3.

R t r t nhiều tác ph m khác mà b n đã từng xem có ch a tỉ lệ này bên trong.

Nó không xu t hiện mồn một cho đến khi b n c m nhận đ ợc thực sự tỉ lệ 1/3 là gì.

Bên c nh bố c c 1/3. Còn một bố c c khác cũng đ ợc dùng r t nhiều, cùng xem tiếp b n nhé.

49
 Luật đối x ng

Tỉ lệ đối x ng
Đúng nh tên gọi c a nó. Bố c c đối x ng giúp b n đ a t t c các ph n nội dung và một cách cân đối tuyệt
đối.

Bố c c này dẫn dắt thị giác ng i xem theo chiều dọc. Và, điều kì diệu đâấ là, Ảiệc dẫn dắt thị giác ng i
xem sẽ tr nên đơn gi n hơn bao gi hết.

ví d trên, điềạ đ ạ tiên đập vào mắt ng i xem là chiếc Apple MacBook đẹp tuyệt v i. Tiếp đó là cái tên
cực kì sáng t o – Thinnovation. Và cuối cùng làn hững icon Ấinh đẹp nằm bên d ới c a Macbook.

Một ví d đ đơn gi n để chúng ta cùng hiểạ đ ợc đúng không?

50
 Luật đối x ng

Một ví d khác
Một poster kích thích từ chuỗi c a hàng ăn nhanh lớn nh t thế giới – Mc Donnald.

Poster có bố c c đối x ng, chỉ một tr c căn dạấ nh t phân tách b c hình thành 2 ph n cân đối rõ rệt.

Hãy tự chiêm nghiệm sự dẫn dắt thị giác trong tác ph m trên b n nhé.

Và gi là lúc b n bắt đ u tập làm quen với công c gõ chữ: Text Tool (T) với một ví d đơn gi n sau:

https://www.youtube.com/watch?v=68ZeW5RF57k&index=3&list=PL9_gOzpFilwolnNCBSABVLqRxMD1vgqvb

51
 Tổng kết ch ơng 2

B n bắt đ u c m th y tự tin hơn r t nhiềạ, đúng không?

B n sẽ bắt đ u gặp ph i một hội ch ng mà t t c designer đều mắc ph i – Hội ch ng phân tích.

Dù đi đến b t kì đâạ, nhìn th y b t c tác ph m nào, b n cũng sẽ luôn nhìn th y những đ ng căn Ảô hình Ảà
những điểm 1/3 đ ợc che d u tài tình phía sau mỗi tác ph m.

Hoàn toàn làm ch đ ợc thị giác c a mình là những điều b n có thể đ t đ ợc sau khi hoàn thành ¼ chặng
đ ng trên cuộc hành trình c a chúng ta.

Cùng xem một số tác ph m mà học Ảiên colorME làm đ ợc sau 2 buổi học nào

52
CHƯƠNG 3

Sử d ng màu sắc

Số l ợng màu hiện có trên thế giới là r t nhiều. Không có màu x u

haấ màạ đẹp. Chỉ có cách phối hợp màu tốt hay không.

Sẽ không còn nỗi lo về việc chọn màạ để phối trong các tr ng hợp
nh t định. Để b n có thể tự tin biết chính Ấác mình đang tìm kiếm
điều gì trong thế giới màu sắc.

Mỗi màu sắc đều có tiếng nói riêng c a nó. Hiểạ rõ hơn Ảề ý nghĩa
c a mỗi màu sắc để có quyết định đúng đắn khi đ a ra màạ ch
đ o cho tác ph m nhé.

53
 Vòng thu n sắc

Ô c u vồng
R t nhiềạ năm tr ớc đâấ, b n đã từng th y chiếc ô nàấ đúng không?

Một chiệc ô với những vệt màu riêng biệt, một chiếc ô r t hút mắt ng i Ấem. Nó đã từng r t thịnh hành vào
những năm 2008.

Đỏ cam vàng l c lam chàm tím, b n có th y chuỗi màu này quen không?

Chính Ấác, đó là màạ c a c u vồng, Ảà nó cũng là những màu nằm bên trong một vật r t quan trọng c a thế
giới màu sắc. Một vật có tên là “Vòng Thạ n Sắc”.

54
 Vòng thu n sắc

Vòng Thu n Sắc

Nh tên gọi c a nó, Vòng thu n sắc là một vòng tròn ch a đ ấ… màạ sắc.

Vòng màu trên có th tự nh màạ c u vồng, Đỏ-Cam-Vàng-L c-Lam-Chàm-Tím. Và b n sẽ khó có thể ng

rằng nh h ng c a Ảòng tròn màạ đơn gi n nàấ đến việc chọn và phối màu lớn đến nh ng nào.

Vậấ làm sao để hình thành nên vòng tròn màu này?

55
 Màu bậc 1

Màu bậc 1
Hãy bắt đ u từ 3 nhóm màạ cơ b n: Đỏ-Xanh D ơng-Vàng.

Quay l i quá kh một tí nhé, hãy thử t ng t ợng l i, ngàấ Ấ a, khi b n học vẽ màạ n ớc. Làm sao để có thể
pha trộn nên 1 trong 3 màu trên?

R t khó đúng không? Vì điều b n đang cố gắng là không thể. 3 màạ Đỏ-Xanh D ơng-Vàng đ ợc gọi là màu
cơ b n hay màu bậc 1 là những màu sắc không thể pha ra đ ợc khi hòa trộn từ các màu khác.

56
 Màu bậc 2

Màu bậc 2
Từ 3 màu bậc 1, chúng ta có thể pha trộn ra 3 màu mới mà b n hoàn toàn có thể tự đoán ra đ ợc:

Cam – Xanh Lá – Tìm là 3 màu sắc thuộc nhóm màu bậc 2

Và hiển nhiên rồi, chúng ta sẽ có nhóm màu tiếp theo tên là…

57
 Màu bậc 3

Màu bậc 3
Khi trộn 1 màu bậc 1 với một màu bậc 2 liền kề, b n sẽ có ngay các màu thuộc nhóm màu bậc 3.

Tiến trình này có thể lặp lui lặp l i vô h n. Đến một lúc nào đó, Ảòng thạ n sắc sẽ tr thành 1 d i màu khép
kín.

58
 Hệ màu HSB

Hệ màu HSB
Chúng ta đã từng tìm hiểu qua 2 hệ màu quan trọng trong thiết kế, hệ màu CMYK và hệ màu RGB. Và gi đâấ,
chúng ta sẽ tìm hiểu thêm một hệ màu mới nữa, hệ màu HSB.

Hệ màu HSB, viết tắt c a Hue (Màu gốc) – Satạration (Độ bão hòa, độ đ c) – Brightness (Độ sáng).

Hệ màu HSB chỉ làm 1 nhiệm v duy nh t là giúp nhà thiết kế định Ảĩ rõ ràng hơn màạ sắc c a mình nằm
đâạ trên Color Piicker.

59
 Hệ màu HSB

Color Picker
Color Picker là một công c cực kì quan trọng trong việc chọn và phối hợp màu sắc.

Cùng Ấem qạa Ảideo saạ để hiểạ rõ hơn Ảề hệ màu HSB và Color Picker nhé

https://www.youtube.com/watch?v=YQkHWDx7WgQ&list=PL9_gOzpFilwo7sSrdyZHQHTvtk6oiyy8z

60
 Dùng 1 màu

Màu ch đ o
Sai l m lớn nh t th ng gặp đối với các b n mới bắt đ u thiết kế là các b n dùng… qạá nhiều màu sắc.

B n cho t t c những màu có thể vào b c thiết kế c a mình, biến nó thành một mớ hỗn độn khó c m nhận
đ ợc.

Một tác ph m thiết kế thành công c n b o đ m về tính ch t màu ch đ o. Nghĩa là ng i dùng sẽ nắm bắt
ngay màu ch đ o trong tác ph m c a b n là màạ gì saạ khi chiêm ng ỡng tác ph m trong vài giây.

G n đâấ, hãng Vespa có cho ra một chiến dịch mang tên là “Do Yoạ Vespa”. Cùng dành th i gian để xem
chiến dịch này ho t động nh thế nào về khía c nh màu sắc nhé

https://www.youtube.com/watch?v=Oj_l4eDaB4k

61
 Dùng 1 màu

Adidas với supercolor

Nh Ảậy b n đã th ấ đ ợc những điểm mà b n chú ý nh t qua clip qu ng bá chiến dịch c a Vespa.

Gi hãy dành 1 ít th i gian để xem một chiến dịch qu ng cáo khác nào. Là Adidas hợp tác cùng Pharrel
William trong chiến dịch g n đâấ mang tên “sạpercolor”.

Là 50 đôi giàấ Ảới “50 sắc thái” màạ khác nhaạ. Hãấ thử Ấem clip nàấ có gì t ơng đồng với clip tr ớc nhé:

https://www.youtube.com/watch?v=aIujzK4-478

62
 Dùng 1 màu

Apple với iPod

Thật là sai sót lớn nếu chúng ta lãng quên m t Apple.

Đã từng có một th i điểm, mà iPod thịnh hành đến m c: “50% giới trẻ Mỹ đang s hữu 1 chiếc iPod, 50%
còn l i thì nghĩ đến việc khi nào mình sẽ có một chiếc”.

iPod đ ợc giới trẻ saấ mê đến m c Apple quyết định ph i đ a ra thật nhiều màu sắc cho chiếc iPod vốn chỉ có
2 màạ đen Ảà trắng c a mình.

Và, điềạ đặc biệt nh tôi đang nói đến, dù rực rỡ đến đâạ, mỗi s n ph m trong những s n ph m trong 3
chiến dịch qu ng cáo trên đều chỉ có 1 màu duy nh t.

https://www.youtube.com/watch?v=_zf5Ov1dptA

63
 Dùng 1 màu

Màu ch đ o không nh t thiết ph i ph kín tác ph m

Sự đồng bộ Ảà đồng nh t về màu sắc quyết định màu ch đ o c a tác ph m.

Trong 2 b c hình trên, b n có thể nhận th y rằng, màu sắc ch đ o không chiếm quá nhiều không gian trong
b c hình. Nh ng đ để b n nhận th c đ ợc rằng màu sắc ch đ o c a chúng là màu nào.

2 tác ph m, với bố c c y hêt, chỉ với một số thaấ đổi chi tiết nhỏ, đã khoác lên mình một bộ mặ thoàn toàn
khác.

64
 Dùng 1 màu

Đen, trắng Ảà Ấám không đ ợc coi là màu ch đ o

Đúng Ảậấ, chúng ta có concept GraấScale, nh ng tạấệt đối không có màu ch đ o là màạ đen, trắng, hay
xám.

3 màạ là 3 màạ đi kèm Ảới màu ch đ o để xây dựng nên sắc thái mới cho vật ch c a nó.

C 2 tác ph m trên, b n có thể th y rõ, màu ch đ o c a chúng là màu xanh, trong khi số l ợng màu trắng và
xám chiếm ạ thế tuyệt đối.

65
 Dùng 1 màu

Từ thực tiễn quanh ta

B n có nhận th y 2 d i màu trên là 2 d i màu c a m ng xã hội nào không?

Chính xác, là Facebook và Twitter. Gi hãy dành chút th i gian để quay l i Facebook và nhìn xem, liệu số l ợn
màu xanh mà b n nhớ về Facebook liệu có chiếm quá nhiều không gian c a nó không?

Nh Ảậy b n đã hiểạ đ ợc ý mà tôi muốn truyền đ t. Tuyệt đối đừng tham, hãy bắt đ u sử d ng từ 1 màu.
Một khi đã qạen Ảới việc sử d ng 1 màu duy nh t trong thiết kế, b n sẽ có thể bát đ u trôi ch ấ hơn Ảới
việc…

66
 Dùng 2 màu – Màạ t ơng đồng

Màạ t ơng đồng

Phối màu t i bậc cơ b n, nhiệm v duy nh t c a b n đó là nhớ nằm lòng d i màạ: “Đỏ-Cam-Vàng-L c-Lam-
Chàm-Tím”, để biết những màu nào nằm c nh nhau trên vòng tròn màu.

Những màu nằm c nh nhaạ, đem l i cho ta c m giác hài hòa và nhẹ nhàng. Độ chênh lệch không quá lớn về
độ t ơng ph n giúp ng i xem dễ dàng c m nhận tác ph m hơn.

67
 Dùng 2 màu – Màạ t ơng đồng

Gradient Tool
Có một ng dungj r t tuyệt v i từ việc sử d ng màạ t ơng đồng, đó là Gradient Tool.

Cùng dành 1 ít th i gian để xem hiệu qu c a công c này nhé

https://www.youtube.com/watch?v=FJ0EtP_z8DI&list=PL9_gOzpFilwo7sSrdyZHQHTvtk6oiyy8z&index=4

68
 Dùng 2 màu – Màu bổ túc

Màạ t ơng ph n
Màạ t ơng ph n, hay còn gọi là màu bổ túc bậc 1. Là những cặp màu nằm đối nhau trên vòng tròn màu. Chỉ
có 3 cặp màu quan trọng nh t mà b n c n nhớ là: Vàng-Tím; Xanh lá – Đỏ, Xanh d ơng-Cam.

Trên đâấ là Ảí d về bộ nhận diện th ơng hiệu c a TPBank. Sự phối hợp tuyệt v i giữa vàng và tím.

69
 Dùng 2 màu – Màu bổ túc

Màu sắc c a hoàng tộc

Vạa chúa th ng đ ợc nhớ đến với màu vàng quyền uy, tuy nhiên, một màạ đi kèm nổi tiếng không kém
trong giới hoàng gia, là màu tím quý phái.

2 màạ đối nhau sẽ bổ túc cho nhau và làm nổi bật nhau lên.

Hãy thử t ng t ợng những ph n màu vàng c a chiếc túi Ấinh đẹp bên trên đ ợc thay b i màu xanh thì trông
sẽ nh thế nào?

70
Dùng 2 màu – Màu bổ túc

Xanh và Cam
Cặp màu th 2, là cặp xanh và cam.

Cặp màạ nàấ đ ợc đánh giá là cặp dễ kết hợp nh t trong 3 cặp về độ an toàn trong t ơng ph n c a chúng.

Hẳn b n còn nhớ những chiếc máy bay xanh c a Vietnam Airlines với hình bông sen vàng cam cực kì nổi bật.

71
72
73
 Dùng 2 màu – Màu bổ túc
Dùng 2 màu – Màu bổ túc

Đỏ và xanh lá
Đâấ là cặp màạ đ ợc h n chế nh t trong việc phối hợp.

Để thiết kế đ ợc với 2 màạ nàấ đỏi hỏi kinh nghiệm r t dày từ designer

74
 Dùng 2 màu – Màu bổ túc

Cặp đôi c a thiên nhiên

Tạấ nhiên, đâấ l i chính là 2 màạ đ ợc thiên nhiên ạ ái nh t.

C 2 màạ đều toát lên một th gì đó liên qạan đến s c sống c a v n vật.

Hãy thử nghiệm cặp màạ nàấ ngaấ khi có cơ hội nhé.

75
 Ý nghĩa c a màu sắc

Mỗi màu sắc đều có tiếng nói riêng

Trong một cuộc thống kê lớn về những c m nhận c a mỗi ng i về một màu sắc nh t định nào đó. Các nhà
khoa học nhận ra rằng các màu sắc đềạ đem đến một số c m nhận chung cho cộng động,.

Ph n lớn mọi ng i th y sự an toàn khi th y màu xanh, th y cồn cào khi nhìn màạ đỏ, c m nhận đ ợc sự tinh
tế dịu dàng trong màu hồng, sự qạý phái trong màạ tím Ảà năng l ợng trong màu vàng.

R t r t nhiều những c m nhận khác nữa về màu sắc mà b n có thể tìm th y trong b c hình trên

76
 Ý nghĩa c a màu sắc

ng d ng thực tiễn
Đã bao gi b n để ý, rằng ph n lớn các nhà hàng đềạ có màạ đỏ-vàng-c m?

Đã bao g b n để ý, rằng ph n lớn m ng xã hội có màu xanh?

Haấ đã bao gi b n để ý, những chiến dịch liên qạan đến môi tr ng th ng có màu xanh lá?

Có lẽ b n đã hiểu ý mà tôi nói.

77
 Các nhóm màạ th ng gặp

Retro

Retro cổ điển
Nhóm màạ retro, màạ ám Ảàng, đem l i c m giác cổ điển nhẹ nhàng cho ng i xem.

Phong cách màạ nàấ còn đ ợc biết đến với cái tên vintage

78
79
80
 Các nhóm màạ th ng gặp

Neon chói lóa

Những màạ neon đặc tr ng đem l i c m xúc r t m nh mẽ cho ng i xem.

Những màu neon có một nh ợc điểm, chúng chỉ có thể dùng đ ợc trên nền tối để phát ra ánh sáng nh
những gìc húng ta th ng th y đèn led.

81
82
 Các nhóm màạ th ng gặp

Pastel Color

Pastel nhẹ nhàng

Màu ám trắng – Pastel. Có thể kết hợp dễ dàng với nhau mà không gây khó chịạ cho ng i xem.

Nếu có thể mô ta nhóm màu này bằng 1 tính từ thì đó có lẽ là m nh t.

Đúng Ảậy, màu pastel r t khó có thể tr thành tông màu ch đ o, nh ng l i cực kì hoàn h o để tr thành
backgroạnd, đó là lý do t i sao rèm màn Ảà chăn ra gối đệm th ng có tông màu này.

83
84
 Công c chọn màu

Kuler
Một công c chọn màu nổi tiếng c a Adobe, cùng xem demo sử d ng ph n mềm này qua clip sau b n nhé:

https://www.youtube.com/watch?v=jx82r2wVW4U&index=5&list=PL9_gOzpFilwo7sSrdyZHQHTvtk6oiyy8z

85
 Tổng kết ch ơng 3

B n cũng có màu sắc riêng c a b n

Đó chính là lý do tôi đặt tên lớp học c a mình là colorME. Vì tôi tin rằng, ai ai trong chúng ta cũng có sự sáng
t o và thế giới nội tâm riêng biệt, đó là những chiếc chìa khóa giúp b n m ra thế giới sáng t o c a riêng
mình.

Photoshop chỉ là một công c và cuốn sách nàấ cũng chỉ là một ng i b n đồng hành trong bộ phim mà b n
là nhân vật chính. Vậy nên hãy cố gắng thật nhiềạ hơn nữa.

Chúng ta sẽ cùng đến với thế giới c a những con chữ trong ch ơng tiếp theo c a cuốn sách.

86
CHƯƠNG 4

Những điều c n biết

về Typography

Mọi sự khó khăn trong Ảiệc thiết kế c a b n sẽ ch m d t t i th i

điểm b n làm ch đ ợc kh năng sử d ng chữ c a mình.

Không ph i mò mẫm chọn font cho đến khi hài lòng nữa, đã đến lúc
b n tự động tìm kiếm font chữ mà mình đang h ớng đến rồi.

Một nửa chặng đ ng c a chúng ta sẽ kết thúc ngay khi b n đọc

Ấong ch ơng 4.

87
 Các nhóm font cơ b n

Serif
Times New Roman
Bodoni
Georgia
Garamond
Baskerville

Serif trịnh trọng

Hãấ Ảơ l y một cuốn sách b t kì mà b n đang s hữu. Sác xu t là 80% b n sẽ có một cuốn sách có nội dung
đ ợc viết bằng lo i chữ Serif – Chữ có chân.

Serif hay còn gọi là chân chữ, là những ph n g ch ngang phía chân c a mỗi con chữ. Lo i chữ nàấ đem l i cho
chúng ta c m giác r t nghiêm trang và cổ điển.

Vậấ nên chúng đ ợc ng d ng r t nhiều trong nhà hàng, khách s n, kinh tế, giáo d c…

Lo i chữ này còn có một đặc điểm mà b n c n l ạ tâm. Chúng ho t động r t tốt t i những nơi có mật độ chữ
dàấ nh sách hoặc báo.

88
89
 Các nhóm font cơ b n

Sans Serif
Segoe UI
Microsoft Sans Serif
Helvetica
Arial
Calibri
Dotum
Verdana

Sans Serif trẻ trạng năng động

Có chữ có chân, đ ơng nhiên sẽ có chữ không chân rồi.

Nhóm chữ không chân, hay còn gọi là sans-serif là nhóm chữ đem l i cho mọi ng i c m giác gọn gàng, nhẹ
hàng, hiện đ i và nhanh chóng.

Đó là lý do t i sao sans serif đ ợc dùng r t nhiều trong qu ng cáo, truyền thông và công nghệ.

Hãy tự kiểm tra Ấem, máấ tính Ảà điện tho i di động c a b n đang đ ợc dùng lo i chữ gì để hiển thị nhé.

90
91
 Các nhóm font cơ b n

Script
Freestyle Script
Pristina
Segoe Script
Brush Script Std
French Script MT

Script tự do phóng khoáng

Là những con chữ làm ng i ta c m giác nh chúng Ảừa đ ợc viết ra b i một bàn tay tài hoa c a một nghệ sĩ
nào đó.

Script đem l i c m giác tự nhiên hoang d i. Chúng th ng đ ợc sử d ng r t nhiều trong những tác ph m liên
quan nhiềạ đến nghệ thuật và sáng t o.

T t c những nhóm chữ không thuộc 3 nhóm kể trên đ ợc xếp vào nhóm chữ trang trí. Một nhóm chữ đ ợc
dùng nhiều trong những tác ph m sáng t o, game Ảà đồ chơi trẻ em.

92
93
 Cách kết hợp font – 1 typeface

Thaấ đổi kích th ớc

T ơng tự nh màạ sắc, b n cũng không nên dùng qạá nhiều lo i font cho cùng 1 tác ph m.

Hãy luyện tập với số l ợng font chữ thật ít b n nhé.

Tr ớc tiên, hãy thử việc chỉ dùng 1 font chữ duy nh t cho toàn bộ tác ph m Ảà thaấ đổi kích th ớc c a chúng
để dẫn dắt thị giác ng i xem xem sao.

94
 Cách kết hợp font – 1 typeface

Thaấ đổi màu sắc

Có r t nhiều thuộc tính c a chữ mà b n có thể thaấ đổi.

T i sao không thử thay đổi màu sắc c a chữ và giữ nguyên font chữ xem sao. B n sẽ có những tr i nghiệm r t
khác biệt.

95
 Cách kết hợp font – 1 typeface

Thaấ đổi độ đậm c a chữ

Độ đậm c a chữ - font weight là một lựa chọn khác cho b n để b n có thể dẫn dắt thị giác ng i xem theo
đúng ý mạốn c a mình.

96
 Cách kết hợp font – 1 font

Đơn gi n mà hiệu qu
Hãy luôn nhớ câu th n chú c a designer b n nhé, simple is the best, đừng tham, đừng ôm đồm, hãấ để mọi
th t i giới h n c a nó.

97
 Cách kết hợp font – 2 font

ScriptAnd Sans Serif

ạ tiên Script
Việc biến một chữ script tr thành một tiêạ đề lớn sẽ giúp b n tiết kiệm th i gian hơn r t nhiều trong việc
chọn font chữ đi kèm.

Đó có thể là một font chữ sans-serif

98
 Cách kết hợp font – 2 font

Script and serif

ạ tiên Script
… Haấ một font serif trịnh trọng

99
 Cách kết hợp font – 2 font

Serif
and sans serif
Đừng đắn đo giữa Sans-Serif và Serif
Nhớ điềạ mà tôi đã từng chia sẻ, rằng 80% sách trên thế giới nàấ đ ợc in với font chữ serfi không?

R t nhiều trong những cuốn sách đó có tiêạ đề đ ực viết bằng chữ sans-serif…

Và ng ợc l i.

Vậy nên, miễn là b n còn lựa chọn kết hợp cặp đôi nàấ Ảới nhaạ, độ t ơng ph n sẽ vẫn còn an toàn.

100
 Các kĩ thạật dùng chữ

BORDER
focused things

Kĩ thạật đóng khung

Kĩ thạật đóng khạng, đ ợc dùng r t nhiều và rộng rãi trong thiết kế.

Kĩ thạật nàấ đơn gi n là t o ra một bo viền xung quanh chữ, khiến t t c những th nằm trong bo viền đó tr
thành một thể thống nh t.

Cùng xem cách thực hiện kĩ thạật này t i đâấ nhé

https://www.youtube.com/watch?v=enxnIAFbJYI&list=PL9_gOzpFilwriTZiXIAnmU5Dt2atlRYqc

101
 Các kĩ thạật dùng chữ

Đừng đóng khạng kĩ thạật

Hãy sáng t o theo cách c a riêng b n. Border không bắt buộc ph i có hình chữ nhật, càng không bắt buộc
ph i khép kín.

Cùng th ng th c bìa album c a nữ ca sĩ MIN, mọi ng i sẽ th y kh năng cách điệu tuyệt v i kĩ thạật này từ
nhà thiết kế.

102
 Các kĩ thạật dùng chữ

Những điều gợi m

Sắp xếp, đ c khoét không làm border biến m t, thậm chí nó còn là gi i pháp cho việc tìm kho ng trống để
chèn nội dung trong b n thiết kế đang d c a b n.

103
 Các kĩ thạật dùng chữ

Tác ph m tuyệt v i xu t phát từ những kĩ thạật nhỏ bé.

Tác ph m tuyệt v i trên đâấ, nếạ phân tích kĩ, b n sẽ th y hết t t c mọi th .

Từ kĩ thạật, bố c c, cách dùng màu sắc và font chữ. Hoàn toàn không qạá khó để thực hiện đúng không nào?

104
 Các kĩ thạật dùng chữ

Kĩ thạật line
Là kĩ thạật dùng những đ ng kẻ để phân tách bố c c c a b n thiết kế.

Chắc hẳn b n đang c m th y 2 tác ph m phía trên có chút gì đó r t quen thuộc. Đơn gi n là Ảì kĩ thạậ tnày
đang đ ợc sử d ng r t rộng rãi. Chúng có mặt khăp mọi nơi.

Cùng xem cách t o line trong Photohsop nhé:

https://www.youtube.com/watch?v=lCUFZLXaSr8&index=3&list=PL9_gOzpFilwriTZiXIAnmU5Dt2atlRYqc

105
 Các kĩ thạật dùng chữ

Chiêm ng ỡng và phân tích tác ph m

Tác ph m tuyệt diệạ phía trên đ ng hình thành từ sự t ơng ph n rõ rệt giữa b c nền màu phía sau và
những con chữ đen đậm phía tr ớc.

Xem clip saạ để biết cách xây dựn gbackgroạnd “ o diệạ” kia b n nhé

https://www.youtube.com/watch?v=Cf_8arTmgT4&index=6&list=PL9_gOzpFilwo7sSrdyZHQHTvtk6oiyy8z

106
 Các kĩ thạật dùng chữ

Chiêm ng ỡng và phân tích tác ph m

Một tác ph m chuyên nghiệp khác đ ợc xây dựng từ những yếu tố r t đơn gi n.

Tôi hoàn toàn tin t ng răng, nếu b n vẫn kiên trì luyện tập từ đ u cuốn sách, th i điểm hiện t i b n hoàn
toàn có thể xây dựng l i tác ph m trên trong … 15 phút.

107
 Các kĩ thạật dùng chữ

Kĩ thạật nghịch đ o màu

ONE OF A KIND – Ca khúc tuyệt v i c a chàng th lĩnh tài ba G Dragon đã t o hiệu ng lan tỏa m nh mẽ đến
giới th i trang.

Đã có hàng triệu chiếc áo nh trên đ ợc bán ra trên toàn thế giới.

Các con chữ trong ONE OF A KIND trên đâấ đ ợc ng d ng kĩ thạật nghịch đ o màạ để xây dựng nên. Chỗ
có chữ màu trắng, chúng ta cho nền màu gốc, chỗ có nền màu trắng, ta cho chữ có màu gốc. Không quá khó
để thực hiện đúng không?

108
 Các kĩ thạật dùng chữ

Clipping Mask
Đã bao gi b n hình th y những b c hình tuyệt đẹp n sau những con chữ?

Kĩ thạật trên đ ợc gọi là kĩ thạật clipping mask đ ợc xây dựng r t đơn gi n chỉ sau một Ảài b ớc:

https://www.youtube.com/watch?v=QnCSh3aFEec&index=2&list=PL9_gOzpFilwriTZiXIAnmU5Dt2atlRYqc

109
 Các kĩ thạật dùng chữ

Th ng th c sự sáng t o
Một tác ph m r t đẹp đ ợc xây dựng từ kĩ thạật clipping mask

110
 Các kĩ thạật dùng chữ

Một bài toán thú vị

Vậy liệạ có cách nào để xây dựng đ ợc tác ph m này không?

Gợi ý nhỏ cho b n, mọi th vẫn chỉ quay quanh clipping mask nhé. Hãy liên hệ với colorME để biết câu tr l i
cho bài toán này.

http://www.Facebook.com/colorME.hanoi

111
 Các kĩ thạật dùng chữ

Sự hòa trộn
Thêm một bài tập nhỏ nữa để b n luyện tập.

Hãy thử dùng những công c đã có để xây dựng tác ph m với chữ Spring n hiện nh trên b n nhé.

112
 Các kĩ thạật dùng chữ

Đánh lừa thị giác

T i th i điểm b n phát hiện ra kĩ thạật c a bài tập tr ớc. B n sẽ ngay lập t c th ấ răng s n ph m trên đâấ
không có gì là qạá khó để xây dựng.

Chỉ một tí kĩ thạật thôi đúng không?

113
 Một số chú ý

Tuyệt đối không bóp méo chữ

Tối kị lớn nh t đối với designer là bóp méo chữ.

Các tấpographer đã dàấ công để xây dựng nên những typeface hoàn h o cho b n. Đừng làm công s c c a họ
đổ sông đổ bể bằng cách bóp méo những con chữ, b n nhé.

114
 Một số chú ý

Không có chính ph
Hãy phân bố độ to nhỏ c a từng con chữ một cách phù hơp b n nhé.

Để những ph n nội dạng có thêm không gian để có thể “th ” đ ợc.

115
 Một số chú ý

L ạ ý Ảề độ t ơng ph n
Hãấ lạôn đ m b o là ng i xem có thể đọc đ ợc từng kí tự mà b n viết ra.

Chúng ta đã có r t nhiều kiến th c về màu sắc rồi đúng không?

116
 Một số chú ý

Dùng quá nhiều font

Nhìn vào tác ph m trên, câu hỏi duy nh t mà tôi đặt ra là: Tôi ph i nhìn Ảào đâạ bâấ gi ?

Đừng làm tác ph m c a b n tr nên lo n xì ng u bằng cách phối hợp quá nhiều font chữ nh trên.

117
 Một số chú ý

Không chịạ căn lề chữ

Việc này sẽ chỉ tiêu tốn 1 ít th i gian ban đ ạ nh ng hiệu qu l i r t cao.

Đừng để bệnh l i chiến thắng mà không chịạ căn lề b n nhé.

118
 Tổng kết ch ơng 4

Chào mừng b n đến với thế giới c a designers

Nếu b n vẫn kiên trì đọc đến đâấ, tôi tin rằng b n đã có đ ấ đ kiến th c để tr thành một designer.

Nh ng đừng ch quan nhé, t t c mọi th chỉ là b ớc kh i động thôi, gi hãy xem xem chúng ta có thể làm
đ ợc gì nào.

Tr ớc đó, cùng dành 1 ít th i gian để xem các tác ph m mà học Ảiên colorME làm đ ợc sau 4 buổi học nhé.

119
120
121
CHƯƠNG 5

Một số hiệu ng
Cơ b n

T m dừng với những kiến th c khó nhằn về thiết kế. Cùng ghé xem
thế giới Photoshop còn điều gì kì diệạ đang đón ch b n.

Hãy thử một l n tự tay nghịch những b c hình mà b n đã ch p

đ ợc. Cùng tìm hiểu lý gi i cho một số trào l ạ thiết kế đang Ấạ t
hiện g n đâấ.

Và quan trọng hơn hết, b n sẽ tự tay mình xây dựng nên những tác
ph m khiến ng i khác ph i ồ lên.

Hãy bắt đ u nâng c p b n thân mình từ đâấ b n nhé.

122
 Blur – Filter Gallery

Blur
Đã bao gi b n muốn làm m một b c hình đề toàn bộ ph n nội dạng bên trên đ ợc nổi rõ hơn.

Bắt đ ạ ch ơng 5 Ảới hiệu ng blur b n nhé

https://www.youtube.com/watch?v=ZZbQrAm_3xQ&list=PL9_gOzpFilwol3lyOj3jH4iDBMzVIPrea

123
 Blur – Skin Retouch

Retouch
B n sẽ bắt đ u m t niềm tin vào những hình nh trên m ng sau khi tự tay mình chỉnh sửa những b c hình
này.

Nh b n có thể th ấ, cô ng i mẫu bên ph i có n ớc da đẹp hơn hẳn cô ng i mẫu bên trái.

124
 Hue, Brightness & Contrast

Retouch
Hơn thế nữa, b n có thể làm làn da cô ng i mẫu tr nên sáng lóa chỉ saạ 1 b ớc thực hiện

125
 Hue, Brightness & Contrast

Retouch
Nếạ nhìn kĩ, b n sẽ th y cô gái này có thêm một line tóc màạ đỏ với b c hình bên d ới.

Đúng Ảậy, t t c những điều tôi vừa kể trên đều thuộc nhóm kĩ thạật retouch.

Cùng bắt đ u những b ớc retoạch cơ b n nh t t i đâấ b n nhé:

https://www.youtube.com/watch?v=I8qBO1gec_M&index=5&list=PL9_gOzpFilwol3lyOj3jH4iDBMzVIPrea

Nếu b n muốn tìm thêm nh để luyện tập, hãấ Ảào đâấ nhé: http://freestockphotos.biz

126
 Triangulation

Triangulation – Low poly

Bắt đ u từ năm 2014, trào l ạ sử d ng những b c hình vỡ nát làm background nhận đ ợc sự ng hộ rộng rãi
trong cộng đồng designer.

Để xây dựng đ ợc 1 b c hình nh nàấ, b n c n sử d ng 1 công c bên ngoài:

http://snorpey.github.io/triangulation/

Xem clip demo t i đâấ b n nhé:

https://www.youtube.com/watch?v=is1HKibqt1o&list=PL9_gOzpFilwol3lyOj3jH4iDBMzVIPrea&index=3

127
 Color Overlay

Color Overlay
Chắc hẳn b n còn nhớ trào l ạ “Ng ng ng ợc đãi” làm m a làm gió nhiều ngày trên m ng xã hội?

Tự tay xây dựng 1 tác ph m với chỉ dẫn sau b n nhé. B n sẽ b ớc đ u nắm đ ợc khái niệm về layer effect

https://www.youtube.com/watch?v=vSMWNfR-B7Y&list=PL9_gOzpFilwol3lyOj3jH4iDBMzVIPrea&index=4

128
 Color Overlay

Kết hợp các hiệu ng

Tập hợp các hiệu ng đ ợc dùng chung cho một laấer, đ ợc gọi là layer style.

Cặp bài trùng stroke – drop shadow tr về cho chúng ta kết qu nh trên. Cùng tìm hiểu thêm t i đâấ b n
nhé:

https://www.youtube.com/watch?v=d8cJ3WuhoEE&index=2&list=PL9_gOzpFilwol3lyOj3jH4iDBMzVIPrea

129
 Tổng kết ch ơng 5

B n đang tự th y mình tốt lên?

Thật tuyệt vì b n đã đọc đến đâấ. Ch ơng Ảừa rồi hẳn là chỉ để l i cho b n r t ít kiến th c, ph n lớn là kĩ năng.

Và có một bí mật tôi ch a tiết lộ cho b n, t t c những kiến th c quan trọng nh t c a cuốn sách nàấ đã đ ợc
đ a hết Ảào 4 ch ơng đ u tiên.

4 ch ơng saạ c a cuốn sách cho b n th y những kiến th c đó qạan trọng đến nh ng nào và ng d ng ra
sao trong thiết kế.

Cùng l ấ hơi để b ớc tiếp vào chặng đ ng cuối b n nhé!

130
CHƯƠNG 6

Nhận diện
Th ơng hiệu

Hiểu rõ và phân lo i toàn bộ logo trên thế giới. Hay quan trọng hơn
nữa, tự mình xây dựng đ ợc một logo.

Liệu logo có ph i là t t c ? Một th ơng hiệạ đ ợc khẳng định b i

những điều gì khác?

Hiểạ rõ hơn Ảề các lo i layer: Raster layer, Vector Layer, Smart Layer.

131
 Logo – Phân lo i

Logo t ợng hình

Trên thế giới này chỉ có 3 lo i logo, logo t ợng hình, logo chữ và logo kết hợp.

Nhóm logo đ ạ tiên là nhóm logo đ ợc a dùng nh t. nhóm logo cách điệu hỉnh nh c a mộ tth gì đó.

Có r t nhiềạ th ơng hiệu nổi tiếng đang s hữạ logo t ợng hình.

Logo nàấ có ạ điểm lớn là kích thích trí t ng t ợng c a ng i dùng. Tuy nhiên sẽ không phù hợp lắm cho
những công ty/tổ ch c ch a có độ nhận diện lớn trên thị tr ng.

132
 Logo – Phân lo i

Logo chữ
Lo i logo tiếp theo, bắt nguồn từ việc cách điệu tên công ty/tổ ch c.

Lo i logo nàấ có ạ điểm là dễ đọc, dễ phân biệt. Tuy nhiên, b n sẽ m t r t nhiều th i gian để có một logo
cách điệạ nh ý.

133
 Logo – Phân lo i

Logo kết hợp

Nhóm còn l i, là logo bao gồm c ph n hình và ph n chữ.

Đâấ là lựa chọn hàng đ u cho những công ty/tổ ch c có t m nhìn tốt.

Th i gian đ u, họ sẽ đ a ra logo có c hình và chữ, t i th i điểm mà th ơng hiệạ đ ợc công nhận trên thị
tr ng, họ sẽ lo i hết toàn bộ ph n chữ. Đâấ là điềạ mà Starbạcks Coffee đã làm Ảới logo c a mình.

134
 Logo – Phân lo i

Trang trọng, đặc biệt, mạnh mẽ, quyền lực, tinh tế, truyền thống

Uy quyền, đỉnh đạc, an to n, đ ng tin cậy, truyền thống, ổn định, trung th nh

Cổ điển, lợi ích, trần tục, gi u sang, truyền thống, bảo thủ

Ảm đạm, quyền lực, thực tế, tâm linh, tin tưởng

Yên tĩnh, l nh mạnh, khoẻ khoắn, ổn định, thèm muốn

Nữ tính, ngây thơ, dịu dàng, khoẻ mạnh, trẻ trung

Tinh tế, t m lý, gi u sang, ho ng tộc, trẻ trung, bí ẩn

Hung hăng, mạnh mẽ, bền bỉ, đầy sức sống, kinh sợ

Yên vui, nhiều quyền h nh

Hãy nhớ chọn màu cho logo

B n vẫn ch a qạên ý nghĩa c a màu sắc đúng không?

Đâấ là lúc b n ng d ng l i những kiến th c đã học để đ a Ảào logo những màu sắc phù hợp với giá trị c a
công ty/ tổ ch c mà b n đang nhận thiết kế nhé.

135
 Logo – Chú ý

Logo ph i đ ợc t o từ vector
Dù file b n t o có lớn đến đâạ, cũng không thể ch a nổi một logo đ ợc in trên 10mx10m.

Vector, là một khái niệm quan trọng khác trong đồ họa. Hãấ cùng Ấem Ảideo clip saạ để hiểạ ph ơng th c
ho t động c a vector b n nhé:

https://www.youtube.com/watch?v=tkZ4_GQ16Qk&index=2&list=PL9_gOzpFilwoQu3hoRvGE2wiBMG2rwSOi

136
 Logo – Chú ý

Logo ph i th ấ đ ợc trên kích th ớc nhỏ nh t

Hãy cố gắng t ng t ợng logo c a b n khi in lên một chiếc bút trông sẽ nh thế nào.

Nếu b n không thể nhìn th ấ nó rõ đ ợc. Có nghĩa là logo c a b n vẫn còn nh ợc điểm c n khắc ph c.

Bây gi , hãy tự học quy trình kiểm tra Ảà đánh giá logo mà b n sắp t o ra nhé.

137
 Logo – Chú ý

Simple Unique Identifiable

Tự kiểm tra Ảà đánh giá logo

Simple: Logo có thể đ ợc mô t hoặc phác th o một cách dễ dàng không?

Unique: Logo có bị trùng ý t ng với logo khác không?

Identifiable: Logo có dễ đ ợc nhận biết không?

138
 Logo – Chú ý

Durable Meaningful Flexible

Tự kiểm tra Ảà đánh giá logo

Durable: Logo có kh năng bị lỗi mốt không?

Meaningfạl: Logo có ý nghĩa không? Nếu không thì b n biết ph i làm gì rồi đ y.

FleẤible: Logo có dùng đ ợc trên nhiều ch t liệu không?

Nh Ảậy là b n đã có ph ơng th c kiểm nghiệm Ảà đánh giá logo, gi hãy dành 1 ít th i gian để xem các xu
h ớng logo mới xu t hiện g n đâấ nhé.

139
 Transparent Overlay Logos

Logo trong suốt

Là mẫạ logo đ ợc t o thành từ một hình nh duy nh t, đ ợc lặp đi lặp l i và gi m độ trong suốt c a từng
layer

140
 Transparent Overlay Logos

Logo trong suốt

Là mẫạ logo đ ợc t o thành từ một hình nh duy nh t, đ ợc lặp đi lặp l i và gi m độ trong suốt c a từng
layer

141
 Pattern And Shape Logo

Logo mô th c
Là nhóm logo nằm trong các hình đa giác đềạ nh tam giác đều, hình vuông, l c giác đều.

142
 Geometric Shape Logos

Logo hình khối

Là những logo chỉ đ ợc t o thành từ những đ ng thẳng

143
 Low Poly Logos

Logo đa giác ít c nh
T ơng tự nh hiệu ng Triangạlation đ ợc học ch ơng 5. Lo i logo nàấ cũng đ ợc t o thành từ những đa
giác nhỏ và t o thành b c tranh lớn.

144
 Negative Space Logos

Logo không gian âm

Bắt nguồn từ hãng chuyển phát nhanh fedex, lo i logo nàấ đang r t đ ợc a chạộng trên toàn thế giới.

B n ch t c a logo này là kh năng lồng ghép khéo léo hình nh c a một vật thể th 2 vào bên trong những
không gian thừa c a vật thể có sẵn

Trong tr ng hợp trên, b n có thể th y rõ thành phố nằm bên trong chìa khóa

Hay dẫạ mũi tên nằm giữa 2 chữ E và X.

145
 Negative Space Logos

Logo không gian âm

Con ngựa bị cắm sừng Ảà bóng đèn.

Haấ đơn gi n là chuỗi số 1 2 3 4.

Đều có thể ng d ng không gian âm.

146
 How to create a logo

Brainstorming
And Create it
Sketching

Chìa khóa để xây dựng logo

Nh Ảậy, b n có thể th y rằng, th i gian mà chúng ta c n đ ạ t nhiều nh t cho một logo là th i gian suy
nghĩ Ảà Ảẽ phác ra gi y.

Ngay khi tr nên chuyên nghiệp hơn, b n sẽ th y rằng việc làm việc với ph n mềm để hiện thực hóa tác ph m
chỉ là chuyện nhỏ.

Tuy nhiên, liệu mọi th có dừng mỗi logo?

147
 Brand Identity

Bộ nhận diện th ơng hiệu

Không, logo chỉ là một ph n nhỏ trong th gọi là bộ nhận diện th ơng hiệu.

Hiện nay chỉ có nhóm nhận diện th ơng hiệạ đ ợc phân lo i: nhận diện th ơng hiệu công ty và nhận diện
th ơng hiệu s n ph m.

148
 Brand Identity

Bộ nhận diện th ơng hiệạ đ ấ đ

Một bộ nhận diện th ơng hiệạ đ ấ đ có hằng hà sa th để b n chu n bị:

- Logo
- Font chữ
- Slogan
- n ph m Ảăn phòng
- Đồng ph c
- n ph m truyền thông
- Hàng hóa
- Quà tặng
- …

149
 Brand Identity

Từ logo đến bộ nhận diện th ơng hiệu

Cùng Ấem clip saạ để hiểạ hơn 1 ph n quy trình làm việc với các file mockup nhé:

https://www.youtube.com/watch?v=XD7jr_apf4Q&index=1&list=PL9_gOzpFilwoQu3hoRvGE2wiBMG2rwSOi

150
 Tổng kết ch ơng 6

Tiếp t c con đ ng ng d ng
Chỉ còn 2 ch ơng nữa là chúng ta sẽ kết thúc cuộc hành trình này rồi. Đừng n n, b n nhé, vì biết đâạ những
ph n b n đang tìm kiếm là những ph n nằm những trang cuối c a cuốn sách.

Điều kiện tiên quyết để tr thành designer giỏi là kiên trì Ảà chăm chỉ luyện tập, Không đ ợc cho phép b n
thân ngừng cố gắng học hỏi và sáng t o.

Cùng đến với 1 ph n thú vị hơn ch ơng 7 b n nhé.

151
CHƯƠNG 7

ng d ng thiết kế
CV

Đã r t nhiều l n tôi hỏi mọi ng i trong lớp học colorME, rằng, có

bao nhiêu ng i đã, đang Ảà sẽ c n 1 cái CV đẹp? Ch a l n nào số
ng i đ a taấ lên là d ới 80%.

Vậy nên, không có một lý do nào mà tôi l i không đ a những điều

này vào cuốn sách đ u tiên c a cuộc đ i mình.

Con ng i có thói qạen đánh giá nhaạ qạa Ảẻ bề ngoài, vậy nên
đừng tiếc chút th i gian để tút tát cho CV c a mình b n nhé.

152
 CV – Grid&List

Chia CV thành nhiều cột

B n có nhận ra rằng, những t báo gi ấ th ng đ ợc chia thành r t nhiều cột nhỏ khác nhau thay vì dài tr i
thông tin nh trong cạốn sách?

Đơn gi n, vì khi số l ợng từ trên một dòng gi m xuống, tốc độ đọc c a ng i dùng sẽ tăng lên. B n có muốn
nhà tuyển d ng biết hết những thông tin c a b n thật nhanh chóng?

Tốt. Vậy hãy bắt đ u bằng cách chia đôi hoặc chia 3 CV c a b n nhé

153
 CV – Grid&List

Chia CV thành nhiều cột

Tùy vào số l ợng thông tin b n muốn đ a Ảào CV mà số l ợng cột c n đ ợc căn một cách phù hợp.

Hãy thử tự phân tích 2 CV trên để hiểạ rõ hơn b n nhé.

154
 CV – Theme Color

Chọn màu ch đ o cho CV

Cái nàấ chúng ta đã đi qạa rồi, đúng không?

Đừng làm CV c a b n tr nên lòe loẹt b i quá nhiều màu sắc nhé.

Hãy chỉ chọn 1 và chỉ 1 màu duy nh t cho CV c a mình nếu b n ch a đ chuyên nghiệp trong thiết kế. L i
khuyên cho b n là hãy dùng các tông màu l nh nh l c-lam-chàm để tăng độ tin t ng từ nhà tuyển d ng
đến b n.

155
 CV – Header

Đ um c
Nh mọi ng i th ng nói, nộp CV là quá trình bán b n thân cho nhà tuyển d ng.

Vậy nên hãy gây n t ợng thật tốt với nhà tuyển d ng bằng một đ u m c xúc tích b n nhé.

Những thông tin th ng có trong đ u m c là: Tên, giới thiệu ngắn về b n thân, vị trí tuyển d ng, thông tin cá
nhân, nh đ i diện…

156
 CV - Avatar

nh đ i diện
Nghiên c u chỉ ra rằng, những CV có nh đ i diện đi kèm chiếm ạ thế lớn hơn hẳn so với CV không có.

Nhà tuyển d ng sẽ n t ợng với b n tốt hơn, có thiện c m hơn Ảà c m th y b n tự tin hơn các ng viên khác.

Học cách t o ra nhiều mẫu avt t i đâấ b n nhé:

https://www.youtube.com/watch?v=7TCTIv45Dxg&list=PL9_gOzpFilwrVmId0RklZDJG8sBDgrYid

157
 CV – Titles

Đồng bộ hóa tiêạ đề

CV, thực ra là một lo t thông tin về một cá thể đ ợc chia theo nhóm.

Đừng bắt ng i khác ph i nhớ I, II, III, rồi 1,2,3 saạ đó l i a,b,c b n nhé.

Hãy t o ra 1 tiêu đề đơn gi n Ảà đồng bộ cho toàn bộ CV, việc tiếp theo b n c n làm là đ a nội dung vào
thôi.

158
 CV – Charts

Các mẫu biểạ đồ nên có

Con ng i chúng ta có 2 bán c u não. Một bên chuyên xử lý thông tin, bên còn l i chuyên xử lý hình nh.

y vậy mà, ph n lớn CV c a mọi ng i chỉ chi chít toàn chữ. Hãy cùng học một số ph ơng pháp t o biểạ đồ
tùy biến trong Photoshop nhé:

https://www.youtube.com/watch?v=1RgAHf8HeCU&index=4&list=PL9_gOzpFilwrVmId0RklZDJG8sBDgrYid

159
 CV – Timeline

Dòng th i gian
Tiếp đó, hãấ cho mọi ng i th y tiến trình cố gắng trong quá trình học tập và làm việc c a b n bằng một
timeline trong CV nhé:

https://www.youtube.com/watch?v=u7Uh22HmYI8&list=PL9_gOzpFilwrVmId0RklZDJG8sBDgrYid&index=3

160
 CV – Icons

Hệ thống Icon
Đừng qạên đ a Ảào hệ thống icon để làm CV c a b n trông thú vị hơn nhé.

B n có thể tìm thêm icon t i: http://icons8.com

161
CHƯƠNG 8

Các Ấạ h ớng
Thiết kế

Chúng ta đã cùng nhaạ đi trên một chặng đ ng r t dài. Chỉ còn

một ch ơng cạối cùng trong cuốn sách này. Hãy c m nhận mọi th
thật tự nhiên, đừng để những do dự hay nghi v n qu y rối b n.

Trên thế giới mỗi năm đều có những Ấạ h ớng thiết kế nh t định.
Và chúng ta, những designer, cũng nên tìm hiểu những Ấạ h ớng
đó, đúng không?

Ch ơng cạối c a cuốn sách sẽ không bao gi kết thúc, vì sự sáng

t o c a con ng i là vô tận. Tôi sẽ cố gắng tái b n cuốn sách này
thật nhiều l n nữa, để có thể chia sẻ với các b n những kiến th c
mới mà tôi có.

ng hộ tôi nhé, b n hiền!

162
 Flat Design

Cuộc chiến lớn

Năm 2012, toàn bộ designer trên thế giới chia thành 2 phe, một phe ng hộ và một phe chống đối thiết kế
phẳng. Cuộc chiến đó đến tận bây gi vẫn ch a ch m d t, Ảà ạ thế đang thạộc về nhóm thiết kế phẳng. Vậy
thiết kế phẳng là gì?

Thiết kế phẳng là t t ng thiết kế tối gi n hóa t t c mọi th , từ màu sắc, chi tiết đến hiệu ng. Đ ợc lo i bỏ
hoàn toàn. Vậy từ đâạ mà có Ấạ h ớng thiết kế này?

163
 Flat Design

Ông lớn Microsoft

2012 chính là năm mà Windoảs 8 ra đ i, đánh d u một phong cách giao diện hoàn toàn khác với màn hình
start nh thế này.

Flat Design, ban đ ạ còn đ ợc gọi là Metro Design. Gi i thích cho cái tên nàấ, kĩ s tr ng c a Windows 8 cho
biết, phong cách mà Metro Design h ớng đến là phong cách thiết kế biển báo ga tàạ điện Metro: Đơn gi n,
gọn gàng, xúc tích.

Khi mà cuộc sống c a con ng i ngày càng tr nên nhanh hơn, những t t ng trên là t t ng đ ợc ng hộ.

Từ khóa Metro một th i gian sau bị thu hồi vì lý do b n quyền.

164
 Flat Design

Đặc tr ng c a thiết kế phẳng

- Màu đặc tr ng là màạ pastel
- Bỏ hiệu ng đổ bóng
- Bỏ hiệu ng gradient
- Dùng font chữ không chân
- Dùng hình khối cơ b n

165
 Flat Design

Google gia nhập cuộc chơi

Cuộc chiến giữa các designer tr nên lớn hơn bao gi hết khi Google gia nhập cuộc chơi Ảới Material Design –
Ngôn ngữ thiết kế mới c a Google

166
 Flat Design

Bóng quay tr l i
Google đem bóng đổ tr l i với thiết kế phẳng, một cách r t tối gi n.

Hẳn b n đã từng nhìn th y những icon với bóng dài đổ 45 độ nh thế này đâạ đó. Và bâấ gi b n đã có câạ
tr l i cho mình.

Tự tay xây dựng 1 con này xem sao b n nhé:

https://www.youtube.com/watch?v=p6m49ZpzCcU&list=PL9_gOzpFilwrYwBD6Cq9s4QzDNLwAs3jC

167
 Flat Design

Simple is the best

Đơn gi n không có nghĩa là nhàm chán.

B t c ai cũng có thể dễ dàng học thiết kế phẳng, nh ng không ph i ai cũng thiết kế phẳng đẹp.

Để tác ph m đẹp, b n c n thêm nhiều kinh nghiệm hơn nữa trong thiết kế. Vì vậấ, đừng ngừng luyện tập, b n
nhé.

168
 Flat Design

iOS với gradient

Apple gia nhập cuộc chơi thiết kế phẳng với iOS 7.

Nếạ Google đem bóng tr l i cuộc chơi thì Apple chính là ng i hùng giữ hiệu ng Gradient l i.

Vẫn đ ợc cộng đồng ch p nhận là thiết kế phẳng, tuy nhiên Gradient theo phỏng cách Apple ph i luôn giữ
những màu sắc t ơi sáng Ảà không bị l m d ng để t o chiều sâu cho tác ph m.

169
 Blur & Flat Design

ng d ng với Blur BackGround

Thiết kế phẳng cho phép b n dàn tr i thông tin một cách hiệu qu và tập trạng. Đặc biệt khi nó đ ợc ng
d ng vớ Blur Background.

Cùng thử t o ra 1 tác ph m thế này xem nào:

https://www.youtube.com/watch?v=tgEynr9Upx0&index=2&list=PL9_gOzpFilwrYwBD6Cq9s4QzDNLwAs3jC

170
 Tổng kết ch ơng 8

T t c chỉ mới bắt đ u

Xin chúc mừng và c m ơn b n r t nhiềạ Ảì đã hoàn thành cạốn sách này.

Cuốn sách này ch a đựng r t nhiều tâm huyết Ảà sạấ nghĩ c a tôi. Nh ng nó ch a ph i là t t c , tôi đã chạ n
bị ph n 2 c a cuốn sách này cho b n rồi, đón đọc trong th i gian tới nhé.

171
PHỤ LỤC 1

Danh sách phím tắt

Trong Photoshop

Đôi lúc, b n sẽ quên m t một vài phím tắt, danh sách sau sẽ giúp
b n ph n nào trong quá trình ôn l i kiến th c.

172
 Danh sách phím tắt

Nhóm Phím Tắt Hệ Thống FILE

- CTRL + N (New): T o File mới
- CTRL + O (Open): M file
- CTRL + ALT + O (Open As): M file từ Adobe Bridge
- CTRL + W (Close): Đóng File
- CTRL + S (SaẢe): L ạ file
- CTRL + SHIFT + S (SaẢe As): L ạ ra các d ng khác
- CTRL + ALT + S (SaẢe a Copấ): L ạ thêm 1 b n copy
- CTRL + P (Print): In nh
Nhóm Lệnh Thao Tác Với Layer
- CTRL + SHIFT + N: T o Layer mới
- CTRL + J: Nhân đôi Laấer
- CTRL + SHIFT + J: Cắt Layer
- CTRL + G: T o nhóm Layer
- CTRL + SHIFT + G: Bỏ nhóm Layer
- CTRL + SHIFT + ]: Chuyển Layer lên trên cùng
- CTRL + ]: Chuyển Layer lên trên
- CTRL + [: Chuyển Layer xuống d ới
- CTRL + SHIFT + [: Chuyển Layer xuống d ới cùng
- CTRL + E: Ghép các Laấer đ ợc chọn
- CTRL + SHIFT + E: Ghép t t c các Layer
Các Lệnh Chọn SELECT Trong Photoshop
- CTRL + A: Chọn t t c
- CTRL + D: Bỏ vùng chọn
- CTRL + SHIFT + D: Chọn l i vùng chọn
- CTRL + SHIFT + I: Nghịch đ o vùng chọn
- CTRL + ALT + D: M biên vùng chọn
- CTRL + F: Lặp l i Filter cuối cùng
- CTRL + SHIFT + F: Chỉnh Opacity Brush

173
 Danh sách phím tắt

Các Phím Tắt Với Nhóm IMAGE

- CTRL + L: B ng Levels
- CTRL + SHIFT + L: Tự động chỉnh Levels
- CTRL + ALT + SHIFT + L: Tự động chỉnh Contrast
- CTRL + M: B ng Curves
- CTRL + B: B ng Color Blance
- CTRL + U: B ng Hue/Saturation
- CTRL + SHIFT + U: B ng Desaturate
- CTRL + I: B ng Invert
Cách Lệnh Tắt Với Nhóm Lệnh EDIT
- [: Phóng to nét bút
- ]: Thu nhỏ nét bút
- CTRL + Z: Tr l i b ớc vừa làm
- CTRL + ALT + Z: Tr l i nhiềạ b ớc
- CTRL + X: Cắt
- CTRL + C: Copy
- CTRL + SHIFT + C: Copy Merged
- CTRL + V: Paste
- CTRL + SHIFT + CTRL + V: Paste chồng lên
- CTRL + T: Xoay hình / Chỉnh ti lệ
- CTRL + SHIFT + T: Làm l i b ớc Free Transform
Nhóm Phím Tắt VIEW
- CTRL + Y: Xem màu CMYK
- CTRL + SHIFT + Y: Xem gam màu ngoài hệ CMYK
- CTRL + +: Phóng to
- CTRL + –: Thu nhỏ
- CTRL + 0: Xem hình tràn màn hình
- CTRL + SHIFT + H: n các đ ng Path
- CTRL + R: Hiện th ớc
- CTRL + ; n Guides
- CTRL + SHIFT + ; Nh y bằng Guides
- CTRL + ALT + ; Khoá Guides
- CTRL + “ Hiện l ới
- CTRL + SHIFT + ‘ Nh y bằng l ới

174
 Danh sách phím tắt

Nhóm Phím Tắt Công C -Toolbar

- V: Di chuyển
- M: T o vùng chọn
- L: T o vùng chọn tự do
- W: T o vùng chọn theo màu
- C: Cắt hình
- I: Ch m màạ . Th ớc kẻ
- J: Ch m sửa chỗ ch a hoàn chỉnh
- B: Nét bút
- S: L y mẫu từ 1 nh
- Y: Gọi l i thông số cũ c a nh
- E: T y
- G: Đổ màạ/Đổ màu chuyển
- . : Mô t hiện t ng miết tay
- O: Làm tối nh
- P: T o đ ng path . vector
- T: Viết chữ
- A: Chọn đ ng Path . Vector
- U: Vẽ các hình cơ b n
- H: Hand Tool
- Z: Phóng to / nhỏ hình
- D: Background
- Color Quay về màạ cơ b n ban d u
- X: Foreground
- &: Đổi màu trên b ng mà

175
PHỤ LỤC 2

Về lớp học
colorME

Th i điểm tôi viết cuốn sách này là lúc colorME chỉ vừa mới 12
tháng tuổi. Tôi muốn chia sẻ cùng b n một số hình nh về colorME.

T i th i điểm nàấ, colorME đã đào t o 1500 học Ảiên trên địa bàn
thành phố Hà Nội, chúng tôi còn trẻ, còn r t nhiều tham vọng và
ớc mơ. Nh ng dù có là điên cạồng, chúng tôi cũng mạốn một l n
thaấ đổi những ng i trẻ c a Việt Nam, với toàn bộ tuổi trẻ c a
mình.

176
177
178
PHỤ LỤC 3

Câu chuyện kh i nghiệp

C a colorME

5 ngày sau ngày sinh nhật c a tôi là ngày sinh nhật c a colorME.

colorME là tuổi 20 c a tôi, là những sạấ nghĩ điên rồ và d i dột mà

tôi muốn l ạ giữ mãi mãi.

Trong quá trình phát triển colorME, tôi đã chăm chỉ ghi l i toàn bộ
câu chuyện từ những chi tiết nhỏ nh t. Hãấ đọc nếu th y h ng thú
b n nhé. Vì biết đâạ, b n khi sinh ra đã là một thành viên thuộc gia
đình colorME?

Đọc chuỗi tôi kh i nghiệp t i:

https://www.facebook.com/notes/nguy%E1%BB%85n-
vi%E1%BB%87t-h%C3%B9ng/t%C3%B4i-kh%E1%BB%9Fi-
nghi%E1%BB%87p-t%E1%BA%ADp-1-ph%E1%BA%A7n-
1/1677160935850570

179
PHỤ LỤC 4

Chúng tôi
C nb n

Gia đình colorME hiểu rằng, colorME sẽ không thể đ ợc nh ngàấ

hôm nay nếu không nhận đ ợc sự giúp s c c a cộng đồng.

Vậy nên, bằng một cách nào đó, nếu b n có đọc đ ợc những dòng
nàấ, đừng ng n ng i Ảà tìm đến tôi nhé.

Tôi không chắc điểm đến cuối cùng c a tôi có thực sự tồn t i hay
không. Nh ng tôi chắc chắn sẽ đi cùng Ảới b n trong suốt cuộc
hành trình c a colorME.

Hãy thử điên Ảà d i dột một l n với chúng tôi, b n nhé!

180
PHỤ LỤC 5

Nh một l i tri ân
Đến các học viên

Với hơn 500 học viên chỉ trong 5 tháng ngắn ng i. colorME vẫn
ch a hết bàng hoàng về những gì đã Ấ y ra.

Nh một gi c mơ dài Ảà đẹp, colorME đang tiến từng b ớc vững

chắc trên con đ ng tr thành tr ng học thiết kế cho mọi ng i.

Dù đã nói câạ nàấ r t nhiều l n, nh ng Ảẫn c m ơn mọi ng i một

l n nữa, vì t t c . Đ i gia đình colorME.

Hẹn gặp l i các colorMEans trong một ngày g n đâấ nh t.

181
LỜI KẾT

Tôi còn nhiềạ điều nữa

Muốn chia sẻ với mọi ng i

Nh ng t i th i điểm hiện t i, t t c những gì tôi có thể làm làm xây

dựng cuốn ebook này.

Tôi sẽ còn viết thêm nhiều cuốn sách nh thế này nữa, hãy ng hộ
tôi nhé.

Tiếp t c theo dõi con đ ng phát triển c a colorME t i:

http://facebook.com/colorME.hanoi

B t c ph n hồi, ph n ánh nào xin vui lòng liên hệ:

[email protected]

182