Professional Documents
Culture Documents
Cun sch ny
Dnh cho nhng ngi ang
tm kim kin thc, nh ti
S khng c qu nhiu li m u so rng v di dng. Tt c
nhng g ti mun a vo cun sch ny l nhng kin thc m ti
may mn c hc. V ti tin rng, tt c mi ngi u xng
ng nhn c n.
colorME
L c m, tui tr v
nhit huyt ca ti
Ti l Hng-Founder ca colorME lp hc thit k cho tt c mi
ngi, l k in ang ngi g tng ch trong cun sch ny vi hi
vng gip c nhng ngi nh bn, bit n nhng kin thc t
ai chia s.
MC LC
1.
2.
3.
4.
5.
6.
7.
8.
CHNG 1
Kin thc c bn v thit k
k thut s
Chng ta s bt u t nhng bc i nh nht nh. Hy bt u t
nhng kin thc m bt c designer no cng phi nm r nh lng
bn tay.
Cc bi ton thng gp
Chia s cho bn th bn cn.
Chng ti c mt t kin thc v thit k. Nhng khng v th m chng ti c gng nhi nht tt c vo cun
ebook 200 trang ny, chng ti s ch gip bn vi nhng kin thc tinh gn nht. bn c th t bc i
tip trn i chn ca mnh m khng cn s gip sc ca nhng cun sch khc na. Hy th nhn xem cc
bi ton m hc vin ca colorME thng gp l nh th no nh.
S ha tng
Bn c 1001 tng trong u c th tr thnh tuyt phm nhng khng bit bt u t u.
Chn quote vo nh
D nh nhng cng rt nhiu ngi hng th, chn deep quote v nhng bc hnh o diu
Chnh sa nh
Lm trng da, mn da, ty mn, nhum tc hay chnh sa nhng bc hnh m bn t chp.
Nhng g bn c v cha c
Adobe Photoshop
c mnh danh l ph thy k thut s, Photoshop (PTS) l mt phn
mm k diu m bt c ai cng nn hc s dng. Photoshop cho
php bn dng th trong vng 30 ngy. Hoc, bn c th s dng cc
phin bn c ca Photoshop ang c cung cp hon ton min ph
hc tp,
Adobe Illustraotor
L ngi anh em song sinh vi Photoshop, llustrator (AI) cng l mt
phn mm thit k khng. Tuy nhin, nu Photoshop thin nng v
thit k raster, chnh sa nh th Illustrator li thin v thit k vector.
Cc sn phm c dng in n hay cc sn phm nhn din
thng hiu c to ra bi AI nhiu hn l PTS
Adobe Indesign
Nhng n phm chuyn dng trong trng hp in n, nhng n
phm c nhiu trang nh nhng cun sch, nhng brochure, leaveleft
thng c to ra bi Indesign. Phn mm ny kh m nht vi rt
nhiu ngi. Tuy nhin, nu dnh thi gian hc th, bn s thy rt
hng th vi n.
Adobe Lightroom
L phn mm c gii Photographer cc k a chung, Lighrtoom
thin nng v retouch v blend. Mt k nng m bn cn c nu mun
t to ra nhng bc hnh c mu sc o diu. Vi nhng preset cung
cp sn cc k nhiu trn mng. Bn s c th t hc rt nhanh phn
mm ny.
V sao nn hc Photoshop
Th hin c tnh
Cho mi ngi thy bn l ai, cm nhn v ngh thut ca bn nh th no qua tc phm ca mnh
Tham gia d n
Bn hon ton c th tr thnh designer quan trng ca bt c d n no
Typography
Bn thch chi vi cc con ch? Photoshop l dnh cho bn
Khi phc nh
Nhng bc hnh t thu lt lng a vng, liu c th em chng tr li?
V tranh
Tr thnh 1 digital painter chnh hiu vi Photoshop bn nh
Thay i mu nh
Tha h blend mu nh theo thch vi cc cng c cc mnh trong Photoshop
Thit k o thun
Khng cn cn nhn vi cc desinger xng in na khi bn c ph thy trong tay
Chnh sa li nh
Mt ? Thiu sng? Nhe nh? Hy xem Photoshop c th gip bn lm g nh
Chnh style nh
Hng t cc hiu ng ang ch bn p dng vo nhng bc hnh
im nh l g?
bao gi bn nghe n t im nh hay pixel cha?
Pixel l phn t nh nht ca mi bc hnh. Mi pixel l mt vung
ch cha ng 1 mu duy nht.
Hy phng to bc hnh ca bn
Vi bt c bc hnh no, ch cn phng to ra ht c, bn s thy
chng b v nt thnh rt nhiu im nh. V d nh hnh bn, Captain
American l mt tm hnh c to thnh t 1 li pixel bao gm 21
dng v 19 ct. Nh vy bc hnh bn c 19x21 pixel.
Kch thc nh
Kch thc nh chnh l s lng pixel chiu ngang nhn vi s lng pixel chiu dc ca mi bc nh.
Hnh trn cho chng ta m v d t nh ca mt ch Fappy Bird trn google image. Trong trng hp ny,
bc hnh c kch thc l 236x149.
Tip n, chng ta cng nghin cu mt t vng khc cng khng km phn quan trng. Ti chc l bn
nghe t ny khng t ln trc y, l phn gii.
10
200 pixels per inch 250 pixels per inch 300 pixels per inch
phn gii
phn gii nh l s lng pixel trn mt n v di. di bn nh, tuyt i khng c nhm sang
din tch v n s thay i rt nhiu th.
Bn c th tng tng c rng, nu bn dn mt bc hnh c 50x100 pixel ln mt t giy A4, r nt
ca n s rt khc khi bn in mt bc hnh c 500x1000 pixel ln cng kch thc giy.
Bn c th hiu nm na, phn gii cng cao cho php hin th ca hnh ln giy hoc mn hnh my
tnh/ in thoi cng r.
Hy tham kho thm 1 s v d v s nh hng ca phn gii bn nh.
11
Trong in n
2 hnh trn m t cng 1 quang cnh, tuy nhin bc hnh di c s pixel thp hn rt nhiu so vi bc hnh
trn. y l l do v sao khi dn c 2 hnh trn cng 1 kch thc giy, ta c th thy mt hnh th rt r, trong
khi hnh cn li th cc k m nht v v nt.
12
Trong hin th
Thm mt v d khc v phn gii, bn c th thy rng, nhng chic iPhone nh b ny c th c s
lng pixel ngang bng mn hnh chic my tnh ca bn.
Tuy nhin, kch thc ca chng th li nh hn mn hnh my tnh ca bn rt nhiu ln. l l do v sao,
cng 1 video, khi xem trn iPhone, ta cm gic s r nt tng ln rt nhiu so vi mn hnh my tnh.
13
H mu CMYK
H mu CMYK
Sau nhng khi nim v pixel, kch thc nh v phn gii. Th tip theo m chng ta cn nghin cu l h
mu.
C 2 h mu m bn cn c bit lu tm. H mu CMYK v h mu RGB.
H mu CMYK hay cn c gi l h mu tr, thng c dng thit k ra cc sn phm chuyn dng
trong in n.
H mu ny c gi l h mu tr v n khng th to ra c mu trng, m ch c th tr dn mu trng
v mu en.
Hy th xem qua clip ny hiu hn cc hot ng ca h mu CMYK bn nh.
https://www.youtube.com/watch?v=IN9XFXfNSgQ
https://www.youtube.com/watch?v=MHoFPivJI2I
Nh vy bn hnh dung ra, h mu CYMK l vit tt ca 4 mu:
C (Cyan) M (Magneta) Y (Yellow) v K (Key-Black)
Ti sao li l K ch khng phi B? V y, mu en c vai tr rt quan trng trong vic n nh sng ti
ca im nh sau khi c phi mu t 3 mu cn li.
14
H mu RGB
H mu RGB
Nu nh h mu CMYK chuyn c dng trong in n, th h mu RGB li chuyn dng trong hin th.
bao gi bn thc mc ti sao mn hnh my tnh c th hin th c nhiu mu nh th?
L gii cho iu ny, mi pixel trn mn hnh my tnh c to thnh t 3 n led, c mu (RED) Xanh
L (GREEN) Xanh Lam (BLUE)
15
H mu RGB
16
17
Khi to file mi
Cch to file mi
Khng n gin nh word, mt fiel mi ca Photoshop i hi bn a vo rt nhiu thng s ban u.
V tht may mn, tt c nhng thng s quan trng nh h mu, phn gii, kch thc nh bn u
nm c ri.
to file mi trong Photoshop, bn ch cn bm ctrl+N, mt bng nh trn s hin ln cho php bn a
thng s vo.
18
Layer l g
y c th coi l mt trong nhng khi nim quan trng nht trong Photoshop.
Bn c th hnh dung, layer l mt tm ban u hon ton trong sut khng c g c, bn a bt c hnh
no vo layer , th ch nhng vng c hnh th phn s c hin th.
Ngc li, tt c nhng vng trn layer khng c hnh s tr nn trong sut.
V, trong Photoshop, bn s lm vic vi rt nhiu layer chng ln nhau trong mi mt file.
Nh v d trn bn c th thy, chng ta c 3 layer chng ln nhau. Layer u tin ch gm nhng mng mu
vng v ch trng. Layer th 2 ch c hnh cc bn i hp nm tay nhau. V layer cui cng l mt
background gm rt nhiu chui.
Bn nm c khi nim v layer ri ng khng? Gi hy nm mt s thao tc vi layer nh.
19
Cc thao tc c bn vi lp
Danh sch phm tt thao tc vi layer
To Layer (Ctrl + Shift + N)
Xa Layer (Chn layer - Delete)
Thay i th t cc layer (Ko th trong layers panel)
Gp 2 hoc nhiu layer li (chn Layer, Ctrl + E)
t tn Layer (Double click vo tn layer)
Chn nhanh Layer (n ctrl hoc chn auto-select)
To nhm cc layer (Ctrl + G)
Xem qua clip sau hiu hn v demo layer bn nh
https://www.youtube.com/watch?v=1fpfSEF0aJk&index=2&list=PL9_
gOzpFilwpSPzpPu6Z8gWXID3woj7Wn
Ch
1, Layer Menu cha ht tt c cc ty chnh cho layer
2, Nh chn ng layer trc khi x l
20
Cng c di chuyn
Cng n vi cng c u tin trong Photoshop bn nh.
Cng c di chuyn (move tool) l cng c cho php bn di chuyn cc layer khc nhau trong cng 1 file
Photoshop.
Phm tt ca cng c ny l V. Vic s dng phm tt c vai tr rt quan trng trong qu trnh s dng phn
mm Photoshop, vy nn bn nh c gng tp lm quen vi vic nh phm tt nh.
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Tng kt chng 1
35
CHNG 2
Cc b cc thng gp
v ng dng
Nu ni dung l da tht ca bn thit k th b cc nh l khung
xng ca chng vy.
36
Li trong thit k
Li l g?
S cn chnh vc chun mc em li s thoi mi v t duy nhn-c r rng cho ngi dng.
Ngi dng s rt kh chu nu khi nhn vo bn thit k ca bn, h khng bit phi nhn t u n u.
Li, l nhng ng cn dc-ngang m ngi dng khng nhn thy. Chng ch tn ti trong qu trnh
designer xy dng tc phm.
Trong bc hnh trn, bn c th thy h thng cc ng cn dc ngang chia bc hnh thnh rt nhiu phn
r rng.
37
Li trong thit k
Tc dng ca li
Ly mt v d n gin, CV tuyt p pha trn c h thng li kh n gin.
H thng li gip designer chia CV thnh 3 phn ring bit v cn chnh cc phn t tht thng hng.
Tht kh chu bit bao nu nhng icon xinh p c b th ra-tht vo, ng khng?
38
Li trong thit k
Li c mt mi ni
T nhng tc phm phc tp n nhng tc phm n gin, chng ta u c th t hnh dung h thng li
ca chng.
Trn y l ba tp ch Time, phn ln cc ba tp ch Time u c 4 ng cn c bn l trn-di-tri-phi
rt n gin.
Vy lm sao to li trong Photoshop? Cng hc cng c Ruler ( R ) qua video sau bn nh.
https://www.youtube.com/watch?v=PRjDflHw088&index=2&list=PL9_gOzpFilwolnNCBSABVLqRxMD1vgqvb
39
Li trong thit k
Mt v d khc
Trn y l mt b phim bom tn ni ting m t hn tt c chng ta u bit. Cng xem b cc ca tm
poster ny c xy dng nh th no bn nh.
Phn tn phim, chim trn mt phn rt to trong bc thit k, d nhin ri, v l phn quan trng nht ca
tm poster ny m.
Pha trn ca tm poster l mt lot tn ngi sao hng A t Hollywood, nhng ci tn ny c dn u v
sp xp gn gng trong 2 cn l ngang m bn c th thy.
Tip , thng tin v on lm phim c t gn gng pha di tn phim. y l nhng thng tin c mt
dy v quan trng thp, dn n vic phn ch ca on ny c thu li rt nh.
40
Sao li c phn mm y?
Ti khng m ch phn mm my tnh. Phn mm trong thit k l nhng phn c th c chnh sa, b
sung v cp nht.
Nh bn c th cover pha trn, phn logo ca t chc c nm gn trong mt khung ring bit.
Hy tng tng nhng trng hp m bn cn thay i hoc b sung logo, bn hon ton c th ch ng
a chng vo m khng thay i bt c th g ca b cc thit k.
Nhn din u l phn cng, u l phn mm l mt k nng quan trng trong thit k. Bn cn phng trc
cc trng hp c th xy ra trong qu trnh thit k khng phi mt thi gian lm li t u Mt vic
m chc hn bn s rt ght sau khi tr thnh designer.
41
Lut 1/3
Lut 1/3
bao gi bn nghe thy cm t ny cha?
y l mt b cc c ng dng rt nhiu trong nhip nh v quay phim.
Trc khi tm hiu v b cc 1/3, hy cng xem 1 video v mt th gi l t l vng bn nh.
https://www.youtube.com/watch?v=Zs7xLKCceWg
Sau khi hiu r v t l vng. Cng xem s kt ni gia t l vng v t l 1/3.
https://www.youtube.com/watch?v=9CiS3SU4lk0
42
Lut 1/3
Mt cch ngn gn
Mt tc phm c coi l c b cc 1/3 khi chia bc hnh thnh 3 hng v 3 ct, s c mt im quan
trng ri vo 1 trong 4 im giao ca cc ng phn chia.
Trong poster trn, gng mt ca Brad Pitt ri vo 1 trong 4 im giao. V bn c th t cm nhn, rng
gng mt ca nam ti t ny tr nn cc k ni bt trong tc phm.
Vy chuyn g s xy ra nu bc hnh ca bn khng nm trong t l 1/3?
Cng thao kho cng c Crop Tool ( C ) bin iu ny thnh s tht bn nh.
https://www.youtube.com/watch?v=LSPN4YiHdRc&index=1&list=PL9_gOzpFilwolnNCBSABVLqRxMD1vgqvb
43
Lut 1/3
Mt v d khc
Vi bc hnh ny, gng mt ca Santa li l im nhn c a vo 1 trong 4 im giao ca khung 1/3.
Rt rt nhiu tc phm khc m bn tng xem c cha t l ny bn trong.
N khng xut hin mn mt cho n khi bn cm nhn c thc s t l 1/3 l g.
Bn cnh b cc 1/3. Cn mt b cc khc cng c dng rt nhiu, cng xem tip bn nh.
44
Lut i xng
T l i xng
ng nh tn gi ca n. B cc i xng gip bn a tt c cc phn ni dung v mt cch cn i tuyt
i.
B cc ny dn dt th gic ngi xem theo chiu dc. V, iu k diu y l, vic dn dt th gic ngi
xem s tr nn n gin hn bao gi ht.
v d trn, iu u tin p vo mt ngi xem l chic Apple MacBook p tuyt vi. Tip l ci tn
cc k sng to Thinnovation. V cui cng ln hng icon xinh p nm bn di ca Macbook.
Mt v d n gin chng ta cng hiu c ng khng?
45
Lut i xng
Mt v d khc
Mt poster kch thch t chui ca hng n nhanh ln nht th gii Mc Donnald.
Poster c b cc i xng, ch mt trc cn duy nht phn tch bc hnh thnh 2 phn cn i r rt.
Hy t chim nghim s dn dt th gic trong tc phm trn bn nh.
V gi l lc bn bt u tp lm quen vi cng c g ch: Text Tool (T) vi mt v d n gin sau:
https://www.youtube.com/watch?v=68ZeW5RF57k&index=3&list=PL9_gOzpFilwolnNCBSABVLqRxMD1vgqvb
46
Tng kt chng 2
Bn bt u cm thy t tin hn rt nhiu, ng khng?
Bn s bt u gp phi mt hi chng m tt c designer u mc phi Hi chng phn tch.
D i n bt k u, nhn thy bt c tc phm no, bn cng s lun nhn thy nhng ng cn v hnh v
nhng im 1/3 c che du ti tnh pha sau mi tc phm.
Hon ton lm ch c th gic ca mnh l nhng iu bn c th t c sau khi hon thnh chng
ng trn cuc hnh trnh ca chng ta.
Cng xem mt s tc phm m hc vin colorME lm c sau 2 bui hc no
47
CHNG 3
S dng mu sc
48
Vng thun sc
cu vng
Rt nhiu nm trc y, bn tng thy chic ny ng khng?
Mt chic vi nhng vt mu ring bit, mt chic rt ht mt ngi xem. N tng rt thnh hnh vo
nhng nm 2008.
cam vng lc lam chm tm, bn c thy chui mu ny quen khng?
Chnh xc, l mu ca cu vng, v n cng l nhng mu nm bn trong mt vt rt quan trng ca th
gii mu sc. Mt vt c tn l Vng Thun Sc.
49
Vng thun sc
Vng Thun Sc
Nh tn gi ca n, Vng thun sc l mt vng trn cha y mu sc.
Vng mu trn c th t nh mu cu vng, -Cam-Vng-Lc-Lam-Chm-Tm. V bn s kh c th ng
rng nh hng ca vng trn mu n gin ny n vic chn v phi mu ln n nhng no.
Vy lm sao hnh thnh nn vng trn mu ny?
50
Mu bc 1
Mu bc 1
Hy bt u t 3 nhm mu c bn: -Xanh Dng-Vng.
Quay li qu kh mt t nh, hy th tng tng li, ngy xa, khi bn hc v mu nc. Lm sao c th
pha trn nn 1 trong 3 mu trn?
Rt kh ng khng? V iu bn ang c gng l khng th. 3 mu -Xanh Dng-Vng c gi l mu
c bn hay mu bc 1 l nhng mu sc khng th pha ra c khi ha trn t cc mu khc.
51
Mu bc 2
Mu bc 2
T 3 mu bc 1, chng ta c th pha trn ra 3 mu mi m bn hon ton c th t on ra c:
Cam Xanh L Tm l 3 mu sc thuc nhm mu bc 2
V hin nhin ri, chng ta s c nhm mu tip theo tn l
52
Mu bc 3
Mu bc 3
Khi trn 1 mu bc 1 vi mt mu bc 2 lin k, bn s c ngay cc mu thuc nhm mu bc 3.
Tin trnh ny c th lp lui lp li v hn. n mt lc no , vng thun sc s tr thnh 1 di mu khp
kn.
53
H mu HSB
H mu HSB
Chng ta tng tm hiu qua 2 h mu quan trng trong thit k, h mu CMYK v h mu RGB. V gi y,
chng ta s tm hiu thm mt h mu mi na, h mu HSB.
H mu HSB, vit tt ca Hue (Mu gc) Saturation ( bo ha, c) Brightness ( sng).
H mu HSB ch lm 1 nhim v duy nht l gip nh thit k nh v r rng hn mu sc ca mnh nm
u trn Color Piicker.
54
H mu HSB
Color Picker
Color Picker l mt cng c cc k quan trng trong vic chn v phi hp mu sc.
Cng xem qua video sau hiu r hn v h mu HSB v Color Picker nh
https://www.youtube.com/watch?v=YQkHWDx7WgQ&list=PL9_gOzpFilwo7sSrdyZHQHTvtk6oiyy8z
55
Dng 1 mu
Mu ch o
Sai lm ln nht thng gp i vi cc bn mi bt u thit k l cc bn dng qu nhiu mu sc.
Bn cho tt c nhng mu c th vo bc thit k ca mnh, bin n thnh mt m hn n kh cm nhn
c.
Mt tc phm thit k thnh cng cn bo m v tnh cht mu ch o. Ngha l ngi dng s nm bt
ngay mu ch o trong tc phm ca bn l mu g sau khi chim ngng tc phm trong vi giy.
Gn y, hng Vespa c cho ra mt chin dch mang tn l Do You Vespa. Cng dnh thi gian xem
chin dch ny hot ng nh th no v kha cnh mu sc nh
https://www.youtube.com/watch?v=Oj_l4eDaB4k
56
Dng 1 mu
Adidas vi supercolor
Nh vy bn thy c nhng im m bn ch nht qua clip qung b chin dch ca Vespa.
Gi hy dnh 1 t thi gian xem mt chin dch qung co khc no. L Adidas hp tc cng Pharrel
William trong chin dch gn y mang tn supercolor.
L 50 i giy vi 50 sc thi mu khc nhau. Hy th xem clip ny c g tng ng vi clip trc nh:
https://www.youtube.com/watch?v=aIujzK4-478
57
Dng 1 mu
Apple vi iPod
Tht l sai st ln nu chng ta lng qun mt Apple.
tng c mt thi im, m iPod thnh hnh n mc: 50% gii tr M ang s hu 1 chic iPod, 50%
cn li th ngh n vic khi no mnh s c mt chic.
iPod c gii tr say m n mc Apple quyt nh phi a ra tht nhiu mu sc cho chic iPod vn ch c
2 mu en v trng ca mnh.
V, iu c bit nh ti ang ni n, d rc r n u, mi sn phm trong nhng sn phm trong 3
chin dch qung co trn u ch c 1 mu duy nht.
https://www.youtube.com/watch?v=_zf5Ov1dptA
58
Dng 1 mu
59
Dng 1 mu
60
Dng 1 mu
61
Dng 2 mu Mu tng ng
Mu tng ng
Phi mu ti bc c bn, nhim v duy nht ca bn l nh nm lng di mu: -Cam-Vng-Lc-LamChm-Tm, bit nhng mu no nm cnh nhau trn vng trn mu.
Nhng mu nm cnh nhau, em li cho ta cm gic hi ha v nh nhng. chnh lch khng qu ln v
tng phn gip ngi xem d dng cm nhn tc phm hn.
62
Dng 2 mu Mu tng ng
Gradient Tool
C mt ng dungj rt tuyt vi t vic s dng mu tng ng, l Gradient Tool.
Cng dnh 1 t thi gian xem hiu qu ca cng c ny nh
https://www.youtube.com/watch?v=FJ0EtP_z8DI&list=PL9_gOzpFilwo7sSrdyZHQHTvtk6oiyy8z&index=4
63
Dng 2 mu Mu b tc
Mu tng phn
Mu tng phn, hay cn gi l mu b tc bc 1. L nhng cp mu nm i nhau trn vng trn mu. Ch
c 3 cp mu quan trng nht m bn cn nh l: Vng-Tm; Xanh l , Xanh dng-Cam.
Trn y l v d v b nhn din thng hiu ca TPBank. S phi hp tuyt vi gia vng v tm.
64
Dng 2 mu Mu b tc
Mu sc ca hong tc
Vua cha thng c nh n vi mu vng quyn uy, tuy nhin, mt mu i km ni ting khng km
trong gii hong gia, l mu tm qu phi.
2 mu i nhau s b tc cho nhau v lm ni bt nhau ln.
Hy th tng tng nhng phn mu vng ca chic ti xinh p bn trn c thay bi mu xanh th trng
s nh th no?
65
Dng 2 mu Mu b tc
Xanh v Cam
Cp mu th 2, l cp xanh v cam.
Cp mu ny c nh gi l cp d kt hp nht trong 3 cp v an ton trong tng phn ca chng.
Hn bn cn nh nhng chic my bay xanh ca Vietnam Airlines vi hnh bng sen vng cam cc k ni bt.
66
Dng 2 mu Mu b tc
2 mu c a chung
Trong thit k, y l cp mu rt c a chung phi hp vi nhau.
Cng thng thc mt tc phm khc bn nh.
67
Dng 2 mu Mu b tc
v xanh l
y l cp mu c hn ch nht trong vic phi hp.
thit k c vi 2 mu ny i hi kinh nghim rt dy t designer
68
Dng 2 mu Mu b tc
Cp i ca thin nhin
Tuy nhin, y li chnh l 2 mu c thin nhin u i nht.
C 2 mu u tot ln mt th g lin quan n sc sng ca vn vt.
Hy th nghim cp mu ny ngay khi c c hi nh.
69
ngha ca mu sc
Mi mu sc u c ting ni ring
Trong mt cuc thng k ln v nhng cm nhn ca mi ngi v mt mu sc nht nh no . Cc nh
khoa hc nhn ra rng cc mu sc u em n mt s cm nhn chung cho cng ng,.
Phn ln mi ngi thy s an ton khi thy mu xanh, thy cn co khi nhn mu , cm nhn c s tinh
t du dng trong mu hng, s qu phi trong mu tm v nng lng trong mu vng.
Rt rt nhiu nhng cm nhn khc na v mu sc m bn c th tm thy trong bc hnh trn
70
ngha ca mu sc
71
Cc nhm mu thng gp
Retro
Retro c in
Nhm mu retro, mu m vng, em li cm gic c in nh nhng cho ngi xem.
Phong cch mu ny cn c bit n vi ci tn vintage
72
Cc nhm mu thng gp
Neon chi la
Nhng mu neon c trng em li cm xc rt mnh m cho ngi xem.
Nhng mu neon c mt nhc im, chng ch c th dng c trn nn ti pht ra nh sng nh
nhng gc hng ta thng thy n led.
73
Cc nhm mu thng gp
Pastel Color
Pastel nh nhng
Mu m trng Pastel. C th kt hp d dng vi nhau m khng gy kh chu cho ngi xem.
Nu c th m ta nhm mu ny bng 1 tnh t th c l l m nht.
ng vy, mu pastel rt kh c th tr thnh tng mu ch o, nhng li cc k hon ho tr thnh
background, l l do ti sao rm mn v chn ra gi m thng c tng mu ny.
74
Cng c chn mu
Kuler
Mt cng c chn mu ni ting ca Adobe, cng xem demo s dng phn mm ny qua clip sau bn nh:
https://www.youtube.com/watch?v=jx82r2wVW4U&index=5&list=PL9_gOzpFilwo7sSrdyZHQHTvtk6oiyy8z
75
Tng kt chng 3
Bn cng c mu sc ring ca bn
chnh l l do ti t tn lp hc ca mnh l colorME. V ti tin rng, ai ai trong chng ta cng c s sng
to v th gii ni tm ring bit, l nhng chic cha kha gip bn m ra th gii sng to ca ring
mnh.
Photoshop ch l mt cng c v cun sch ny cng ch l mt ngi bn ng hnh trong b phim m bn
l nhn vt chnh. Vy nn hy c gng tht nhiu hn na.
Chng ta s cng n vi th gii ca nhng con ch trong chng tip theo ca cun sch.
76
CHNG 4
Nhng iu cn bit
v Typography
Mi s kh khn trong vic thit k ca bn s chm dt ti thi
im bn lm ch c kh nng s dng ch ca mnh.
77
Cc nhm font c bn
78
Cc nhm font c bn
Sans Serif
Segoe UI
Microsoft Sans Serif
Helvetica
Arial
Calibri
Dotum
Verdana
Sans Serif tr trung nng ng
C ch c chn, ng nhin s c ch khng chn ri.
Nhm ch khng chn, hay cn gi l sans-serif l nhm ch em li cho mi ngi cm gic gn gng, nh
hng, hin i v nhanh chng.
l l do ti sao sans serif c dng rt nhiu trong qung co, truyn thng v cng ngh.
Hy t kim tra xem, my tnh v in thoi di ng ca bn ang c dng loi ch g hin th nh.
79
Cc nhm font c bn
Freestyle Script
Pristina
Segoe Script
French Script MT
Script t do phng khong
L nhng con ch lm ngi ta cm gic nh chng va c vit ra bi mt bn tay ti hoa ca mt ngh s
no .
Script em li cm gic t nhin hoang di. Chng thng c s dng rt nhiu trong nhng tc phm lin
quan nhiu n ngh thut v sng to.
Tt c nhng nhm ch khng thuc 3 nhm k trn c xp vo nhm ch trang tr. Mt nhm ch c
dng nhiu trong nhng tc phm sng to, game v chi tr em.
80
81
Thay i mu sc
C rt nhiu thuc tnh ca ch m bn c th thay i.
Ti sao khng th thay i mu sc ca ch v gi nguyn font ch xem sao. Bn s c nhng tri nghim rt
khc bit.
82
Thay i m ca ch
m ca ch - font weight l mt la chn khc cho bn bn c th dn dt th gic ngi xem theo
ng mun ca mnh.
83
n gin m hiu qu
Hy lun nh cu thn ch ca designer bn nh, simple is the best, ng tham, ng m m, hy mi
th ti gii hn ca n.
84
85
u tin Script
Hay mt font serif trnh trng
86
Serif
and sans serif
87
Cc k thut dng ch
BORDER
focused things
K thut ng khung
K thut ng khung, c dng rt nhiu v rng ri trong thit k.
K thut ny n gin l to ra mt bo vin xung quanh ch, khin tt c nhng th nm trong bo vin tr
thnh mt th thng nht.
Cng xem cch thc hin k thut ny ti y nh
https://www.youtube.com/watch?v=enxnIAFbJYI&list=PL9_gOzpFilwriTZiXIAnmU5Dt2atlRYqc
88
Cc k thut dng ch
ng ng khung k thut
Hy sng to theo cch ca ring bn. Border khng bt buc phi c hnh ch nht, cng khng bt buc
phi khp kn.
Cng thng thc ba album ca n ca s MIN, mi ngi s thy kh nng cch iu tuyt vi k thut ny t
nh thit k.
89
Cc k thut dng ch
Nhng iu gi m
Sp xp, c khot khng lm border bin mt, thm ch n cn l gii php cho vic tm khong trng
chn ni dung trong bn thit k ang d ca bn.
90
Cc k thut dng ch
91
Cc k thut dng ch
K thut line
L k thut dng nhng ng k phn tch b cc ca bn thit k.
Chc hn bn ang cm thy 2 tc phm pha trn c cht g rt quen thuc. n gin l v k thu tny
ang c s dng rt rng ri. Chng c mt khp mi ni.
Cng xem cch to line trong Photohsop nh:
https://www.youtube.com/watch?v=lCUFZLXaSr8&index=3&list=PL9_gOzpFilwriTZiXIAnmU5Dt2atlRYqc
92
Cc k thut dng ch
93
Cc k thut dng ch
94
Cc k thut dng ch
K thut nghch o mu
ONE OF A KIND Ca khc tuyt vi ca chng th lnh ti ba G Dragon to hiu ng lan ta mnh m n
gii thi trang.
c hng triu chic o nh trn c bn ra trn ton th gii.
Cc con ch trong ONE OF A KIND trn y c ng dng k thut nghch o mu xy dng nn. Ch
c ch mu trng, chng ta cho nn mu gc, ch c nn mu trng, ta cho ch c mu gc. Khng qu kh
thc hin ng khng?
95
Cc k thut dng ch
Clipping Mask
bao gi bn hnh thy nhng bc hnh tuyt p n sau nhng con ch?
K thut trn c gi l k thut clipping mask c xy dng rt n gin ch sau mt vi bc:
https://www.youtube.com/watch?v=QnCSh3aFEec&index=2&list=PL9_gOzpFilwriTZiXIAnmU5Dt2atlRYqc
96
Cc k thut dng ch
97
Cc k thut dng ch
Mt bi ton th v
Vy liu c cch no xy dng c tc phm ny khng?
Gi nh cho bn, mi th vn ch quay quanh clipping mask nh. Hy lin h vi colorME bit cu tr li
cho bi ton ny.
http://www.Facebook.com/colorME.hanoi
98
Cc k thut dng ch
S ha trn
Thm mt bi tp nh na bn luyn tp.
Hy th dng nhng cng c c xy dng tc phm vi ch Spring n hin nh trn bn nh.
99
Cc k thut dng ch
nh la th gic
Ti thi im bn pht hin ra k thut ca bi tp trc. Bn s ngay lp tc thy rng sn phm trn y
khng c g l qu kh xy dng.
Ch mt t k thut thi ng khng?
100
Mt s ch
Tuyt i khng bp mo ch
Ti k ln nht i vi designer l bp mo ch.
Cc typographer dy cng xy dng nn nhng typeface hon ho cho bn. ng lm cng sc ca h
sng b bng cch bp mo nhng con ch, bn nh.
101
Mt s ch
Khng c chnh ph
Hy phn b to nh ca tng con ch mt cch ph hp bn nh.
nhng phn ni dung c thm khng gian c th th c.
102
Mt s ch
Lu v tng phn
Hy lun m bo l ngi xem c th c c tng k t m bn vit ra.
Chng ta c rt nhiu kin thc v mu sc ri ng khng?
103
Mt s ch
104
Mt s ch
Khng chu cn l ch
Vic ny s ch tiu tn 1 t thi gian ban u nhng hiu qu li rt cao.
ng bnh li chin thng m khng chu cn l bn nh.
105
Tng kt chng 4
Cho mng bn n vi th gii ca designers
Nu bn vn kin tr c n y, ti tin rng bn c y kin thc tr thnh mt designer.
Nhng ng ch quan nh, tt c mi th ch l bc khi ng thi, gi hy xem xem chng ta c th lm
c g no.
Trc , cng dnh 1 t thi gian xem cc tc phm m hc vin colorME lm c sau 4 bui hc nh.
106
107
108
CHNG 5
Mt s hiu ng
C bn
Tm dng vi nhng kin thc kh nhn v thit k. Cng gh xem
th gii Photoshop cn iu g k diu ang n ch bn.
109
Blur
bao gi bn mun lm m mt bc hnh ton b phn ni dung bn trn c ni r hn.
Bt u chng 5 vi hiu ng blur bn nh
https://www.youtube.com/watch?v=ZZbQrAm_3xQ&list=PL9_gOzpFilwol3lyOj3jH4iDBMzVIPrea
110
Retouch
Bn s bt u mt nim tin vo nhng hnh nh trn mng sau khi t tay mnh chnh sa nhng bc hnh
ny.
Nh bn c th thy, c ngi mu bn phi c nc da p hn hn c ngi mu bn tri.
111
Retouch
Hn th na, bn c th lm ln da c ngi mu tr nn sng la ch sau 1 bc thc hin
112
Retouch
Nu nhn k, bn s thy c gi ny c thm mt line tc mu vi bc hnh bn di.
ng vy, tt c nhng iu ti va k trn u thuc nhm k thut retouch.
Cng bt u nhng bc retouch c bn nht ti y bn nh:
https://www.youtube.com/watch?v=I8qBO1gec_M&index=5&list=PL9_gOzpFilwol3lyOj3jH4iDBMzVIPrea
Nu bn mun tm thm nh luyn tp, hy vo y nh: http://freestockphotos.biz
113
Triangulation
114
Color Overlay
Color Overlay
Chc hn bn cn nh tro lu Ngng ngc i lm ma lm gi nhiu ngy trn mng x hi?
T tay xy dng 1 tc phm vi ch dn sau bn nh. Bn s bc u nm c khi nim v layer effect
https://www.youtube.com/watch?v=vSMWNfR-B7Y&list=PL9_gOzpFilwol3lyOj3jH4iDBMzVIPrea&index=4
115
Color Overlay
Kt hp cc hiu ng
Tp hp cc hiu ng c dng chung cho mt layer, c gi l layer style.
Cp bi trng stroke drop shadow tr v cho chng ta kt qu nh trn. Cng tm hiu thm ti y bn
nh:
https://www.youtube.com/watch?v=d8cJ3WuhoEE&index=2&list=PL9_gOzpFilwol3lyOj3jH4iDBMzVIPrea
116
Tng kt chng 5
Bn ang t thy mnh tt ln?
Tht tuyt v bn c n y. Chng va ri hn l ch li cho bn rt t kin thc, phn ln l k nng.
V c mt b mt ti cha tit l cho bn, tt c nhng kin thc quan trng nht ca cun sch ny c
a ht vo 4 chng u tin.
4 chng sau ca cun sch cho bn thy nhng kin thc quan trng n nhng no v ng dng ra
sao trong thit k.
Cng ly hi bc tip vo chng ng cui bn nh!
117
CHNG 6
Nhn din
Thng hiu
Hiu r v phn loi ton b logo trn th gii. Hay quan trng hn
na, t mnh xy dng c mt logo.
118
119
Logo ch
Loi logo tip theo, bt ngun t vic cch iu tn cng ty/t chc.
Loi logo ny c u im l d c, d phn bit. Tuy nhin, bn s mt rt nhiu thi gian c mt logo
cch iu nh .
120
Logo kt hp
Nhm cn li, l logo bao gm c phn hnh v phn ch.
y l la chn hng u cho nhng cng ty/t chc c tm nhn tt.
Thi gian u, h s a ra logo c c hnh v ch, ti thi im m thng hiu c cng nhn trn th
trng, h s loi ht ton b phn ch. y l iu m Starbucks Coffee lm vi logo ca mnh.
121
122
Logo Ch
123
Logo Ch
124
Logo Ch
Simple
Unique
Identifiable
125
Logo Ch
Durable
Meaningful
Flexible
126
127
128
Logo m thc
L nhm logo nm trong cc hnh a gic u nh tam gic u, hnh vung, lc gic u.
129
130
131
132
133
Brainstorming
And
Sketching
Create it
134
Brand Identity
135
Brand Identity
Logo
Font ch
Slogan
n phm vn phng
ng phc
n phm truyn thng
Hng ha
Qu tng
136
Brand Identity
137
Tng kt chng 6
Tip tc con ng ng dng
Ch cn 2 chng na l chng ta s kt thc cuc hnh trnh ny ri. ng nn, bn nh, v bit u nhng
phn bn ang tm kim l nhng phn nm nhng trang cui ca cun sch.
iu kin tin quyt tr thnh designer gii l kin tr v chm ch luyn tp, Khng c cho php bn
thn ngng c gng hc hi v sng to.
Cng n vi 1 phn th v hn chng 7 bn nh.
138
CHNG 7
ng dng thit k
CV
rt nhiu ln ti hi mi ngi trong lp hc colorME, rng, c
bao nhiu ngi , ang v s cn 1 ci CV p? Cha ln no s
ngi a tay ln l di 80%.
139
CV Grid&List
140
CV Grid&List
141
CV Theme Color
Chn mu ch o cho CV
Ci ny chng ta i qua ri, ng khng?
ng lm CV ca bn tr nn le lot bi qu nhiu mu sc nh.
Hy ch chn 1 v ch 1 mu duy nht cho CV ca mnh nu bn cha chuyn nghip trong thit k. Li
khuyn cho bn l hy dng cc tng mu lnh nh lc-lam-chm tng tin tng t nh tuyn dng
n bn.
142
CV Header
u mc
Nh mi ngi thng ni, np CV l qu trnh bn bn thn cho nh tuyn dng.
Vy nn hy gy n tng tht tt vi nh tuyn dng bng mt u mc xc tch bn nh.
Nhng thng tin thng c trong u mc l: Tn, gii thiu ngn v bn thn, v tr tuyn dng, thng tin c
nhn, nh i din
143
CV - Avatar
nh i din
Nghin cu ch ra rng, nhng CV c nh i din i km chim u th ln hn hn so vi CV khng c.
Nh tuyn dng s n tng vi bn tt hn, c thin cm hn v cm thy bn t tin hn cc ng vin khc.
Hc cch to ra nhiu mu avt ti y bn nh:
https://www.youtube.com/watch?v=7TCTIv45Dxg&list=PL9_gOzpFilwrVmId0RklZDJG8sBDgrYid
144
CV Titles
ng b ha tiu
CV, thc ra l mt lot thng tin v mt c th c chia theo nhm.
ng bt ngi khc phi nh I, II, III, ri 1,2,3 sau li a,b,c bn nh.
Hy to ra 1 tiu n gin v ng b cho ton b CV, vic tip theo bn cn lm l a ni dung vo
thi.
145
CV Charts
Cc mu biu nn c
Con ngi chng ta c 2 bn cu no. Mt bn chuyn x l thng tin, bn cn li chuyn x l hnh nh.
y vy m, phn ln CV ca mi ngi ch chi cht ton ch. Hy cng hc mt s phng php to biu
ty bin trong Photoshop nh:
https://www.youtube.com/watch?v=1RgAHf8HeCU&index=4&list=PL9_gOzpFilwrVmId0RklZDJG8sBDgrYid
146
CV Timeline
147
CV Icons
H thng Icon
ng qun a vo h thng icon lm CV ca bn trng th v hn nh.
Bn c th tm thm icon ti: http://icons8.com
148
CHNG 8
Cc xu hng
Thit k
Chng ta cng nhau i trn mt chng ng rt di. Ch cn
mt chng cui cng trong cun sch ny. Hy cm nhn mi th
tht t nhin, ng nhng do d hay nghi vn quy ri bn.
ng h ti nh, bn hin!
149
Flat Design
Cuc chin ln
Nm 2012, ton b designer trn th gii chia thnh 2 phe, mt phe ng h v mt phe chng i thit k
phng. Cuc chin n tn by gi vn cha chm dt, v u th ang thuc v nhm thit k phng. Vy
thit k phng l g?
Thit k phng l t tng thit k ti gin ha tt c mi th, t mu sc, chi tit n hiu ng. c loi b
hon ton. Vy t u m c xu hng thit k ny?
150
Flat Design
ng ln Microsoft
2012 chnh l nm m Windows 8 ra i, nh du mt phong cch giao din hon ton khc vi mn hnh
start nh th ny.
Flat Design, ban u cn c gi l Metro Design. Gii thch cho ci tn ny, k s trng ca Windows 8 cho
bit, phong cch m Metro Design hng n l phong cch thit k bin bo ga tu in Metro: n gin,
gn gng, xc tch.
Khi m cuc sng ca con ngi ngy cng tr nn nhanh hn, nhng t tng trn l t tng c ng h.
T kha Metro mt thi gian sau b thu hi v l do bn quyn.
151
Flat Design
Mu c trng l mu pastel
B hiu ng bng
B hiu ng gradient
Dng font ch khng chn
Dng hnh khi c bn
152
Flat Design
153
Flat Design
Bng quay tr li
Google em bng tr li vi thit k phng, mt cch rt ti gin.
Hn bn tng nhn thy nhng icon vi bng di 45 nh th ny u . V by gi bn c cu
tr li cho mnh.
T tay xy dng 1 con ny xem sao bn nh:
https://www.youtube.com/watch?v=p6m49ZpzCcU&list=PL9_gOzpFilwrYwBD6Cq9s4QzDNLwAs3jC
154
Flat Design
155
Flat Design
iOS vi gradient
Apple gia nhp cuc chi thit k phng vi iOS 7.
Nu Google em bng tr li cuc chi th Apple chnh l ngi hng gi hiu ng Gradient li.
Vn c cng ng chp nhn l thit k phng, tuy nhin Gradient theo phng cch Apple phi lun gi
nhng mu sc ti sng v khng b lm dng to chiu su cho tc phm.
156
157
Tng kt chng 8
Tt c ch mi bt u
Xin chc mng v cm n bn rt nhiu v hon thnh cun sch ny.
Cun sch ny cha ng rt nhiu tm huyt v suy ngh ca ti. Nhng n cha phi l tt c, ti chun
b phn 2 ca cun sch ny cho bn ri, n c trong thi gian ti nh.
158
PH LC 1
Danh sch phm tt
Trong Photoshop
i lc, bn s qun mt mt vi phm tt, danh sch sau s gip
bn phn no trong qu trnh n li kin thc.
159
160
161
162
PH LC 2
V lp hc
colorME
Thi im ti vit cun sch ny l lc colorME ch va mi 5 thng
tui. Ti mun chia s cng bn mt tc phm do bn Qunh Anh
mt thnh vin ca gia nh colorME xy dng.
163
Tng kt chng 8
164
165
166
PH LC 3
Cu chuyn khi nghip
Ca colorME
5 ngy sau ngy sinh nht ca ti l ngy sinh nht ca colorME.
167
PH LC 4
Chng ti
Cn bn
Gia nh colorME hiu rng, colorME s khng th c nh ngy
hm nay nu khng nhn c s gip sc ca cng ng.
168
PH LC 5
Nh mt li tri n
n cc hc vin
Vi hn 500 hc vin ch trong 5 thng ngn ngi. colorME vn
cha ht bng hong v nhng g xy ra.
Nh mt gic m di v p, colorME ang tin tng bc vng
chc trn con ng tr thnh trng hc thit k cho mi ngi.
D ni cu ny rt nhiu ln, nhng vn cm n mi ngi mt
ln na, v tt c. i gia nh colorME.
Hn gp li cc colorMEans trong mt ngy gn y nht.
169
LI KT
Ti cn nhiu iu na
Mun chia s vi mi ngi
Nhng ti thi im hin ti, tt c nhng g ti c th lm lm xy
dng cun ebook ny.
170