{"id":1154,"date":"2012-11-23T07:23:53","date_gmt":"2012-11-23T07:23:53","guid":{"rendered":"http:\/\/congnghepc.com\/2012\/11\/23\/tao-navigation-cho-web-voi-mau-do-den-bang-photoshop\/"},"modified":"2012-11-23T07:23:53","modified_gmt":"2012-11-23T07:23:53","slug":"tao-navigation-cho-web-voi-mau-do-den-bang-photoshop","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/tao-navigation-cho-web-voi-mau-do-den-bang-photoshop\/","title":{"rendered":"T\u1ea1o Navigation cho web v\u1edbi m\u00e0u \u0111\u1ecf \u0111en b\u1eb1ng Photoshop"},"content":{"rendered":"

\n\tHôm nay mình ti\u1ebfp t\u1ee5c gi\u1edbi thi\u1ec7u \u0111\u1ebfn cho các b\u1ea1n m\u1ed9t menu \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf r\u1ea5t \u0111\u1eb9p m\u1eaft mà công vi\u1ec7c th\u1ef1c hi\u1ec7n thì r\u1ea5t \u0111\u01a1n gi\u1ea3n và d\u1ec5 dàng. Ch\u1ec9 c\u1ea7n các công c\u1ee5 t\u1ea1o hình và ph\u1ed1i màu gradient, chúng ta s\u1ebd cho ra k\u1ebft qu\u1ea3 nh\u01b0 th\u1ebf này \u0111ây :<\/p>\n

\n\t\"T\u1ea1o<\/p>\n

\n\t <\/p>\n

\n\tB\u01b0\u1edbc 1<\/h2>\n

\n\t\u0110\u1ea7u tiên các b\u1ea1n t\u1ea1o m\u1ed9t file m\u1edbi v\u1edbi kích th\u01b0\u1edbc vào kho\u1ea3ng 540 x 440 pixels<\/b>. R\u1ed3i vào Edit > Fil<\/b>l \u0111\u1ed5 màu \u0111en ( #1b1b1b<\/b> ) vào làm màu n\u1ec1n background.<\/p>\n

\n\t\"T\u1ea1o<\/p>\n

\n\t <\/p>\n

\n\tB\u01b0\u1edbc 2 :<\/h2>\n

\n\tCác b\u1ea1n t\u1ea1o m\u1ed9t layer m\u1edbi, r\u1ed3i ch\u1ecdn công c\u1ee5 Rounded Rectangle Tool (U)<\/b> \"Rounded , v\u1edbi radius<\/b> là 5px<\/b>. Sau \u0111ó v\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt nh\u01b0 hình sau, r\u1ed3i nh\u1ea5n Ctrl + Enter<\/b> \u0111\u1ec3 có \u0111\u01b0\u1ee3c vùng l\u1ef1a ch\u1ecdn nh\u01b0 hình b\u1ec1n d\u01b0\u1edbi:<\/p>\n

\n\t\"T\u1ea1o<\/p>\n

\n\tBây gi\u1edd chúng ta s\u1ebd ti\u1ebfn hành \u0111\u1ed5 màu vào cho vùng l\u1ef1a ch\u1ecdn này. Các b\u1ea1n ch\u1ecdn công c\u1ee5 Gradient Tool (G)<\/b> \"\" Sau \u0111ó \u1ea5n \u0111\u1ecbnh màu gradient s\u1ebd là #bc0303<\/b> và #3f0000<\/b> theo v\u1ecb trí t\u1eeb trái sang ph\u1ea3i, r\u1ed3i ch\u1ecdn ph\u1ea7n Radial Gradient<\/b> \"Radial, sau \u0111ó dùng chu\u1ed9t kéo t\u1eeb gi\u1eefa \u0111\u1ec9nh xu\u1ed1ng ph\u1ea7n gi\u1eefa \u0111áy. Lúc \u0111ó ta s\u1ebd có hi\u1ec7u \u1ee9ng gradient nh\u01b0 sau :<\/p>\n

\n\t\"T\u1ea1o<\/p>\n

\n\t <\/p>\n

\n\tB\u01b0\u1edbc 3 :<\/h2>\n

\n\tTi\u1ebfp theo các b\u1ea1n vào Layer > Layer Styles > Outer Glow<\/b> và thi\u1ebft l\u1eadp thông s\u1ed1 nh\u01b0 hình sau :<\/p>\n

\n\t\"T\u1ea1o<\/p>\n

\n\tK\u1ebft qu\u1ea3 nh\u1eadn \u0111\u01b0\u1ee3c s\u1ebd th\u1ebf này:<\/p>\n

\n\t\"T\u1ea1o<\/p>\n

\n\t <\/p>\n

\n\tB\u01b0\u1edbc 4 :<\/h2>\n

\n\tL\u1ef1a ch\u1ecdn công c\u1ee5 Text Tool<\/b> r\u1ed3i gõ vào dòng tiêu \u0111\u1ec1 cho menu, các b\u1ea1n có th\u1ec3 s\u1eed d\u1ee5ng font tùy thích, và v\u1edbi màu tr\u1eafng nh\u01b0 hình bên d\u01b0\u1edbi :<\/p>\n

\n\t\"T\u1ea1o<\/p>\n

\n\t <\/p>\n

\n\tB\u01b0\u1edbc 5 :<\/h2>\n

\n\tT\u1ea1o m\u1ed9t layer m\u1edbi<\/b> và Chúng ta l\u1ea1i ch\u1ecdn công c\u1ee5 rounded rectangle tool<\/b> m\u1ed9t l\u1ea7n n\u1eefa v\u1edbi radius<\/b> là 10px<\/b>, và l\u1ea7n này, chúng ta v\u1ebd m\u1ed9t hình nh\u1ecf h\u01a1n nh\u01b0 sau :<\/p>\n

\n\t\"T\u1ea1o<\/p>\n

\n\t\u0110\u1ed5 màu cho vùng l\u1ef1a ch\u1ecdn này là màu \u0111en xám (#111111<\/b>).<\/p>\n

\n\t\"T\u1ea1o<\/p>\n

\n\t <\/p>\n

\n\tB\u01b0\u1edbc 6 :<\/h2>\n

\n\tT\u1ea1i layer hình mà chúng ta v\u1eeba m\u1edbi t\u1ea1o \u1edf b\u01b0\u1edbc 5<\/b>, các b\u1ea1n nh\u1ea5n Ctrl + Click chu\u1ed9t trái<\/b> vào layer này, lúc này màn hình s\u1ebd xu\u1ea5t hi\u1ec7n m\u1ed9t vùng l\u1ef1a ch\u1ecdn. K\u1ebf ti\u1ebfp, t\u1ea1o m\u1ed9t layer m\u1edbi, r\u1ed3i vào Select > Modify > Contract<\/b> , v\u1edbi Contract By<\/b> là 10px<\/b>. Lúc này chúng ta s\u1ebd có m\u1ed9t vùng l\u1ef1a ch\u1ecdn nh\u1ecf h\u01a1n so v\u1edbi hình mà chúng ta t\u1ea1o \u1edf b\u01b0\u1edbc 5<\/b>.<\/p>\n

\n\t\"T\u1ea1o<\/p>\n

\n\tTi\u1ebfp t\u1ee5c \u0111\u1ed5 màu radial gradient<\/b> ( Làm t\u01b0\u01a1ng t\u1ef1 \u1edf b\u01b0\u1edbc 2<\/b>) cho vùng l\u1ef1a ch\u1ecdn này v\u1edbi màu t\u1eeb trái sang ph\u1ea3i l\u1ea7n l\u01b0\u1ee3t là màu tr\u1eafng (#ffffff<\/b>) và màu trong su\u1ed1t (transparent). Các b\u1ea1n nh\u1edb là l\u1ea7n này, chúng ta s\u1ebd kéo chu\u1ed9t \u0111i t\u1eeb góc trên cùng phía bên trái, và t\u1edbi góc ph\u1ea3i d\u01b0\u1edbi cùng.<\/p>\n

\n\t\"T\u1ea1o<\/p>\n

\n\tGi\u1ea3m opacity<\/b> c\u1ee7a layer này xu\u1ed1ng còn 5%<\/b>.<\/p>\n

\n\t\"T\u1ea1o<\/p>\n

\n\t <\/p>\n

\n\tB\u01b0\u1edbc 7 :<\/h2>\n

\n\tCh\u1ecdn công c\u1ee5 gõ ch\u1eef (phím t\u1eaft là T)<\/b> và chèn thêm vài dòng ch\u1eef mình h\u1ecda cho t\u01b0\u1eddng link nh\u01b0 sau :<\/p>\n

\n\t\"T\u1ea1o<\/p>\n

\n\tB\u01b0\u1edbc 8 :<\/b><\/h2>\n

\n\tBây gi\u1edd là lúc mà chúng ta s\u1ebd chèn thêm m\u1ed9t s\u1ed1 \u0111o\u1ea1n ng\u0103ng cách gi\u1eefa các text link. Các b\u1ea1n ch\u1ecdn công c\u1ee5 rectangular marquee tool (M) r\u1ed3i v\u1ebd m\u1ed9t hình n\u1eb1m ngang kho\u1ea3ng 1px, sau \u0111ó \u0111\u1ed5 màu ( #1e1e1e) vào \u0111ó. Làm xong, các b\u1ea1n nh\u1ea5n Ctrl + J \u0111\u1ec3 nhân b\u1ea3n cho nhi\u1ec1u cái khác. Các b\u1ea1n nh\u1edb ch\u1ecdn công c\u1ee5 Zoom \u0111\u1ec3 phóng to cho d\u1ec5 làm nhá.<\/p>\n

\n\t\"T\u1ea1o<\/b><\/p>\n

\n\tB\u01b0\u1edbc 9 :<\/b><\/h2>\n

\n\tB\u01b0\u1edbc cu\u1ed1i cùng là chúng ta t\u1ea1o màu background cho nh\u1eefng link \u0111\u01b0\u1ee3c active hay hover. Cac b\u1ea1n t\u1ea1o m\u1ed9t layer n\u1eb1m d\u01b0\u1edbi layer link active, r\u1ed3i dùng công c\u1ee5 Rectangular Marquee Tool (M) và v\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt , r\u1ed3i \u0111\u1ed5 màu (#171717) vào là xong.<\/p>\n

\n\t\"T\u1ea1o<\/b><\/p>\n

\n\tChúc các b\u1ea1n thành công !<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

\n\t\"T\u1ea1o<\/p>\n

\n\tHôm nay mình ti\u1ebfp t\u1ee5c gi\u1edbi thi\u1ec7u \u0111\u1ebfn cho các b\u1ea1n m\u1ed9t menu \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf r\u1ea5t \u0111\u1eb9p m\u1eaft mà công vi\u1ec7c th\u1ef1c hi\u1ec7n thì r\u1ea5t \u0111\u01a1n gi\u1ea3n và d\u1ec5 dàng.<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[],"class_list":["post-1154","post","type-post","status-publish","format-standard","hentry","category-photoshop"],"views":376,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/1154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=1154"}],"version-history":[{"count":0,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/1154\/revisions"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=1154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=1154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=1154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}