{"id":1004,"date":"2012-05-08T01:35:28","date_gmt":"2012-05-08T01:35:28","guid":{"rendered":"http:\/\/congnghepc.com\/2012\/05\/08\/tao-twitter-app-interface-trong-photoshop\/"},"modified":"2012-05-08T01:35:28","modified_gmt":"2012-05-08T01:35:28","slug":"tao-twitter-app-interface-trong-photoshop","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/tao-twitter-app-interface-trong-photoshop\/","title":{"rendered":"T\u1ea1o Twitter App Interface trong Photoshop"},"content":{"rendered":"

\n\tTrong h\u01b0\u1edbng d\u1eabn này chúng ta s\u1ebd t\u1ea1o ra \u1ee9ng d\u1ee5ng giao di\u1ec7n Clean Twitter trong Photoshop b\u1eb1ng cách s\u1eed d\u1ee5ng các Layer Style, các vector Shape c\u01a1 b\u1ea3n. Hãy b\u1eaft \u0111\u1ea7u!<\/p>\n

\n\tB\u01b0\u1edbc 1: T\u1ea1o file m\u1edbi<\/h2>\n

\n\tB\u1eaft \u0111\u1ea7u b\u1eb1ng cách t\u1ea1o file m\u1edbi v\u1edbi size là 1,050 x 700 pixel, Resolution là 72 ppi.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\tB\u01b0\u1edbc 2: Chu\u1ea9n b\u1ecb Canvas<\/h2>\n

\n\tClick vào View > Ruler ho\u1eb7c nh\u1ea5n Ctrl + R \u0111\u1ec3 b\u1eadt Ruler. Click chu\u1ed9t ph\u1ea3i vào Ruler và ch\u1ecdn Pixels \u0111\u1ec3 thay \u0111\u1ed5i \u0111\u01a1n v\u1ecb hi\u1ec7n hành là pixels.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tKéo ruler vào canvas \u0111\u1ec3 t\u1ea1o m\u1ed9t guide có chi\u1ec1u r\u1ed9ng và chi\u1ec1u ngang nh\u01b0 h\u01b0\u1edbng d\u1eabn. Chúng ta c\u1ea7n có 1 vùng kho\u1ea3ng 362 px r\u1ed9ng và 589 px cao. \u1ede phía bên trái và bên ph\u1ea3i bên trong là 7px.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tThi\u1ebft k\u1ebf c\u1ee7a chúng ta c\u1ea7n có pixel hoàn h\u1ea3o. \u0110\u1ec3 làm \u0111\u01b0\u1ee3c \u0111i\u1ec1u này, chúng ta s\u1ebd kích ho\u1ea1t Snap to Pixels nh\u01b0 hình bên d\u01b0\u1edbi. Kích ho\u1ea1t các công c\u1ee5 và ch\u1ecdn tùy ch\u1ecdn này trên thanh công c\u1ee5.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt bo tròn v\u1edbi radius 5 px và màu là #e2e4e7.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tAdd thêm Drop Shadow và Stroke nh\u01b0 các thi\u1ebft l\u1eadp bên d\u01b0\u1edbi.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\tB\u01b0\u1edbc 7: Tiêu \u0111\u1ec1 c\u1ee7a thanh<\/h2>\n

\n\tKích ho\u1ea1t công c\u1ee5 Rounded Rectangle v\u1edbi radius 5 px. V\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt tròn màu \u0111en \u1edf trên hình ch\u1eef nh\u1eadt v\u1eeba v\u1ebd nh\u01b0 bên d\u01b0\u1edbi. Thêm Path hình ch\u1eef nh\u1eadt và thi\u1ebft l\u1eadp ch\u1ebf \u0111\u1ed9 Intersect.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tClick \u0111úp vào layer này và thi\u1ebft l\u1eadp Layer Style Inner Glow, Gradient Overlay, và Stroke nh\u01b0 bên d\u01b0\u1edbi:<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd m\u1ed9t hình tròn nh\u1ecf v\u1edbi màu #e43c22. Chúng ta s\u1ebd t\u1ea1o m\u1ed9t button Close.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tThêm Inner Glow, Gradient Overlay, và Stroke.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tKích ho\u1ea1t công c\u1ee5 Move tool, sau \u0111ó Alt-drag (kéo) \u0111\u1ec3 nhân \u0111ôi các button. Thay \u0111\u1ed5i màu s\u1eafc c\u1ee7a chúng là màu vàng và màu xanh. Và nh\u1edb r\u1eb1ng chúng ta c\u0169ng c\u1ea7n ph\u1ea3i thay \u0111\u1ed5i màu Stroke sao cho phù h\u1ee3p.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tChúng ta c\u1ea7n t\u1ea1o thêm \u0111\u1ed9 t\u01b0\u01a1ng ph\u1ea3n cho button Close. Chúng ta c\u1ea7n cho ng\u01b0\u1eddi dùng hi\u1ec3u r\u1eb1ng button này có th\u1ec3 nguy hi\u1ec3m n\u1ebfu chúng ta b\u1ea5m vào và Close toàn b\u1ed9 giao di\u1ec7n. \u0110\u1ec3 làm \u0111\u01b0\u1ee3c \u0111i\u1ec1u này, chúng ta ch\u1ec9 c\u1ea7n v\u1ebd m\u1ed9t hình tròn nh\u1ecf v\u1edbi màu t\u1ed1i h\u01a1n.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt bo tròn v\u1edbi chi\u1ec1u r\u1ed9ng và radius gi\u1ed1ng v\u1edbi hình ch\u1eef nh\u1eadt tr\u01b0\u1edbc. \u0110\u1eb7t nó \u1edf d\u01b0\u1edbi thanh tiêu \u0111\u1ec1 v\u1edbi màu #d2d8df.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tAdd thêm m\u1ed9t Path hình ch\u1eef nh\u1eadt (rectangle path) và thi\u1ebft l\u1eadp ch\u1ebf \u0111\u1ed9 Intersect.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tAdd thêm Layer Style Inner Glow và Gradient Overlay.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tKích ho\u1ea1t công c\u1ee5 Line tool và t\u1eeb thanh tùy ch\u1ecdn thi\u1ebft l\u1eadp Width là 1 px. V\u1ebd m\u1ed9t Line (dòng) v\u1edbi màu #808f9e ngay d\u01b0\u1edbi cùng c\u1ee7a hình.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tAdd hi\u1ec7u \u1ee9ng Letterpress b\u1eb1ng cách ch\u1ecdn Drop Shadow v\u1edbi 1 px, bóng (Shadow) màu tr\u1eafng.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\tB\u01b0\u1edbc 18: User Profile<\/h2>\n

\n\tAdd thêm m\u1ed9t hình ch\u1eef nh\u1eadt ch\u1ee9a h\u1ed3 s\u01a1 c\u1ee7a ng\u01b0\u1eddi dùng. V\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt màu tr\u1eafng v\u1edbi radius 5 px gi\u1ed1ng nh\u01b0 hình th\u1ec3 hi\u1ec7n bên d\u01b0\u1edbi.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tDouble click vào layer và thi\u1ebft l\u1eadp Gradient Overlay và Stroke.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt nh\u1ecf h\u01a1n v\u1edbi radius 3 px \u1edf trong hình ch\u1eef nh\u1eadt \u0111ã v\u1ebd \u1edf b\u01b0\u1edbc 18. Và b\u1ea1n có th\u1ec3 ch\u1ecdn b\u1ea5t k\u1ef3 màu nào.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tThi\u1ebft l\u1eadp Inner Shadow và Stroke nh\u01b0 bên d\u01b0\u1edbi.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tPaste hình \u1ea3nh cá nhân c\u1ee7a b\u1ea1n lên trên hình ch\u1eef nh\u1eadt v\u1eeba v\u1ebd. Nh\u1ea5n Ctrl + Alt + G \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i layer sang Clipping Mask. B\u1eb1ng cách này hình \u1ea3nh c\u1ee7a chúng ta s\u1ebd n\u1eb1m trong hình ch\u1eef nh\u1eadt nh\u1ecf. B\u1ea1n có th\u1ec3 thay \u0111\u1ed5i kích th\u01b0\u1edbc b\u1eb1ng cách s\u1eed d\u1ee5ng Ctrl + T và thay \u0111\u1ed5i v\u1ecb trí c\u1ee7a nó b\u1eb1ng cách s\u1eed d\u1ee5ng công c\u1ee5 Move Tool.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tThêm tên ng\u01b0\u1eddi s\u1eed d\u1ee5ng Twitter. Add hi\u1ec7u \u1ee9ng Letterpress b\u1eb1ng cách thi\u1ebft l\u1eadp m\u1ed9t Drop Shadow v\u1edbi kích th\u01b0\u1edbc là 1 px và màu tr\u1eafng.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tThêm dòng gi\u1edbi thi\u1ec7u ng\u1eafn, sau \u0111ó thi\u1ebft l\u1eadp hi\u1ec7u \u1ee9ng Letterpress cho nó.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd m\u1ed9t Line (dòng) 1px v\u1edbi màu #afbac4, add thêm Layer Style Drop Shadow \u0111\u1ec3 có \u0111\u01b0\u1ee3c hi\u1ec7u \u1ee9ng Letterpress.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tAdd các Tweets b\u1eb1ng cách s\u1eed d\u1ee5ng Armata font<\/a>. Thi\u1ebft l\u1eadp hi\u1ec7u \u1ee9ng Letterpress cho text.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\tB\u01b0\u1edbc 27: Update Button<\/h2>\n

\n\tV\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt bo tròn nh\u1ecf v\u1edbi radius 2 px và màu là #eef1f4. \u0110\u1eb7t nó \u1edf v\u1ecb trí trên cùng \u1edf góc bên ph\u1ea3i nh\u01b0 hình d\u01b0\u1edbi. Add Layer Styles cho nó.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt màu \u0111en \u1edf gi\u1eefa hình ch\u1eef nh\u1eadt \u1edf b\u01b0\u1edbc trên. Sau \u0111ó, chúng ta ti\u1ebfp t\u1ee5c v\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt nh\u1ecf h\u01a1n. Nh\u1edb r\u1eb1ng c\u1ea3 hai hình ch\u1eef nh\u1eadt \u0111\u1ec1u n\u1eb1m bên trong m\u1ed9t layer.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd hình d\u1ea1ng bút chì \u0111\u01b0\u1ee3c t\u1ea1o ra b\u1edfi nh\u1eefng hình ch\u1eef nh\u1eadt \u0111\u01a1n gi\u1ea3n. \u0110\u1ea7u tiên, chúng ta v\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt l\u1edbn v\u1edbi ch\u1ebf \u0111\u1ed9 Subtract t\u1eeb Path. Th\u1ee9 hai, v\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt cao h\u01a1n t\u1ef1a nh\u01b0 thân c\u1ee7a bút chì. Th\u1ee9 3, chúng ta v\u1ebd 1 hình ch\u1eef nh\u1eadt nh\u1ecf và xoay nó v\u1edbi m\u1ed9t góc 45°. Cu\u1ed1i cùng, v\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt v\u1edbi ch\u1ebf \u0111\u1ed9 Subtract t\u1eeb Shape \u0111\u1ec3 cut ph\u1ea7n thân c\u1ee7a bút chì.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tXoay icon bút chì mà chúng ta \u0111ã t\u1ea1o và \u0111\u1eb7t nó \u1edf trên các hình ch\u1eef nh\u1eadt nh\u01b0 bên d\u01b0\u1edbi.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt d\u01b0\u1edbi khu v\u1ef1c h\u1ed3 s\u01a1 cá nhân v\u1edbi màu #e2e4e7.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tAdd thêm Inner Glow và Gradient Overlay nh\u01b0 bên d\u01b0\u1edbi.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd m\u1ed9t Line 1px \u1edf d\u01b0\u1edbi hình d\u1ea1ng \u0111ã v\u1ebd tr\u01b0\u1edbc \u0111ó v\u1edbi màu #a8b1ba. Sau \u0111ó thi\u1ebft l\u1eadp m\u1ed9t Drop Shadow có kích th\u01b0\u1edbc là 1 px, màu tr\u1eafng.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\tB\u01b0\u1edbc 34: Icons<\/h2>\n

\n\tS\u1eed d\u1ee5ng công c\u1ee5 Pen Tool \u0111\u1ec3 v\u1ebd m\u1ed9t Shape hình bong bóng. Thi\u1ebft l\u1eadp màu s\u1eafc c\u1ee7a nó là #adb9c. Add Layer Style Inner Shadow, Outer Glow, và Gradient Overlay.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tChúng ta c\u1ea7n t\u1ea1o m\u1ed9t button khác \u0111\u1ec3 khi di chu\u1ed9t vào chúng s\u1ebd chuy\u1ec3n màu. \u0110\u1ec3 làm \u0111\u01b0\u1ee3c \u0111i\u1ec1u này, nhân \u0111ôi layer icon bong bóng và thi\u1ebft l\u1eadp nó v\u1edbi màu #3c8cf8.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tThi\u1ebft l\u1eadp Drop Shadow, Outer Glow, Inner Glow, và Gradient Overlay.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt màu \u0111en và \u0111\u1eb7t phía sau icon bong bóng. Sau \u0111ó thêm Gradient Overlay vào.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tGi\u1ea3m Fill xu\u1ed1ng còn 27%.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tThêm layer mask và v\u1ebd trên nó v\u1edbi m\u1ed9t Shape màu \u0111en.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tL\u1eb7p l\u1ea1i các b\u01b0\u1edbc trên \u0111\u1ec3 t\u1ea1o ra các icon khác.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tThêm m\u1ed9t Line d\u1ecdc \u0111\u1ec3 ng\u0103n cách gi\u1eefa 2 icon v\u1edbi nhau nh\u01b0 hình bên d\u01b0\u1edbi v\u1edbi màu #aab6c2. Thi\u1ebft l\u1eadp Drop Shadow \u0111\u1ec3 có \u0111\u01b0\u1ee3c hi\u1ec7u \u1ee9ng Letterpress. Add m\u1ed9t Layer mask và làm m\u1edd các baground xung quanh chúng.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tAlt-drag (kéo) \u0111\u1ec3 nhân \u0111ôi Line và \u0111\u1eb7t chúng \u1edf gi\u1eefa các icon.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\tB\u01b0\u1edbc 43: Box tìm ki\u1ebfm<\/h2>\n

\n\tV\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt bo tròn v\u1edbi radius r\u1ea5t l\u1edbn. V\u1ebd box tìm ki\u1ebfm<\/a> bên c\u1ea1nh icon cu\u1ed1i cùng và thi\u1ebft l\u1eadp Drop Shadow, Inner Shadow, Outer Glow, và Stroke.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\t\u1ede bên trong box tìm ki\u1ebfm, chúng ta v\u1ebd m\u1ed9t hình trò và m\u1ed9t hình ch\u1eef nh\u1eadt \u0111\u1ec3 t\u1ea1o ra icon kính lúp gi\u1ed1ng nh\u01b0 hình bên d\u01b0\u1edbi v\u1edbi mã màu #8696a8.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\tB\u01b0\u1edbc 45: Danh sách Tweets<\/h2>\n

\n\tV\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt v\u1edbi màu #e2e4e7. Thi\u1ebft l\u1eadp Inner Glow và Gradient Overlay.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd m\u1ed9t Line \u1edf d\u01b0\u1edbi c\u1ee7a Shape v\u1eeba v\u1ebd v\u1edbi màu #a8b1ba. Sau \u0111ó, chúng ta thêm hi\u1ec7u \u1ee9ng Letterpress vào.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt bo tròn màu tr\u1eafng có radius là 3 px. Thi\u1ebft l\u1eadp các giá tr\u1ecb c\u1ee7a Gradient Overlay và Stroke nh\u01b0 bên d\u01b0\u1edbi.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd bên trong hình ch\u1eef nh\u1eadt v\u1eeba v\u1ebd m\u1ed9t hình màu \u0111en v\u1edbi radius 1 px và màu là #202020. Add thêm Drop Shadow và Stroke.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tPaste hình cá nhân lên trên hình ch\u1eef nh\u1eadt v\u1eeba t\u1ea1o. Nh\u1ea5n Ctrl + Alt + G \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i sang Clipping Mask.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tS\u1eed d\u1ee5ng công c\u1ee5 Type tool \u0111\u1ec3 add thêm user name, n\u1ed9i d\u1ee5ng tweet, thông tin th\u1eddi gian. Nh\u1edb r\u1eb1ng thêm link \u0111\u1ebfn contrast và truy c\u1eadp \u0111\u1ebfn tài kho\u1ea3n Twitter.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\t\u1ede góc d\u01b0\u1edbi bên ph\u1ea3i c\u1ee7a khu v\u1ef1c tweet, v\u1ebd m\u1ed9t hình tròn màu #aab7c3. Sau \u0111ó v\u1ebd m\u1ed9t ngôi sao b\u1eb1ng cách s\u1eed d\u1ee5ng công c\u1ee5 Polygon tool và thi\u1ebft l\u1eadp nó ch\u1ebf \u0111\u1ed9 Subtract. Chúng ta s\u1ebd làm nó thành m\u1ed9t buton Like.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tS\u1eed d\u1ee5ng k\u1ef9 thu\u1eadt t\u01b0\u01a1ng t\u1ef1 \u0111\u1ec3 v\u1ebd button tr\u1ea3 l\u1eddi.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\t\u0110\u1eb7t t\u1ea5t c\u1ea3 các tweets bên trong m\u1ed9t group b\u1eb1ng cách ch\u1ecdn chúng và nh\u1ea5n Ctrl + G. Nhân \u0111ôi nó b\u1eb1ng cách nh\u1ea5n Alt-drag (kéo) layer group. Ch\u1ec9nh s\u1eeda hình \u1ea3nh cá nhân và text \u0111\u1ec3 thay \u0111\u1ed5i chúng.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tDuplicate (nhân \u0111ôi) Shape \u1ee9ng d\u1ee5ng c\u01a1 b\u1ea3n và thay \u0111\u1ed5i nó thành màu \u0111en. Add thêm m\u1ed9t hình ch\u1eef nh\u1eadt trên nó và thi\u1ebft l\u1eadp ch\u1ebf \u0111\u1ed9 Intersect. Add Inner Glow, Gradient Overlay, và Stroke.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tThêm thông tin API \u1edf thanh bên d\u01b0\u1edbi. Thi\u1ebft l\u1eadp hi\u1ec7u \u1ee9ng Letterpress b\u1eb1ng cách s\u1eed d\u1ee5ng Drop Shadow.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd 12 hình ch\u1eef nh\u1eadt bo tròn có kích th\u01b0\u1edbc khác nhau. Sau \u0111ó s\u1eafp x\u1ebfp và xoay chúng nh\u01b0 hình bên d\u01b0\u1edbi. Thi\u1ebft l\u1eadp hi\u1ec7u \u1ee9ng Letterpress cho chúng.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\tB\u01b0\u1edbc 57: Thanh tr\u01b0\u1ee3t<\/h2>\n

\n\tV\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt bo tròn cao, màu tr\u1eafng radius 1 px. \u0110\u1eb7t nó \u1edf v\u1ecb trí nh\u01b0 trong h\u01b0\u1edbng d\u1eabn. Sau \u0111ó thêm Stroke.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt nh\u1ecf h\u01a1n cùng radius và tô nó v\u1edbi màu #8b9eb3, sau \u0111ó add Layer Style Inner Glow và Stroke.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\tB\u01b0\u1edbc 59: Add thêm Guides<\/h2>\n

\n\tChúng ta \u0111ã hoàn thành giao di\u1ec7n chính. B\u01b0\u1edbc ti\u1ebfp theo, chúng ta t\u1ea1o update status và upload photo lên c\u1eeda s\u1ed5 giao di\u1ec7n. Tr\u01b0\u1edbc tiên, chúng ta c\u1ea7n ph\u1ea3i thêm nhi\u1ec1u Guides \u0111\u1ec3 có th\u1ec3 giúp chúng ta thi\u1ebft k\u1ebf t\u1ed1t h\u01a1n. Xem hình bên d\u01b0\u1edbi.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\tB\u01b0\u1edbc 60: Update Status Window<\/h2>\n

\n\tV\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt bo tròn v\u1edbi kích th\u01b0\u1edbc radius là 5 px và màu là #e2e4e7.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tThêm m\u1ed9t Path hình ch\u1eef nh\u1eadt \u1edf bên trái c\u1eeda s\u1ed5 và sau \u0111ó nh\u1ea5n Ctrl + T \u0111\u1ec3 xoay nó m\u1ed9t góc 45 \u0111\u1ed9. Nh\u1edb r\u1eb1ng Path \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp \u0111\u1ec3 thêm Shape. Add Layer Style Drop Shadow và Stroke.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tDuplicate (nhân \u0111ôi) Shape c\u01a1 b\u1ea3n và thay \u0111\u1ed5i sang màu \u0111en. V\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt \u1edf trên và thi\u1ebft l\u1eadp ch\u1ebf \u0111\u1ed9 Intersect. Add Inner Glow, Gradient Overlay, và Stroke.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd m\u1ed9t Shape tròn nh\u1ecf \u1edf góc bên ph\u1ea3i c\u1ee7a thanh tiêu \u0111\u1ec1. Thi\u1ebft l\u1eadp màu là #707070. Thêm vào gi\u1eefa nó 2 hình ch\u1eef nh\u1eadt và xoay nó nh\u01b0 hình bên d\u01b0\u1edbi m\u1ed9t hóc 45 \u0111\u1ed9. \u0110ây chính là Button Close.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tNhân \u0111ôi button Close và thay \u0111\u1ed5i màu s\u1eafc c\u1ee7a nó thành #a4a4a4. \u0110i\u1ec1u này s\u1ebd làm cho button thay \u0111\u1ed5i màu khi rê chu\u1ed9t vào.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tDuplicate (nhân \u0111ôi) Shape c\u01a1 b\u1ea3n và thay \u0111\u1ed5i màu s\u1eafc c\u1ee7a nó sang \u0111en. Thêm m\u1ed9t path hình ch\u1eef nh\u1eadt \u1edf bên d\u01b0\u1edbi và thi\u1ebft l\u1eadp Intersect. Add Inner Glow, Gradient Overlay, và Stroke.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt bo góc tròn màu xanh v\u1edbi radius 3 px \u1edf góc ph\u1ea3i c\u1ee7a giao di\u1ec7n. Add Inner Glow, Gradient Overlay, và Stroke.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tAdd thêm text Post trên button. Thi\u1ebft l\u1eadp hi\u1ec7u \u1ee9ng Letterpress v\u1edbi Drop Shadow, màu t\u1ed1i và 1px.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tDuplicate (nhân \u0111ôi) button và text c\u1ee7a nó. Chúng ta s\u1ebd t\u1ea1o 1 cái m\u1edbi khi rê chu\u1ed9t vào. T\u0103ng opacity c\u1ee7a Gradient Overlay là 40%.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tChúng ta nên \u0111\u1eb7t m\u1ed7i button vào m\u1ed7i group khác nhau \u0111\u1ec3 cho chúng có t\u1ed5 ch\u1ee9c và rõ ràng h\u01a1n.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd ký t\u1eeb |<\/em> và thêm ký t\u1ef1 còn l\u1ea1i \u1edf góc trái c\u1ee7a giao di\u1ec7n.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\tB\u01b0\u1edbc 71: Image Upload Window<\/h2>\n

\n\tL\u1eb7p l\u1ea1i các b\u01b0\u1edbc tr\u01b0\u1edbc \u0111ó \u0111\u1ec3 v\u1ebd giao di\u1ec7n upload hình \u1ea3nh.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tTi\u1ebfp theo, chúng ta v\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt bo góc tròn \u1edf trung tâm giao di\u1ec7n v\u1edbi radius 3 px và #d9dde1. Sau \u0111ó chúng ta v\u1ebd m\u1ed9t Path hình ch\u1eef nh\u1eadt \u1edf trong Shape v\u1eeba t\u1ea1o. Thi\u1ebft l\u1eadp ch\u1ebf \u0111\u1ed9 Subtract.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tAdd thêm m\u1ed9t s\u1ed1 hình ch\u1eef nh\u1eadt n\u1eb1m ngang và thi\u1ebft l\u1eadp ch\u1ebf \u0111\u1ed9 Subtract. Ch\u1ecdn t\u1ea5t c\u1ea3 hình ch\u1eef nh\u1eadt và click vào icon Distribute Vertical Center và Distribute Horizontal Center.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tL\u1eb7p l\u1ea1i thao tác này cho các hình ch\u1eef nh\u1eadt d\u1ecdc.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tAdd hi\u1ec7u \u1ee9ng Letterpress.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tV\u1ebd m\u1ed9t hình ch\u1eef nh\u1eadt \u1edf gi\u1eefa giao di\u1ec7n v\u1edbi radius 3 px và màu #cdd2d8. Thêm m\u1ed9t hình ch\u1eef nh\u1eadt bên trong nó và thi\u1ebft l\u1eadp ch\u1ebf \u0111\u1ed9 Subtract.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tS\u1eed d\u1ee5ng công c\u1ee5 Pen Tool \u0111\u1ec3 v\u1ebd hình d\u1ea1ng nh\u01b0 bên d\u01b0\u1edbi.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tAdd thêm Drop Shadow.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

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

\n\tThêm h\u01b0\u1edbng d\u1eabn ng\u1eafn và thi\u1ebft l\u1eadp hi\u1ec7u \u1ee9ng Letterpress.<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\t\"H\u1ecdc<\/p>\n

\n\tHình \u1ea3nh cu\u1ed1i cùng<\/h2>\n

\n\t\"H\u1ecdc<\/a><\/p>\n

\n\tD\u1ecbch t\u1eeb: psd.tutsplus.com<\/p>\n","protected":false},"excerpt":{"rendered":"

\n\t\"H\u1ecdc<\/p>\n

\n\tTrong h\u01b0\u1edbng d\u1eabn này chúng ta s\u1ebd t\u1ea1o ra \u1ee9ng d\u1ee5ng giao di\u1ec7n Clean Twitter trong Photoshop b\u1eb1ng cách s\u1eed d\u1ee5ng các Layer Style, các vector Shape c\u01a1 b\u1ea3n. Hãy b\u1eaft \u0111\u1ea7u!<\/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-1004","post","type-post","status-publish","format-standard","hentry","category-photoshop"],"views":389,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/1004","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=1004"}],"version-history":[{"count":0,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/1004\/revisions"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=1004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=1004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=1004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}