Convert PSD To HTML5

Convert PSD to HTML5&CSS3
Ti liu tham kho

Forum: http://nhatnghe.com/forum --> ha
Facebook: http://facebook.com/dohoa247
Video: youtube.com/lopdohoa
Mail: tulamvan@gmail.com
Mobi: 090 7 799 627

TRUNG TM O TO MNG MY TNH NHT NGH
I TC O TO CA MICROSOFT TI VIT NAM
105 B Huyn Thanh Quan, Q3, TP. HCM
www.nhatnghe.com Tel: 3.9322.735 0913.735.906 Fax: 3.9322.734
Convert PSD to HTML5/CSS3

Mt s th HTML5
Chn nhc mp3 thay cho Flash

Chn video mp4 khng cn dng Flash

Kim tra thuc tnh form bng html5 khng dung Javascript
Kim tra email

2
Kim tra s nhp

Tel: 3.9322.735 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com

Phin Bn Th Nghim Lu Hnh Ni B

Kim tra URL

Tham kho thm: http://w3schools.com/html5/

Lm vic vi CSS3
nh ngha cc th HTML5 l cc block.
header, footer, section, aside, nav, article {
display: block;
}
Style ca Introduction

#intro {
position: relative;
margin-top: 66px;
padding: 44px;
background: #467612 url("images/intro_background.png") repeat-x;

/* Them thuoc tinh (TT) trinh duyet vao TT background-size */
-webkit-background-size: 100%; /* Safari browsers */
-o-background-size: 100%; /* Opera browsers */
3



/* Them thuoc tinh (TT) trinh duyet vao TT border-radius */
-moz-border-radius: 22px; /* Firefox browsers */
-webkit-border-radius: 22px; /* Safari browsers */
}
Ti id intro ny, chng ta nhn thy c 2 thuc tnh mi l: background-size v
boder-radius.

Background-size: c s dng thit lp kch c ca hnh nn so vi box
( y l intro), n s gin n theo rng ca box.

Boder-radius: c s dng nh ngha bn knh ng trn ca gc bo
khung vin ca id intro, thit lp cc thng s cho thuc tnh ny, c th lm
cho gc bo ng vin ca cc bn tr nn trn tra hn.

y u l cc thuc tnh CSS3. (-moz, -webkit) l thng bo cho trnh
duyt tng ng vi n hiu c. V cc thuc tnh CSS 3 hin nay cn rt t
trnh duyt h tr, nn hu ht cc thuc tnh CSS 3 u phi thm vo cc
thuc tnh trnh duyt vo trc n.

Style ca Content v Sidebar

#content {
display: table;
}

#mainContent {
display: table-cell;
width: 620px;
padding-right: 22px;
}
4



aside {
display: table-cell;
width: 300px;
}
Khu vc mainContent v sidebar theo thit k l s nm cnh nhau. Thng thng theo truyn
thng chng
ta s s dng thuc tnh float nh ngha n nm trn cng 1
dng, nhng trong CSS3, chng ta s s dng table.

Trong CSS 3, thuc tnh display c gi tr table dng h tr x l vic chia
bng, ct, v dng, c th chia dng v ct bng CSS v d nh hnh hn
cho nhng bn khng quen vi float . y s thit lp display:table v
display:table-cell c ngha l nh ngha#content l 1 bng, #mainContent v
aside s tng ng l 1 v nm trn cng 1 dng, thuc bng #content.

column-count: s dng cn chia.
column-gap: khong cch gia 2 ct.

HTML
<div>
<p>Lorem ipsum dolor sit amet...</p>
<p>Pellentesque ut sapien arcu...</p>
<p>Vivamus vitae nulla dolor...</p>
...
</div>
CSS
5
.blogPost div {



6
/* Them thuoc tinh (TT) trinh duyet vao TT Column-count */
-moz-column-count: 2;
-webkit-column-count: 2;
/* Them thuoc tinh (TT) trinh duyet vao TT Column-gap */
-moz-column-gap: 22px;
-webkit-column-gap: 22px;
}

Thc hnh HTML5 & CSS3
Bo gc hnh trn web vi CSS3
Trong thit k web, c bit l cc trang bn hng vic trnh by sn phm n tng
s thu ht khch hng chn mua sn phm. Cc bn c th lm ni bt sn phm
bng nhiu cch khc nhau trong vic trnh by hnh nh c bo gc rt hay c
chn la, nu bn thm hiu ng bng th cng n tng hn.
C 2 cch bo gc cho nh trn web:
Cch 1: S dng photoshop thit k hnh, cch ny hay ch ph hp cho mi
trnh duyt v th c s dng ph bin tnh n thi im ti vit bi vit ny
(thng 06/2012). Tuy nhin cch ny s lm mt nhiu thi gian ca bn y.
Cch 2: S dng hon ton bng code CSS3, vi cch ny s tit kim thi gian
cho cc bn hn. Tuy nhin n ch th hin trn cc trnh duyt mi (IE 10.0, firefox,
Chrome,), u ny bn cng ng qu bn tm v cc trnh duyt ang cp nht
lin tc v hon ton min ph. Yn tm s dng nha bn.

Trong bi vit ny ti s minh ha vi cc bn cch trnh by sn phm cho trang
web bn hng (bn hoa ti) vi hnh nh c bo gc v bng rt chuyn
nghip ch vi CSS3.
Bc 1:
Trc khi thc hin bn download source bi thc hnh y, gii nn folder trn
Desktop (hoc bt c u bn mun) ri to site bng dreamweaver, y ti minh
ha bng bng Dreamweaver CS5.5.
Bn double click vo file spmoi.html m ra nh sau:

.com

Tel: 3.9322.735 0913.735.906 Fax: 3.9322.734 www.nhatnghe

y ti trnh by sn cho cc bn mt khung <div class=spmoi> cha tt c
sn phm, v trnh by 1 sn phm vi hnh minh ha, tn sn phm c
class=tensp, gi sn phm c class=giasp, nu xem ch thit k cc bn thy
cc thnh phn cha c nh dng nh sau:

Bc 2:
7
Cng vic tip theo ca bn l copy > Paste thnh nhiu sn phm (6,9, 12,.. ty
bn). ng thi thay i hnh, tn sn phm, gi tng ng. y ti s copy thm
5 sn phm na minh ha.



8
Nu chuyn sang mn hnh thit k th bn on c cc sn phm c trnh
by nh th no ri phi khng, d nhin chng cha c nh dng nn ch l mt
ct t trn xung xem chng ging trang web t no c.

O TO MNG MY TNH NHT NGH
TO CA MICROSOFT TI VIT NAM
anh Quan, Q3, TP. HCM
0913.735.906 Fax: 3.9322.734 www.nhatnghe.com

TRUNG TM
I TC O
105 B Huyn Th
Tel: 3.9322.735

Bc 3:
By gi l lc cc bn nh dng cho cc sn phm ca mnh bng CSS, cc bn
phi ch n tn ca tng i tng nha:
- div cha tt c sn phm: class=spmoi
- Hnh sn phm: class=sp
- Tn sn phm: class=tensp
9
- Gi sn phm: class=giasp

O TO MNG MY TNH NHT NGH
TO CA MICROSOFT TI VIT NAM
anh Quan, Q3, TP. HCM
0913.735.906 Fax: 3.9322.734 www.nhatnghe.com

TRUNG TM
I TC O
105 B Huyn Th
Tel: 3.9322.735

Trc ht ti s quy nh khung cha tt c cc sn phm c chiu rng: 450px
(.spmoi), div cha mi sn phm c chiu rng: 150px (.spmoi div) v canh tri
sn phm sp xp theo dng v ct.
Tng t ti s nh cho tn sn phm in m, size:18px, mu text xanh m (
.tensp), tng t bn c th nh dng cho gi sn phm.

Bc 4:
10
Gi n lc bo gc v to bng cho hnh sn phm

.com
Tel: 3.9322.735 0913.735.906 Fax: 3.9322.734 www.nhatnghe

Bn thm code nh sau bo gc cho cc sn phm:

Trong :
border-radius: 10px; > bo gc trn u 10px cho cc gc ca hnh.
border: solid 1px #666666; > nh kiu ng vin, size, v mu cho ng vin.
box-shadow: 2px 2px 2px #FF0000; > Cc tham s theo th t: V tr bng theo
trc x, y, size v tham s cui cng l mu ca bng .

By gi bn hy nhn F12 xem thnh qu c mnh trn trnh duyt (nh l xem
bng trnh duyt Firefox, Chrome, Opera hoc IE version mi nha).

11
n tng khng cc bn, hy bt tay lm th mi bit mnh tht s am
m!@?



To nn chuyn sc cho web vi CSS3 m khng dng hnh
to nn chuyn sc cho web bn c 2 cch thc hin:
Cch 1:
Theo phng php c in th cc bn s s dng hnh v t photoshop kt hp
vi CSS, cch ny tuy mt thi gian nhng hay ch xem c trn mi trnh
duyt.
Cch 2:
Dng code CSS3, cch ny mt thi gian (Copy code > Paste l xong) web
duyt nhanh hn, tuy nhin ch chy tt trn cc trnh duyt mi, cc trnh duyt c
b tay.
Vi cc bn lm web ti tin chc bn bit cch 1 v vy hm nay ti gii thiu vi
cc bn cch to nn chuyn sc cho web m khng cn dng hnh (Cch 2), cch
ny gip web ca bn chy nhanh hn, lm rt n gin (Copy code > paste). Tuy
nhin n khng h tr cc trnh duyt c c bit l IE phi t Version 10.0+,
Firefox, Opera, Chrome th OK.
No ta bt u nha:
Bc 1:
To file *.html mi bng bt c phn mm son tho web no bn mun, ti dng
Dreamweaver CS5. phn code CSS bn copy > Paste on code sau vo th
<style>

</style>

Phn ni dung web bn t lo nha, mun vit g cng c.
12
Sau khi c ni dung bn nhn F12 xem trn trnh duyt (nh dng Firefox th
nghim nha, dng IE l b tay lun nha bn).

T NGH
T NAM
hatnghe.com

TRUNG TM O TO MNG MY TNH NH
I TC O TO CA MICROSOFT TI VI
Tel: 3.9322.735 0913.735.906 Fax: 3.9322.734 www.n

Qu p ng khng no, chng cn dng ci hnh no c. Trong mu chuyn
sc c 3 tham s:
- top: kiu t linear thng t trn xung (C th s dng: left, right, bottom)
- #F9F: mu 1
- #FFF: mu 2
- repeat-x: mu chuyn sc lp theo trc x.

Bc 2:
Thay i cc tham s c cc kiu nn chuyn sc nh :
T chuyn sc t tri sang phi, repeat-y

13



T chuyn sc t tri sang phi, repeat-y

T chuyn sc kiu trn t tm

14
Cc bn th nghim nha, rt n gin@!#



Thc hnh: Thit k giao din shop hoa ti

Vic thit k giao din web (Xy dng web tnh) phi qua nhiu bc kh phc tp,
trong bi vit ny ti s gii thiu n cc bn chi tit cc bc thit k mt trang
web tnh. Bt u vi vic thit k giao din t photoshop n ct giao din v cui
cng l trnh by trang web bng ngn ng HTML v CSS.
Vic thit k giao din web c chia lm 3 phn nh sau
Phn 1: Thit k giao din bng photoshop
Phn 2: Ct giao din web
Phn 3: Layout web vi HTML v CSS

Cc bc chun b cho bi thc hnh
Download cc file trong forder Source ly hnh v mu thit k.
File thit k bng photoshop phi gi nguyn Layer ct giao din cho web.
Phn mm s dng:
1. Photoshop > v v ct giao din
2. Dreamweaver > Layout HTML & CSS
By gi hy bt tay ngay vo cng vic

Phn 1: Thit k giao din bng photoshop
Hnh bn di minh ha sn phm hon thnh sau khi thit k bng photoshop, bn
c th thay i theo tng ca ring mnh.
15



Bc 1
Hy bt u vi vic to file mi c kch thc 1000x1200px, resolution: 72dpi,
mode mu: RGB color

16
Bc 2



To cc ng hng dn (Guides lines) nh v tr cc thnh phn trong mu
thit k ca bn.
Nhn Ctrl + R > Click phi trn thc > chn Pixel

Ko t thc ngang v dc cc ng hng dn cho file thit k (tham kho nh
bn di)

Tip theo bn thm hnh nn cho trang web bng hnh ngi mu c trong folder
Sources. Copy hnh ngi mu sang file thit k > Nhn phm Ctrl+T > thu nh hnh
cho ph hp vi kch thc trang web to hnh nn nh.

Bc 3:
17
By gi bn s n bt hnh ngi mu cho nn t nhin hn.



Trn layer nh va copy > chn Add new Layer Mask > T mu en ln layer mask
che mt phn hnh nh.

Bc 4 :
To nn trong sut trn nh nn
To vng chn hnh ch nht (85% trang thit k) > To layer mi, chn mu tm
(Hoc mu trng) cho forground > nhn Alt + Delete > t mu tm trong vng chn.
Gim Opacity cn 25 n 35 % c nn trong sut nh hnh.

Bc 5:
To menu left
18
V vng chn HCN bn ct tri ca giao din > to layer mi > t mu trng > gim
Opacity: 70%

NG MY TNH NHT NGH
OSOFT TI VIT NAM
P. HCM
x: 3.9322.734 www.nhatnghe.com

TRUNG TM O TO M
I TC O TO CA MICR
105 B Huyn Thanh Quan, Q3, T
Tel: 3.9322.735 0913.735.906 Fa

Thm text cho menu, dng cng c Type Tool > v vng chn HCN > nhp text
copy t file web mu.

Bc 6
To menu top
V vng chn HCN > to layer mi > t mu en
Copy layer mu en t mu > nhn Ctrl + [ > chuyn layer xung di
19
Thm text cho menu



Tng t bn s thm ngn ng v gi hng vo trang thit k.

Bc 7
Thm qung co, sn phm
Copy v paste hnh qung co vo file thit k

20
M cc file hoa mu

NH NHT NGH
TI VIT NAM
22.734 www.nhatnghe.com

TRUNG TM O TO MNG MY T
I TC O TO CA MICROSOFT
Tel: 3.9322.735 0913.735.906 Fax: 3.93

Chn cng c Crop tool > set thuc tnh nh hnh > Crop cc sn phm c cng
kch thc vi nhau

V vng chn Ct nh > Enter

21
Copy cc hnh Crop sang file thit k > so thng hng v cch u



Thm tn sn phm, gi bn, gi hng

22
Copy cho cc sn phm cn li > i ni dung



Tng t cho cc sn phm

23



Bc 8
Thm form tm sn phm
Chn cng c v vng chn HCN c bo gc > chn mu trng > v

Thm nt tm kim v text

Bc 9
Thm phn Footer cho trang web

24
xong phn thit k giao din trong ch, nhn Ctrl + 0 xem kt qu.



Bn c th Seve As thnh cc trang nh gioithieu.psd, dichvu.psd, chitietsp.psd,
lienhe.psd, v thay i ni dung ct tri hon thnh bc thit k giao din
bng photoshop.
Trong phm vi bi vit ny ti ch minh ha cho cc bn trang index, cn cc trang
cn li cc bn thc hin tng t nh.

Phn 2: Ct giao din web
Vic bin mt giao din c thit k trong Photoshop thnh HTML l mt phn rt
quan trng trong thit k web. Sau ny nu bn mun t to giao din cho trang
web ca mnh cho d n ng hay l web tnh, th vic chuyn mt thit k t PSD
sang HTML l vic u tin bn phi lm.
Trong phn 1 ti hng dn bn cch thit k giao din trang web shop hoa ti
bng photoshop. Trong phn ny, chng ta s s dng mt giao din thit k
phn 1 thc hin ct ly hnh nh a ln ti liu html.
25
Ct giao din web l ct ly hnh nh cho ti liu html, cn phn vn bn v phn
lp li cc bn s b i. (Phn vn bn cho web cc bn s x l phn lp trnh v
ly t database).



Nguyn tt c bn:
Mi sn phm > 1 file hnh.
Hnh nn hay mu chuyn sc > ly ng bc lp li v lu thnh 1 file hnh.
S dng cc nh dng hnh cho web: *.jpg, *.png, *.gif.

Cng c s dng:

Slice tool > v vng chn cho hnh, mi vng chn > to thnh 1 file
Slice Select Tool > chnh vng chn ca Slice tool

Bc 1:
Trc tin cc bn nn phn tch giao din c c ci nhn tng th nht v
giao din mnh s ct css. T bn s xc nh c phn nh cn lu li v
phn nh cn b i. Vi giao din ny ti chi lm 4 phn: Header: gm logo, ngn
ng v menu top. Phn menu-left, ct phi: gm cc sn phm v phn footer.

By gi chng ta s bt u ct giao din theo phn chi trn, bt u vi phn
header ca mu thit k.

Vi phn ny bn s ly logo, gi hng, 2 l c, phn menu v nn b qua.
26
S dng Slice tool > v cc vng chn v t tn tng ng. bt u cho logo



Tng t cho cc phn cn li nh hnh bn di.

Bc 2:
Ct hnh cc sn phm v banner qung co
Dng Slice tool > v vng chn cho sn phm 1 > double click t tn sp1.

Dng cng c Slice Select Tool > chn copy vng chn Slice ca sn phm 1 cho
cc sn phm cn li > t tn tng ng: sp2, sp3, sp4,...
27
Tng t bn chon cho banner qung co v t tn banner.



Trng hp c 9 nt gi hng cho 9 sn phm ging nhau nn bn ch cn lu
ng 1 gi hng.

Bc 3:
Tip theo bn s lu hnh nh cho web
Chn File / Save for web and Devices... (Ctrl + Shift + Alt + S), chn nh dng file
cho tng vng chn tng ng nh sau
Cc sn phm, banner > *.jpg
28
Logo, cc button > *.png-8



Click Save > chn folder mi lu vi file name: zzzzz, Save as Type: Images
Only > chn Save.
By gi cc bn c cc hnh nh trong folder images, hy chn cc file nh bn
t tn v lu li, cc file c tn l zzzz... bn hy xa b.
29



Bc 4:
Tip theo l ct ly nn trong sut v nh nn.
Dng Slice v vng chn hnh vung nh khon 2x2pixel > double click > t tn nts

c nn trong sut bn phi n hnh nn v background mu trng > chn File /
Seve for Web and Devices... > chn nh dng hnh l: png-24 > Save

Tip theo bn s n hnh sn phm, menu, logo ly hnh nn (nu tinh bn c
th chuyn hnh nn ln trn cng s nhanh hn). > V vng chn bng Slice tool
cho hnh nn v t tn l bg.
30
Chn Save for web and Devices > chn nh dng file *.jpg > Save.



By gi bn hy lu cc hnh ct vo folder images trong website.
Bn thy vic ct giao din web cng kh n gin v l th, tuy nhin y l giao
din kh n gin. Trong thc t giao din s kh hn nhiu, v th bn phi luyn
tht cn thn cho trng hp ny trc . phn tip theo ti s hng dn cc
bn cch layout giao din bng html v css.
31

Convert PSD To HTML5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Convert PSD To HTML5

Uploaded by

Copyright:

Available Formats

Convert PSD to HTML5&CSS3

Ti liu tham kho

You might also like