Home
Công nghệ thông tin
Đồ họa, thiết kế
Thiết kế layout web bằng Photoshop và những điều cần lưu ý
Thiết kế layout web bằng Photoshop và những điều cần lưu ý
Thi t k layout web b ng Photoshop và nh ng đi u c n l u ýế ế ằ ữ ề ầ ư
Đ thi t k giao di n trang web đ y đ ch c năng và ho t đ ng đ c là ể ế ế ệ ầ ủ ứ ạ ộ ượ
đi u không h khó. Nh ng làm sao đ nó tr nên th t b t m t và thu hút ề ề ư ể ở ậ ắ ắ
ng i xem m i là đi u mà b t kỳ nhà thi t k web nào cũng h ng t i. Đườ ớ ề ấ ế ế ướ ớ ể
làm đ c đi u này, thi t k giao di n web b ng photoshop là m t ph n ượ ề ế ế ệ ằ ộ ầ
quan tr ng và không th thi u đ t o nên s n t ng đó. Cùng Fedu tìm ọ ể ế ể ạ ự ấ ượ
hi u rõ h n v v n đ này thông qua bài vi t sau đây nhé.ể ơ ề ấ ề ế
L i ích c a vi c thi t k giao di n web b ng photoshopợ ủ ệ ế ế ệ ằ
Photoshop là ph n m m đ c s d ng r ng rãi trên kh p th gi i. Đây là ầ ề ượ ử ủ ộ ắ ế ớ
ph n không th thi u và tr nên thân thu c trong vi c t o ra nh ng tác ầ ể ế ở ộ ệ ạ ữ
ph m n t ng hay ch nh s a nh ng b c nh đ website tr nên hoàn h o ẩ ấ ượ ỉ ử ữ ứ ả ể ở ả
h n,…ơ
Photoshop không ch giúp cho nhà thi t k th hi n ý t ng m t cách d ỉ ế ế ể ệ ưở ộ ễ
dàng, mà còn giúp cho nh ng ý t ng đó tr nên đ c đáo, h p d n ng i ữ ưở ở ộ ấ ẫ ườ
xem h n. Mang l i hi u ng vô cùng b t m t cho các t m poster qu ng cáoơ ạ ệ ứ ắ ắ ấ ả
và nh ng hình banner cho website. V i nh ng hình nh sinh đ ng, màu s c ữ ớ ữ ả ộ ắ
cu n hút ch c ch n s t o đ c n t ng đ c bi t cho ng i xem. T o ra ố ắ ắ ẽ ạ ượ ấ ượ ặ ệ ườ ạ
nh ng s n ph m nh t t h n b ng cách x lý nh. B n hoàn toàn có th ữ ả ẩ ả ố ơ ằ ử ả ạ ể
c t b t các ph n th a ho c t y xoá các ph n không c n thi t. T o nh ng ắ ớ ầ ừ ặ ẩ ầ ầ ế ạ ữ
hi u ng sinh đ ng nh các l p nh (layer) ho c nh các b l c (filter). ệ ứ ộ ờ ớ ả ặ ờ ộ ọ
Tùy ch nh màu s c v i công c t o màu n n, v và ch nh s a nh… Tuy ỉ ắ ớ ụ ạ ề ẽ ỉ ử ả
nhiên, đ thi t k giao di n website b ng photoshop đòi h i ng i thi t ể ế ế ệ ằ ỏ ở ườ ế
k c n ph i có k năng v cách x lý hình nh đ t ch t l ng, k năng ế ầ ả ỹ ề ử ả ạ ấ ượ ỹ
ghép hình theo ch đ , theo yêu c u… đ có th t o ra đ c giao di n webủ ề ầ ể ể ạ ượ ệ
đ p phù h p v i nhu c u c a khách hàng.ẹ ợ ớ ầ ủ
Cách thi t k giao di n web b ng photoshop n t ng, đ p m tế ế ệ ằ ấ ượ ẹ ắ
Đ có giao di n trên website đ p, n t ng và đ c đáo thì photoshop là ể ệ ẹ ấ ượ ộ
công c h tr đ c l c dành cho b n. V i các b n m i b t đ u th ng ụ ỗ ợ ắ ự ạ ớ ạ ớ ắ ầ ườ
g p r t nhi u khó khăn khiặ ấ ề thi t k trang webế ế v i photoshop. Các b c ớ ướ
c n thi t đ thi t k giao di n web b ng photoshop n t ng bao g m:ầ ế ể ế ế ệ ằ ấ ượ ồ
X lý nh cho websiteử ả
Đây là b c c c kì quan tr ng trong thi t k website b i vì hình nh trong ướ ự ọ ế ế ở ả
website đóng vai trò khá quan tr ng. Ng i thi t k làm sao mà hình nh ọ ườ ế ế ả
đó ph i đ p, rõ nét phù h p, th hi n s đ c đáo và m i m .ả ẹ ợ ể ệ ự ộ ớ ẻ
Khi upload hình nh trên website b n c n l u ý đ n các v n đ nh : nên ả ạ ầ ư ế ấ ề ư
s d ng đ nh d ng file nào, kích th c hình nh, l u nh v i dung l ng ử ụ ị ạ ướ ả ư ả ớ ượ
t i u khi xem trên web, cách đ t tên file nh cho đúng tiêu chu n.ố ư ặ ả ẩ
M t file nh s luôn n m trong m t khung hình ch nh t (ho c vuông), tùyộ ả ẽ ằ ộ ữ ậ ặ
theo lo i đ nh d ng mà b n có th làm khung này trong su t hay không. ạ ị ạ ạ ể ố
B n chú ý đ n ph n ti p giáp gi a đ ng th ng màu đ và nút bên d i.ạ ế ầ ế ữ ườ ẳ ỏ ướ
JPG: đ nén nh l n nh t, nh s c nét nh t, phù h p v i hình có kíchộ ả ớ ấ ả ắ ấ ợ ớ
th c l n, nh n n…ướ ớ ả ề
PNG: nh trong su t, đ nét t t (không b ng jpg), dung l ng l n, ả ố ộ ố ằ ượ ớ
phù h p v i nh có kích th c nh , c n đ trong su t đ th y hình ợ ớ ả ướ ỏ ầ ộ ố ể ấ
phía d i đ màu trong su t m t mà, phù h p làm logo.ướ ổ ố ượ ợ
GIF: nh trong su t, có th làm nh đ ng, ch t l ng nh t ng đ i.ả ố ể ả ộ ấ ượ ả ươ ố
Phù h p làm các icon nh , hình đ ng.ợ ỏ ộ
Các l u ý quan tr ng khi x lý hình nh trong thi t k giao di n web b ng ư ọ ử ả ế ế ệ ằ
photoshop
L u hình nh v i kích th c đúng ho c không quá l n.ư ả ớ ướ ặ ớ
Chú ý gi đúng t l hình nh vd 1×1, 2×3, 4×5… không bóp méo ữ ỷ ệ ả
theo chi u d c ho c chi u ngang.ề ọ ặ ề
Khi thay đ i kích th c nh, ch nên thu nh nh ch không nên ổ ướ ả ỉ ỏ ả ứ
phóng to, vì khi phóng to nh s làm v đi m nh và hình nh s b ả ẽ ỡ ể ả ả ẽ ị
nhòe.
L u nh d i d ng “Xem trên web” (save for web) đ t i u dung ư ả ướ ạ ể ố ư
l ng t i.ượ ả Phím t tắ trong Photoshop đ b t ch c năng L u nh cho ể ậ ứ ư ả
web là Ctrl-Alt-Shift + S
L u tên nh và folder nh: không vi t có d u, không có kho n tr ng ư ả ả ế ấ ả ắ
và ký t đ c bi t, thay kho ng tr ng b ng ký t “-“. Vd: thiet-ke-ự ặ ệ ả ắ ằ ự
website.jpg
C t ghép nh c b n v i vùng ch nắ ả ơ ả ớ ọ
Sau khi hình nh đã đ c x lý, chúng ta s b t đ u khoanh vùng trên trangả ượ ử ẽ ắ ầ
web sao cho hình nh khi đ c ghép vào s hài hòa nh t. Sau đó, chúng ta ả ượ ẽ ấ
s ti n hành c t và ghép nh vào vùng đã ch n.ẽ ế ắ ả ọ
Ng i x lý nh ph i là ng i xem xét toàn b b c c trang web, sao cho ườ ử ả ả ườ ộ ố ụ
hình nh tr nên hài hòa v i nhau. Ti p đ n, b n c t ghép nh vào nh ng ả ở ớ ế ế ạ ắ ả ữ
vùng đã ch n trên giao di n web.ọ ệ
Hi u ng và màuệ ứ
Website “s h u” giao di n đ p, thu hút thì ph i có s ph i màu phù h p. ở ữ ệ ẹ ả ự ố ợ
V i màu s c đ c ph i h p lý s th hi n đ c tính ch t và ý nghĩa c a ớ ắ ượ ố ợ ẽ ể ệ ượ ấ ủ
trang web. Vì v y khi thi t k giao di n web b ng photoshop c n l u ý ậ ế ế ệ ằ ầ ư
m t s đi m v màu và hi u ng màu: Dùng màu đ đ , đ nh ng kho ngộ ố ể ề ệ ứ ủ ộ ể ữ ả
tr ng, tránh đ t nh ng màu m nh c nh b c nh, tránh s d ng quá nhi u ắ ặ ữ ạ ạ ứ ả ử ụ ề
màu khác nhau.
Ngoài hình nh thì vi c b c c màu s c cũng đóng vai trò h t s c quan ả ệ ố ụ ắ ế ứ
tr ng giúp cho giao di n web tr nên hài hòa. B n nên căn ch nh màu th t ọ ệ ở ạ ỉ ậ
h p lý, tránh s d ng quá nhi u màu n i và hi u ng làm t ng th tr nên ợ ử ụ ề ổ ệ ứ ổ ể ở
ph c t p và r i m t.ứ ạ ố ắ
Thi t k Banner cho webế ế
V iớ photoshop thì vi c làm banner khá đ n gi n và làm sao đ thi t k ệ ơ ả ể ế ế
banner phù h p v i trang web c a b n c v n i dung l n hình th c là y uợ ớ ủ ạ ả ề ộ ẫ ứ ế
t quan tr ng. Chúng s giúp cho trang web tr nên sinh đ ng và thu hút ố ọ ẽ ở ộ
ng i xem h n.ườ ơ
có thể bạn quan tâm
Những điều cần biết về Mask trong Photoshop
9
916
198
Đồ họa, thiết kế
9
(New)
Đồ án tốt nghiệp: Những kiến thức cơ bản về robot - nghiên cứu, thiết...
87
1.002
513
Khoa học tự nhiên
87
(New)
Giới thiệu hệ thống điều khiển từ xa, điều khiển từ xa bằng tia hồng n...
80
968
337
Kỹ thuật
80
(New)
Khái quát về tủ sấy bằng điện trở, thiết kế mạch động lực, thiết kế mạ...
94
1.156
319
Kỹ thuật
94
(New)
Thiết kế mạch điều khiển nhiệt độ cho tủ sấy bằng điện trở
94
1.439
829
Kỹ thuật
94
(New)
Những điều cơ bản cần biết khi thiết kế trang web
122
663
327
Đồ họa, thiết kế
122
(New)
Hướng dẫn tao khung ảnh có thể tái sử dụng bằng Photoshop
9
1.060
222
Đồ họa, thiết kế
9
(New)
XÂY DỰNG VÀ THIẾT KẾ HỆ THỐNG ĐIỀU CHỈNH TỐC ĐỘ ĐỘNG CƠ KHÔNG ĐỒNG BỘ...
66
1.005
378
Kỹ thuật
66
(New)
thông tin tài liệu
Để thiết kế giao diện trang web đầy đủ chức năng và hoạt động được là điều không hề khó. Nhưng làm sao để nó trở nên thật bắt mắt và thu hút người xem mới là điều mà bất kỳ nhà thiết kế web nào cũng hướng tới. Để làm được điều này, thiết kế giao diện web bằng photoshop là một phần quan trọng và không thể thiếu để tạo nên sự ấn tượng đó
Mở rộng để xem thêm
từ khóa liên quan
tài liệu mới trong mục này
tài liệu hot trong mục này
tài liệu giúp tôi
Nếu bạn không tìm thấy tài liệu mình cần có thể gửi yêu cầu ở đây để chúng tôi tìm giúp bạn!
×
