{"id":2626,"date":"2020-05-27T08:00:14","date_gmt":"2020-05-27T01:00:14","guid":{"rendered":"https:\/\/webvocuc.com\/blog\/?p=2626"},"modified":"2021-09-25T16:11:37","modified_gmt":"2021-09-25T09:11:37","slug":"thiet-ke-web-photoshop-nhu-the-nao-phan-1","status":"publish","type":"post","link":"https:\/\/webvocuc.com\/blog\/thiet-ke-web-photoshop-nhu-the-nao-phan-1.html","title":{"rendered":"Thi\u1ebft k\u1ebf web photoshop nh\u01b0 th\u1ebf n\u00e0o ph\u1ea7n 1"},"content":{"rendered":"

Thi\u1ebft k\u1ebf web photoshop<\/strong><\/a> nh\u01b0 th\u1ebf n\u00e0o ph\u1ea7n 1. Tr\u01b0\u1edbc khi th\u1ef1c hi\u1ec7n t\u1ea1o m\u1ed9t giao di\u1ec7n website chuy\u00ean nghi\u1ec7p b\u1eb1ng Photoshop. B\u1ea1n c\u1ea7n c\u00f3 m\u1ed9t website template v\u00e0 \u0111\u01b0\u01a1ng nhi\u00ean l\u00e0 c\u00f4ng c\u1ee5 ch\u1ec9nh s\u1eeda. Thi\u1ebft k\u1ebf h\u00e0ng \u0111\u1ea7u hi\u1ec7n nay Adobe Photoshop.<\/p>\n

T\u1ea3i v\u1ec1 Adobe Photoshop: Download Photoshop<\/a><\/p>\n

T\u1ea3i file PSD Website Template v\u1ec1 m\u00e1y t\u00ednh v\u00e0 s\u1eed d\u1ee5ng: Download Photoshop Website Template<\/a> .<\/p>\n

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

B\u01b0\u1edbc 1: Thi\u1ebft k\u1ebf web photoshop Mockup<\/h2>\n

B\u1ea1n c\u1ea7n l\u00ean k\u1ebf ho\u1ea1ch cho c\u00e1c y\u00eau c\u1ea7u, giao di\u1ec7n v\u00e0 ch\u1ee9c n\u0103ng. Sau \u0111\u00f3 ph\u1ea3i s\u1eafp x\u1ebfp c\u00e1c \u00fd t\u01b0\u1edfng th\u00e0nh m\u1ed9t layout ph\u00f9 h\u1ee3p \u0111\u1ec3 th\u1ef1c hi\u1ec7n. Mockup v\u00e0 wireframe h\u1eefu \u00edch trong vi\u1ec7c t\u1ea1o c\u00e1c layout linh ho\u1ea1t.<\/p>\n

Trong ph\u1ea7n h\u01b0\u1edbng d\u1eabn n\u00e0y mockup v\u00e0 wire frame \u0111\u01b0\u1ee3c \u0111\u1eb7t c\u00f9ng c\u00e1c tone m\u00e0u x\u00e1m. B\u1eb1ng c\u00e1ch n\u00e0y b\u1ea1n c\u00f3 th\u1ec3 lo\u1ea1i b\u1ecf m\u00e0u s\u1eafc tr\u00ean n\u1ec1n. \u0110\u1ec3 t\u1eadp trung v\u00e0o layout v\u00e0 kh\u00f4ng b\u1ecb r\u1ed1i m\u1eaft b\u1edfi c\u00e1c m\u00e0u s\u1eafc kh\u00e1c nhau. V\u00e0 b\u1ea1n c\u00f3 th\u1ec3 t\u1ef1 do v\u00e0 \u0111i\u1ec1u ch\u1ec9nh v\u00e0 s\u1eafp x\u1ebfp m\u1ecdi th\u1ee9. M\u1ed9t mockup c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c chi ti\u1ebft nh\u01b0 b\u1ea1n mu\u1ed1n.<\/p>\n

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

B\u01b0\u1edbc 2: Thi\u1ebft L\u1eadp Canvas<\/h2>\n

B\u01b0\u1edbc ti\u1ebfp theo t\u1ea1o m\u1ed9t layout c\u00f3 chi\u1ec1u r\u1ed9ng l\u00e0 960 pixel. T\u1ea1o m\u1ed9t t\u00e0i li\u1ec7u m\u1edbi c\u00f3 k\u00edch th\u01b0\u1edbc 1200×1500.<\/p>\n

D\u01b0\u1edbi \u0111\u00e2y l\u00e0 layout c\u00f3 chi\u1ec1u t\u1ed9ng 960 pixel. V\u00e0 b\u1ea1n s\u1ebd ph\u1ea3i ch\u1ecdn khu v\u1ef1c \u0111\u1ec3 l\u00e0m vi\u1ec7c tr\u00ean \u0111\u00f3. Nh\u1ea5n t\u1ed5 h\u1ee3p ph\u00edm Ctrl + A \u0111\u1ec3 ch\u1ecdn to\u00e0n b\u1ed9 t\u00e0i li\u1ec7u.<\/p>\n

Ch\u1ecdn Select =>Transform Selection. Co chi\u1ec1u r\u1ed9ng ph\u1ea7n \u0111\u00e3 ch\u1ecdn xu\u1ed1ng 960 pixel. \u0110\u00f3 l\u00e0 khu v\u1ef1c l\u00e0m vi\u1ec7c c\u1ee7a layout.<\/p>\n

Th\u00eam \u0111\u01b0\u1eddng d\u1eabn guide line v\u00e0o ph\u1ea7n n\u00e0y.<\/p>\n

Ti\u1ebfp theo b\u1ea1n c\u1ea7n t\u1ea1o m\u1ed9t s\u1ed1 padding gi\u1eefa border v\u00e0 n\u1ed9i dung m\u00e0 b\u1ea1n s\u1ebd th\u00eam sau \u0111\u00f3. Tr\u00ean khu v\u1ef1c \u0111ang ho\u1ea1t \u0111\u1ed9ng, ch\u1ecdn Transform Selection. Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc chi\u1ec1u r\u1ed9ng khu v\u1ef1c \u0111\u00e3 ch\u1ecdn xu\u1ed1ng 920 pixel. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 2 padding 2 b\u00ean c\u00f3 t\u1ed5ng k\u00edch th\u01b0\u1edbc padding 40 pixel.<\/p>\n

Th\u00eam \u0111\u01b0\u1eddng guide line v\u00e0o khu v\u1ef1c \u0111\u00e3 ch\u1ecdn.<\/p>\n

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

B\u01b0\u1edbc 3: Thi\u1ebft k\u1ebf web photoshop T\u1ea1o Header<\/h2>\n

Th\u1ef1c hi\u1ec7n theo c\u00e1c b\u01b0\u1edbc n\u00e0y t\u1ea1o header cho layout. T\u1ea1o m\u1ed9t khu v\u1ef1c c\u00f3 chi\u1ec1u cao l\u00e0 465 pixel.<\/p>\n

\u0110\u1ea7u ti\u00ean Fill khu v\u1ef1c n\u00e0y b\u1eb1ng m\u00e0u x\u00e1m, sau \u0111\u00f3 s\u1eed d\u1ee5ng Layer Styles \u0111\u1ec3 th\u00eam m\u00e0u v\u00e0 gradient. Th\u1ef1c hi\u1ec7n thao t\u00e1c n\u00e0y trong su\u1ed1t qu\u00e1 tr\u00ecnh thi\u1ebft k\u1ebf \u0111\u1ec3 duy tr\u00ec h\u1ec7 th\u1ed1ng ph\u00e2n c\u1ea5p th\u1ecb gi\u00e1c (visual hierarchy).<\/p>\n

Th\u00eam Gradient v\u00e0o header. K\u00edch \u0111\u00fap chu\u1ed9t v\u00e0o h\u00ecnh thumbnail thu nh\u1ecf c\u1ee7a layer, ch\u1ecdn Gradient Overlay. T\u1ea1o 2 Gradient m\u00e0u nh\u01b0 h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c thi\u1ebft l\u1eadp t\u01b0\u01a1ng t\u1ef1.<\/p>\n

L\u00fac n\u00e0y m\u00e0u s\u1eafc khu v\u1ef1c \u0111\u00e3 ch\u1ecdn gi\u1ed1ng nh\u01b0 h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n

B\u01b0\u1edbc ti\u1ebfp theo l\u00e0 th\u00eam \u0111i\u1ec3m n\u1ed5i b\u1eadt v\u00e0o header. T\u1ea1o m\u1ed9t layer m\u1edbi b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng t\u1ed5 h\u1ee3p ph\u00edm Ctrl+Alt+Shift+N. Ch\u1ecdn m\u1ed9t brush m\u1ec1m c\u00f3 \u0111\u01b0\u1eddng k\u00ednh l\u00e0 600px v\u00e0 ch\u1ecdn m\u00e3 m\u00e0u #19535a cho brush. Ch\u1ec9 c\u1ea7n click chu\u1ed9t v\u00e0o gi\u1eefa header 1 l\u1ea7n.<\/p>\n

Ch\u1ecdn khu v\u1ef1c \u1edf ph\u00eda tr\u00ean \u0111\u1ea7u c\u00f3 chi\u1ec1u cao 110 pixel.<\/p>\n

Nh\u1ea5n Delete \u0111\u1ebb x\u00f3a ph\u1ea7n \u0111\u00e3 ch\u1ecdn. L\u00fac n\u00e0y s\u1ebd c\u00f3 d\u1ea1ng:<\/p>\n

Co chi\u1ec1u d\u1ecdc l\u1ea1i b\u1eb1ng c\u00e1ch nh\u1ea5n t\u1ed5 h\u1ee3p ph\u00edm Ctrl + T.<\/p>\n

H\u00e3y ch\u1eafc ch\u1eafn r\u1eb1ng \u0111i\u1ec3m n\u1ed5i b\u1eadt n\u1eb1m \u1edf trung t\u00e2m header. Ch\u1ecdn layer, header v\u00e0 \u0111i\u1ec3m n\u1ed5i b\u1eadt v\u00e0 nh\u1ea5n ph\u00edm V \u0111\u1ec3 chuy\u1ec3n qua c\u00f4ng c\u1ee5 Move Tool. Tr\u00ean b\u1ea3ng Options Panel b\u1ea1n ch\u1ecdn n\u00fat Align Horizontal Centers.<\/p>\n

T\u1ea1o m\u1ed9t layer m\u1edbi, s\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 Pencil Tool c\u00f3 m\u00e3 m\u00e0u #01bfd2 \u0111\u1ec3 v\u1ebd m\u1ed9t \u0111\u01b0\u1eddng n\u1ed5i b\u1eadt.<\/p>\n

\u1ea8n c\u00e1c c\u1ea1nh b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng gradient mask. Ch\u1ecdn c\u00f4ng c\u1ee5 Gradient Tool, t\u1ea1o gradient trong b\u1ea3ng Options Panel nh\u01b0 h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n

\u00c1p d\u1ee5ng gradient tr\u00ean.<\/p>\n

B\u01b0\u1edbc 4: T\u1ea1o Texture V\u00e0 Pattern<\/h2>\n

B\u01b0\u1edbc ti\u1ebfp theo l\u00e0 t\u1ea1o m\u1ed9t checker pattern v\u00e0 \u00e1p d\u1ee5ng checker pattern n\u00e0y v\u00e0o header. Ch\u1ecdn c\u00f4ng c\u1ee5 Pencil Tool, thi\u1ebft th\u1eadp k\u00edch th\u01b0\u1edbc brush th\u00e0nh 2 pixel v\u00e0 th\u00eam 2 ch\u1ea5m v\u00e0o 2 g\u00f3c \u0111\u1ed1i di\u1ec7n nhau nh\u01b0 h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y. B\u1ecf background v\u00e0 ch\u1ecdn c\u00e1c d\u1ea5u ch\u1ea5m n\u00e0y. Ch\u1ecdn Edit =>Define Pattern.<\/p>\n

T\u1ea1o m\u1ed9t layer m\u1edbi v\u00e0 \u0111\u1eb7t layer v\u00e0o b\u00ean d\u01b0\u1edbi layer n\u1ed5i b\u1eadt. Ch\u1ecdn khu v\u1ef1c m\u00e0 b\u1ea1n mu\u1ed1n \u00e1p d\u1ee5ng pattern. Nh\u1ea5n ph\u00edm Shift + F5 \u0111\u1ec3 m\u1edf h\u1ed9p tho\u1ea1i Fill. Ch\u1ecdn pattern m\u00e0 b\u1ea1n v\u1eeba t\u1ea1o v\u00e0 ch\u1ecdn OK.<\/p>\n

Khu v\u1ef1c \u0111\u00f3 s\u1ebd \u0111\u01b0\u1ee3c fill b\u1eb1ng pattern.<\/p>\n

Blend pattern v\u00e0o header. Th\u00eam m\u1ed9t Layer Mask v\u00e0o layer Pattern. Ch\u1ecdn brush m\u1ec1m v\u1edbi m\u00e3 m\u00e0u l\u00e0 #ffffff, Opacity c\u1ee7a brush xu\u1ed1ng c\u00f2n 60%. Ngo\u00e0i ra b\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec3u ch\u1ec9nh Opacity cho ph\u00f9 h\u1ee3p v\u1edbi y\u00eau c\u1ea7u c\u1ee7a b\u1ea1n.<\/p>\n

Sau khi ho\u00e0n t\u1ea5t, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y r\u1eb1ng Blend kh\u00e1 b\u1eaft m\u1eaft.<\/p>\n

Xem th\u00eam: C\u00e1ch thi\u1ebft k\u1ebf 1 website b\u1eb1ng photoshop ph\u1ea7n 2<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Thi\u1ebft k\u1ebf web photoshop nh\u01b0 th\u1ebf n\u00e0o ph\u1ea7n 1. Tr\u01b0\u1edbc khi th\u1ef1c hi\u1ec7n t\u1ea1o m\u1ed9t giao di\u1ec7n website chuy\u00ean nghi\u1ec7p b\u1eb1ng Photoshop. B\u1ea1n c\u1ea7n c\u00f3 m\u1ed9t website template v\u00e0 \u0111\u01b0\u01a1ng nhi\u00ean l\u00e0 c\u00f4ng c\u1ee5 ch\u1ec9nh s\u1eeda. Thi\u1ebft k\u1ebf h\u00e0ng \u0111\u1ea7u hi\u1ec7n nay Adobe Photoshop. T\u1ea3i v\u1ec1 Adobe Photoshop: Download Photoshop T\u1ea3i file PSD Website Template […]<\/p>\n","protected":false},"author":2,"featured_media":2630,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8],"tags":[246],"class_list":["post-2626","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thiet-ke-website","tag-thiet-ke-web-photoshop"],"jetpack_featured_media_url":"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/05\/thiet-ke-web-photoshop-nhu-the-nao-phan-14.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/2626","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=2626"}],"version-history":[{"count":3,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/2626\/revisions"}],"predecessor-version":[{"id":4558,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/2626\/revisions\/4558"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media\/2630"}],"wp:attachment":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media?parent=2626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/categories?post=2626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/tags?post=2626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}