{"id":2632,"date":"2020-05-28T08:00:52","date_gmt":"2020-05-28T01:00:52","guid":{"rendered":"https:\/\/webvocuc.com\/blog\/?p=2632"},"modified":"2021-09-25T16:12:37","modified_gmt":"2021-09-25T09:12:37","slug":"cach-thiet-ke-1-website-bang-photoshop-phan-2","status":"publish","type":"post","link":"https:\/\/webvocuc.com\/blog\/cach-thiet-ke-1-website-bang-photoshop-phan-2.html","title":{"rendered":"C\u00e1ch thi\u1ebft k\u1ebf 1 website b\u1eb1ng photoshop ph\u1ea7n 2"},"content":{"rendered":"

C\u00e1ch thi\u1ebft k\u1ebf 1 website<\/strong> nh\u01b0 th\u1ebf n\u00e0o ph\u1ea7n 1<\/a>. Tr\u01b0\u1edbc khi th\u1ef1c hi\u1ec7n t\u1ea1o m\u1ed9t giao di\u1ec7n website chuy\u00ean nghi\u1ec7p b\u1eb1ng Photoshop<\/a>. 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

\"c\u00e1ch<\/p>\n

B\u01b0\u1edbc 5: C\u00e1ch thi\u1ebft k\u1ebf 1 website<\/a> – Th\u00eam Bi\u1ec3u Logo Type (Ki\u1ec3u Ch\u1eef)<\/h2>\n

Th\u00eam logo type. Tr\u01b0\u1edbc khi th\u1ef1c hi\u1ec7n \u0111i\u1ec1u n\u00e0y, th\u00eam \u0111i\u1ec3m n\u1ed5i b\u1eadt v\u00e0o ph\u00eda sau logo. Ch\u1ecdn brush m\u1ec1m c\u00f3 m\u00e3 m\u00e0u #19535a v\u00e0 th\u00eam m\u1ed9t \u0111i\u1ec3m ch\u1ea5m.<\/p>\n

Ti\u1ebfp theo th\u00eam Type. Font ch\u1eef s\u1eed d\u1ee5ng trong v\u00ed d\u1ee5 \u0111\u01b0\u1edbi \u0111\u00e2y l\u00e0 Bebas. N\u1ebfu mu\u1ed1n s\u1eed d\u1ee5ng font ch\u1eef n\u00e0y b\u1ea1n c\u00f3 th\u1ec3 t\u1ea3i v\u1ec1 m\u00e1y v\u00e0 c\u00e0i \u0111\u1eb7t, ngo\u00e0i ra, c\u00f3 r\u1ea5t nhi\u1ec1u font ch\u1eef \u0111\u1eb9p ti\u1ebfng Vi\u1ec7t kh\u00e1c d\u00e0nh cho c\u00e1c b\u1ea1n, t\u1ea3i Font ch\u1eef \u0111\u1eb9p v\u1ec1 m\u00e1y t\u00ednh<\/p>\n

Th\u00eam hi\u1ec7u \u1ee9ng Subtle cho logo.<\/p>\n

B\u01b0\u1edbc 6: \u0110\u01b0\u1eddng D\u1eabn<\/h2>\n

Th\u00eam c\u00e1c link \u0111\u01b0\u1eddng d\u1eabn.<\/p>\n

T\u1ea1o n\u00fat \u0111\u01b0\u1eddng d\u1eabn. S\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 Rectangular Marquee Tool v\u00e0 fill b\u1eb1ng b\u1ea5t c\u1ee9 m\u00e0u s\u1eafc n\u00e0o. Sau \u0111\u00f3 gi\u1ea3m Fill Opacity xu\u1ed1ng 0.<\/p>\n

K\u00edch \u0111\u00fap chu\u1ed9t v\u00e0o h\u00ecnh thumb thu nh\u1ecf c\u1ee7a layer, ch\u1ecdn Gradient Overlay.<\/p>\n

\"c\u00e1ch<\/p>\n

B\u01b0\u1edbc 7: C\u00e1ch thi\u1ebft k\u1ebf 1 website – Content Slider<\/h2>\n

Ch\u1ecdn m\u1ed9t khu v\u1ef1c c\u00f3 k\u00edch th\u01b0\u1edbc 580 x 295 pixel.<\/p>\n

Fill khu v\u1ef1c b\u1eb1ng tone m\u00e0u x\u00e1m.<\/p>\n

Th\u00eam h\u00ecnh \u1ea3nh m\u00e0 b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng, d\u00e1n v\u00e0o layer m\u00e0 b\u1ea1n v\u1eeba t\u1ea1o \u1edf tr\u00ean.<\/p>\n

B\u00e2y gi\u1edd l\u00e0 b\u01b0\u1edbc th\u00eam hi\u1ec7u \u1ee9ng \u0111\u1ed5 b\u00f3ng (shadow) cho slider. T\u1ea1o m\u1ed9t layer m\u1edbi, ch\u1ecdn c\u00f4ng c\u1ee5 Brush Tool \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp \u0111\u01b0\u1eddng k\u00ednh 400 pixel. M\u1edf b\u1ea3ng Brushes v\u00e0 gi\u1ea3m k\u00edch th\u01b0\u1edbc c\u00e1c ch\u1ea5m tr\u00f2n, s\u1eed d\u1ee5ng thi\u1ebft l\u1eadp nh\u01b0 d\u01b0\u1edbi \u0111\u00e2y.<\/p>\n

Thi\u1ebft l\u1eadp m\u00e3 m\u00e0u brush #000000 v\u00e0 th\u00eam c\u00e1c ch\u1ea5m tr\u00f2n.<\/p>\n

\u00c1p d\u1ee5ng Gaussian Blur \u0111\u1ec3 l\u00e0m m\u1ec1m c\u00e1c c\u1ea1nh.<\/p>\n

Ch\u1ecdn n\u1eeda ph\u1ea7n d\u01b0\u1edbi c\u1ee7a b\u00f3ng v\u00e0 x\u00f3a ph\u1ea7n \u0111\u00f3 \u0111i.<\/p>\n

Thay \u0111\u1ed5i v\u1ecb tr\u00ed c\u1ee7a b\u00f3ng ngay tr\u00ean slider.<\/p>\n

Co b\u00f3ng theo chi\u1ec1u d\u1ecdc. Ti\u1ebfp theo c\u0103n gi\u1eefa tr\u00ean thanh slider. Ch\u1ecdn c\u1ea3 2 layer v\u00e0 tr\u00ean b\u1ea3ng Options Panel, b\u1ea1n click ch\u1ecdn n\u00fat Align Horizontal Centers.<\/p>\n

Nh\u00e2n \u0111\u00f4i b\u00f3ng v\u00e0 xoay theo chi\u1ec1u d\u1ecdc, \u0111\u1eb7t v\u00e0o c\u1ea1nh d\u01b0\u1edbi c\u00f9ng c\u1ee7a thanh slider.<\/p>\n

T\u1ea1o n\u00fat \u0111i\u1ec1u khi\u1ec3n thanh slider b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng thanh c\u00f4ng c\u1ee5 Rectangular Marqee Tool v\u00e0 fill m\u00e3 m\u00e0u #000000.<\/p>\n

Gi\u1ea3m n\u00fat Opacity xu\u1ed1ng 50%.<\/p>\n

M\u1edf AutoShapes tr\u00ean b\u1ea3ng Option Panel, ch\u1ecdn bi\u1ec3u t\u01b0\u1ee3ng m\u0169i t\u00ean nh\u01b0 d\u01b0\u1edbi \u0111\u00e2y. Th\u00eam bi\u1ec3u t\u01b0\u1ee3ng \u0111\u00f3 v\u00e0o n\u00fat.<\/p>\n

Ti\u1ebfp theo t\u1ea1o m\u1ed9t thanh nh\u01b0 h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y v\u00e0 fill m\u00e0u #000000.<\/p>\n

Gi\u1ea3m Opacity xu\u1ed1ng 50%.<\/p>\n

T\u1ea1i \u0111\u00e2y b\u1ea1n c\u00f3 th\u1ec3 th\u00eam mi\u00eau t\u1ea3 cho d\u1ef1 \u00e1n c\u1ee7a m\u00ecnh.<\/p>\n

B\u01b0\u1edbc 8: Th\u00eam C\u00e1c D\u00f2ng Ch\u00e0o M\u1eebng Cho Trang Web<\/h2>\n

Th\u00eam c\u00e1c d\u00f2ng ch\u00e0o m\u1eebng v\u00e0 mi\u00eau t\u1ea3 trang web t\u1ea1i \u0111\u00e2y. \u0110\u1ec3 g\u00f5 \u0111\u01b0\u1ee3c ti\u1ebfng Vi\u1ec7t trong Photoshop c\u00f3 d\u1ea5u r\u1ea5t \u0111\u01a1n gi\u1ea3n, ch\u1ec9 c\u1ea7n c\u00e0i \u0111\u1eb7t ph\u1ea7n m\u1ec1m h\u1ed7 tr\u1ee3 g\u00f5 ti\u1ebfng vi\u1ec7t. V\u00e0 l\u1ef1a ch\u1ecdn c\u00e1c ki\u1ec3u font ti\u1ebfng vi\u1ec7t c\u00f3 d\u1ea5u l\u00e0 xong.<\/p>\n

B\u01b0\u1edbc 9: C\u00e1ch thi\u1ebft k\u1ebf 1 website – Ho\u00e0n T\u1ea5t Header<\/h2>\n

\u0110\u1ebfn \u0111\u00e2y g\u1ea7n nh\u01b0 \u0111\u00e3 s\u1eafp ho\u00e0n th\u00e0nh header. \u0110\u1ec3 ho\u00e0n th\u00e0nh header, b\u01b0\u1edbc cu\u1ed1i c\u00f9ng l\u00e0 th\u00eam hi\u1ec7u \u1ee9ng \u0111\u1ed5 b\u00f3ng cho header. T\u1ea1o m\u1ed9t b\u00f3ng nh\u01b0 h\u01b0\u1edbng d\u1eabn \u1edf ph\u1ea7n tr\u00ean b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 brush.<\/p>\n

\u0110\u1ec3 kho\u1ea3ng c\u00e1ch gi\u1eefa header v\u00e0 b\u00f3ng l\u00e0 1 pixel.<\/p>\n

\"c\u00e1ch<\/p>\n

B\u01b0\u1edbc 10: C\u00e1ch thi\u1ebft k\u1ebf 1 website – \u00c1p D\u1ee5ng Gradient Cho Background<\/h2>\n

T\u1ea1o m\u1ed9t m\u00e0u x\u00e1m nh\u1ea1t th\u00e0nh gradient tr\u1eafng s\u1eed d\u1ee5ng c\u00e1c thi\u1ebft l\u1eadp nh\u01b0 d\u01b0\u1edbi \u0111\u00e2y.<\/p>\n

T\u1ea1o m\u1ed9t layer m\u1edbi \u0111\u1eb7t d\u01b0\u1edbi header sau \u0111\u00f3 v\u00e0o \u00e1p d\u1ee5ng gradient tr\u00ean.<\/p>\n

B\u01b0\u1edbc 11: Th\u00eam N\u00fat Slider Xoay<\/h2>\n

T\u1ea1o n\u00fat \u0111i\u1ec1u khi\u1ec3n xoay.<\/p>\n

\u00c1p d\u1ee5ng Inner Shadow tr\u00ean t\u1eebng n\u00fat \u0111\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c c\u00e1c m\u1ee5c \u0111ang ho\u1ea1t \u0111\u1ed9ng tr\u00ean thanh slider.<\/p>\n

B\u01b0\u1edbc 12: T\u1ea1o Content Divider<\/h2>\n

Ch\u1ecdn c\u00f4ng c\u1ee5 Pencil Tool v\u00e0 v\u1ebd 1 \u0111\u01b0\u1eddng k\u1ebb. Ch\u1ecdn m\u00e0u x\u00e1m nh\u1ea1t (m\u00e3 m\u00e0u #aaaaaa).<\/p>\n

S\u1eed d\u1ee5ng gradient mask \u0111\u1ec3 \u1ea9n c\u00e1c c\u1ea1nh.<\/p>\n

B\u01b0\u1edbc 13: C\u00e1ch thi\u1ebft k\u1ebf 1 website – Th\u00eam Main Content (N\u1ed9i Dung Ch\u00ednh)<\/h2>\n

B\u00e2y gi\u1edd nhi\u1ec7m v\u1ee5 c\u1ee7a b\u1ea1n l\u00e0 th\u00eam c\u00e1c ph\u1ea7n n\u1ed9i dung. Layout d\u01b0\u1edbi \u0111\u00e2y \u0111\u01b0\u1ee3c chia l\u00e0m 3 c\u1ed9t b\u1eb1ng nhau v\u00e0 c\u00f3 padding \u1edf gi\u1eefa. \u0110\u1ec3 l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u n\u00e0y b\u1ea1n c\u00f3 th\u1ec3 t\u00ednh to\u00e1n v\u00e0 chia kh\u00f4ng gian c\u00f3 s\u1eb5n th\u00e0nh 3 h\u1ed9p b\u1eb1ng nhau c\u00f3 chi\u1ec1u r\u1ed9ng 25 pixel v\u00e0 c\u00f3 padding \u1edf gi\u1eefa.<\/p>\n

Th\u00eam \u0111\u01b0\u1eddng guide line v\u00e0o c\u00e1c h\u1ed9p. Sau \u0111\u00f3 x\u00f3a c\u00e1c h\u1ed9p n\u00e0y \u0111i v\u00e0 ph\u1ea7n c\u00f2n l\u1ea1i l\u00e0 c\u00e1c c\u1ed9t b\u1eb1ng nhau.<\/p>\n

Th\u00eam m\u1ed9t s\u1ed1 d\u1ecbch v\u1ee5 \u0111\u1eb7c tr\u01b0ng. Th\u1ea3 c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng t\u1eeb b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng Function. Duy tr\u00ec kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c \u0111\u1ed1i t\u01b0\u1ee3ng \u0111\u1ed3ng b\u1ed9.<\/p>\n

Ti\u1ebfp theo t\u1ea1o n\u00fat Read More (\u0111\u1ecdc th\u00eam). Ch\u1ecdn c\u00f4ng c\u1ee5 Rounded Rectangle Tool \u0111\u1ec3 v\u1ebd c\u00e1c h\u00ecnh d\u1ea1ng kh\u00e1c nhau. H\u00e3y ch\u1eafc ch\u1eafn r\u1eb1ng \u0111\u00f3 l\u00e0 layer Shape.<\/p>\n

\u00c1p d\u1ee5ng Gradient Overlay v\u00e0 Stroke cho n\u00fat \u201cRead More\u201d.<\/p>\n

Nh\u00e2n \u0111\u00f4i n\u00fat n\u00e0y.<\/p>\n

B\u1ed5 sung th\u00eam c\u00e1c m\u1ee5c ho\u1ea1t \u0111\u1ed9ng g\u1ea7n \u0111\u00e2y. Trong v\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y l\u00e0 v\u1ebd 3 h\u1ed9p \u0111\u1ec3 th\u00eam 3 h\u00ecnh \u1ea3nh v\u00e0 \u00e1p d\u1ee5ng 3 stroke.<\/p>\n

D\u00e1n c\u00e1c h\u00ecnh \u1ea3nh v\u00e0o c\u00e1c h\u1ed9p.<\/p>\n

T\u1ea1o b\u00f3ng nh\u01b0 \u1edf c\u00e1c b\u01b0\u1edbc tr\u00ean v\u00e0 \u0111\u1eb7t \u1edf c\u00e1c h\u1ed9p.<\/p>\n

Th\u00eam m\u1ed9t s\u1ed1 mi\u00eau t\u1ea3 cho d\u1ef1 \u00e1n.<\/p>\n

B\u00e2y gi\u1edd l\u00e0 b\u01b0\u1edbc t\u1ea1o m\u1ed9t giao di\u1ec7n web chuy\u00ean nghi\u1ec7p b\u1eb1ng Photoshop v\u1edbi c\u00e1c ti\u1ec7n \u00edch m\u1ea1ng x\u00e3 h\u1ed9i nh\u01b0 Twitter Feed. K\u00e9o bi\u1ec3u t\u01b0\u1ee3ng Twitter h\u00ecnh con chim v\u00e0o.<\/p>\n

T\u1ea1o m\u1ed9t th\u00f4ng b\u00e1o Twitter.<\/p>\n

T\u1ea1o m\u1ed9t n\u00fat More Tweets.<\/p>\n

\u00c1p d\u1ee5ng c\u00e1c style d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n

Th\u00eam text, c\u00e1ch ch\u00e8n text hay ch\u00ednh l\u00e0 ch\u00e8n ch\u1eef v\u00e0o \u1ea3nh trong Photoshop \u0111\u01b0\u1ee3c th\u00f4ng qua c\u00f4ng c\u1ee5 Type Tool, khi l\u1ef1a ch\u1ecdn c\u00f4ng c\u1ee5 n\u00e0y c\u00f9ng v\u1edbi vi\u1ec7c ch\u1ecdn font ch\u1eef, k\u00edch th\u01b0\u1edbc (size), c\u00e1c b\u1ea1n b\u1eaft \u0111\u1ea7u ti\u1ebfn h\u00e0nh th\u00eam text hay ch\u00e8n ch\u1eef v\u00e0o \u1ea3nh trong Photoshop<\/p>\n

B\u01b0\u1edbc 14: C\u00e1ch thi\u1ebft k\u1ebf 1 website – T\u1ea1o Footer V\u00e0 Ho\u00e0n T\u1ea5t Qu\u00e1 Tr\u00ecnh<\/h2>\n

T\u1ea1o m\u1ed9t khu v\u1ef1c cho footer v\u00e0 fill khu v\u1ef1c \u0111\u00f3 b\u1eb1ng m\u00e0u x\u00e1m.<\/p>\n

\u00c1p d\u1ee5ng Color Overlay.<\/p>\n

Cu\u1ed1i c\u00f9ng th\u00eam link danh m\u1ee5c footer v\u00e0 th\u00f4ng tin b\u1ea3n quy\u1ec1n. V\u00e0 nh\u01b0 v\u1eady l\u00e0 b\u1ea1n \u0111\u00e3 ho\u00e0n t\u1ea5t qu\u00e1 tr\u00ecnh t\u1ea1o m\u1ed9t giao di\u1ec7n web b\u1eb1ng Photoshop.<\/p>\n","protected":false},"excerpt":{"rendered":"

C\u00e1ch thi\u1ebft k\u1ebf 1 website 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. B\u01b0\u1edbc 5: C\u00e1ch thi\u1ebft k\u1ebf 1 website – Th\u00eam Bi\u1ec3u […]<\/p>\n","protected":false},"author":2,"featured_media":2636,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8],"tags":[247],"class_list":["post-2632","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thiet-ke-website","tag-cach-thiet-ke-1-website"],"jetpack_featured_media_url":"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/05\/cach-thiet-ke-1-website-bang-photoshop-phan-24.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/2632","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=2632"}],"version-history":[{"count":3,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/2632\/revisions"}],"predecessor-version":[{"id":4559,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/2632\/revisions\/4559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media\/2636"}],"wp:attachment":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media?parent=2632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/categories?post=2632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/tags?post=2632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}