{"id":1232,"date":"2019-09-10T21:54:43","date_gmt":"2019-09-10T14:54:43","guid":{"rendered":"https:\/\/webvocuc.com\/blog\/?p=1232"},"modified":"2019-09-13T10:04:24","modified_gmt":"2019-09-13T03:04:24","slug":"thiet-ke-web-layout-voi-photoshop","status":"publish","type":"post","link":"https:\/\/webvocuc.com\/blog\/thiet-ke-web-layout-voi-photoshop.html","title":{"rendered":"Thi\u1ebft k\u1ebf web layout v\u1edbi photoshop"},"content":{"rendered":"

Thi\u1ebft k\u1ebf web layout v\u1edbi photoshop<\/strong>. Photoshop<\/a><\/strong> l\u00e0 ph\u1ea7n m\u1ec1m \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng r\u1ed9ng r\u00e3i tr\u00ean kh\u1eafp th\u1ebf gi\u1edbi. \u0110\u00e2y l\u00e0 ph\u1ea7n kh\u00f4ng th\u1ec3 thi\u1ebfu v\u00e0 tr\u1edf n\u00ean th\u00e2n thu\u1ed9c trong vi\u1ec7c t\u1ea1o ra nh\u1eefng t\u00e1c ph\u1ea9m \u1ea5n t\u01b0\u1ee3ng hay ch\u1ec9nh s\u1eeda nh\u1eefng b\u1ee9c \u1ea3nh \u0111\u1ec3 website tr\u1edf n\u00ean ho\u00e0n h\u1ea3o h\u01a1n.<\/p>\n

\"thi\u1ebft<\/p>\n

1. Thi\u1ebft k\u1ebf web layout v\u1edbi photoshop.<\/h3>\n

Photoshop kh\u00f4ng ch\u1ec9 gi\u00fap cho nh\u00e0 thi\u1ebft k\u1ebf th\u1ec3 hi\u1ec7n \u00fd t\u01b0\u1edfng m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng. M\u00e0 c\u00f2n gi\u00fap cho nh\u1eefng \u00fd t\u01b0\u1edfng \u0111\u00f3 tr\u1edf n\u00ean \u0111\u1ed9c \u0111\u00e1o, h\u1ea5p d\u1eabn ng\u01b0\u1eddi xem h\u01a1n. Mang l\u1ea1i hi\u1ec7u \u1ee9ng v\u00f4 c\u00f9ng b\u1eaft m\u1eaft cho c\u00e1c t\u1ea5m poster qu\u1ea3ng c\u00e1o v\u00e0 nh\u1eefng h\u00ecnh banner cho website. V\u1edbi nh\u1eefng h\u00ecnh \u1ea3nh sinh \u0111\u1ed9ng, m\u00e0u s\u1eafc cu\u1ed1n h\u00fat ch\u1eafc ch\u1eafn s\u1ebd t\u1ea1o \u0111\u01b0\u1ee3c \u1ea5n t\u01b0\u1ee3ng \u0111\u1eb7c bi\u1ec7t cho ng\u01b0\u1eddi xem. T\u1ea1o ra nh\u1eefng s\u1ea3n ph\u1ea9m \u1ea3nh t\u1ed1t h\u01a1n b\u1eb1ng c\u00e1ch x\u1eed l\u00fd \u1ea3nh. B\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 c\u1eaft b\u1edbt c\u00e1c ph\u1ea7n th\u1eeba ho\u1eb7c t\u1ea9y xo\u00e1 c\u00e1c ph\u1ea7n kh\u00f4ng c\u1ea7n thi\u1ebft. T\u1ea1o nh\u1eefng hi\u1ec7u \u1ee9ng sinh \u0111\u1ed9ng nh\u1edd c\u00e1c l\u1edbp \u1ea3nh (layer) ho\u1eb7c nh\u1edd c\u00e1c b\u1ed9 l\u1ecdc (filter). T\u00f9y ch\u1ec9nh m\u00e0u s\u1eafc v\u1edbi c\u00f4ng c\u1ee5 t\u1ea1o m\u00e0u n\u1ec1n, v\u1ebd v\u00e0 ch\u1ec9nh s\u1eeda \u1ea3nh\u2026<\/p>\n

2. C\u00e1ch Thi\u1ebft k\u1ebf web layout v\u1edbi photoshop \u1ea5n t\u01b0\u1ee3ng.<\/h3>\n

\u0110\u1ec3 c\u00f3 giao di\u1ec7n tr\u00ean website \u0111\u1eb9p, \u1ea5n t\u01b0\u1ee3ng v\u00e0 \u0111\u1ed9c \u0111\u00e1o th\u00ec photoshop l\u00e0 c\u00f4ng c\u1ee5 h\u1ed7 tr\u1ee3 \u0111\u1eafc l\u1ef1c d\u00e0nh cho b\u1ea1n. V\u1edbi c\u00e1c b\u1ea1n m\u1edbi b\u1eaft \u0111\u1ea7u th\u01b0\u1eddng g\u1eb7p r\u1ea5t nhi\u1ec1u kh\u00f3 kh\u0103n khi thi\u1ebft k\u1ebf trang web v\u1edbi photoshop. C\u00e1c b\u01b0\u1edbc c\u1ea7n thi\u1ebft \u0111\u1ec3 thi\u1ebft k\u1ebf giao di\u1ec7n web b\u1eb1ng photoshop \u1ea5n t\u01b0\u1ee3ng bao g\u1ed3m:<\/p>\n

X\u1eed l\u00fd \u1ea3nh cho website.<\/h4>\n

\u0110\u00e2y l\u00e0 b\u01b0\u1edbc c\u1ef1c k\u00ec quan tr\u1ecdng trong thi\u1ebft k\u1ebf website. B\u1edfi v\u00ec h\u00ecnh \u1ea3nh trong website \u0111\u00f3ng vai tr\u00f2 kh\u00e1 quan tr\u1ecdng. Ng\u01b0\u1eddi thi\u1ebft k\u1ebf l\u00e0m sao m\u00e0 h\u00ecnh \u1ea3nh \u0111\u00f3 ph\u1ea3i \u0111\u1eb9p, r\u00f5 n\u00e9t ph\u00f9 h\u1ee3p, th\u1ec3 hi\u1ec7n s\u1ef1 \u0111\u1ed9c \u0111\u00e1o v\u00e0 m\u1edbi m\u1ebb.<\/p>\n

Upload h\u00ecnh \u1ea3nh tr\u00ean website b\u1ea1n c\u1ea7n l\u01b0u \u00fd \u0111\u1ebfn c\u00e1c v\u1ea5n \u0111\u1ec1 nh\u01b0: n\u00ean s\u1eed d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng file n\u00e0o, k\u00edch th\u01b0\u1edbc h\u00ecnh \u1ea3nh. L\u01b0u \u1ea3nh v\u1edbi dung l\u01b0\u1ee3ng t\u1ed1i \u01b0u khi xem tr\u00ean website. C\u00e1ch \u0111\u1eb7t t\u00ean file \u1ea3nh cho \u0111\u00fang ti\u00eau chu\u1ea9n.<\/p>\n

M\u1ed9t file \u1ea3nh s\u1ebd lu\u00f4n n\u1eb1m trong m\u1ed9t khung h\u00ecnh ch\u1eef nh\u1eadt (ho\u1eb7c vu\u00f4ng). T\u00f9y theo lo\u1ea1i \u0111\u1ecbnh d\u1ea1ng m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m khung n\u00e0y trong su\u1ed1t hay kh\u00f4ng. B\u1ea1n ch\u00fa \u00fd \u0111\u1ebfn ph\u1ea7n ti\u1ebfp gi\u00e1p gi\u1eefa \u0111\u01b0\u1eddng th\u1eb3ng m\u00e0u \u0111\u1ecf v\u00e0 n\u00fat b\u00ean d\u01b0\u1edbi.<\/p>\n

JPG: \u0111\u1ed9 n\u00e9n \u1ea3nh l\u1edbn nh\u1ea5t, \u1ea3nh s\u1eafc n\u00e9t, ph\u00f9 h\u1ee3p v\u1edbi h\u00ecnh c\u00f3 k\u00edch th\u01b0\u1edbc l\u1edbn, \u1ea3nh n\u1ec1n\u2026<\/p>\n

PNG: \u1ea3nh trong su\u1ed1t, \u0111\u1ed9 n\u00e9t t\u1ed1t (kh\u00f4ng b\u1eb1ng jpg). Dung l\u01b0\u1ee3ng l\u1edbn, ph\u00f9 h\u1ee3p v\u1edbi \u1ea3nh c\u00f3 k\u00edch th\u01b0\u1edbc nh\u1ecf. C\u1ea7n \u0111\u1ed9 trong su\u1ed1t \u0111\u1ec3 th\u1ea5y h\u00ecnh ph\u00eda d\u01b0\u1edbi \u0111\u1ed5 m\u00e0u trong su\u1ed1t, ph\u00f9 h\u1ee3p l\u00e0m logo.<\/p>\n

GIF: \u1ea3nh trong su\u1ed1t, c\u00f3 th\u1ec3 l\u00e0m \u1ea3nh \u0111\u1ed9ng, ch\u1ea5t l\u01b0\u1ee3ng \u1ea3nh l\u00e0 t\u01b0\u01a1ng \u0111\u1ed1i. Ph\u00f9 h\u1ee3p l\u00e0m c\u00e1c icon nh\u1ecf, h\u00ecnh \u0111\u1ed9ng.<\/p>\n

C\u00e1c l\u01b0u \u00fd quan tr\u1ecdng khi x\u1eed l\u00fd h\u00ecnh \u1ea3nh trong thi\u1ebft k\u1ebf giao di\u1ec7n web b\u1eb1ng photoshop.<\/p>\n

L\u01b0u \u00fd khi x\u1eed l\u00fd \u1ea3nh cho website.<\/h4>\n

L\u01b0u h\u00ecnh \u1ea3nh v\u1edbi k\u00edch th\u01b0\u1edbc \u0111\u00fang ho\u1eb7c kh\u00f4ng qu\u00e1 l\u1edbn.<\/p>\n

Ch\u00fa \u00fd gi\u1eef \u0111\u00fang t\u1ef7 l\u1ec7 h\u00ecnh \u1ea3nh vd 1\u00d71, 2\u00d73, 4\u00d75\u2026 Kh\u00f4ng b\u00f3p m\u00e9o theo chi\u1ec1u d\u1ecdc ho\u1eb7c chi\u1ec1u ngang.<\/p>\n

Khi thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc \u1ea3nh, ch\u1ec9 n\u00ean thu nh\u1ecf \u1ea3nh ch\u1ee9 kh\u00f4ng n\u00ean ph\u00f3ng to. V\u00ec khi ph\u00f3ng to \u1ea3nh s\u1ebd l\u00e0m v\u1ee1 \u0111i\u1ec3m \u1ea3nh v\u00e0 h\u00ecnh \u1ea3nh s\u1ebd b\u1ecb nh\u00f2e.<\/p>\n

L\u01b0u \u1ea3nh d\u01b0\u1edbi d\u1ea1ng \u201cXem tr\u00ean web\u201d (save for web) gi\u00fap t\u1ed1i \u01b0u dung l\u01b0\u1ee3ng t\u1ea3i. Ph\u00edm t\u1eaft trong Photoshop \u0111\u1ec3 b\u1eadt ch\u1ee9c n\u0103ng L\u01b0u \u1ea3nh cho website l\u00e0 Ctrl-Alt-Shift + S.<\/p>\n

L\u01b0u t\u00ean \u1ea3nh, folder \u1ea3nh: kh\u00f4ng vi\u1ebft c\u00f3 d\u1ea5u, kh\u00f4ng c\u00f3 kho\u1ea3n tr\u1eafng v\u00e0 k\u00fd t\u1ef1 \u0111\u1eb7c bi\u1ec7t. Thay kho\u1ea3ng tr\u1eafng b\u1eb1ng k\u00fd t\u1ef1 \u201c-\u201c.<\/p>\n

C\u1eaft gh\u00e9p \u1ea3nh c\u01a1 b\u1ea3n v\u1edbi v\u00f9ng ch\u1ecdn.<\/h4>\n

Sau khi h\u00ecnh \u1ea3nh \u0111\u00e3 \u0111\u01b0\u1ee3c x\u1eed l\u00fd. Ch\u00fang ta s\u1ebd b\u1eaft \u0111\u1ea7u khoanh v\u00f9ng tr\u00ean trang web sao cho h\u00ecnh \u1ea3nh khi \u0111\u01b0\u1ee3c gh\u00e9p v\u00e0o s\u1ebd h\u00e0i h\u00f2a nh\u1ea5t. Sau \u0111\u00f3, ch\u00fang ta s\u1ebd ti\u1ebfn h\u00e0nh c\u1eaft v\u00e0 gh\u00e9p \u1ea3nh v\u00e0o v\u00f9ng \u0111\u00e3 ch\u1ecdn.<\/p>\n

Ng\u01b0\u1eddi x\u1eed l\u00fd \u1ea3nh ph\u1ea3i l\u00e0 ng\u01b0\u1eddi xem x\u00e9t to\u00e0n b\u1ed9 b\u1ed1 c\u1ee5c trang web. Sao cho h\u00ecnh \u1ea3nh tr\u1edf n\u00ean h\u00e0i h\u00f2a v\u1edbi nhau. Ti\u1ebfp \u0111\u1ebfn, b\u1ea1n c\u1eaft gh\u00e9p \u1ea3nh v\u00e0o nh\u1eefng v\u00f9ng \u0111\u00e3 ch\u1ecdn tr\u00ean giao di\u1ec7n web.<\/p>\n

Hi\u1ec7u \u1ee9ng v\u00e0 m\u00e0u.<\/h4>\n

Website \u201cs\u1edf h\u1eefu\u201d giao di\u1ec7n \u0111\u1eb9p, thu h\u00fat th\u00ec ph\u1ea3i c\u00f3 s\u1ef1 ph\u1ed1i m\u00e0u ph\u00f9 h\u1ee3p. V\u1edbi m\u00e0u s\u1eafc \u0111\u01b0\u1ee3c ph\u1ed1i h\u1ee3p l\u00fd s\u1ebd th\u1ec3 hi\u1ec7n \u0111\u01b0\u1ee3c t\u00ednh ch\u1ea5t v\u00e0 \u00fd ngh\u0129a c\u1ee7a trang web. V\u00ec v\u1eady khi thi\u1ebft k\u1ebf giao di\u1ec7n web b\u1eb1ng photoshop c\u1ea7n l\u01b0u \u00fd m\u1ed9t s\u1ed1 \u0111i\u1ec3m v\u1ec1 m\u00e0u v\u00e0 hi\u1ec7u \u1ee9ng m\u00e0u. D\u00f9ng m\u00e0u \u0111\u1ee7 \u0111\u1ed9, \u0111\u1ec3 nh\u1eefng kho\u1ea3ng tr\u1eafng. Tr\u00e1nh \u0111\u1eb7t nh\u1eefng m\u00e0u m\u1ea1nh c\u1ea1nh b\u1ee9c \u1ea3nh, tr\u00e1nh s\u1eed d\u1ee5ng qu\u00e1 nhi\u1ec1u m\u00e0u kh\u00e1c nhau.<\/p>\n

Ngo\u00e0i h\u00ecnh \u1ea3nh th\u00ec vi\u1ec7c b\u1ed1 c\u1ee5c m\u00e0u s\u1eafc c\u0169ng \u0111\u00f3ng vai tr\u00f2 h\u1ebft s\u1ee9c quan tr\u1ecdng gi\u00fap cho giao di\u1ec7n web tr\u1edf n\u00ean h\u00e0i h\u00f2a. B\u1ea1n n\u00ean c\u0103n ch\u1ec9nh m\u00e0u th\u1eadt h\u1ee3p l\u00fd. Tr\u00e1nh s\u1eed d\u1ee5ng qu\u00e1 nhi\u1ec1u m\u00e0u n\u1ed5i v\u00e0 hi\u1ec7u \u1ee9ng l\u00e0m t\u1ed5ng th\u1ec3 tr\u1edf n\u00ean ph\u1ee9c t\u1ea1p v\u00e0 r\u1ed1i m\u1eaft.<\/p>\n

Thi\u1ebft k\u1ebf Banner cho web.<\/h4>\n

V\u1edbi photoshop th\u00ec vi\u1ec7c l\u00e0m banner kh\u00e1 \u0111\u01a1n gi\u1ea3n v\u00e0 l\u00e0m sao \u0111\u1ec3 thi\u1ebft k\u1ebf banner ph\u00f9 h\u1ee3p v\u1edbi trang web c\u1ee7a b\u1ea1n. C\u1ea3 v\u1ec1 n\u1ed9i dung l\u1eabn h\u00ecnh th\u1ee9c l\u00e0 y\u1ebfu t\u1ed1 quan tr\u1ecdng. Ch\u00fang s\u1ebd gi\u00fap cho trang web tr\u1edf n\u00ean sinh \u0111\u1ed9ng v\u00e0 thu h\u00fat ng\u01b0\u1eddi xem h\u01a1n.<\/p>\n

C\u1eaft giao di\u1ec7n photoshop cho web.<\/h4>\n

\u0110\u00e2y l\u00e0 c\u00f4ng vi\u1ec7c c\u1eaft l\u1ea5y h\u00ecnh \u1ea3nh cho t\u00e0i li\u1ec7u html. C\u00f2n v\u0103n b\u1ea3n v\u00e0 ph\u1ea7n l\u1eb7p l\u1ea1i c\u00e1c b\u1ea1n s\u1ebd b\u1ecf \u0111i. \u0110\u1ec3 c\u1eaft \u0111\u01b0\u1ee3c giao di\u1ec7n photoshop cho web th\u00ec t\u1ed1t nh\u1ea5t b\u1ea1n ph\u1ea3i c\u00f3 k\u1ebf ho\u1ea1ch. V\u00e0 kinh nghi\u1ec7m l\u00e0m vi\u1ec7c.<\/p>\n","protected":false},"excerpt":{"rendered":"

Thi\u1ebft k\u1ebf web layout v\u1edbi photoshop. Photoshop l\u00e0 ph\u1ea7n m\u1ec1m \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng r\u1ed9ng r\u00e3i tr\u00ean kh\u1eafp th\u1ebf gi\u1edbi. \u0110\u00e2y l\u00e0 ph\u1ea7n kh\u00f4ng th\u1ec3 thi\u1ebfu v\u00e0 tr\u1edf n\u00ean th\u00e2n thu\u1ed9c trong vi\u1ec7c t\u1ea1o ra nh\u1eefng t\u00e1c ph\u1ea9m \u1ea5n t\u01b0\u1ee3ng hay ch\u1ec9nh s\u1eeda nh\u1eefng b\u1ee9c \u1ea3nh \u0111\u1ec3 website tr\u1edf n\u00ean ho\u00e0n h\u1ea3o h\u01a1n. 1. Thi\u1ebft k\u1ebf […]<\/p>\n","protected":false},"author":2,"featured_media":1260,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8],"tags":[113],"class_list":["post-1232","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thiet-ke-website","tag-thiet-ke-web-layout-voi-photoshop"],"jetpack_featured_media_url":"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/10\/thiet-ke-web-layout-voi-photoshop-1_wd9rv4.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/1232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/comments?post=1232"}],"version-history":[{"count":0,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/1232\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media\/1260"}],"wp:attachment":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media?parent=1232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/categories?post=1232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/tags?post=1232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}