Professional Documents
Culture Documents
Tự thiết kế Nội dung hình ảnh cho.compressed PDF
Tự thiết kế Nội dung hình ảnh cho.compressed PDF
Tự thiết kế Nội dung hình ảnh cho.compressed PDF
NH GI
Chc chn s c nhiu ngi ng nh ti y l 1 cun sch tt, hu dng cao, c
nhiu kin thc cho ngi xem, s tng doanh s khi p dng vo marketing, truyn
thng.
Mr Mc Quc Anh Vin ph Vin nghin cu SME, PCT kim TTK
Hip hi cc doanh nghip va v nh thnh ph H Ni (HASMEA)
Nu bn khng mun ngi nghe ng gt, lm vic ring, hay b v sm; nu bn v
s phi thuyt trnh v truyn ti mt ni dung no , d bn lm truyn thng, ho,
ging vin, dng web, hay ho s, kin trc s, y l mt cm nang bn cn. n gin
bi v n gip bn truyn ti ni dung d dng hn, thuyt phc hn, hiu qu hn. Cun
sch chia s nhng ni dung c tnh ng dng cao, nhng a ch hu ch, d bn lm
thit k chuyn nghip hay khng chuyn.
Tin s Gio dc Trng Anh Tun, i hc Misouri, Hoa K
Qu tuyt v thng minh.
MC LC
Nhng tt c cc kh khn trn khng ngn c mong mun ang ngy cng
mnh m trong bn: l c c cc ni dung hnh nh (visual content)
gip cc chng trnh truyn thng, tip th v bn hng ca mnh bng n.
Bn tin l mnh v i ng ca mnh hon ton nng lc lm nhng vic
ny. Vn bn khng bit phi bt u t u
5
7
9
11
15
26
28
41
adamo-studio.com
1
TI SAO TRUYN THNG V TIP TH BNG HNH NH
L YU T SNG CN
CA CC DOANH NGHIP V T CHC NGY NAY
adamo-studio.com
NI DUNG HNH NH
c xem nhiu hn
94%
Thng tin gi n b no
Ngi ta nh c g?
nhng g c
nhng g nghe
2
NI DUNG HNH NH L G?
nh chp
nh ho
Motion Graphic
Infographic
Thuyt trnh
Video
adamo-studio.com
3
NHNG YU T THNH CNG
Hp dn:
D hiu:
D nh:
adamo-studio.com
4
NI DUNG HNH NH NM U
TRONG TON B QUY TRNH TRUYN THNG, TIP TH
BN
y l ci
ebook ny gii quyt
Sng to 1 ni dung
thc s cun ht
Chn nh dng truyn ti
ph hp
Tp trung thit k ni dung
tht hiu qu
Qung b mnh m
qua nhiu knh khc nhau
THNH CNG
adamo-studio.com
10
5
TI SAO NGI LM TRUYN THNG TIP TH
PHI RT KH S, VT V MI
TO RA C NI DUNG HNH NH RA HN
Trc ht, ni dung hnh nh ngy nay khng n thun ch l trnh din hnh
nh chp, nh ho v sn phm, m n ang hng v phong cch sng,
gi tr v khao kht ca ngi xem - c bit nu mun chia s cc ni dung
trn cc trang mng x hi nh Facebook, Instagram. Hnh nh cn phi gim
bt yu t show hng m cn hn hi th cuc sng: n cn to ra phn ng
cm xc t ngi xem, n cn nh ng con tim ngi, gip h khc, khin
h ci hoc lm h thm yu cuc sng.
Khng tin ? Hy th share mt tm nh stock trn Facebook v bn s thy
chng my ngi bun comment hay like. Ngc li, khi bn ng mt tm
hnh v i phc v khch hng ang mit mi lm vic trn bi c vo mt
bui tra nng bc cui tun, chc chn l s c khng t phn hi. Nhng
ngi lm truyn thng tip th trn chin tuyn mng x hi (social media)
nn chia s nhng khonh khc nh vy. Nhng li cn mt s tht khc l:
nhng ngi ny thng li khng phi l nhip nh gia hoc chuyn gia thit
k.
adamo-studio.com
12
Khng phi cng ty no cng c sn nhip nh gia bit quay v chp nh, hoc
chuyn gia thit k, c c hai th cng khng nhiu. C th cng ty hoc t
chc ca bn khng kinh ph thu nhng ngi ny, hoc cc dch v
chuyn nghip cho vic ny.
Nhng k c trng hp doanh nghip hoc t chc c ngun lc ny, th
cc phng ban, cc d n cng ang u tranh, ginh git c s dng
h, nht l khi nhng chuyn gia, hoc dch v thu ngoi ny ang c s
dng trong nhng cng vic c v quan trng hn hn vic to ni dung hnh
nh cho mng x hi. M trn thc t l cc k him nh qun l no thu
ngi, hoc thu dch v phc v lm cc ni dung ny.
Do , vic to ra ni dung hnh nh lan to ra khp v s mng x hi
gi c t ln vai ca nhng thnh vin ca i truyn thng, tip th - vn
chng phi l ngi c chuyn mn thit k.
adamo-studio.com
13
adamo-studio.com
14
6
4 DNG NI DUNG HNH NH LAN TO
MNH NHT TRN BLOG V CC MNG X HI
2016
n 2016 s tng ti
1,5 t ltxem
1,2 t
12 ln
Video tng c hi
ng top
Google ln gp
qung co
rich media
27,4 ln
qung co
banner
50 ln
=
96%
67%
HNG DN, TUTOR
64%
DCH V, SN PHM
64%
GII TR, HI HC
adamo-studio.com
16
Ch :
HD 981 xm phm
tri php
Bin ng
adamo-studio.com
17
adamo-studio.com
18
2
HNH NH (NHIP NH V HO)
nh chp
nh ho my tnh
adamo-studio.com
19
3
INFOGRAPHIC
Trong 5 nm qua
tm kim infographic
trn Google tng
25 ln
INFOGRAPHIC L G?
+
D liu phc tp
+
Ti liu
Kin thc
Infographic
Infographic
d c chia s hn
40 ln
So vi bi vit
km nh thng thng
ti
250%
adamo-studio.com
20
3
THNH PHN IN HNH
INFOGRAPHIC
Hiu bit c bn
Mt infographic tuyt vi s dn dt ngi xem
vo mt hnh trnh bng hnh nh, v dc
ng i s k cho h nghe mt cu chuyn.
Nhng Infographic thnh cng c kh nng thu
ht s ch ca ngi xem ch trong vi giy
u bng nhng tiu mnh m v hnh nh
cun ht, ri sau quyn r h o su
ton b thng tin.
Cn nu bn mun to infographic cho ring
mnh, hy m bo chn ch c i
tng ngi xem nh gi cao. Hy ti mu
infographic min ph ca chng ti v m bo
l tu bin sao cho sn phm tun th cc b
quyt nu ti cc chng tip theo.
So snh
kch c
Biu
phn nhm
#1
S liu
Bn &
a im
th
Biu
So snh
kiu dng
Quy trnh
Danh sch
1
Quy trnh
2
Mu sc
Thit k tt s thu ht ngay lp
tc nh mt ca ngi xem
tim nng bng mu sc.
3
D liu
D liu cn c trnh by r
rng v chnh xc.
adamo-studio.com
21
S DNG TT NHT
INFOGRAPHIC
Bo co
Truyn thng ni b
Thuyt trnh
adamo-studio.com
22
4
THUYT TRNH
30.000.000 VS
Thuyt trnh PowerPoint
c thc hin mi ngy
Gii php
90%
X
X
B nguyn c on vn vo slide
X
X
Mu sc lo lot, kh m xem
Ch qu nh, kh m c c
23
4
THUYT TRNH
p dng tt nht khi no
Trnh by nghin cu
Kt qu kinh doanh
& bo co kt qu
Bo co nh k
Th hin t tng
lnh o
Hp lnh o,
qun l
adamo-studio.com
24
adamo-studio.com
25
7
NHNG NGUYN TC THIT K C BN
1 MU SC
6 MINH HO
2 TYPOGRAPHY
7 ICON
Tt c font ch cn c trnh by r
rng v ph hp vi phong cch truyn
thng.
3 LAYOUT/MAKET
8 D LIU
4 HP THOI (CALLOUT)
9 T L
nh mt c th b nh la, do , m
bo l cc thnh phn c chnh kch c
ph hp ngi c d tip thu thng
tin.
5 KHNG GIAN
Gi khng gian trng (negative) vi t l
ng k. Qu nhiu thng tin trn 1
layout s khin thng ip ln xn v ri
rc.
10 N GIN
Trnh cc thit k khng cn thit, gm
cc bng biu 3D, minh ho hoa l hoc
cc hnh nh khng lin quan.
adamo-studio.com
27
8
10 B QUYT THIT K THC DNG
T THIT K C NI DUNG HNH NH CHUYN NGHIP
1
HIU C MC TIU TO NI DUNG
Khng th no bit c phi thit k ra sao khi khng bit mc tiu l g.
iu u tin cho bt c nh to ni dung no - t copywriter mi vo ngh
ti nh thit k chuyn nghip - cn phi lm m bo c c sn phm
thnh cng l xc nh mc tiu cn phi t c ca ni dung ny. To ni
dung - v c th hn l thit k ni dung - trc ht v trn ht l mt cng
vic gii quyt vn . Nh thit k xc nh mt khong trng, hoc nhu
cu, ng no xem lm cch no lp y khong trng ny, to ra ni
dung tho mn nhu cu v sau chia s vi th gii ni dung ny v
nhng ngi c nhu cu s dng.
Do , hy t duy nh mt nh thit k, xc nh v hiu vn hoc nhu
cu ct li. Dnh thi gian xem xt cn thn nhu cu, t ra nhng cu
hi ph hp, sp xp cc nhu cu v xc nh thc o thnh cng, bn s
nng cao ng k c hi to ra nhng ni dung khin ngi xem phi m
mn.
Bit thm nhiu thng tin khng gy tn thng cho ai, v sau ny bn s
phi t cm n mnh v thu thp y thng tin cho thit k ca mnh.
Trn thc t, hon ton d hiu nu cui cng, bn thay th bn thit k u
tin bng mt phin bn cui xut sc hn hn, tho mn c cc mc tiu
t ra.
adamo-studio.com
29
2
XY DNG H THNG PHN CP
Mt khi hiu c mnh cn phi t c iu g, v ng no ra
c vi gii php, bn c th xem xt phi lm sao ghp ni tt c
nhng th ny vi nhau. Hiu c tm quan trng ca cc ni dung - c
bn thn ni dung ln quan h gia cc nhm ni dung khng ch gip xy
dng khung (framework) t bn bt u a ra cc quyt nh thit
k, m cn m bo ngi xem c th hiu c cc thng tin bn a ra v y chnh l ci m thit k gii cn phi t c.
Bn c th t c iu ny bng cc xy dng mt h thng th bc
thng tin - c ni dung ch v ni dung hnh - xem ci no quan trng hn,
ci no t quan trng, quan h ca chng vi nhau th no t sp xp
theo th t u tin.
Hy bt u qu trnh ny bng cch nhn vo ni dung tm v m, xem xt
tt c cc ni dung cn c, cc ng link v tt c cc yu t ch vit hoc
hnh nh cn phi c trong sn phm cui. nh gi, so snh tng quan
gia chng theo tm quan trng v kh nng chng gip bn t c mc
tiu. Sau , s dng h thng th bc ny gip bn c c thit k n
gin, quyt r v hiu qu hn.
adamo-studio.com
30
3
TN TRNG S N GIN
Nhiu khi tt hn l khng c g, nhng t li tt hn nhiu. Chc
hn bn nghe cu ny v s ln: "keep it simple, stupid." D
l cu ca ming hay khng, iu ny hon ton ng trong lnh
vc thit k. Tht khng may l c mt s hiu lm t hi rng
thit k tt l bng by, ho nhong, hoa m v bt mt. ng
tin iu ny trong vi giy.
Thit k khng phi l ngh thut. ng vy, bn hon ton c
th nh gi v tn trng n theo cch bn i x vi cc tc
phm ngh thut (thm ch l hn). Nhng cui cng, thit k
ng mt vai tr hon ton khc bit. Thay v tp trung ch yu
vo hnh dng v th hin (vn l ch o ca ngh thut), chc
nng chnh ca thit k li nm chiu ngc li - h tr chc
nng.
Khi a ra cc quyt nh thit k, hy lun nh trong u rng
mc tiu ca thit k l h tr chc nng hoc mc ch ca ni
dung. Vi dn thit k khng chuyn, cc tt nht m bo
vic ny ch n gin l ng c lm qu nhiu. Ch ng trnh
a vo thit k cc thnh phn khng cn thit. Cn lun tp
trung vo ni dung, ch khng phi thit k.
adamo-studio.com
31
4
R RNG
Cho ti thi im ny, c th bn thy mt im chung
trong nhng b quyt, l: n gin v r rng l cha kho
thnh cng - bt k bn mun to hnh nh cho Facebook post
hay l ton b nh ca mt ebook. Tuy vy, mt im hay b b
qua khi ngh v thit k l bn thn phn ch vit c th gy
nhiu cho thit k tng th. Nu khng ch cho phn ch vit
ny v c th b qua c th c g phi cho vo trong thit k?
trnh ri rm cho ngi c v ngi xem, ngi ta thng
trnh ch mu sng trn nn sng hoc ch ti ln nn ti.
Tuy nhin, gii php y khng phi l t ch u m l s
lng ch l bao nhiu.
Cc nh tip th v to ni dung yu cc cu ch ca mnh, bi
mt l do xc ng: chng l cng c giao tip, truyn thng ca
h. Nhng khi ng ti vic thit k ni dung hon ho, th y
li l iu t hi. Hy dnh cht thi gian cn nhc c th xo
i nhng t no.
Vit ngn gn v sc tch s gim nhiu cho hnh nh v m
bo rng ch cn li nhng phn quan trng nht, ti cn thit
nht. Cui cng, hy ngh v Lut th 3 v Kh nng s dng
ca Steve Krug: loi b 1 na s ch trong mi trang, sau loi
tip 1 na ca s ch cn li.
adamo-studio.com
32
5
TO KHNG GIAN TRNG
Hy cho cc yu t ho v ch vit trong thit k ca bn c
mt cht khng gian ring. D c phi l dn ho hay khng,
bn c th d dng xc nh khi no khng gian trng khng hp
l.
Bng vic to thm khng gian th, bn m bo cho vic
thit k ca mnh sch s v r rng. Quan trng hn, bn
tng tc ng ca nhng thng tin quan trng bc nht, v d
nh tiu hoc thng ip chnh.
Hy lm theo cc bc di y m bo thit k ca bn c
khng gian cn thit. Trc ht, sp xp thng tin theo th t
u tin nh ra trc . Sau , th xem khong khng gia
cc thnh phn ny l bao nhiu cho ph hp. Quan trng nht,
m bo l to khong trng trc sau nh mt, u n. L
(margin) nn c chiu rng v chiu cao bng nhau, khong
trng gia 2 dng ch nn ging nhau cho cc nh dng ch
nh nhau.
Cui cng, nu khi lng ch ca ebook hoc thuyt trnh i
hi phi gim khong cch ti mc mi th ri c ln, tt nht l
bt i vi thng tin, v thm ch b i ton b. Ly thuyt trnh
PowerPoint l mt v d, chng th c 1 thuyt trnh 50 slide,
mi slide cha mt thng tin quan trng, cn hn c 1 thuyt
trnh c 5 slide, mi slide cha ti 10 thng tin quan trng nh
nhau.
adamo-studio.com
33
6
B TR CC THNH PHN
Tng t nh khong trng (space), ging hng cng l mt
khi nim c mi ngi hiu v (sau khi nh) him khi mc
li. Khi dn hnh nh v thng tin, hy m bo tt c cc thnh
phn c t vo v tr cn i vi nhau. Hy lun cc phn
ging nhau thng hng dc hoc ngang hoc cho. Mc d thnh
thong cng c ngoi l, nhng tt hn l bn c p dng quy
tc ny cho ti khi tr thnh nh thit k chuyn nghip.
Sp xp, hay ging hng s m bo thit k ca bn r rng,
khng to ra nhng cng thng hay im tp trung khng cn
thit. S c nhng lc nh thit k chuyn nghip ch ng to
s ph cch bng cch a mt thnh phn lch ra khi hng
vi mc ch thu ht s ch , ku gi hnh ng i vi thnh
phn khc bit . Cn i vi ngi thit k khng chuyn, cn
phi cng li iu ny, hoc hn ch ti a nu c th. Nhng
nh thit k khng chuyn no tp trung vo vic sp hng cho
cc phn trong thit k s nng cao rt ln cho cht lng ni
dung ca mnh.
Ngc li, trong slide ny, chng thnh phn no cng nm trn 1 ng
thng. nh tin s John Media trn th st vo l tri hn hn nh di.
th di v khi text trn th c l hi c chung l phi, nhng
khong cch vi mp trn v mp di th khng c h hng g vi nhau.
adamo-studio.com
34
7
PHI MU HO HP
Mt trong nhng iu u tin chng ta hc khi cn b chnh l
mu ca cu vng. Bn c th ngh rng mnh dnh c i
mnh sng trong mt th gii y mu sc th vic hiu v n rt
d dng, k c i vi ngi khng chuyn. Hon ton sai lm.
Xu hng c lm tht nhiu, cho tht nhiu mu vo thit k
thu ht ngi xem s ch khin ngi xem nhc mt.
trnh iu ny, iu u tin cn xem xt l dng cm xc
no m ni dung cn th hin. Nu nhm ti mc ch th hin
tng mu nhn bn hoc nng ng, bn nn chn gam mu m
nh da cam, vng hoc . Cn nu ni dung mang phong thi
nh c, chuyn nghip th hy chn tng mu lnh hn nh
tm, xanh da tri, hoc xanh l cy. Hy chn mu no ph hp
vi tng cm xc m ni dung cn th hin. Cng t y, s
dng thi qu c mu nng ln mu lnh s to ra s ri rm,
kh hiu.
Cui cng, ng qun rng bt c hnh nh no bn s dng
cng cha mu sc ring ca n, v bn phi cn nhc thn
trng khi s dng cc hnh nh ny.
adamo-studio.com
35
7
PHI MU HO HP
Danh sch ngha Mu sc bn cnh gip bn d dng hn
trong vic a ra quyt nh chn mu cho ph hp vi sc thi
ni dung cn th hin
TCH CC
R rng, m p, vui v, l tng, hnh
phc.
THN THIN
Cho n, t tin, tham vng, cm hng.
PHN KHCH
Tr trung, nng ng, vui thch, qu khch.
SNG TO
Tng tng, thng minh, cao qu, giu
c.
TIN CY
ng tin, sc mnh, bn b.
HO BNH
Pht trin, sc kho, ti mi, mi trng.
CN BNG
Trung lp, bnh tnh, trng thnh, n nh,
an ton.
adamo-studio.com
36
8
NG LM DNG DROP SHADOWS
Hng dn T thit k ny s khng hon chnh nu khng
cp mt hiu ng b tai ting do s dng thi qu - drop
shadows, vn c mc ch l tng chiu su v s khc bit cho
ch vit v hnh nh. Nhiu ngi tin rng Drop shadows lm
cho thit k p hn, hiu qu hn v do dng n v ti v.
Nhng h qun mt iu rng mi hiu ng sinh ra ch phc v
cho mt mc ch nht nh no , v ch mc ch thi.
Mc ch ca Drop Shadows l to s khc bit cho hnh nh
hoc thng tin ch vit. Thc s n lm c iu ny mt cch
tuyt vi. V phc v mc ch ny, bn ch nn dng Drop
Shadows vi nhng thnh phn nht nh. Hy nh li B quyt
Xy dng h thng th bc. Nu thnh phn no cng dng
Drop shadows th ngi xem khng th hiu c ci no quan
trng hn ci no. N hon ton phn tc dng nu c p
dng theo cch ny. Tuy nhin, khi bn dng cho 1 hnh nh
hoc ch vit (t/cm t) nht nh, h s hiu r rng u l
ni dung thc s quan trng.
Mt trong nhng tri nghim thit k t hi nht ca tc gi
chnh l dng PowerPoint ci trn MacBook, ni m mi hnh
Shape u mc nh c sn hiu ng Drop Shadows khin cho
cc slide trng rt kh chu. Khng bit y c phi l s ngu
nhin ca Microsoft.
adamo-studio.com
37
9
DUY TR S THNG NHT
Ni n gin, nu c t 2 thnh phn trong thit k c cng
chc nng, hy m bo l chng trng tng t nhau.
mc rt cao, tng mu, thm m v thng ip ca mt
thng hiu phi ng b mi kha cnh.
cp rng hn, tt c hnh nh v yu t ch vit trong 1
cun sch, thuyt trnh m c chc nng nh nhau nn c ngoi
hnh ging nhau v to cm gic nh nhau.
Khi phi thit k ni dung c th no , thng nht y l s
dng cng 1 font, cng kch c cho ch vit (text). Hy m bo
l tt c nhng mc tng tc nh ng link hoc nt bm
hnh ng c chung mu sc, kiu dng v kch thc.
Nhng nu lm dng th n cng s c nh hng tiu cc
khng nh. Khi bn qu tp trung v ch trng vo vic sp xp
cc thnh phn, th kh nng rt c l mi th c v "va vn"
trong thit k, ch cha chc l mt thit k tt.
adamo-studio.com
38
10
NG B HNH NH V NGN T
B quyt cui cng ca vic t thit k chnh l s ho hp gia
phn ch v phn hnh. Vi ngi thit k khng chuyn, vit ni
dung thng c ch trng. B sung vi yu t ho ch ch
l phn ph, nhm gim s nhm chn, bun t ca ng ch
v trang vit.
Tuy nhin, ni dung nh nht l c s kt hp ho hp gia
ho v ch vit nhm k mt cu chuyn hay trnh by mt
thng tin theo cch r rng, cun ht, v thnh cng hn hn so
vi ni dung ch dng ch vit hoc ch dng hnh nh.
Bn c th kt hp tt ch vit v hnh nh nu c k hoch t
trc. Bt k l vit 1 cun ebook, ln mt danh sch la chn,
email hay bi ng Facebook th khi to ni dung, bn cn hnh
dung mnh s th hin n bng hnh nh g v nh th no. Vic
ny khng c ngha l phi tnh xem cn m hay in nghing,
chn font th hin ra sao, to hay nh l va. Thc cht l bn
cn tnh ton nu b i c khi ch ny th s dng hnh nh no
thay th cho ph hp, trong khi vn th hin c ni dung
cn truyn t, khin chng d hiu, d nh, v cun ht hn.
adamo-studio.com
39
adamo-studio.com
40
9
11 CNG C MIN PH & D S DNG
TO CC NI DUNG HNH NH
adamo-studio.com
42
1
DESIGNSEEDS
http://design-seeds.com/
adamo-studio.com
43
2
PALETTON
http://paletton.com
adamo-studio.com
44
3
KULER
kuler.adobe.com
adamo-studio.com
45
4
PIXLR
https://pixlr.com/
Bin tp nh ging nh Photoshop. im khc
bit l n kh d s dng, tp trung vo cc tnh
nng ph bin.
Nhng c bit nht l n c th c s dng
ngay trn trnh duyt web m khng cn phi ng
k, hoc ci t dng ng dng trn in thoi
thng minh, hoc ci t trn my tnh.
Cn min ph l ng nhin, bi l l do khin
PIXLR c a vo danh sch nay.
adamo-studio.com
46
5
JING V SKITCH
techsmith.com/jing.html
evernote.com/skitch/
adamo-studio.com
47
6
INFOGRAPHIC TEMPLATE
adamo-studio.com
49
7
WORDLE
http://www.wordle.net/
adamo-studio.com
50
8
PREZI
http://prezi.com/
adamo-studio.com
51
9
ICOMOON
https://icomoon.io
adamo-studio.com
52
10
ICONARCHIVE
www.iconarchive.com
adamo-studio.com
52
11
VECTEEZY
www.vecteezy.com/
adamo-studio.com
53
adamo-studio.com
54