hướng đãn thiết kế giao diện trang web bằng photoshop

Hướng Dần Thiết Kế Trang Web 2.0 trong Photoshop (phần 1)
Trong hướng dẫn này, bạn sẽ học từng bước, từng bước cách làm thế nào
để tạo một layout web tuyệt đẹp và rõ ràng. Bạn sẽ sử dụng một số kỹ
ứiuạt từ cơ ban cho đến trùng cấp để xây dựng “Web 2.0" kiểu dáng đẹp,
sử dụng Grid System 960.
Đây là một series cổ hai phần sẽ trình bày cho bạn cách làm thế nào để
tạo layout trong Photoshop, sau đó làm thế nào để chuyển đổi các tiêu
chuẩn phù hợp với (X) HTML của thiết kế web.
Kết quả
Nhấp vào hình ảnh dưới đây sẽ đưa bạn đến Phiên bản đầv đủ của layout
mà chúng tôi sẽ thiết kế trong hướng dẫn này.
HOME ÄBOUT WORK CONTACT
■ d"w«tSS£ •<
ỈÌ. ■ ■
In IS. «Uni^-nr !*-
JUU^ J
N e e d w e S O 'V m o r e ?
ỉmáMt m • Vwi ỦMtp. m Bal
■owoinr r t w nd naawjre rv^ijvuwitWi
txtfon g rf* I .o w i r ftáMtaqrmcni ‘Ifv trrrn amạ HMoga
li Ễ B l i ó l lr ự i C Â ỈM ^ l l ^ l t M c r r a ỉ
GW 4>auN3 MT* IB#
IMM ar.raa<rwTi irvfi/anaiti”
r
S ig nU » f& r 0 MIT M M im iy u n w ts m r
■ ■ ■ GO
( $ 1 8 0 0 .1 9 8 .8 8 7 8
Thiết lap document
1. Tạo một document mới ừong Photoshop với kích thước 1200px X
105ỏpx.
N in e ; ịư n trtle d -i

Pre$ệt
Size;
W idth: 1200
H él g ht: 1Ö50
Resoîucfcort: 72
B ackground Contenus: While
▼ A dv an ced
New
jTJ
ôtesls
pixels
Cofor Mode: RCB Color s bit
pixeU/irtch jiü|
g
ti
Delete Preset
Device C entral
Im age Size
3.60M
Creating the background ịtạo background)
2. Bây giờ, chúng tôi sẽ tạo background. Chọn Gradient Tool (G). Hãy
chắc chắn đó là bộ Linear Gradient. Thiết lập foreground color #ale8fe
và background color #59d3fa và tạo ra một gradient như dưới đây:
Đặt Grid System vào document
3. Trên một layer mới, tạo một grid rộng 960px gồm 12 thanh, mỗi thanh
rộng 60px. Đặt mỗi thanh cách nhau 20px. Đặt grid này ở chính giữa của
document. Các grids này nên dùng như bảng chỉ dẫn của bạn và nên nhớ
rằng các yếu tố thiết kế của bạn không được vượt quá chiều rộng của grid
này. Vào trang 960 Grid System site để biết thêm thông tin, hoặc down
load the Grid system here.

Tạo ra các container cho các ỉogo và các navigation item
4. Bây giờ, chúng tôi sẽ tạo ra các container cho logo và các navigation
item. Để tạo các container, sử dụng Rmraded Rectangle Tool với Shape
Layers đã được lựa chọn. Thiết lập bán kính ìopx.
* d
1
JIJJ
□
Ị
__
ị Rectangle Tool L'
■ G Raurd-Ễd Pl&ciariçlê Tc-3
L
I^ J Ellipse Tûû. u
A
,'^y Poivgon Tocsl
u
ạ
Line Too, u
Custom ShapeT-ool
u
■1
T T Í
f i Photoshop File
5. Tạo một hình chữ nhật ừòn rộng 300px. Tạo một hình chữ nhật ừòn
thứ hai rộng 620px; chủng được đặt trên grid như sau:
6. Áp dụng các thiết lập Layer Style cho mỗi hình chữ nhật tròn:
L a y e r S t y le
y Oip 'A ttvn
í*jjjpv

ûww-r Ck»-
I VVM Cdr,
Ehi iM tm u
_ tonw»'
>x lL r*
5J i«jn
Com Cviuy
MẠ £» id*ni X.
_ Pritrn övntor
SteB»
ịỊỊ PHOU ũw cm» ìỉuas*
°* >
( Cantil )
Mgw Style.,,
? Pñtyújvy
C rid ii 'i! Ẽđ icor
IglftîvtMé—
jj h w rl M »
nw&n
***rCmrn
W i - W I rô«»
ỉmm> ttrw*m
•ra^QWMb
liMfc*
“nvrr -
i’i*“ c
w * Ị W _ 5j M
- 0 ®
fc'fäi 1*
!» 1*

£ <K ,
Cjn«i Ỉ
" "’S *
sjivtvira
□
P ritéM
4 ^ I ^ ri r
¿■ ý v . y
' f. “ _3
r t w i ï ' j
I««
Piimr CutMRi
C f i J i m fy p* k w
___
NtVd
innootfv'»«: Ị ¡00 * ỊI *
*
ã
Ĩ
Stops
eaKinr, ; « UUIMP-I 1» mir I
CiHW ' lot H O T I ]s I D»r«rt* Ì
Đây giờ hình chữ nhật ừòn của bạn ừồng như thế này:
Thêm logo và text cho navigation
7. Để tạo các navigation items, sử dụng Type Tool (T). Sử dụng màu sắc
#5f5f5f. Trong trường hợp này, tôi sử dụng font chữ Rockwell. Add các
navigation items cho hình chữ nhật thứ hai và logo của công ty (hiện tại
logo đang sử dụng chi ỉà một cái tên hư cấu cho một tồ chúc thiết kế).
b i W t l AVil
HOME ABOUT WORK CONTACT

Tạo các kỷ hiệu phân cách cho các navigation items
8. Trên một layer mới, hãy add một ký hiệu phân cách ở giữa mỗi một
navigation item. Ở đây tôi thêm một line với color #dedede.
OME ABOI
9. sao chép ký hiệu ngăn cách. Sử dụng Layer> Layer Style> Blending
Options> Color Overlay và thay đổi màu của bản sao Di chuyển
bản sao một pixel qua bên phải. Điều này sẽ tạo ra một hiệu ứng chạm
khắc tình tế.
Tao header
10. Bây giờ hãy tạo header phía dưới logo và thanh navigation. Sử dụng
Type Tool (T), và add khẩu hiệu công ty và một bài giới thiệu ngắn gọn
phía dưới. Sau đó, hãy add một Drop Shadow nhẹ để làm cho kích thước
của nó lớn hơn.
HOME ABOUT WORK C
We buil
blow you away.
Here at Creative, we build state-of-the-art
and cost-effective websites.
11. Để lấp đầy khoảng trống bên cạnh khẩu hiệu, add một hình ảnh của
một máy tính hoặc một laptop. Bây giờ, đây ỉà những gì bạn cần phải cố:
mow you away.
Here at Gieatiro, we build state-of-the-art
and costeiiective websites-
Hướng Dan Thiết Kế Trang Web 2.0 trong Photoshop (phần 2)
Tạo một button tròn
12. Dưới đây là một bài giới thiệu ngắn gọn, với việc sử dụng Rounded
Rectangle Tool, bán kính 28px 28px, tạo ra một button gọi là“Learn
More”. Điều này là rất hữu ích nếu người dùng muốn tìm hiểu thêm về
công ty của bạn, thông tin này được tiếp cận một cách dễ dàng.
LEARN MORE ^

Ầ
Áp dụng một Gradient Overlay cho button bằng cách sử dụng các cách
thiết lập ở ừền với # 086da0 màu củã bottom và #23a7ea.
Tạo một call-to-action box
13. Sử dụng Rounded Rectangle Tool một lần nữa với bán kính 16px, tạo
ra một hình chữ nhật 300px. Vào Blending Options và add một Drop
Shadow vai cac gia tri giong nhir Buac 6.
14. Chon hinh chu nhat chung toi vira tao ra (Cmd / Ctrl + Click) va tao
mot layer moi phia tren hinh chu nhat nay. Add anh sang mau xanh
(#96e3fc) de gradient trong suot tren hinh chu nhat.
15. Di chuyen gradient pixel nky len. C6 the mat mot phut nhung dimg
quan tam den dieu do. B&ng cach nao do hay 1km cho n6 trong kh&c biet
mot chut.
L J
Move hght blue to
transparent gradient
one pixel up
Phác thảo một calẾ-to-action button
16. Box này sẽ dùng như một call-to-action button. Điền này rất hữu ích
nếu bạn muốn người dùng tìm kiếm thông tin quan ừọng ừền toàn bộ
trang web của bạn chỉ ừong nháy mắt. Hãy add heading, một vài mô tả,
và một icon cho các button. Các icon nhỏ có thể mang lại sức hấp dẫn
hơn cho thiết kế của bạn. Chủng cũng giúp người dùng nhanh chổng tìm
thấy những gì họ đang tìm kiếm bởi vì các icon truyền đạt các messages
đến người dùng.
Các awesome icons mà tôi đang sử dụng trong hướng dẫn này là từ Wil
son Ink trên deviantART. Bạn có thể kiểm tra và download chúng; Bộ
icon này được gọi là Green and Blue Icon Set. Các icon này chỉ miễn phí
cho sử dụng cá nhân.
CLIENT LIST

^íẽ fiãvẽ a"Wĩỉfẽ range" õt' 9
Clients from all over the '
Ậvorld inducing I
I
17. Sao chép cái box mà chúng tôi vừa tạo ra cùng với nội dung của
nốhaỉ lần,, sau đó sắp xếp chúng bằng nhau trên grid. Thay đổỉ nộỉ dung
của haỉ box mới.
CLIENT LIST
w» rnve ftwdc landed
dsrfli Item DU WK eic
woildlncLHÜnq Stọ IJSA.
HBiifi/imanca. iLEcpo.
ASH and /U iu abi
OUR WORK
CN sfc out llw trc# ™
aiflvitowpfixw»
«•, 31 SUES dralii kenn
pnm SỠ wes ifc w s
BOOKNOW !
W?aK'<Mnnf*ry
snUiiWitotxxfcrHw
p-Bịccia Cädfchcrc u*
ỌS1 a irre qutW!
_ * r r 9
18, Đê add nội dung vào thiêt kê, chúng ta có thê thêm một vài text dưới
ba box này, ví dụ, một mục thư thông báo (newsletter) sẽ là tuyệt vời.
Nhưng đừng quên giữ cho mọi thứ nằm bên trong grid!
tsrvo J> *wa tonga ru ■ J b r avsx OM ne WBI* IH1 IU vysiira ouirefBv
i M ti:*m nể ca*!»i s*ỉe I hM! ứOÊtm taXẸX* HI -49 ^ ~T iinÁẺỈe to KM
«jrtdincsudrglTBUSA, wmousaarfli-fcnen I / 4 r ' ddiiw rnte)

ẽmope' prut i0w»n d0M«ra g* ,* tiwqufl«e!
AỈM ,vo jiur5j#i* I
Need we say more?
OftAino IÄ A WWI Otfig»! JS\tí OpvtíỄTTnprl iv.Kt pm itệ ©ufriiaft Daun a o ư tí ii M b&9e W ữ
tôoeUOM a m iHnS tVíjãùl&ĩ* arí/QỈI-, uuaüty! Unrồừhữ toát3* #ftr3 ;>»m liíĩimil fchcẳk»g r -
LhKiW*5 ữt canKflf vftvis-pztbOT syttKm* M D*>JÍ
Last but not /easf the footer
19. Kế tiếp, chúng ta tạo footer, nơi có thể add bản quyền và các thông tin
liên lạc cho trang web.
i
.
© 1800.198.8878
Icing on the cake: creating the diagonal lines
20. Tạo một document mới trong Photoshop với kích thước 25px X 25px
và toàn bộ document với một black background(#000000).
New
Name: Untitled-1
Preset: Custom î >
Cancel
Size: T !
Save Preset
Width; 25
pixels
Delete Preset
Device Central
Height 25
pixels Î 1
Resolution: 72
pixels/ĩnch ỉ 1
Color Mode: RGB Color T] 8 bit :]

Background Contents: Transparent î 1
Image Size:
3.60M
» Advanced
21. Trên top của layer với black background, tạo một layer mới. Sử dụng
Zoom Tool (Z), zoom trong document có kích thước tối đa. Thiết lập
Pencil Tool: lpx và foreground color: màu trắng(#FFFFFF). Vẽ các line
trên document của bạn giống như hình dưới đây. Hãy lưu ý bạn cần phải
vẽ bao nhiêu pixel và vẽ chúng vào đâu trong các areas trên document.
K§t n6i cac lines nhu thl nay:
Lấp kín các khu vực trống với màu trắng để đạt được kết quả này:
22. Ẩn layer này với black background và vào Edit> Define Pattern.
Layer với black background chỉ được tạo ra để làm cho màu trắng dễ nhìn
thấy hơn. Đặt tên brush của bạn ” diagonals ” và nhấn OK.
23. Bây giờ chúng ta quay ừở lại mô hình chúng ta vừa tạo. Tạo một
layer mới phía trên gradient background. Go to Edit> Fill và trên Con
tents dropdown, sử dụng Pattern. Click vào Custom Pattern và tìm (pat
tern) mô hình chứng ta vừa tạo ra có tên là “diagonals'’ và nhấn OK. Bạn
sẽ thấy một cáỉ gì đó như thế này:
HOME ABOUT WORK CONTACT
C L I E N T L IS T
IV&tlV«lểWnV>J6Sl
dtôtỉ Kffl *D firr4T Pto fi
rirxttvttbki.pUvlrôAi 1 I
A/WVJL Euroụ»,
Q U K W O R K
CJTrfdi ữJt Prf *wt. #4
MVi-OM* W iki
r.invui sltfils hùm
p*nl ho wA riwigr*

E O O K F V O W !
W1 iffl suPfeflffy
J-tfMiffia fa B66fr ItfW
I*wvit Clddvn»
0(fc I *nw q«o«P!
24. Đặt Blend Mode của layer này lên Overlay và Opacity của nó là 4%
HOME ABOUT WORK CONTACT
e build websites that
blow you away.
Hera- at Creative we build sisie-af-thp-art
■T>d ccBi-dlecUrc «vcbMlea.
LEAHM MQ-RE ► 1
K “ |
E H
d m
h». R-» J n il n n Jr
25. Sử dụng tẩy, xóa thông thường từ bottom lền top, xốa bỏ khoảng
6 0 % các đường chéo để lảm cho nó ừông như thế này:
C I U i A Ỉ i v U
26. Voila! Chung toi da c6 mot Web 2.0, rat ro r&ng, v& dep rmit!
v n k . A * A W
HOME BJiOUT WORK CONTACT
s that
blow you away.
Hors ar Crcinvo. wa biuid iiato-oMhft-an
and cost-uEecfctvr* vrcbsitea
LEARN MORE *
Bda\vghou»e * I
e T " .
I I

W. «N rn 4-
' f n
-
CLIENT LIST
w rw* i «we rv q t«
saeni» P&v ai cw t/Q
t+HV2 iU u 9 q Crt usa.
WbrtftrfAwie* i ik 6c«
Need we soy more?
fiw^wiiaVwriiXn^r* iirfifMfii» pjiinij&«fi Jt'iiiirti woe tv» Vcv
tpwtuAf* r eftMn n il offgoaid ifcwgfiua**** tart and (Mr* w»i stovSbjrrtrt 1» r kutnj Vh-
LLeUfcTij if L-3H«« W*Hr|ef!Wtt UfUdM rfkl Qiogft
cttttt.fr PW Tif SOT W BHW5 ftOHWQft
tin* Up
i f-x On? Monthly NwrMlur-
■M
18 0 0.1 9 8 .0378