{"id":960,"date":"2023-08-03T10:06:08","date_gmt":"2023-08-03T03:06:08","guid":{"rendered":"https:\/\/ladigi.vn\/t\/?p=960"},"modified":"2023-08-03T10:06:08","modified_gmt":"2023-08-03T03:06:08","slug":"huong-dan-tao-layout-trang-web-chuyen-nghiep-bang-photoshop-phan-3","status":"publish","type":"post","link":"https:\/\/ladigi.vn\/t\/huong-dan-tao-layout-trang-web-chuyen-nghiep-bang-photoshop-phan-3\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn t\u1ea1o layout trang web chuy\u00ean nghi\u1ec7p b\u1eb1ng Photoshop (Ph\u1ea7n 3)"},"content":{"rendered":"<div>\n<p>Thi\u1ebft k\u1ebf giao di\u1ec7n \u0111\u1eb9p, s\u1ea1ch s\u1ebd v\u00e0 thi\u1ebft th\u1ef1c l\u00e0 m\u1ed9t ph\u1ea7n thi\u1ebft y\u1ebfu c\u1ee7a c\u00e1c nh\u00e0 thi\u1ebft k\u1ebf Web. Trong h\u01b0\u1edbng d\u1eabn n\u00e0y, ch\u00fang ta s\u1ebd t\u1ea1o ra m\u1ed9t layout (b\u1ed1 c\u1ee5c) web s\u1ea1ch s\u1ebd v\u00e0 chuy\u00ean nghi\u1ec7p b\u1eb1ng Photoshop.<\/p>\n<ul>\n<li>10 v\u1ea5n \u0111\u1ec1 th\u01b0\u1eddng g\u1eb7p trong Photoshop v\u00e0 c\u00e1ch kh\u1eafc ph\u1ee5c c\u01a1 b\u1ea3n<\/li>\n<\/ul>\n<p>Vu vi\u1ebft l\u1ea1i m\u1ed9t ch\u00fat ph\u1ea3i kh\u00f4ng, d\u1ef1a v\u00e0o th\u00f4ng tin m\u00e0 b\u1ea1n \u0111\u00e3 cung c\u1ea5p:<\/p>\n<p><strong>T\u00e0i li\u1ec7u<\/strong><\/p>\n<ul>\n<li>B\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng Function &#8211; wefunction.com<\/li>\n<li>Bi\u1ec3u t\u01b0\u1ee3ng Twitter &#8211; iconeden.com<\/li>\n<li>Ph\u00f4ng Bebas &#8211; dafont.com<\/li>\n<\/ul>\n<p><strong>B\u01b0\u1edbc 1: <\/strong><strong>S\u1eed d\u1ee5ng <\/strong><strong>B\u1ea3n v\u1ebd \u1ea3o<\/strong><\/p>\n<p>Tr\u01b0\u1edbc khi b\u1eaft \u0111\u1ea7u thi\u1ebft k\u1ebf, 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 bi\u1ebfn ch\u00fang th\u00e0nh \u00fd t\u01b0\u1edfng v\u1ec1 b\u1ed1 c\u1ee5c. S\u1eed d\u1ee5ng mockup v\u00e0 khung d\u00e2y l\u00e0 m\u1ed9t ph\u01b0\u01a1ng ph\u00e1p r\u1ea5t h\u1eefu \u00edch \u0111\u1ec3 t\u1ea1o ra b\u1ed1 c\u1ee5c linh ho\u1ea1t v\u00e0 \u0111a d\u1ea1ng.<\/p>\n<p>T\u1ea1i \u0111\u00e2y ch\u00fang ta s\u1ebd s\u1eed d\u1ee5ng c\u00e1c t\u00f4ng m\u00e0u x\u00e1m. B\u1eb1ng c\u00e1ch n\u00e0y, ch\u00fang ta s\u1ebd lo\u1ea1i b\u1ecf m\u00e0u s\u1eafc kh\u1ecfi c\u1ea3nh v\u1eadt \u0111\u1ec3 t\u1eadp trung v\u00e0o vi\u1ec7c b\u1ed1 tr\u00ed t\u1ed5ng th\u1ec3 v\u00e0 tr\u00e1nh l\u00e0m m\u1ea5t tr\u1eadt t\u1ef1 m\u00e0u s\u1eafc. \u0110i\u1ec1u n\u00e0y gi\u00fap ch\u00fang ta d\u1ec5 d\u00e0ng thay \u0111\u1ed5i v\u00e0 s\u1eafp x\u1ebfp l\u1ea1i m\u1ecdi th\u1ee9. M\u1ed9t maquette (b\u1ea3n m\u00f4 ph\u1ecfng) cung c\u1ea5p \u0111\u1ea7y \u0111\u1ee7 chi ti\u1ebft theo \u00fd mu\u1ed1n c\u1ee7a b\u1ea1n.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" alt=\"M\u1eabu Mockup cho b\u1ed1 c\u1ee5c trang web\" width=\"480\" height=\"600\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-1.jpg\" title=\"\"><\/p>\n<p><strong>B\u01b0\u1edbc 2: C\u00e0i \u0111\u1eb7t Canvas<\/strong><\/p>\n<p>\u1ede \u0111\u00e2y, ch\u00fang ta \u0111\u00e3 c\u00f3 m\u1ed9t b\u1ea3n thi\u1ebft k\u1ebf chi ti\u1ebft (blueprint) cho b\u1ed1 c\u1ee5c trang web. B\u00e2y gi\u1edd, h\u00e3y c\u00f9ng nhau t\u1ea1o l\u1ea1i n\u00f3. H\u00e3y t\u1ea1o m\u1ed9t t\u00e0i li\u1ec7u m\u1edbi v\u1edbi k\u00edch th\u01b0\u1edbc 1200 x 1500 pixel.<\/p>\n<p><img decoding=\"async\" alt=\"T\u1ea1o t\u00e0i li\u1ec7u m\u1edbi\" width=\"598\" height=\"365\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-2.jpg\" title=\"\"><\/p>\n<p>\u1ede \u0111\u00e2y, ch\u00fang ta c\u1ea7n s\u1eed d\u1ee5ng layout c\u00f3 chi\u1ec1u r\u1ed9ng 960 pixel, \u0111\u1ec3 l\u00e0m \u0111i\u1ec1u n\u00e0y, ch\u00fang ta c\u1ea7n x\u00e1c \u0111\u1ecbnh khu v\u1ef1c l\u00e0m vi\u1ec7c b\u1eb1ng c\u00e1ch th\u00eam m\u1ed9t \u0111\u01b0\u1eddng vi\u1ec1n. Nh\u1ea5n ph\u00edm <strong>Ctrl + A<\/strong> \u0111\u1ec3 ch\u1ecdn to\u00e0n b\u1ed9 n\u1ed9i dung t\u00e0i li\u1ec7u.<\/p>\n<p><img decoding=\"async\" alt=\"Nh\u1ea5n Ctrl + A \u0111\u1ec3 ch\u1ecdn to\u00e0n b\u1ed9 t\u00e0i li\u1ec7u \" width=\"598\" height=\"575\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-3.jpg\" title=\"\"><\/p>\n<p>Chuy\u1ec3n \u0111\u1ebfn Select &gt; Transform Selection, thu nh\u1ecf v\u00f9ng ch\u1ecdn xu\u1ed1ng th\u00e0nh chi\u1ec1u r\u1ed9ng 960 pixel. \u0110\u00f3 l\u00e0 khu v\u1ef1c l\u00e0m vi\u1ec7c c\u1ee7a b\u1ed1 c\u1ee5c.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Thu nh\u1ecf v\u00f9ng ch\u1ecdn xu\u1ed1ng chi\u1ec1u r\u1ed9ng 960 pixel\" width=\"598\" height=\"608\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-4.jpg\" title=\"\"><\/p>\n<p>B\u1ed5 sung h\u01b0\u1edbng d\u1eabn v\u00e0o v\u00f9ng ch\u1ecdn l\u1ef1a.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Th\u00eam \u0111\u01b0\u1eddng h\u01b0\u1edbng d\u1eabn cho v\u00f9ng ch\u1ecdn\" width=\"598\" height=\"575\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-5.jpg\" title=\"\"><\/p>\n<p>Th\u00eam m\u1ed9t kho\u1ea3ng c\u00e1ch gi\u1eefa bi\u00ean gi\u1edbi v\u00e0 n\u1ed9i dung v\u00e0 sau \u0111\u00f3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc v\u00f9ng \u0111\u00e3 ch\u1ecdn l\u00ean 920 pixel. Kho\u1ea3ng c\u00e1ch n\u00e0y s\u1ebd l\u00e0 20 pixel m\u1ed7i b\u00ean, t\u1ed5ng c\u1ed9ng l\u00e0 40 pixel.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea1o kho\u1ea3ng c\u00e1ch gi\u1eefa \u0111\u01b0\u1eddng bi\u00ean v\u00e0 n\u1ed9i dung\" width=\"598\" height=\"575\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-6.jpg\" title=\"\"><\/p>\n<p>Th\u00eam \u0111\u01b0\u1eddng d\u1eabn v\u00e0o ph\u1ea1m vi l\u1ef1a ch\u1ecdn.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Th\u00eam \u0111\u01b0\u1eddng d\u1eabn cho v\u00f9ng l\u1ef1a ch\u1ecdn m\u1edbi \" width=\"598\" height=\"575\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-7.jpg\" title=\"\"><\/p>\n<p>B\u01b0\u1edbc 3: T\u1ea1o t\u1ef1a \u0111\u1ec1<\/p>\n<p>T\u1ea1o ti\u00eau \u0111\u1ec1 layout v\u1edbi chi\u1ec1u cao 465 pixel<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea1o ti\u00eau \u0111\u1ec1 v\u1edbi chi\u1ec1u cao 465 pixel\" width=\"598\" height=\"397\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-8.jpg\" title=\"\"><\/p>\n<p>S\u1eed d\u1ee5ng m\u00e0u x\u00e1m \u0111\u1ec3 l\u00e0m vi\u1ec1n cho v\u00f9ng l\u1ef1a ch\u1ecdn n\u00e0y, sau \u0111\u00f3 \u00e1p d\u1ee5ng c\u00e1c Layer Styles \u0111\u1ec3 th\u00eam m\u00e0u s\u1eafc v\u00e0 gradient. \u00c1p d\u1ee5ng phong c\u00e1ch n\u00e0y trong to\u00e0n b\u1ed9 qu\u00e1 tr\u00ecnh thi\u1ebft k\u1ebf \u0111\u1ec3 gi\u1eef cho h\u1ec7 th\u1ed1ng ph\u00e2n c\u1ea5p th\u1ecb gi\u00e1c c\u1ee7a b\u1ea3n thi\u1ebft k\u1ebf \u0111\u01b0\u1ee3c th\u1ed1ng nh\u1ea5t.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Ph\u1ee7 v\u00f9ng l\u1ef1a ch\u1ecdn v\u1edbi m\u00e0u x\u00e1m\" width=\"598\" height=\"397\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-9.jpg\" title=\"\"><\/p>\n<p>Th\u00eam Gradient v\u00e0o ti\u00eau \u0111\u1ec1 b\u1eb1ng c\u00e1ch nh\u1ea5p \u0111\u00fap v\u00e0o h\u00ecnh thu nh\u1ecf c\u1ee7a l\u1edbp v\u00e0 ch\u1ecdn &#8220;Gradient Overlay&#8221;. T\u1ea1o 2 m\u00e0u gradient b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e0i \u0111\u1eb7t nh\u01b0 b\u00ean d\u01b0\u1edbi.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea1o 2 m\u00e0u gradient nh\u01b0 h\u00ecnh \" width=\"516\" height=\"600\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-10.jpg\" title=\"\"><\/p>\n<p>Ch\u00fang ta nh\u1eadn \u0111\u01b0\u1ee3c k\u1ebft qu\u1ea3 sau \u0111\u00e2y:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"H\u00ecnh \u1ea3nh sau khi gradient m\u00e0u\" width=\"598\" height=\"397\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-11.jpg\" title=\"\"><\/p>\n<p>Sau n\u00e0y, c\u1ea7n th\u00eam m\u1ed9t \u0111i\u1ec3m nh\u1ea5n cho ti\u00eau \u0111\u1ec1. T\u1ea1o m\u1ed9t l\u1edbp m\u1edbi b\u1eb1ng c\u00e1ch nh\u1ea5n t\u1ed5 h\u1ee3p ph\u00edm \u1ed0ng k\u00ednh + Alt + Shift + N. Ch\u1ecdn c\u1ecd M\u1ec1m v\u1edbi \u0111\u01b0\u1eddng k\u00ednh 600px v\u00e0 m\u00e0u #19535a, sau \u0111\u00f3 ch\u1ec9 c\u1ea7n nh\u1ea5p m\u1ed9t l\u1ea7n v\u00e0o gi\u1eefa ti\u00eau \u0111\u1ec1 \u0111\u1ec3 t\u1ea1o \u0111i\u1ec3m nh\u1ea5n.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea1o \u0111i\u1ec3m n\u1ed5i b\u1eadt cho ti\u00eau \u0111\u1ec1\" width=\"598\" height=\"397\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-12.jpg\" title=\"\"><\/p>\n<p>Ch\u1ecdn ph\u1ea7n ph\u00eda tr\u00ean c\u00f3 \u0111\u1ed9 cao l\u00e0 110 pixel.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Ch\u1ecdn ph\u1ea7n tr\u00ean \u0111\u1ea7u ti\u00eau \u0111\u1ec1 v\u1edbi chi\u1ec1u cao 110 pixel\" width=\"598\" height=\"397\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-13.jpg\" title=\"\"><\/p>\n<p>B\u1ea5m v\u00e0o <strong>X\u00f3a <\/strong>\u0111\u1ec3 x\u00f3a ph\u1ea7n \u0111\u00e3 \u0111\u01b0\u1ee3c ch\u1ecdn.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"X\u00f3a ph\u1ea7n \u0111\u00e3 ch\u1ecdn\" width=\"598\" height=\"397\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-14.jpg\" title=\"\"><\/p>\n<p>R\u00fat g\u1ecdn n\u00f3 theo ph\u01b0\u01a1ng d\u1ecdc b\u1eb1ng c\u00e1ch nh\u1ea5n t\u1ed5 h\u1ee3p ph\u00edm <strong>Ctrl + T<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Thu h\u1eb9p theo chi\u1ec1u d\u1ecdc \" width=\"598\" height=\"732\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-15.jpg\" title=\"\"><\/p>\n<p>\u0110\u1ec3 \u0111\u1ea3m b\u1ea3o ph\u1ea7n n\u1ed5i b\u1eadt \u1edf v\u1ecb tr\u00ed trung t\u00e2m ti\u00eau \u0111\u1ec1, h\u00e3y ch\u1ecdn l\u1edbp ti\u00eau \u0111\u1ec1 v\u00e0 l\u1edbp n\u1ed5i b\u1eadt, sau \u0111\u00f3 nh\u1ea5n &#8220;V&#8221; \u0111\u1ec3 chuy\u1ec3n sang c\u00f4ng c\u1ee5 &#8220;Move Tool&#8221;. Tr\u00ean b\u1ea3ng &#8220;Options Panel&#8221;, ch\u1ecdn n\u00fat &#8220;Align Horizontal Centers&#8221;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\u0110i\u1ec1u ch\u1ec9nh ph\u1ea7n n\u1ed5i b\u1eadt \u1edf gi\u1eefa trung t\u00e2m ti\u00eau \u0111\u1ec1\" width=\"598\" height=\"504\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-16.jpg\" title=\"\"><\/p>\n<p>H\u00e3y t\u1ea1o m\u1ed9t l\u1edbp m\u1edbi v\u00e0 v\u1ebd m\u1ed9t \u0111\u01b0\u1eddng n\u1ed5i b\u1eadt v\u1edbi chi\u1ec1u d\u00e0i 1 pixel b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 B\u00fat ch\u00ec (Pencil Tool) v\u1edbi m\u00e0u #01bfd2.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"V\u1ebd m\u1ed9t \u0111\u01b0\u1eddng n\u1ed5i b\u1eadt 1 px\" width=\"598\" height=\"259\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-17.jpg\" title=\"\"><\/p>\n<p>\u0110\u1ec3 \u1ea9n c\u00e1c c\u1ea1nh b\u1eb1ng m\u1eb7t n\u1ea1 gradient, h\u00e3y s\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 Gradient Tool v\u00e0 t\u1ea1o m\u1ed9t gradient nh\u01b0 \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh trong b\u1ea3ng t\u00f9y ch\u1ecdn.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\u1ea8n c\u00e1c c\u1ea1nh b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng m\u1eb7t n\u1ea1 gradient\" width=\"421\" height=\"461\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-18.jpg\" title=\"\"><\/p>\n<p>S\u1eed d\u1ee5ng c\u00e1c gradient \u0111\u00e3 c\u00f3.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"H\u00ecnh \u1ea3nh sau khi \u00e1p d\u1ee5ng c\u00e1c gradient tr\u00ean\" width=\"598\" height=\"329\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-19.jpg\" title=\"\"><\/p>\n<p><strong>B\u01b0\u1edbc 4: T\u1ea1o m\u1eabu v\u1eadt li\u1ec7u<\/strong><\/p>\n<p>B\u00e2y gi\u1edd h\u00e3y t\u1ea1o m\u1ed9t m\u1eabu ki\u1ec3m tra \u0111\u01a1n gi\u1ea3n v\u00e0 \u00e1p d\u1ee5ng cho ti\u00eau \u0111\u1ec1. Ch\u1ecdn c\u00f4ng c\u1ee5 B\u00fat, s\u1eed d\u1ee5ng c\u1ecd c\u00f3 k\u00edch th\u01b0\u1edbc l\u00e0 2 pixel v\u00e0 th\u00eam hai ch\u1ea5m vu\u00f4ng ch\u1ea1m nhau \u1edf m\u1ed7i g\u00f3c. T\u1eaft n\u1ec1n v\u00e0 ch\u1ecdn c\u00e1c ch\u1ea5m sau \u0111\u00f3 ch\u1ecdn Ch\u1ec9nh s\u1eeda &gt; X\u00e1c \u0111\u1ecbnh m\u1eabu.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea1o m\u1eabu ki\u1ec3m tra \u0111\u01a1n gi\u1ea3n \" width=\"598\" height=\"498\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-20.jpg\" title=\"\"><\/p>\n<p>T\u1ea1o m\u1ed9t class m\u1edbi v\u00e0 \u0111\u1eb7t n\u00f3 d\u01b0\u1edbi l\u1edbp n\u1ed5i b\u1eadt \u1edf ph\u1ea7n tr\u00ean. Ch\u1ecdn khu v\u1ef1c mu\u1ed1n \u00e1p d\u1ee5ng m\u1eabu, nh\u1ea5n Shift + F5 \u0111\u1ec3 m\u1edf h\u1ed9p tho\u1ea1i Fill. Ch\u1ecdn m\u1eabu v\u1eeba t\u1ea1o v\u00e0 nh\u1ea5n OK.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Ch\u1ecdn l\u1edbp m\u1edbi cho m\u1eabu v\u1eeba t\u1ea1o\" width=\"598\" height=\"715\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-21.jpg\" title=\"\"><\/p>\n<p>S\u1eed d\u1ee5ng m\u1eabu v\u1eeba t\u1ea1o \u0111\u1ec3 ph\u1ee7 v\u00f9ng l\u1ef1a ch\u1ecdn.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Ph\u1ee7 l\u1edbp m\u1edbi v\u1edbi m\u1eabu v\u1eeba t\u1ea1o\" width=\"598\" height=\"397\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-22.jpg\" title=\"\"><\/p>\n<p>Ph\u1ed1i tr\u1ed9n m\u1eabu m\u1ed9t c\u00e1ch c\u00e2n \u0111\u1ed1i v\u1edbi ti\u00eau \u0111\u1ec1. Th\u00eam m\u1ed9t <strong>Layer Mask<\/strong> v\u00e0o l\u1edbp m\u1eabu n\u00e0y. Ch\u1ecdn c\u1ecd <strong>M\u1ec1m<\/strong> l\u1edbn v\u1edbi m\u00e0u #ffffff. Gi\u1ea3m \u0111\u1ed9 <strong>\u0110\u1ed9 m\u1edd<\/strong> xu\u1ed1ng c\u00f2n kho\u1ea3ng <strong>60%<\/strong> v\u00e0 s\u01a1n. N\u1ebfu th\u1ea5y qu\u00e1 m\u1ea1nh, b\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh \u0111\u1ed9 m\u1edd c\u1ee7a l\u1edbp n\u00e0y.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Pha tr\u1ed9n m\u1eabu m\u1ed9t c\u00e1ch h\u00e0i h\u00f2a v\u1edbi ti\u00eau \u0111\u1ec1\" width=\"598\" height=\"703\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-23.jpg\" title=\"\"><\/p>\n<p>K\u1ebft qu\u1ea3 m\u00e0 ch\u00fang ta c\u00f3 l\u00e0 nh\u01b0 sau:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"H\u00ecnh \u1ea3nh sau khi pha tr\u1ed9n m\u1eabu v\u1edbi ti\u00eau \u0111\u1ec1\" width=\"598\" height=\"462\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-24.jpg\" title=\"\"><\/p>\n<p>B\u01b0\u1edbc 5: Th\u00eam logo<\/p>\n<p>Sau khi ho\u00e0n th\u00e0nh n\u1ec1n, ti\u1ebfp theo l\u00e0 b\u01b0\u1edbc t\u1ea1o logo. Tr\u01b0\u1edbc khi th\u00eam ki\u1ec3u, h\u00e3y b\u1ed5 sung m\u1ed9t \u0111i\u1ec3m nh\u1ea5n ph\u00eda sau logo. H\u00e3y ch\u1ecdn c\u1ecd <strong>M\u1ec1m<\/strong> v\u1edbi m\u00e0u #19535a v\u00e0 th\u00eam m\u1ed9t ch\u1ea5m.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea1o m\u1ed9t \u0111i\u1ec3m n\u1ed5i b\u1eadt sau logo\" width=\"598\" height=\"575\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-25.jpg\" title=\"\"><\/p>\n<p>Vi\u1ebft ch\u1eef, s\u1eed d\u1ee5ng ph\u00f4ng ch\u1eef m\u00e0 b\u1ea1n y\u00eau th\u00edch, trong v\u00ed d\u1ee5 n\u00e0y s\u1eed d\u1ee5ng ph\u00f4ng ch\u1eef &#8220;Bebas&#8221;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"G\u00f5 ch\u1eef t\u1ea1o logo\" width=\"598\" height=\"369\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-26.jpg\" title=\"\"><\/p>\n<p>S\u1eed d\u1ee5ng c\u00e1c hi\u1ec7u \u1ee9ng tinh vi cho bi\u1ec3u tr\u01b0ng.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\u00c1p d\u1ee5ng hi\u1ec7u \u1ee9ng cho logo trong c\u1eeda s\u1ed5 Drop Shadow\" width=\"594\" height=\"416\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-27.jpg\" title=\"\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Th\u00eam hi\u1ec7u \u1ee9ng cho logo trong ph\u1ea7n Gradient Overlay\" width=\"444\" height=\"600\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-28.jpg\" title=\"\"><\/p>\n<p><b>B\u01b0\u1edbc 6: Th\u00eam thanh \u0111i\u1ec1u h\u01b0\u1edbng<\/b> c\u00f3 th\u1ec3 vi\u1ebft l\u1ea1i th\u00e0nh:<\/p>\n<p><b>B\u01b0\u1edbc 6: T\u1ea1o thanh \u0111i\u1ec1u h\u01b0\u1edbng<\/b><br \/>\n<b>B\u01b0\u1edbc 6: G\u1eafn thanh \u0111i\u1ec1u h\u01b0\u1edbng<\/b><br \/>\n<b>B\u01b0\u1edbc 6: Th\u00eam thanh \u0111i\u1ec1u h\u01b0\u1edbng v\u00e0o<\/b><br \/>\n<b>B\u01b0\u1edbc 6: \u0110\u1eb7t thanh \u0111i\u1ec1u h\u01b0\u1edbng<\/b><\/p>\n<p>B\u1ed5 sung th\u00eam c\u00e1c li\u00ean k\u1ebft chuy\u1ec3n h\u01b0\u1edbng.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Th\u00eam c\u00e1c li\u00ean k\u1ebft \u0111i\u1ec1u h\u01b0\u1edbng\" width=\"598\" height=\"362\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-29.jpg\" title=\"\"><\/p>\n<p>T\u1ea1o m\u1ed9t n\u00fat \u0111i\u1ec1u h\u01b0\u1edbng b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 <strong>Rectangular Marquee Tool<\/strong>, ch\u1ecdn h\u00ecnh d\u1ea1ng v\u00e0 \u0111i\u1ec1n m\u00e0u s\u1eafc b\u00ean trong. Sau \u0111\u00f3, thi\u1ebft l\u1eadp Opacity Fill xu\u1ed1ng m\u1ee9c 0 \u0111\u1ec3 l\u00e0m m\u1edd n\u00fat \u0111i\u1ec1u h\u01b0\u1edbng.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea1o n\u00fat \u0111i\u1ec1u h\u01b0\u1edbng\" width=\"598\" height=\"249\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-31.jpg\" title=\"\"><\/p>\n<p>B\u1ea5m \u0111\u00fap v\u00e0o h\u00ecnh thu nh\u1ecf c\u1ee7a l\u1edbp, ch\u1ecdn <strong>\u0110\u00e8 l\u00ean Gradient<\/strong> v\u00e0 \u00e1p d\u1ee5ng v\u1edbi c\u1ea5u h\u00ecnh nh\u01b0 sau.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Thi\u1ebft l\u1eadp Gradient Overlay cho n\u00fat \u0111i\u1ec1u h\u01b0\u1edbng\" width=\"445\" height=\"600\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-32.jpg\" title=\"\"><\/p>\n<p><strong>B\u01b0\u1edbc 7: Thanh cu\u1ed9n n\u1ed9i dung<\/strong><\/p>\n<p>Ch\u1ecdn m\u1ed9t v\u00f9ng c\u00f3 k\u00edch th\u01b0\u1edbc l\u00e0 580 x 295 pixel.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Ch\u1ecdn m\u1ed9t v\u00f9ng k\u00edch th\u01b0\u1edbc 580 x 295 px\" width=\"598\" height=\"397\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-33.jpg\" title=\"\"><\/p>\n<p>S\u01a1n v\u00f9ng n\u00e0y b\u1eb1ng m\u00e0u x\u00e1m.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Ph\u1ee7 v\u00f9ng ch\u1ecdn v\u1edbi t\u00f4ng m\u00e0u x\u00e1m\" width=\"598\" height=\"397\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-34.jpg\" title=\"\"><\/p>\n<p>H\u00e3y t\u1ea3i \u1ea3nh l\u00ean l\u1edbp m\u00e0 ch\u00fang ta \u0111\u00e3 t\u1ea1o tr\u01b0\u1edbc \u0111\u00f3.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea3i \u1ea3nh l\u00ean l\u1edbp v\u1eeba t\u1ea1o\" width=\"598\" height=\"397\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-35.jpg\" title=\"\"><\/p>\n<p>B\u00e2y gi\u1edd, ch\u00fang ta s\u1ebd th\u00eam hi\u1ec7u \u1ee9ng b\u00f3ng v\u00e0o thanh tr\u01b0\u1ee3t. H\u00e3y t\u1ea1o m\u1ed9t l\u1edbp m\u1edbi v\u00e0 ch\u1ecdn c\u00f4ng c\u1ee5 &#8220;C\u1ecd&#8221; (Brush Tool). \u0110\u1eb7t k\u00edch th\u01b0\u1edbc c\u1ecd l\u00ean t\u1edbi 400 pixel. Ti\u1ebfp theo, h\u00e3y m\u1edf b\u1ea3ng &#8220;C\u1ecd&#8221; (Brushes) v\u00e0 gi\u1ea3m gi\u00e1 tr\u1ecb &#8220;Roundness&#8221; v\u1edbi c\u00e1c c\u00e0i \u0111\u1eb7t d\u01b0\u1edbi \u0111\u00e2y.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Thi\u1ebft l\u1eadp \u0111\u1ed9 Roundness\" width=\"375\" height=\"443\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-36.jpg\" title=\"\"><\/p>\n<p>S\u1eed d\u1ee5ng c\u1ecd m\u00e0u <strong>#000000<\/strong> v\u00e0 th\u00eam m\u1ed9t v\u1ea1ch m\u00e0u \u0111en.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Th\u00eam m\u1ed9t d\u1ea3i m\u00e0u \u0111en\" width=\"598\" height=\"250\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-37.jpg\" title=\"\"><\/p>\n<p>S\u1eed d\u1ee5ng <strong>Gaussian Blur<\/strong> \u0111\u1ec3 l\u00e0m nh\u00f2e c\u00e1c \u0111\u01b0\u1eddng vi\u1ec1n.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"S\u1eed d\u1ee5ng Gaussian Blur \u0111\u1ec3 l\u00e0m m\u1ec1m c\u1ea1nh\" width=\"598\" height=\"475\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-38.jpg\" title=\"\"><\/p>\n<p>Lo\u1ea1i b\u1ecf ph\u1ea7n th\u1ea5p nh\u1ea5t c\u1ee7a qu\u1ea3 b\u00f3ng.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Ch\u1ecdn ph\u1ea7n d\u01b0\u1edbi c\u00f9ng v\u00e0 x\u00f3a n\u00f3\" width=\"598\" height=\"474\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-39.jpg\" title=\"\"><\/p>\n<p>\u0110\u1eb7t l\u1ea1i v\u1ecb tr\u00ed c\u1ee7a qu\u1ea3 b\u00f3ng ngay tr\u00ean thanh tr\u01b0\u1ee3t.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\u0110\u1ecbnh l\u1ea1i v\u1ecb tr\u00ed b\u00f3ng ngay tr\u00ean thanh tr\u01b0\u1ee3t\" width=\"598\" height=\"250\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-40.jpg\" title=\"\"><\/p>\n<p>Ti\u1ebfp \u0111\u00f3, thu h\u1eb9p thanh tr\u01b0\u1ee3t theo chi\u1ec1u d\u1ecdc v\u00e0 c\u0103n gi\u1eefa. Ch\u1ecdn c\u1ea3 hai l\u1edbp v\u00e0 tr\u00ean b\u1ea3ng <strong>T\u00f9y ch\u1ecdn<\/strong> nh\u1ea5n v\u00e0o n\u00fat <strong>C\u0103n gi\u1eefa theo chi\u1ec1u ngang<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Ch\u1ecdn n\u00fat Align Horizontal Centers\" width=\"598\" height=\"250\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-41.jpg\" title=\"\"><\/p>\n<p>Sao ch\u00e9p l\u1edbp b\u00f3ng n\u00e0y v\u00e0 xoay theo chi\u1ec1u d\u1ecdc, \u0111\u1eb7t n\u00f3 v\u00e0o ph\u1ea7n d\u01b0\u1edbi c\u00f9ng c\u1ee7a thanh tr\u01b0\u1ee3t.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Sao ch\u00e9p, xoay l\u1edbp b\u00f3ng v\u00e0 \u0111\u1eb7t d\u01b0\u1edbi c\u00f9ng thanh tr\u01b0\u1ee3t\" width=\"598\" height=\"250\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-42.jpg\" title=\"\"><\/p>\n<p>T\u1ea1o n\u00fat \u0111i\u1ec1u khi\u1ec3n thanh tr\u01b0\u1ee3t b\u1eb1ng c\u00f4ng c\u1ee5 `<strong>Marquee Rectangular<\/strong>` v\u00e0 ph\u1ee7 v\u1edbi m\u00e0u `#<strong>000000<\/strong>`. &#8211;&gt; T\u1ea1o n\u00fat \u0111i\u1ec1u khi\u1ec3n thanh tr\u01b0\u1ee3t b\u1eb1ng c\u00f4ng c\u1ee5 &#8220;Marquee Rectangular&#8221; v\u00e0 s\u01a1n m\u00e0u #000000.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea1o n\u00fat \u0111i\u1ec1u khi\u1ec3n thanh tr\u01b0\u1ee3t\" width=\"598\" height=\"347\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-43.jpg\" title=\"\"><\/p>\n<p>D\u00f9ng t\u1eeb kh\u00e1c \u0111\u1ec3 tr\u00e1nh s\u1eed d\u1ee5ng ng\u00f4n ng\u1eef HTML:<\/p>\n<p>Gi\u1ea3m \u0111\u1ed9 m\u1edd xu\u1ed1ng c\u00f2n 50%.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Gi\u1ea3m Opacity xu\u1ed1ng 50% cho n\u00fat thanh tr\u01b0\u1ee3t\" width=\"598\" height=\"347\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-44.jpg\" title=\"\"><\/p>\n<p>B\u01b0\u1edbc \u0111\u1ea7u ti\u00ean l\u00e0 m\u1edf h\u00ecnh d\u1ea1ng t\u1ef1 \u0111\u1ed9ng trong b\u1ea3ng <strong>Options Panel<\/strong>. Sau \u0111\u00f3, ch\u1ecdn m\u0169i t\u00ean theo h\u00ecnh minh h\u1ecda v\u00e0 th\u00eam n\u00f3 v\u00e0o n\u00fat.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Ch\u1ecdn n\u00fat m\u0169i t\u00ean\" width=\"598\" height=\"347\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-45.jpg\" title=\"\"><\/p>\n<p>T\u1ea1o m\u1ed9t khung v\u1edbi m\u00e0u #000000.<\/p>\n<p>Vi\u1ec7c t\u1ea1o m\u1ed9t khung v\u1edbi m\u00e0u #000000 l\u00e0m nh\u01b0 sau:<br \/>\n1. \u0110\u1ecbnh d\u1ea1ng khung b\u1eb1ng m\u00e3 HTML:<\/p>\n<div style=\"border: 1px solid #000000;width: 300px;height: 200px\"><\/div>\n<p>2. Cung c\u1ea5p m\u00e3 CSS \u0111\u1ec3 \u0111\u1eb7t m\u00e0u cho khung:<\/p>\n<p>     div {<br \/>\n       background-color: #000000;<br \/>\n     }<\/p>\n<p>3. G\u1ed9p c\u00e1c \u0111o\u1ea1n m\u00e3 trong m\u1ed9t file HTML ho\u1eb7c s\u1eed d\u1ee5ng trong tr\u00ecnh so\u1ea1n th\u1ea3o trang web \u0111\u1ec3 xem k\u1ebft qu\u1ea3 khung m\u00e0u #000000.<\/p>\n<p>L\u01b0u \u00fd: M\u00e3 m\u00e0u #000000 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi m\u00e0u \u0111en, c\u00f2n m\u00e3 #FFFFFF t\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi m\u00e0u tr\u1eafng. B\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i m\u00e3 m\u00e0u \u0111\u1ec3 t\u1ea1o c\u00e1c khung v\u1edbi m\u00e0u s\u1eafc kh\u00e1c nhau.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea1o m\u1ed9t khung v\u1edbi m\u00e0u #000000\" width=\"598\" height=\"347\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-46.jpg\" title=\"\"><\/p>\n<p>Gi\u1ea3m \u0111\u1ed9 m\u1edd xu\u1ed1ng c\u00f2n 50%.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\u0110\u1ec3 Opacity v\u1edbi gi\u00e1 tr\u1ecb 50% cho khung n\u00e0y\" width=\"598\" height=\"347\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-47.jpg\" title=\"\"><\/p>\n<p>H\u00e3y m\u1edf r\u1ed9ng m\u00f4 t\u1ea3 cho d\u1ef1 \u00e1n.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Th\u00eam m\u00f4 t\u1ea3 cho d\u1ef1 \u00e1n\" width=\"598\" height=\"347\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-48.jpg\" title=\"\"><\/p>\n<p>B\u01b0\u1edbc 8: Th\u00eam v\u00e0i d\u00f2ng ch\u00e0o m\u1eebng<\/p>\n<p>Xin ch\u00e0o v\u00e0 hoan ngh\u00eanh \u0111\u1ebfn v\u1edbi trang web n\u00e0y!<\/p>\n<p>Ch\u00fang t\u00f4i r\u1ea5t vui m\u1eebng ch\u00e0o \u0111\u00f3n b\u1ea1n \u0111\u1ebfn v\u1edbi trang web c\u1ee7a ch\u00fang t\u00f4i. \u0110\u00e2y l\u00e0 m\u1ed9t n\u01a1i tuy\u1ec7t v\u1eddi \u0111\u1ec3 t\u00ecm hi\u1ec3u v\u00e0 kh\u00e1m ph\u00e1 nhi\u1ec1u th\u00f4ng tin h\u1eefu \u00edch v\u1ec1 nhi\u1ec1u l\u0129nh v\u1ef1c kh\u00e1c nhau.<\/p>\n<p>Trang web n\u00e0y \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf v\u1edbi m\u1ee5c \u0111\u00edch \u0111em l\u1ea1i s\u1ef1 ti\u1ec7n l\u1ee3i v\u00e0 \u0111\u00e1p \u1ee9ng nhu c\u1ea7u t\u00ecm ki\u1ebfm c\u1ee7a b\u1ea1n. B\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng t\u00ecm th\u1ea5y th\u00f4ng tin, b\u00e0i vi\u1ebft h\u1eefu \u00edch v\u00e0 ngu\u1ed3n t\u00e0i li\u1ec7u \u0111a d\u1ea1ng v\u1ec1 nhi\u1ec1u ch\u1ee7 \u0111\u1ec1 kh\u00e1c nhau. B\u00ean c\u1ea1nh \u0111\u00f3, ch\u00fang t\u00f4i c\u0169ng cung c\u1ea5p c\u00e1c c\u00f4ng c\u1ee5 v\u00e0 t\u00ednh n\u0103ng t\u1ed1i \u01b0u \u0111\u1ec3 gi\u00fap b\u1ea1n c\u00f3 tr\u1ea3i nghi\u1ec7m t\u1ed1t nh\u1ea5t tr\u00ean trang web n\u00e0y.<\/p>\n<p>Trang web c\u1ee7a ch\u00fang t\u00f4i c\u00f3 giao di\u1ec7n th\u00e2n thi\u1ec7n v\u00e0 d\u1ec5 s\u1eed d\u1ee5ng. B\u1ea1n s\u1ebd d\u1ec5 d\u00e0ng \u0111i\u1ec1u h\u01b0\u1edbng v\u00e0 t\u00ecm th\u1ea5y nh\u1eefng g\u00ec b\u1ea1n \u0111ang t\u00ecm ki\u1ebfm ch\u1ec9 sau v\u00e0i c\u00fa nh\u1ea5p chu\u1ed9t. \u0110\u1ed3ng th\u1eddi, trang web c\u0169ng \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o t\u1ed1c \u0111\u1ed9 truy c\u1eadp nhanh ch\u00f3ng v\u00e0 ph\u1ea3n h\u1ed3i m\u01b0\u1ee3t m\u00e0 tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb, b\u1ea5t k\u1ec3 b\u1ea1n s\u1eed d\u1ee5ng m\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n, \u0111i\u1ec7n tho\u1ea1i di \u0111\u1ed9ng hay m\u00e1y t\u00ednh b\u1ea3ng.<\/p>\n<p>V\u1edbi n\u1ed7 l\u1ef1c kh\u00f4ng ng\u1eebng c\u1ea3i thi\u1ec7n v\u00e0 cung c\u1ea5p n\u1ed9i dung ch\u1ea5t l\u01b0\u1ee3ng, ch\u00fang t\u00f4i hy v\u1ecdng r\u1eb1ng trang web n\u00e0y s\u1ebd mang l\u1ea1i cho b\u1ea1n nh\u1eefng tr\u1ea3i nghi\u1ec7m th\u00fa v\u1ecb v\u00e0 h\u1eefu \u00edch. Mong r\u1eb1ng b\u1ea1n s\u1ebd t\u1eadn h\u01b0\u1edfng th\u1eddi gian tr\u00ean trang web n\u00e0y v\u00e0 t\u00ecm th\u1ea5y nh\u1eefng th\u00f4ng tin m\u00e0 b\u1ea1n \u0111ang t\u00ecm ki\u1ebfm.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Th\u00eam l\u1eddi ch\u00e0o m\u1eebng \" width=\"598\" height=\"347\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-49.jpg\" title=\"\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Th\u00eam l\u1eddi m\u00f4 t\u1ea3 cho trang web\" width=\"598\" height=\"347\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-50.jpg\" title=\"\"><\/p>\n<p><strong>B\u01b0\u1edbc 9: \u0110i\u1ec1u ch\u1ec9nh ti\u00eau \u0111\u1ec1<\/strong><\/p>\n<p>Ch\u00fang ta \u0111\u00e3 g\u1ea7n ho\u00e0n th\u00e0nh ti\u00eau \u0111\u1ec1. Ch\u1ec9 vi\u1ec7c th\u00eam m\u1ed9t hi\u1ec7u \u1ee9ng b\u00f3ng tinh t\u1ebf \u0111\u1ec3 ho\u00e0n t\u1ea5t. S\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 &#8220;C\u1ecd&#8221; \u0111\u1ec3 t\u1ea1o m\u1ed9t b\u00f3ng gi\u1ed1ng nh\u01b0 \u0111\u00e3 t\u1ea1o tr\u01b0\u1edbc \u0111\u00f3.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea1o b\u00f3ng s\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 Brush\" width=\"598\" height=\"160\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-51.jpg\" title=\"\"><\/p>\n<p>\u0110\u1ec3 t\u1ea1o m\u1ed9t kho\u1ea3ng c\u00e1ch 1px gi\u1eefa ph\u1ea7n \u0111\u1ea7u v\u00e0 b\u00f3ng.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\u0110\u1ec3 kho\u1ea3ng c\u00e1ch 1px gi\u1eefa ph\u1ea7n \u0111\u1ea7u v\u00e0 b\u00f3ng\" width=\"598\" height=\"334\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-52.jpg\" title=\"\"><\/p>\n<p>B\u01b0\u1edbc 10: S\u1eed d\u1ee5ng hi\u1ec7u \u1ee9ng Gradient cho n\u1ec1n.<\/p>\n<p>T\u1ea1o ra m\u1ed9t s\u1eafc th\u00e1i t\u1eeb x\u00e1m nh\u1ea1t d\u1ea7n \u0111\u1ebfn tr\u1eafng.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea1o m\u00e0u gradient t\u1eeb x\u00e1m nh\u1ea1t \u0111\u1ebfn tr\u1eafng\" width=\"442\" height=\"475\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-53.jpg\" title=\"\"><\/p>\n<p>T\u1ea1o m\u1ed9t l\u1edbp m\u1edbi d\u01b0\u1edbi ti\u00eau \u0111\u1ec1 v\u00e0 \u00e1p d\u1ee5ng hi\u1ec7u \u1ee9ng m\u00e0u gradient.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea1o l\u1edbp m\u1edbi b\u00ean d\u01b0\u1edbi ti\u00eau \u0111\u1ec1 v\u00e0 \u00e1p d\u1ee5ng m\u00e0u gradient tr\u00ean\" width=\"598\" height=\"411\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-54.jpg\" title=\"\"><\/p>\n<p><b>B\u01b0\u1edbc 11: K\u00e9o th\u00eam thanh tr\u01b0\u1ee3t xoay<\/b><\/p>\n<p>T\u1ea1o m\u1ed9t thanh tr\u01b0\u1ee3t c\u00f3 kh\u1ea3 n\u0103ng xoay<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea1o thanh tr\u01b0\u1ee3t xoay\" width=\"598\" height=\"308\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-56.jpg\" title=\"\"><\/p>\n<p>S\u1eed d\u1ee5ng <strong>Inner Shadow<\/strong> \u0111\u1ec3 \u0111\u00e1nh d\u1ea5u m\u1ee5c \u0111ang ho\u1ea1t \u0111\u1ed9ng tr\u00ean thanh tr\u01b0\u1ee3t.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"S\u1eed d\u1ee5ng Inner Shadow cho bi\u1ebft m\u1ee5c \u0111ang ho\u1ea1t \u0111\u1ed9ng\" width=\"598\" height=\"336\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-57.jpg\" title=\"\"><\/p>\n<p>B\u01b0\u1edbc 12: X\u00e2y d\u1ef1ng \u0111\u01b0\u1eddng chia n\u1ed9i dung.<\/p>\n<p>H\u00e3y s\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 B\u00fat ch\u00ec v\u00e0 v\u1ebd m\u1ed9t \u0111\u01b0\u1eddng 1 pixel m\u00e0u x\u00e1m nh\u1ea1t (#aaaaaa).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"V\u1ebd m\u1ed9t \u0111\u01b0\u1eddng 1 pixel v\u1edbi m\u00e0u x\u00e1m nh\u1ea1t\" width=\"598\" height=\"163\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-58.jpg\" title=\"\"><\/p>\n<p>Che \u0111i c\u00e1c \u0111\u01b0\u1eddng vi\u1ec1n m\u1ed9t c\u00e1ch m\u01b0\u1ee3t m\u00e0 b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng m\u1eb7t n\u1ea1 gradient.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\u1ea8n c\u00e1c c\u1ea1nh b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng m\u1eb7t n\u1ea1 gradient\" width=\"598\" height=\"332\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-59.jpg\" title=\"\"><\/p>\n<p><b><br \/>\n<\/b><\/p>\n<p>\u0110\u1ec3 t\u1ea1o \u0111\u01b0\u1ee3c layout 3 c\u1ed9t nh\u01b0 y\u00eau c\u1ea7u, ch\u00fang ta ph\u1ea3i s\u1eed d\u1ee5ng ph\u01b0\u01a1ng ph\u00e1p t\u00ednh to\u00e1n \u0111\u1ec3 chia kh\u00f4ng gian ch\u1ee9a ch\u00fang th\u00e0nh 3 ph\u1ea7n b\u1eb1ng nhau, m\u1ed7i ph\u1ea7n c\u00e1ch nhau 25 pixel.<\/p>\n<p>\u0110\u1ec3 l\u00e0m \u0111i\u1ec1u n\u00e0y, ch\u00fang ta c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng ph\u01b0\u01a1ng ph\u00e1p t\u00ednh to\u00e1n \u0111\u01a1n gi\u1ea3n sau \u0111\u00e2y:<br \/>\n&#8211; \u0110\u1ea7u ti\u00ean, ch\u00fang ta x\u00e1c \u0111\u1ecbnh t\u1ed5ng kho\u1ea3ng c\u00e1ch pixel gi\u1eefa c\u00e1c c\u1ed9t l\u00e0 25 pixel.<br \/>\n&#8211; Sau \u0111\u00f3, ch\u00fang ta t\u00ednh t\u1ed5ng kho\u1ea3ng c\u00e1ch pixel c\u1ea7n chia cho s\u1ed1 l\u01b0\u1ee3ng c\u1ed9t (3 c\u1ed9t).<br \/>\n&#8211; K\u1ebft qu\u1ea3 thu \u0111\u01b0\u1ee3c ch\u00ednh l\u00e0 k\u00edch th\u01b0\u1edbc c\u1ee7a m\u1ed7i c\u1ed9t, c\u0169ng ch\u00ednh l\u00e0 kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c c\u1ed9t.<\/p>\n<p>V\u00ed d\u1ee5, n\u1ebfu ta c\u00f3 1.000 pixel \u0111\u1ec3 chia th\u00e0nh 3 c\u1ed9t, ch\u00fang ta th\u1ef1c hi\u1ec7n t\u00ednh to\u00e1n nh\u01b0 sau:<br \/>\n&#8211; T\u1ed5ng kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c c\u1ed9t: 25 pixel<br \/>\n&#8211; T\u1ed5ng kho\u1ea3ng c\u00e1ch c\u1ea7n chia: 1.000 pixel<br \/>\n&#8211; K\u00edch th\u01b0\u1edbc m\u1ed7i c\u1ed9t: 1.000 \/ (3 + 2 * 25) = 1.000 \/ 75 = 13.33 pixel<\/p>\n<p>V\u1edbi k\u00edch th\u01b0\u1edbc c\u1ed9t \u0111\u00e3 \u0111\u01b0\u1ee3c t\u00ednh to\u00e1n, ch\u00fang ta c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng gi\u00e1 tr\u1ecb n\u00e0y \u0111\u1ec3 t\u1ea1o layout 3 c\u1ed9t v\u1edbi kho\u1ea3ng c\u00e1ch gi\u1eefa ch\u00fang l\u00e0 25 pixel.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Chia b\u1ed1 c\u1ee5 th\u00e0nh 3 c\u1ed9t b\u1eb1ng nhau\" width=\"598\" height=\"217\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-60.jpg\" title=\"\"><\/p>\n<p>B\u1eaft \u0111\u1ea7u b\u1eb1ng vi\u1ec7c th\u00eam c\u00e1c \u0111\u01b0\u1eddng h\u01b0\u1edbng d\u1eabn v\u00e0o c\u00e1c ph\u1ea7n c\u1ee7a b\u00e0i vi\u1ebft.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Th\u00eam c\u00e1c \u0111\u01b0\u1eddng d\u1eabn cho ba ph\u1ea7n\" width=\"490\" height=\"600\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-61.jpg\" title=\"\"><\/p>\n<p>M\u1edf r\u1ed9ng danh s\u00e1ch c\u00e1c d\u1ecbch v\u1ee5 \u0111\u1eb7c tr\u01b0ng b\u1eb1ng c\u00e1ch th\u00eam v\u00e0o bi\u1ec3u t\u01b0\u1ee3ng t\u1eeb b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng Function. B\u1ea3o to\u00e0n kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c v\u1eadt th\u1ec3 \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o \u0111\u1ed3ng nh\u1ea5t.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Th\u00eam c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng Function\" width=\"598\" height=\"206\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-62.jpg\" title=\"\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Th\u00eam n\u1ed9i dung cho c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng Function\" width=\"598\" height=\"385\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-63.jpg\" title=\"\"><\/p>\n<p>T\u1ea1o m\u1ed9t n\u00fat &#8220;<strong>\u0110\u1ecdc th\u00eam<\/strong>&#8221; \u0111\u01a1n gi\u1ea3n b\u1eb1ng c\u00e1ch ch\u1ecdn c\u00f4ng c\u1ee5 <strong>C\u00f4ng c\u1ee5 h\u00ecnh ch\u1eef nh\u1eadt<\/strong> \u0111\u1ec3 v\u1ebd h\u00ecnh d\u1ea1ng.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea1o n\u00fat Read More\" width=\"598\" height=\"201\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-64.jpg\" title=\"\"><\/p>\n<p>Th\u00eam hi\u1ec7u \u1ee9ng Gradient Overlay v\u00e0 Stroke v\u00e0o n\u00fat n\u00e0y.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\u00c1p d\u1ee5ng Gradient Overlay cho n\u00fat n\u00e0y\" width=\"522\" height=\"600\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-65.jpg\" title=\"\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\u00c1p d\u1ee5ng Stroke cho n\u00fat n\u00e0y\" width=\"598\" height=\"565\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-66.jpg\" title=\"\"><\/p>\n<p>H\u00e3y sao ch\u00e9p n\u00fat n\u00e0y cho c\u00e1c ph\u1ea7n kh\u00e1c.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Sao ch\u00e9p n\u00fat n\u00e0y cho c\u00e1c ph\u1ea7n kh\u00e1c\" width=\"598\" height=\"236\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-67.jpg\" title=\"\"><\/p>\n<p>Ch\u00fang ta s\u1ebd b\u1ed5 sung m\u1ed9t s\u1ed1 m\u1ee5c c\u00f4ng vi\u1ec7c g\u1ea7n \u0111\u00e2y b\u1eb1ng c\u00e1ch v\u1ebd ba h\u1ed9p v\u1edbi stroke 3 pixel \u0111\u1ec3 gi\u1eef h\u00ecnh \u1ea3nh.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"V\u1ebd ba h\u1ed9p gi\u1eefa \u1ea3nh\" width=\"598\" height=\"357\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-68.jpg\" title=\"\"><\/p>\n<p>K\u00e9o h\u00ecnh \u1ea3nh v\u00e0 th\u1ea3 v\u00e0o c\u00e1c \u00f4 vu\u00f4ng.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"K\u00e9o h\u00ecnh \u1ea3nh v\u00e0o c\u00e1c h\u1ed9p\" width=\"571\" height=\"305\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-69.jpg\" title=\"\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"K\u00e9o \u0111\u1ee7 ba h\u00ecnh \u1ea3nh v\u00e0o h\u1ed9p\" width=\"598\" height=\"250\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-70.jpg\" title=\"\"><\/p>\n<p>Ti\u1ebfp t\u1ee5c t\u1ea1o m\u1ed9t qu\u1ea3 b\u00f3ng gi\u1ed1ng nh\u01b0 tr\u01b0\u1edbc \u0111\u00f3 v\u00e0 \u0111\u1eb7t n\u00f3 v\u00e0o trong h\u1ed9p.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea1o b\u00f3ng d\u01b0\u1edbi h\u1ed9p\" width=\"598\" height=\"144\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-71.jpg\" title=\"\"><\/p>\n<p>B\u1ed5 sung th\u00eam m\u00f4 t\u1ea3 cho d\u1ef1 \u00e1n.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Th\u00eam m\u00f4 t\u1ea3 cho c\u00f4ng vi\u1ec7c\" width=\"598\" height=\"266\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-72.jpg\" title=\"\"><\/p>\n<p>T\u1ea1o m\u1ed9t feed d\u1eef li\u1ec7u cho Twitter. K\u00e9o th\u1ea3 bi\u1ec3u t\u01b0\u1ee3ng chim Twitter v\u00e0o \u0111\u00f3.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Ch\u00e8n bi\u1ec3u t\u01b0\u1ee3ng con chim Twitter\" width=\"598\" height=\"266\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-73.jpg\" title=\"\"><\/p>\n<p>Th\u00eam m\u1ed9t tweet.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Th\u00eam th\u00f4ng b\u00e1o Twitter\" width=\"598\" height=\"368\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-74.jpg\" title=\"\"><\/p>\n<p>T\u1ea1o m\u1ed9t n\u00fat &#8220;Xem th\u00eam Tweet&#8221;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"T\u1ea1o n\u00fat More Tweets\" width=\"598\" height=\"230\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-75.jpg\" title=\"\"><\/p>\n<p>S\u1eed d\u1ee5ng c\u00e1c ki\u1ec3u nh\u01b0 h\u00ecnh \u1ea3nh d\u01b0\u1edbi \u0111\u00e2y \u0111\u1ec3 \u00e1p d\u1ee5ng.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Thi\u1ebft l\u1eadp Gradient Overlay cho n\u00fat More Tweets\" width=\"522\" height=\"600\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-76.jpg\" title=\"\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Thi\u1ebft l\u1eadp Stroke cho n\u00fat More Tweets\" width=\"598\" height=\"583\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-77.jpg\" title=\"\"><\/p>\n<p>M\u1eddi b\u1ea1n b\u1ed5 sung n\u1ed9i dung v\u0103n b\u1ea3n.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Th\u00eam n\u1ed9i dung v\u0103n b\u1ea3n\" width=\"598\" height=\"247\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-78.jpg\" title=\"\"><\/p>\n<p><strong>B\u01b0\u1edbc 14: X\u00e2y d\u1ef1ng trang ch\u00e2n trang v\u00e0 ho\u00e0n thi\u1ec7n<\/strong><\/p>\n<p>H\u00e3y ch\u1ecdn m\u1ed9t khu v\u1ef1c cho ch\u00e2n trang v\u00e0 s\u01a1n n\u00f3 m\u00e0u x\u00e1m.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Ch\u1ecdn v\u00f9ng ch\u00e2n trang v\u00e0 ph\u1ee7 n\u00f3 v\u1edbi m\u00e0u x\u00e1m\" width=\"598\" height=\"376\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-79.jpg\" title=\"\"><\/p>\n<p>S\u1eed d\u1ee5ng t\u01b0\u01a1ng t\u1ef1 Hi\u1ec7u \u1ee9ng <strong>M\u00e0u Ch\u1ed3ng L\u00ean<\/strong> nh\u01b0 sau \u0111\u00e2y.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Thi\u1ebft l\u1eadp Color Overlay cho ch\u00e2n trang\" width=\"598\" height=\"505\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-80.jpg\" title=\"\"><\/p>\n<p>Cu\u1ed1i c\u00f9ng, h\u00e3y th\u00eam m\u1ed9t ph\u1ea7n ch\u00e2n trang v\u00e0 th\u00f4ng tin v\u1ec1 b\u1ea3n quy\u1ec1n.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"Th\u00eam \u0111i\u1ec1u h\u01b0\u1edbng ch\u00e2n trang v\u00e0 b\u1ea3n quy\u1ec1n\" width=\"598\" height=\"190\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-81.jpg\" title=\"\"><\/p>\n<p>K\u1ebft qu\u1ea3 cu\u1ed1i c\u00f9ng<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"H\u00ecnh \u1ea3nh layout web cu\u1ed1i c\u00f9ng\" width=\"480\" height=\"600\" src=\"https:\/\/st.quantrimang.com\/photos\/image\/2017\/11\/13\/tao-layoyt-web-photoshop-82.jpg\" title=\"\"><\/p>\n<p>T\u1ea3i v\u1ec1: t\u1eadp tin PSD<\/p>\n<p>Th\u00eam th\u00f4ng tin:<\/p>\n<ul>\n<li>H\u01b0\u1edbng d\u1eabn thi\u1ebft k\u1ebf website b\u1eb1ng Photoshop (Ph\u1ea7n 1): T\u1ea1o theme cho c\u1eeda h\u00e0ng b\u00e1n \u0111\u1ed3 th\u1ee7 c\u00f4ng<\/li>\n<li>H\u01b0\u1edbng d\u1eabn thi\u1ebft k\u1ebf website b\u1eb1ng Photoshop (Ph\u1ea7n 2): T\u1ea1o Landing page cho trang web du l\u1ecbch<\/li>\n<\/ul>\n<p>Ch\u00fac m\u1ecdi ng\u01b0\u1eddi th\u1ef1c hi\u1ec7n th\u00e0nh c\u00f4ng!<\/p>\n<\/div>\n<h2>H\u01b0\u1edbng d\u1eabn thi\u1ebft k\u1ebf giao di\u1ec7n website b\u1eb1ng Photoshop c\u01a1 b\u1ea3n<\/h2>\n<\/p>\n<p>V\u00ec sao quan tr\u1ecdng t\u1ea1o ra m\u1ed9t giao di\u1ec7n trang web chuy\u00ean nghi\u1ec7p?<\/p>\n<p>Vi\u1ec7c thi\u1ebft k\u1ebf layout chuy\u00ean nghi\u1ec7p cho trang web gi\u00fap c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng v\u00e0 t\u0103ng t\u00ednh th\u1ea9m m\u1ef9 c\u1ee7a trang web. \u0110\u1ed3ng th\u1eddi, n\u00f3 c\u00f2n g\u00f3p ph\u1ea7n n\u00e2ng cao \u0111\u1ed9 tin c\u1eady v\u00e0 chuy\u00ean nghi\u1ec7p c\u1ee7a trang web.<\/p>\n<p>C\u00e1ch t\u1ea1o layout trang web chuy\u00ean nghi\u1ec7p nh\u01b0 th\u1ebf n\u00e0o?<\/p>\n<p>\u0110\u1ea7u ti\u00ean, h\u00e3y thi\u1ebft k\u1ebf layout tr\u00ean Photoshop v\u1edbi k\u00edch th\u01b0\u1edbc v\u00e0 t\u1ec9 l\u1ec7 ph\u00f9 h\u1ee3p.<br \/>\nTi\u1ebfp theo, \u00e1p d\u1ee5ng c\u00e1c nguy\u00ean t\u1eafc thi\u1ebft k\u1ebf \u0111\u1ec3 t\u1ea1o ra m\u1ed9t layout thu h\u00fat v\u00e0 th\u00e2n thi\u1ec7n v\u1edbi ng\u01b0\u1eddi d\u00f9ng.<br \/>\nCu\u1ed1i c\u00f9ng, ki\u1ec3m tra c\u00e1c y\u1ebfu t\u1ed1 chu\u1ea9n c\u1ee7a m\u1ed9t layout chuy\u00ean nghi\u1ec7p nh\u01b0 \u0111\u01a1n gi\u1ea3n, d\u1ec5 nh\u00ecn v\u00e0 d\u1ec5 s\u1eed d\u1ee5ng.<\/p>\n<p>3. L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 thi\u1ebft k\u1ebf layout tr\u00ean trang web b\u1eb1ng HTML s\u1eed d\u1ee5ng c\u00e1c th\u1ebb?<\/p>\n<h2>,<br \/>\n,<br \/>\n<\/h2>\n<p>B\u1ea1n c\u00f3 th\u1ec3 vi\u1ebft l\u1ea1i c\u00e2u h\u1ecfi n\u00e0y v\u1edbi ng\u1eef c\u1ea3nh c\u1ee5 th\u1ec3 h\u01a1n kh\u00f4ng?<\/p>\n<p>&#8211; Khi \u0111\u00e3 ho\u00e0n thi\u1ec7n b\u1ed1 c\u1ee5c tr\u00ean Photoshop, ch\u00fang ta n\u00ean chuy\u1ec3n sang tr\u00ecnh duy\u1ec7t v\u00e0 s\u1eed d\u1ee5ng c\u00e1c ph\u1ea7n m\u1ec1m l\u1eadp tr\u00ecnh web \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i th\u00e0nh HTML. \u0110\u1ed1i v\u1edbi m\u1ed7i ph\u1ea7n t\u1eed trong b\u1ed1 c\u1ee5c, ch\u00fang ta s\u1ebd s\u1eed d\u1ee5ng c\u00e1c th\u1ebb HTML t\u01b0\u01a1ng \u1ee9ng.<\/p>\n<div>, <\/p>\n<header>, <\/p>\n<footer>, <\/p>\n<nav>, <\/p>\n<h2>,<br \/>\n,<br \/>\n<\/h2>\n<p>Ngo\u00e0i ra, ch\u00fang ta c\u0169ng c\u1ea7n ch\u1eafc ch\u1eafn s\u1eed d\u1ee5ng CSS \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng v\u00e0 tr\u00ecnh b\u00e0y c\u00e1c th\u00e0nh ph\u1ea7n tr\u00ean trang web.<\/p>\n<h2>T\u1eeb kh\u00f3a v\u1ec1 H\u01b0\u1edbng d\u1eabn thi\u1ebft k\u1ebf website b\u1eb1ng Photoshop (Ph\u1ea7n 3): T\u1ea1o layout trang web chuy\u00ean nghi\u1ec7p<\/h2>\n<p>&#8211; X\u00e2y d\u1ef1ng layout cho trang web<br \/>\n&#8211; H\u01b0\u1edbng d\u1eabn t\u1ea1o layout trang web<br \/>\n&#8211; C\u00e1ch thi\u1ebft k\u1ebf trang web chuy\u00ean nghi\u1ec7p<br \/>\n&#8211; S\u1eed d\u1ee5ng Photoshop \u0111\u1ec3 thi\u1ebft k\u1ebf trang web<br \/>\n&#8211; Thi\u1ebft k\u1ebf giao di\u1ec7n cho trang web<br \/>\n&#8211; T\u1ea1o m\u1eabu thi\u1ebft k\u1ebf trang web<br \/>\n&#8211; Thi\u1ebft k\u1ebf trang web \u0111\u1eb9p m\u1eaft<br \/>\n&#8211; H\u01b0\u1edbng d\u1eabn t\u1ea1o giao di\u1ec7n trang web b\u1eb1ng Photoshop<br \/>\n&#8211; Thi\u1ebft k\u1ebf trang web theo chu\u1ea9n SEO<br \/>\n&#8211; Thi\u1ebft k\u1ebf trang web \u0111\u00e1p \u1ee9ng (responsive)<br \/>\n&#8211; C\u00e1ch t\u1ea1o layout trang web t\u1ed1i \u01b0u h\u00f3a tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng.<\/p>\n<p>N\u1ebfu b\u1ea1n c\u00f3 b\u1ea5t k\u1ef3 th\u1eafc m\u1eafc n\u00e0o v\u1ec1 h\u01b0\u1edbng d\u1eabn thi\u1ebft k\u1ebf website b\u1eb1ng Photoshop (Ph\u1ea7n 3): T\u1ea1o layout trang web chuy\u00ean nghi\u1ec7p, xin h\u00e3y cho ch\u00fang t\u00f4i bi\u1ebft. M\u1ecdi c\u00e2u h\u1ecfi hay g\u00f3p \u00fd c\u1ee7a b\u1ea1n s\u1ebd gi\u00fap ch\u00fang t\u00f4i c\u1ea3i thi\u1ec7n v\u00e0 ho\u00e0n thi\u1ec7n h\u01a1n trong c\u00e1c b\u00e0i vi\u1ebft ti\u1ebfp theo.<\/p>\n<p>B\u00e0i vi\u1ebft v\u1ec1 &#8220;H\u01b0\u1edbng d\u1eabn thi\u1ebft k\u1ebf website b\u1eb1ng Photoshop (Ph\u1ea7n 3): T\u1ea1o layout trang web chuy\u00ean nghi\u1ec7p&#8221; \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1eadp h\u1ee3p b\u1edfi m\u00ecnh v\u00e0 nh\u00f3m c\u1ee7a m\u00ecnh t\u1eeb nhi\u1ec1u ngu\u1ed3n kh\u00e1c nhau. N\u1ebfu b\u1ea1n th\u1ea5y b\u00e0i vi\u1ebft n\u00e0y h\u1eefu \u00edch v\u00e0 gi\u00fap b\u1ea1n, xin vui l\u00f2ng \u1ee7ng h\u1ed9 nh\u00f3m c\u1ee7a ch\u00fang t\u00f4i b\u1eb1ng vi\u1ec7c Like ho\u1eb7c Share b\u00e0i vi\u1ebft n\u00e0y!<\/p>\n<\/nav>\n<\/footer>\n<\/header>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Thi\u1ebft k\u1ebf giao di\u1ec7n \u0111\u1eb9p, s\u1ea1ch s\u1ebd v\u00e0 thi\u1ebft th\u1ef1c l\u00e0 m\u1ed9t ph\u1ea7n thi\u1ebft y\u1ebfu c\u1ee7a c\u00e1c nh\u00e0 thi\u1ebft k\u1ebf Web. Trong h\u01b0\u1edbng d\u1eabn n\u00e0y, ch\u00fang ta s\u1ebd t\u1ea1o ra m\u1ed9t layout (b\u1ed1 c\u1ee5c) web s\u1ea1ch s\u1ebd v\u00e0 chuy\u00ean nghi\u1ec7p b\u1eb1ng Photoshop. 10 v\u1ea5n \u0111\u1ec1 th\u01b0\u1eddng g\u1eb7p trong Photoshop v\u00e0 c\u00e1ch kh\u1eafc ph\u1ee5c c\u01a1 b\u1ea3n&#8230;<\/p>\n","protected":false},"author":1,"featured_media":961,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-960","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-photoshop"],"_links":{"self":[{"href":"https:\/\/ladigi.vn\/t\/wp-json\/wp\/v2\/posts\/960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ladigi.vn\/t\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ladigi.vn\/t\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ladigi.vn\/t\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ladigi.vn\/t\/wp-json\/wp\/v2\/comments?post=960"}],"version-history":[{"count":0,"href":"https:\/\/ladigi.vn\/t\/wp-json\/wp\/v2\/posts\/960\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ladigi.vn\/t\/wp-json\/wp\/v2\/media\/961"}],"wp:attachment":[{"href":"https:\/\/ladigi.vn\/t\/wp-json\/wp\/v2\/media?parent=960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ladigi.vn\/t\/wp-json\/wp\/v2\/categories?post=960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ladigi.vn\/t\/wp-json\/wp\/v2\/tags?post=960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}